[pwenkParticipant]

Hello Hristo,

Thank you for the information.

The fieldname we use in our application consists of a data pool name and a fieldname within the data pool. We need a special character which allows a separation into poolname and fieldname.

Which characters can be used for the construction of such a name, or which should not be used (like $).

Best Regards,

Peter Wenk

[pwenkParticipant]

Hello Hristo

I could not solve my problem yet. I have created an Angular app in which the problems can be analyzed.
For the simulation of the web server answer a corresponding answer object is contained directly in the component.

I would like to display the assigned usertext instead of the data value in the grid. The value can be changed by
dropdownlist. The selection in the dropdown shows the user Text.

Neither the conversion to User Text, nor the selection via the dropdownlist works.
I can not get any further and need your help.

My solution approach is based on the example angular-jqxGrid-Editing-Custom DropdownList Column

Here are the parts of the angular app

—- app.component.html —-

<jqxGrid #gridRef
(onCellvaluechanged)=”OnCellValueChanged($event)”
[auto-create]=”true”>
</jqxGrid>

— app.components.ts —

import { Component, ViewChild, OnInit, AfterViewInit } from ‘@angular/core’;
import {sprintf} from ‘sprintf-js’;

import {jqxGridComponent} from ‘jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid’;

@Component({
selector: ‘app-root’,
templateUrl: ‘app.component.html’
})

export class AppComponent implements OnInit, AfterViewInit {
@ViewChild(‘gridRef’) myGrid: jqxGridComponent;

theme = ‘bootstrap’;

/* Common Grid settings */

GridSettings: jqwidgets.GridOptions = {
width: ‘100%’,
// height: 880,
theme: this.theme,
// source: {},
editable: true,
sortable: true,
filterable: true,
columnsmenu: true,
columnsresize: true,
columnsreorder: true,
sorttogglestates: ‘2’,
autoshowloadelement: true,
pageable: false,
altrows: true,
scrollmode: ‘logical’
};

/* Option List fur all Columns of type jqxdropdown */

OptionLists = {};

/* Simulate server response object */

serverTestData = {
‘Data’ : [
{
‘REM_Status’ : ‘1’,
‘REM_Status$Client_Status’ : ‘REM_Node_Disconnected’,
‘REM_Status$HostName’ : ‘T1’,
‘REM_Status$IP_Adress’ : ‘10.13.68.193’,
‘REM_Status$NodeExist’ : true,
‘REM_Status$NodeId’ : 1,
‘REM_Status$NodeModify’ : ‘REM_NoModify’,
‘REM_Status$NodeTyp’ : ‘REM_PCC_Extension’,
‘REM_Status$Server_Status’ : ‘REM_Node_Unused’,
‘id’ : ‘1’
},
{
‘REM_Status’ : ‘2’,
‘REM_Status$Client_Status’ : ‘REM_Node_Disconnected’,
‘REM_Status$HostName’ : ‘T2’,
‘REM_Status$IP_Adress’ : ‘10.13.68.194’,
‘REM_Status$NodeExist’ : true,
‘REM_Status$NodeId’ : 2,
‘REM_Status$NodeModify’ : ‘REM_NoModify’,
‘REM_Status$NodeTyp’ : ‘REM_PCC_Extension’,
‘REM_Status$Server_Status’ : ‘REM_Node_Unused’,
‘id’ : ‘2’
},
{
‘REM_Status’ : ‘3’,
‘REM_Status$Client_Status’ : ‘REM_Node_Disconnected’,
‘REM_Status$HostName’ : ‘T3’,
‘REM_Status$IP_Adress’ : ‘10.13.68.195’,
‘REM_Status$NodeExist’ : true,
‘REM_Status$NodeId’ : 3,
‘REM_Status$NodeModify’ : ‘REM_NoModify’,
‘REM_Status$NodeTyp’ : ‘REM_PCC_Extension’,
‘REM_Status$Server_Status’ : ‘REM_Node_Unused’,
‘id’ : ‘3’
},
{
‘REM_Status’ : ‘6’,
‘REM_Status$Client_Status’ : ‘REM_Node_Unused’,
‘REM_Status$HostName’ : ‘T6’,
‘REM_Status$IP_Adress’ : ‘10.13.68.198’,
‘REM_Status$NodeExist’ : true,
‘REM_Status$NodeId’ : 6,
‘REM_Status$NodeModify’ : ‘REM_NoModify’,
‘REM_Status$NodeTyp’ : ‘REM_GE_OwnNode’,
‘REM_Status$Server_Status’ : ‘REM_Node_Unused’,
‘id’ : ‘6’
},
{
‘REM_Status’ : ‘8’,
‘REM_Status$Client_Status’ : ‘REM_Node_Disconnected’,
‘REM_Status$HostName’ : ‘T8’,
‘REM_Status$IP_Adress’ : ‘10.13.68.200’,
‘REM_Status$NodeExist’ : true,
‘REM_Status$NodeId’ : 8,
‘REM_Status$NodeModify’ : ‘REM_NoModify’,
‘REM_Status$NodeTyp’ : ‘REM_PCC_Extension’,
‘REM_Status$Server_Status’ : ‘REM_Node_Unused’,
‘id’ : ‘8’
},
{
‘REM_Status’ : ’11’,
‘REM_Status$Client_Status’ : ‘REM_Node_Disconnected’,
‘REM_Status$HostName’ : ‘L1’,
‘REM_Status$IP_Adress’ : ‘10.13.68.208’,
‘REM_Status$NodeExist’ : true,
‘REM_Status$NodeId’ : 11,
‘REM_Status$NodeModify’ : ‘REM_NoModify’,
‘REM_Status$NodeTyp’ : ‘REM_PCC_Extension’,
‘REM_Status$Server_Status’ : ‘REM_Node_Unused’,
‘id’ : ’11’
},
{
‘REM_Status’ : ’12’,
‘REM_Status$Client_Status’ : ‘REM_Node_Disconnected’,
‘REM_Status$HostName’ : ‘L2’,
‘REM_Status$IP_Adress’ : ‘10.13.68.209’,
‘REM_Status$NodeExist’ : true,
‘REM_Status$NodeId’ : 12,
‘REM_Status$NodeModify’ : ‘REM_NoModify’,
‘REM_Status$NodeTyp’ : ‘REM_PCC_Extension’,
‘REM_Status$Server_Status’ : ‘REM_Node_Unused’,
‘id’ : ’12’
},
{
‘REM_Status’ : ’13’,
‘REM_Status$Client_Status’ : ‘REM_Node_Disconnected’,
‘REM_Status$HostName’ : ‘L3’,
‘REM_Status$IP_Adress’ : ‘10.13.68.210’,
‘REM_Status$NodeExist’ : true,
‘REM_Status$NodeId’ : 13,
‘REM_Status$NodeModify’ : ‘REM_NoModify’,
‘REM_Status$NodeTyp’ : ‘REM_PCC_Extension’,
‘REM_Status$Server_Status’ : ‘REM_Node_Unused’,
‘id’ : ’13’
},
{
‘REM_Status’ : ’16’,
‘REM_Status$Client_Status’ : ‘REM_Node_Disconnected’,
‘REM_Status$HostName’ : ‘L6’,
‘REM_Status$IP_Adress’ : ‘10.13.68.213’,
‘REM_Status$NodeExist’ : true,
‘REM_Status$NodeId’ : 16,
‘REM_Status$NodeModify’ : ‘REM_NoModify’,
‘REM_Status$NodeTyp’ : ‘REM_PCC_Extension’,
‘REM_Status$Server_Status’ : ‘REM_Node_Unused’,
‘id’ : ’16’
},
{
‘REM_Status’ : ’18’,
‘REM_Status$Client_Status’ : ‘REM_Node_Disconnected’,
‘REM_Status$HostName’ : ‘L8’,
‘REM_Status$IP_Adress’ : ‘10.13.68.215’,
‘REM_Status$NodeExist’ : true,
‘REM_Status$NodeId’ : 18,
‘REM_Status$NodeModify’ : ‘REM_NoModify’,
‘REM_Status$NodeTyp’ : ‘REM_PCC_Extension’,
‘REM_Status$Server_Status’ : ‘REM_Node_Unused’,
‘id’ : ’18’
}
],
‘Header’ : {
‘Columns’ : [
{
‘columntype’ : ‘textbox’,
‘datafield’ : ‘id’,
‘hidden’ : true,
‘text’ : ”
},
{
‘columntype’ : ‘textbox’,
‘datafield’ : ‘REM_Status’,
‘hidden’ : true,
‘text’ : ‘REM_Status’
},
{
‘columntype’ : ‘textbox’,
‘datafield’ : ‘REM_Status$NodeId’,
‘editable’ : true,
‘filterable’ : true,
‘sortable’ : true,
‘text’ : ‘NodeId’,
‘width’ : ‘4%’
},
{
‘columntype’ : ‘checkbox’,
‘datafield’ : ‘REM_Status$NodeExist’,
‘editable’ : true,
‘filterable’ : true,
‘sortable’ : true,
‘text’ : ‘NodeExist’,
‘width’ : ‘5%’
},
{
‘OptionName’ : ‘ENUM_REM_NodeTyp’,
‘columntype’ : ‘dropdownlist’,
‘datafield’ : ‘REM_Status$NodeTyp’,
‘displayfield’ : ‘REM_Status$NodeTyp_display’,
‘editable’ : true,
‘filterable’ : true,
‘sortable’ : true,
‘text’ : ‘NodeTyp’,
‘width’ : ‘12%’
},
{
‘columntype’ : ‘textbox’,
‘datafield’ : ‘REM_Status$IP_Adress’,
‘editable’ : true,
‘filterable’ : true,
‘sortable’ : true,
‘text’ : ‘IP_Adress’,
‘width’ : ‘12%’
},
{
‘columntype’ : ‘textbox’,
‘datafield’ : ‘REM_Status$HostName’,
‘editable’ : true,
‘filterable’ : true,
‘sortable’ : true,
‘text’ : ‘HostName’,
‘width’ : ‘12%’
},
{
‘OptionName’ : ‘ENUM_REM_Modify’,
‘columntype’ : ‘dropdownlist’,
‘datafield’ : ‘REM_Status$NodeModify’,
‘displayfield’ : ‘REM_Status$NodeModify_display’,
‘editable’ : true,
‘filterable’ : true,
‘sortable’ : true,
‘text’ : ‘NodeModify’,
‘width’ : ‘16%’
},
{
‘OptionName’ : ‘ENUM_REM_ComStat’,
‘columntype’ : ‘dropdownlist’,
‘datafield’ : ‘REM_Status$Client_Status’,
‘displayfield’ : ‘REM_Status$Client_Status_display’,
‘editable’ : true,
‘filterable’ : true,
‘sortable’ : true,
‘text’ : ‘Client_Status’,
‘width’ : ‘16%’
},
{
‘OptionName’ : ‘ENUM_REM_ComStat’,
‘columntype’ : ‘dropdownlist’,
‘datafield’ : ‘REM_Status$Server_Status’,
‘displayfield’ : ‘REM_Status$Server_Status_display’,
‘editable’ : true,
‘filterable’ : true,
‘sortable’ : true,
‘text’ : ‘Server_Status’,
‘width’ : ‘16%’
}
],
‘DataFields’ : [
{
‘name’ : ‘id’,
‘type’ : ‘text’
},
{
‘name’ : ‘REM_Status’,
‘type’ : ‘text’
},
{
‘name’ : ‘REM_Status$NodeId’,
‘type’ : ‘string’
},
{
‘name’ : ‘REM_Status$NodeExist’,
‘type’ : ‘bool’
},
{
‘OptionName’ : ‘ENUM_REM_NodeTyp’,
‘name’ : ‘REM_Status$NodeTyp_display’,
‘type’ : ‘string’,
‘value’ : ‘REM_Status$NodeTyp’
},
{
‘name’ : ‘REM_Status$NodeTyp’,
‘type’ : ‘string’
},
{
‘name’ : ‘REM_Status$IP_Adress’,
‘type’ : ‘string’
},
{
‘name’ : ‘REM_Status$HostName’,
‘type’ : ‘string’
},
{
‘OptionName’ : ‘ENUM_REM_Modify’,
‘name’ : ‘REM_Status$NodeModify_display’,
‘type’ : ‘string’,
‘value’ : ‘REM_Status$NodeModify’
},
{
‘name’ : ‘REM_Status$NodeModify’,
‘type’ : ‘string’
},
{
‘OptionName’ : ‘ENUM_REM_ComStat’,
‘name’ : ‘REM_Status$Client_Status_display’,
‘type’ : ‘string’,
‘value’ : ‘REM_Status$Client_Status’
},
{
‘name’ : ‘REM_Status$Client_Status’,
‘type’ : ‘string’
},
{
‘OptionName’ : ‘ENUM_REM_ComStat’,
‘name’ : ‘REM_Status$Server_Status_display’,
‘type’ : ‘string’,
‘value’ : ‘REM_Status$Server_Status’
},
{
‘name’ : ‘REM_Status$Server_Status’,
‘type’ : ‘string’
}
],
‘OptionLists’ : {
‘ENUM_REM_ComStat’ : [
{
‘label’ : ‘Node_Unused’,
‘value’ : ‘REM_Node_Unused’
},
{
‘label’ : ‘Node_Disconnected’,
‘value’ : ‘REM_Node_Disconnected’
},
{
‘label’ : ‘Node_Connected’,
‘value’ : ‘REM_Node_Connected’
},
{
‘label’ : ‘Node_Online’,
‘value’ : ‘REM_Node_Online’
}
],
‘ENUM_REM_Modify’ : [
{
‘label’ : ‘NoModify’,
‘value’ : ‘REM_NoModify’
},
{
‘label’ : ‘Reconnect’,
‘value’ : ‘REM_Reconnect’
},
{
‘label’ : ‘AboUpdate’,
‘value’ : ‘REM_AboUpdate’
},
{
‘label’ : ‘AlarmUpdate’,
‘value’ : ‘REM_AlarmUpdate’
}
],
‘ENUM_REM_NodeTyp’ : [
{
‘label’ : ‘Standalone’,
‘value’ : ‘REM_GE_Standalone’
},
{
‘label’ : ‘OwnNode’,
‘value’ : ‘REM_GE_OwnNode’
},
{
‘label’ : ‘Multinode’,
‘value’ : ‘REM_GE_Multinode’
},
{
‘label’ : ‘Multisystem’,
‘value’ : ‘REM_GE_Multisystem’
}
]
}
},
‘NoOfRecs’ : 10,
‘Status’ : {
‘Code’ : 0,
‘JobInfo’ : ‘GetView, Viewname usr_rem_status’,
‘StatusText’ : ‘SPA Request Ok’
},
‘Viewname’ : ‘usr_rem_status’,
‘Viewtitel’ : ‘Test View ‘
};

/*******************************************************************************************************************
*
* Process value change
*
* @param event
*/
OnCellValueChanged(event: any): any {

const args = event.args;
const rowindex = args.rowindex;

const row = this.myGrid.getrowdata(rowindex);

const OldValue = args.oldvalue + ”;
let NewValue = args.newvalue + ”;

if (args.hasOwnProperty(‘datafield’)) {
const split = args.datafield.split(‘$’, 2);

const PoolName = split[0];
const FieldName = split[1];

if (row.hasOwnProperty(PoolName)) {
const RecKey = row[PoolName];

if (args.hasOwnProperty(‘oldvalue’) && args.hasOwnProperty(‘newvalue’)) {

const logmsg = sprintf(‘OnCellValueChanged: PoolName %s RecKey %s FieldName %s OldValue %s NewValue %s ‘,
PoolName, RecKey, FieldName, OldValue, NewValue);
console.log(logmsg);

if (NewValue === ”) {
NewValue = OldValue;
}
}
}
}
return NewValue;
}

/*******************************************************************************************************************
*
* Prepare dataAdapter for option list
*
* @param {string} Enum
* @returns {any}
*/
getOptionDataAdapter = (OptionName: string): any => {
const source = {
datatype: ‘array’,
datafields:
[
{ name: ‘value’ },
{ name: ‘label’ },
],
localdata: this.OptionLists[OptionName]
};
const dataAdapter: any = new jqx.dataAdapter(source, );
dataAdapter.dataBind();

return dataAdapter;
};

/*******************************************************************************************************************
* Prepare grid options based on server response data
*
* @param data
*/
prepareGrid(data) {

const that = this;

/* local webserver response data */

let columns = [];
let datafields = [];
let dataAdapter = {};

/* get grid columns from server response */

if (data.Header.hasOwnProperty(‘Columns’)) {
columns = data.Header.Columns;
}

/* Get grid datafields from server response */

if (data.Header.hasOwnProperty(‘DataFields’)) {
datafields = data.Header.DataFields;
}

/* Get all Option liste referenced by grid columns */

if (data.Header.hasOwnProperty(‘OptionLists’)) {
this.OptionLists = data.Header[‘OptionLists’];
}

/* Add dropdown component to all Option columns */

for (let ix = 0; ix < columns.length; ix++) {

/* add jqxDropDownList to column */

if (columns[ix].hasOwnProperty(‘columntype’)) {
if (columns[ix].columntype === ‘dropdownlist’) {
if (columns[ix].hasOwnProperty(‘OptionName’)) {

/* Extract Nname of option list */

const OptionName = columns[ix].OptionName;

columns[ix][‘createeditor’] = function(row: number, value: any, editor: any) {

/* use jqxDropDownList with Option List */

editor.jqxDropDownList({source: that.getOptionDataAdapter(OptionName), displayMember: ‘label’, valueMember: ‘value’ });
};
}
}
}
}

/* Add dataAdapter for name / label lookup */

for (let ix = 0; ix < datafields.length; ix++) {
if (datafields[ix].hasOwnProperty(‘OptionName’)) {

/* get the name of the Option */

const OptionName = datafields[ix].OptionName;

/* Prepare values object and add to datafields */

const Values = {
name: ‘label’,
value: ‘value’,
source: that.getOptionDataAdapter(OptionName)
};
datafields[ix][‘Values’] = Values;
}
}

/* prepare grid data adapter */

const source: any = {
datatype: ‘array’,
localdata: data.Data,
datafields: datafields,
};
dataAdapter = new jqx.dataAdapter(source);

/* Connect source and columns to grid option */

this.GridSettings.source = dataAdapter;
this.GridSettings.columns = columns;

/* Set the grid Options */

this.myGrid.setOptions(this.GridSettings);
}

/*******************************************************************************************************************
* Aktionen nach Aufbau der View
*
*/
ngAfterViewInit(): void {
console.log(‘ngAfterViewInit:’);

/* Prepare data driven Grid */

this.prepareGrid(this.serverTestData);
}

/*******************************************************************************************************************
* Load data object from file (simulation of webserver respoonse)
*/
ngOnInit(): void {
console.log(‘ngOnInit:’);
}
}

— app.module.ts —

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;

import { jqxGridComponent } from ‘jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid’;

import { AppComponent } from ‘./app.component’;

@NgModule({
declarations: [
AppComponent, jqxGridComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Best Regards

Peter Wenk

[pwenkParticipant]

Hi Ivo,

the automatically created my-app applications is a good starting point for angular & JqWidgets projects.
Both npm start and npm run build are working fine now.

many thanks for the support

[pwenkParticipant]

Hi Ivo

it looks like the first compilation with ng serve always gives an error.
When changing the file app.module.ts a compilation will be performed automatically.
This is now running error-free, although the content of app.module.ts is the same as in the first compilation.

ng build always gives an error.

My goal is to build a development environment for jqwidgets based Angular applications.
The development environment is based on PHPStorm from JetBrain which supports Angular. With the current
behavior it is not possible to build a working development environment.

I hope an improvement is planned here?

[Author]

Posts