Populating multiple Comboboxs dynamically in Editable Grid

[balachandraParticipant]

Dear Team,

I am Creating Jqxgrid with dynamic columns, in that i don’t know how many comboboxes will come, So i have Written a dynamic code to populate multiple combobox columns in Grid, comboboxes are populating in Grid But the source is not binding correctly.

The combobox source which is binding last in a loop that source is applying to all comboboxes in grid.

Based on my requirement i have implemented a sample in fiddle.

Html:
<div id=’jqxWidget’>
<div id=”grid”>
</div>
<div style=”font-size: 13px; margin-top: 20px; font-family: Verdana, Geneva, ‘DejaVu Sans’, sans-serif;” id=”eventLog”></div>
</div>

Jquery:

$(document).ready(function () {

var gridcolumns = new Array();
var gridcolumnsdata = new Array();
for(var i=0;i<2;i++){
var columnname=””;
var datafieldname=””;
if(i==0){
var combovalues=[
{ value: “Y”, label: “Yes” },
{ value: “N”, label: “No” }
];
columnname=”Accepted Yes/No”;
datafieldname=”accepted”;
}
if(i==1){
var combovalues=[
{ value: “1228”, label: “Bala” },
{ value: “1226”, label: “Srikanth” }
];
columnname=”Employee”;
datafieldname=”emp_code”;
}
var comboSource =
{
datatype: “array”,
datafields: [
{ name: ‘label’, type: ‘string’ },
{ name: ‘value’, type: ‘string’ }
],
localdata: combovalues
};
var comboAdapter = new $.jqx.dataAdapter(comboSource, {
autoBind: true
});
gridcolumns.push({ name: columnname, value: datafieldname, values: { source: comboAdapter.records, value: ‘value’, name: ‘label’ } });
gridcolumns.push({ name: datafieldname, type: ‘string’});

gridcolumnsdata.push({text: columnname, datafield: datafieldname, displayfield: columnname, columntype: ‘combobox’,
createeditor: function (row, value, editor) {
editor.jqxComboBox({ source: comboAdapter, displayMember: ‘label’, valueMember: ‘value’ });
}
});

}

// prepare the data
var gridSource =
{
datatype: “array”,
localdata:
[
{ accepted: “”,emp_code:’1228′ },
{ accepted: “”,emp_code:’1226′ },
{ accepted: “”,emp_code:’1228′ },
{ accepted: “”,emp_code:’1226′ },
{ accepted: “”,emp_code:’1226′ },
{ accepted: “”,emp_code:’1226′ }
],
datafields: gridcolumns
};
debugger;
var gridAdapter = new $.jqx.dataAdapter(gridSource);
$(“#grid”).jqxGrid(
{
width: 600,
source: gridAdapter,
selectionmode: ‘singlecell’,
autoheight: true,
editable: true,
columns: gridcolumnsdata,
});
$(“#grid”).on(‘cellselect’, function (event) {
var column = $(“#grid”).jqxGrid(‘getcolumn’, event.args.datafield);
var value = $(“#grid”).jqxGrid(‘getcellvalue’, event.args.rowindex, column.datafield);
var displayValue = $(“#grid”).jqxGrid(‘getcellvalue’, event.args.rowindex, column.displayfield);
$(“#eventLog”).html(“<div>Selected Cell<br/>Row: ” + event.args.rowindex + “, Column: ” + column.text + “, Value: ” + value + “, Label: ” + displayValue + “</div>”);
});
$(“#grid”).on(‘cellendedit’, function (event) {
var column = $(“#grid”).jqxGrid(‘getcolumn’, event.args.datafield);
if (column.displayfield != column.datafield) {
$(“#eventLog”).html(“<div>Cell Edited:<br/>Index: ” + event.args.rowindex + “, Column: ” + column.text + “<br/>Value: ” + event.args.value.value + “, Label: ” + event.args.value.label
+ “<br/>Old Value: ” + event.args.oldvalue.value + “, Old Label: ” + event.args.oldvalue.label + “</div>”
);
}
else {
$(“#eventLog”).html(“<div>Cell Edited:<br/>Row: ” + event.args.rowindex + “, Column: ” + column.text + “<br/>Value: ” + event.args.value
+ “<br/>Old Value: ” + event.args.oldvalue + “</div>”
);
}
});
});

Can you please do the need full to implement this.

Thanks in advance.

[TodorParticipant]

Hello balachandra,

You are pushing two different types of data to gridcolumns array. You need to revise it.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[balachandraParticipant]

Hello Team,

Can you modify my code and give where i have done mistake ,

Why because while binding columns to grid each column having different types, but in my example i made two columns with same type i am not getting by your answer.

Please run my code in fiddle and correct where it went wrong.

Thanks in advance.

[TodorParticipant]

Hello balachandra,

I’m afraid that it is not possible to achieve the behavior that you want. Because the arrays/objects are reference types in JavaScript and when you assign the combo values, for example, on each iteration in the loop, you change the previous values also. So in the last iteration all combo values will be the same. That’s why you have the same values for all combo boxes.

The solution is to use different variables for the dataAdapter as shown in the following example, but you need to know the total number of the combo boxes and declare the same number of variables which breaks the idea of dynamic columns.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[balachandraParticipant]

Dear Team,

As per my requirement dynamic columns means i don’t know how many combobox columns will bind to grid, In that case it is not possible declare variables while writing the code,
For this reason only i declared variable in loop and assigning to that variable.(If we declare a variable in loop it will initializes newly and will action like a new variable it is known fact for all of us).
So can you please provide a solution for this.

Thanks in advance.

[Author]

Posts