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.
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
});