jqxGrid dropDown issue

Question

I am trying to load gjqxGrid with DropDown column , I tried with sample json in jsfiddle : here , it worked fine . But When I try to use same code in my project files , DropDown column is empty , I have checked the data format , it's fine. Below is the code from project file

        var source_app =
            {
                datatype: "json",
                datafields:[
                    { name: 'id' },
                    { name: 'name' },
                    { name: 'count' },
                    { name: 'drop'},
                    { name: 'drops'}                        
                ],
                url: "settings/scenario_count2.php",
                cache:false,
                                updaterow: function (rowid, rowdata, commit) {
                    var data = "update=true&" + $.param(rowdata);
                    $.ajax({
                        dataType: 'json',
                        url: 'settings/scenario_count2.php',
                        cache: false,
                        data: data,
                        success: function (data, status, xhr) {
                            // update command is executed.
                            commit(true);
                        },
                        /*
                        error: function(jqXHR, textStatus, errorThrown)
                        {
                            commit(false);
                        }*/
                    });
                }
            };
            var dataAdapter_app = new $.jqx.dataAdapter(source_app);
            dataAdapter_app.dataBind();

//below is my Jqx grid intialization code // Approach 1

$("#scenario_grid2").jqxGrid(
            {
                width: 520,
                height: 253,
                source: dataAdapter_app,
                editable: true,
                theme: theme,

                selectionmode: 'multiplecellsadvanced',
                columns: [
                    { text: 'Id', hidden: true, editable:false, columntype: 'textbox', datafield: 'id'},
                    { text: 'Name', columntype: 'textbox', datafield: 'name', width: 140 },
                    /*{ text: 'Drop', columntype: 'NumberInput', datafield: 'drop', width: 60 },  */

                       { text: 'Drop', 
                       datafield: 'drop', width: 160, columntype: "dropdownlist", 
                       initeditor: function (row, cellvalue, editor) {
                       editor.jqxDropDownList ({source: dataAdapter_app.records[row].drops });

                       }},

drops column has array of values that needs to pe in dropdown. Also if I replace datafield 'drop' with 'drops', then I get comma separated values in the column , that means array data is there but dropdown is not getting created. .

If I created dropdown adapter before grid intialization // Approach 2

  var dropdownListStateAdapter3 = new $.jqx.dataAdapter(dropDownListStateSource3, { autoBind: true, async: false });

and use this as below :

{ text: 'State', columntype: 'dropdownlist', datafield: 'revision_state', width: 55,
                        initeditor: function (row, cellvalue, editor) {
                                editor.jqxDropDownList({ displayMember: 'name', source: dropdownListStateAdapter3 });

Then I get drop down , but I want dynamic dropdown as it each row has different set of dropdown values . Kindly let me know how can I populate dropdown using Approach 1.

Thanks.

Answer 1

aynch:false and autobind:true needs to be added to the dataAdapter function.

var dataAdapter_app = new $.jqx.dataAdapter(source_app,{
            loadComplete: function (record) {
              console.log(record);
                 datarecords = JSON.parse(JSON.stringify(record));
                 },
                 async:false,
                 autoBind:true
            });