Dynamically populate combobox values

[bliParticipant]

Hi,

I am trying to create a Grid that has some combobox inputs. The combobox available values are stored in a dictionary (which is dynamically created from some other source). I try to populate the combobox values using the createeditor callback, see sample code below:

` $(document).ready(function () {
var gridData = [{ ‘firstname’: ‘Jack’, ‘city’: ‘Houston’ }, { ‘firstname’: ‘Bob’, ‘city’: ‘LA’ }, { ‘firstname’: ‘Michael’, ‘city’: ‘San Francisco’ }, { ‘firstname’: ‘Albert’, ‘city’: ‘Seattle’ }, ]
var df = [{ name: ‘firstname’ }, { name: ‘city’ }];
// Here is the dictionary I store the valid values for combobox
var labels = { “firstname”: [‘Jack’, ‘Bob’, ‘Michael’, ‘Albert’], “city”: [‘Houston’, ‘LA’, ‘San Francisco’, ‘Seattle’] }

var cl = [];

for (var i = 0; i < Object.keys(labels).length; i++) {
var kk = Object.keys(labels)[i];

cl.push({
text: kk, datafield: kk, width: 180, cellsalign: ‘right’,
columntype: ‘combobox’,
createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {

var list = labels[kk]; // PROBLEM HERE: I am always getting the last list in the labels dictionary, which is the city

editor.jqxComboBox({ autoDropDownHeight: true, source: list, promptText: “Please Choose:” });

},
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == “”) return oldvalue;

}
});
}

var source =
{
datatype: “json”,
datafields: df,

localdata: gridData
};

var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (gridData) { },
loadError: function (xhr, status, error) { }
});
$(“#jqxgrid”).jqxGrid(
{
width: 1000,
source: dataAdapter,
editable: true,
columnsresize: true,
selectionmode: ‘multiplecellsadvanced’,
columns: cl

});
}
);`

The problem I am having is that createeditor function is called after the page is loaded, so for both ‘firstname’ and ‘city’, I am having the city values of [‘Houston’, ‘LA’, ‘San Francisco’, ‘Seattle’] in the drop down list, I can not get the firstname values to show up.

Any way to solve this?

Thank you
Betty

[DimitarParticipant]

Hi Betty,

Just change:

var list = labels[kk];

to

var list = labels[this.datafield];

and there should be no issues.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts