jqxDropDownList in jqxGrid

[jq_userParticipant]

Hi,

I have been searching for answer for this scenario regarding jqxDropDownList in jqxGrid. Initially, it works fine it is when I tried using jqxGrid addrow that I find it hard to get. The jqxDropDownList is found in column “deploy_site_id”

Here is how I initialized my Grid

$('#jqxgridTracking').jqxGrid({
        width: '100%',
        theme: 'metro', 
        autoRowHeight: false,
        showdefaultloadelement: false,
        autoshowloadelement: true,
        autoheight: true,
        editable: true,
        columns: [
            { text: 'Tracking No.',    dataField: 'tracking_number', cellsformat: "n", cellsAlign: 'center', align: 'center', pinned: true, editable: false, filterable : false, groupable: false}, 
            { text: 'Project Name',    dataField: 'project_name', align: 'center', editable: true }, 
            { text: 'WBS/Cost Center', dataField: 'wbs_cost_center', align: 'center', editable: true }, 
            { text: 'Quantity',        dataField: 'quantity', cellsAlign: 'right', align: 'center', editable: true, columntype: 'numberinput', 
                createeditor: function (row, cellvalue, editor) {
                    editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
                }
            },
            { text: 'ID', dataField: 'geo_id', align: 'center', hidden: false }, 
            { text: 'Geo Location',    dataField: 'deploy_site_id', cellsAlign: 'center', align: 'center', columntype: 'dropdownlist',
                initeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                    editor.jqxDropDownList({ source: geo_location_dataAdapter, selectedIndex: 0, autoDropDownHeight: true, displayMember: 'deploy_site', valueMember: 'deploy_site_id' });
                },
                createeditor: function (row, value, editor) {
                    editor.jqxDropDownList({ source: geo_location_dataAdapter, selectedIndex: 0, autoDropDownHeight: true, displayMember: 'deploy_site', valueMember: 'deploy_site_id' });
                },
                geteditorvalue: function (row, cellvalue, editor) {
                    console.log(cellvalue)
                    $("#jqxgridTracking").jqxGrid('setcellvalue', row, "geo_id", editor.val());
                    return editor[0].textContent;
                },
                cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
                    // return the old value, if the new value is empty.
                    if (newvalue == "") return oldvalue;
                }
            },
            { text: 'Remarks',         dataField: 'remarks', align: 'center', editable: true, filtertype: 'textbox', groupable: false}
        ]
    });

Here is the source of jqxDropDownList

var tracking_source = {
        dataType: "json",
        url: 'get_job_tracking',
        type: 'POST',
        async: true
    };

  var tracking_dataAdapter = new $.jqx.dataAdapter(tracking_source);

Example of data returned by this source:
1 - Colorado
2 - Kentucky
3 - Arkansas

And here is how I used the addrow

$("#jqxgridTracking").jqxGrid('addrow', null, {
      tracking_number:tracking_number,
      project_name:project_name,
      wbs_cost_center: wbs_cost_center,
      quantity:quantity,
      geo_id:deploy_site_id,
      deploy_site_id:deploy_site_id,
      remarks:remarks
});

After addrow I’m expecting the deploy_site_id column shows the displayMember not the valueMember. Example if deploy_site_id = 1 it should display Colorado. I already look into several post here but nothing similar to this. There might still be more to explore but I decided to post this concern here. I appreciate any help.

Thanks

[jq_userParticipant]

I just realized that my plan is not feasible. Instead, I would just need to assigned the deploy site name instead of id. The geo_id column will take care the actual ID of the dropdownlist item from deploy_site_id column.

[Author]

Posts