Add editor for dropdownlist to Column at runtime

[pwenkParticipant]

I have created a generic grid component in which an editable grid can be displayed and edited under data control. All data for the construction of the grid are supplied by the web server. All columns are editable. For columns of type = ‘dropdownlist’, the server additionally add a the option name into the column. This serves as reference to an option list. The option list itself is also supplied as an array of objects by the server. After receiving the data, an editor is installed for all columns of type ‘dropdownlist’ to call the jqxDropDownList. So far everything is going well. A click in the column generates an empty dropdown box and a simultaneous an error in the console. I have created a test component with static data in the same environment, everything is working fine. For me, the only difference is that the editor is statically assigned there.

Code part from generic grid componente

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

/* add jqxDropDownList to column */

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

/* Name der Option Liste */

const OptionName = this.columns[ix].OptionName;

this.columns[ix].createeditor = function(row: number, value: any, editor: any) {
editor.jqxDropDownList({
height: 27,
source: that.getEnumDataAdapter(OptionName),
displayMember: ‘label’,
valueMember: ‘value’ });
}
}
}
}
}

Error after clock into column

at HTMLDivElement.<anonymous> (http://10.211.55.44:8085/vendor.js:76133:12098)
at Function.each (http://10.211.55.44:8085/vendor.js:76125:6099)
TypeError: Cannot read property ‘stop’ of undefined
at b.(anonymous function).hideListBox (http://10.211.55.44:8085/vendor.js:76247:32584)
at b.(anonymous function).close (http://10.211.55.44:8085/vendor.js:76247:27721)
at b.(anonymous function).propertyChangedHandler (http://10.211.55.44:8085/vendor.js:76247:40952)
at Object.push../node_modules/jqwidgets-scripts/jqwidgets/jqxcore.js.a.jqx.setvalueraiseevent (http://10.211.55.44:8085/vendor.js:76133:5537)
at Number.<anonymous> (http://10.211.55.44:8085/vendor.js:76133:4770)
at Function.each (http://10.211.55.44:8085/vendor.js:76125:6035)
at Object.push../node_modules/jqwidgets-scripts/jqwidgets/jqxcore.js.a.jqx.set (http://10.211.55.44:8085/vendor.js:76133:4657)
at Object.push../node_modules/jqwidgets-scripts/jqwidgets/jqxcore.js.a.jqx.jqxWidgetProxy (http://10.211.55.44:8085/vendor.js:76133:6659)
at HTMLDivElement.<anonymous> (http://10.211.55.44:8085/vendor.js:76133:12138)
at Function.each (http://10.211.55.44:8085/vendor.js:76125:6099)ERROR

code part of test componente

columns: any[] =
[
{text: ‘FirstCol’, datafield: ‘First’, columntype: ‘text’, width: ‘20%’},
{text: ‘Country’, datafield: ‘countryCode’, displayfield: ‘Country’, columntype: ‘dropdownlist’, width: ‘20%’,

createeditor: (row: number, value: any, editor: any): void => {
editor.jqxDropDownList({ height: 27, source: this.countryAdapter, displayMember: ‘label’, valueMember: ‘value’ });
}
},
{text: ‘Last’, datafield: ‘Last’, columntype: ‘text’, width: ‘20%’},

[HristoParticipant]

Hello pwenk,

Could you provide us with an example that demonstrates this?
Also, I would like to ask you – are the data adapter that you set is not ready yet?
I would like to suggest you this example that you could use as a base.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[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

[HristoParticipant]

Hello pwenk,

This is one large data source and we do not have a practice in reviewing such code.
I made a lot of changes and on the end with a very simplified case, I succeed. I would like to suggest you try to change the “REM_Status$NodeTyp” with simple NodeTyp.
Or without “$” because it causes the issue (used as a separator).
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[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

[HristoParticipant]

Hello pwenk,

Unfortunately, we do not have such a list of symbols.
I would like to suggest you avoid the “$”, “%”, “^”, “&”, “*”, “#”, and etc.
Thank you for the understanding.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts