jQuery UI Widgets Forums Grid Dynamically populate combobox values

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 9 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Dynamically populate combobox values #67333

    bli
    Participant

    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

    Dynamically populate combobox values #67343

    Dimitar
    Participant

    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.