jQWidgets Forums
jQuery UI Widgets › Forums › Grid › select value from combobox base on another cell combox value
Tagged: bindingcomplete, cellendedit, combobox, grid, jqxgrid, ready, setcellvalue
This topic contains 7 replies, has 2 voices, and was last updated by Dimitar 10 years, 11 months ago.
-
Author
-
Hi,
I have a grid with two combobox columns. If i select one value from combobox(1st column) that corresponding value is selected dynamically in 2nd combobox column.
Here my part of code
var list= [ {value: "1", label: "One"}, {value: "2", label: "Two"}, {value: "3", label: "Three"} ]; columns:[ {text: 'CommercialType', datafield: 'commercialType', width: 150, columntype: 'combobox', displayfield: 'commercialName', createeditor: function(row, column, editor) { editor.jqxComboBox({source: dataAdapter_commercial, selectedIndex: -1, dropDownHeight: 100, valueMember: 'comTyId', displayMember: 'commTypename', promptText: 'Please Choose', selectionMode: "dropDownList"}); }, cellvaluechanging: function(row, datafield, columntype, oldvalue, newvalue) { var result = $.ajax({type: 'GET', data: 'comm_ty_id=' + newvalue.value, url: 'getUOMByCommercialType', async: false}).responseText; $('#agreementGrid').jqxGrid('setcellvalue', row, 'unit', result); } }, {text: 'Unit of Measure', datafield: 'unit', width: 120, editable: false, createeditor: function(row, column, editor) { editor.jqxComboBox({source: list, selectedIndex: -1, dropDownHeight: 100, valueMember: 'value', displayMember: 'label', promptText: 'Please Choose', selectionMode: "dropDownList"}); }, }, ]
for ex:
In cell value change event, i am calling ajax to get the value.Assume that ajax returns “2”. that is stored in result variable.
after that i want to select that corrresponding value from 2nd combobox column.this line does not work
$('#agreementGrid').jqxGrid('setcellvalue', row, 'unit', result);
could you please help meHello selva,
We suggest you make your Ajax and setcellvalue calls on the cellendedit event and not in the cellvaluechanging callback function.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
could you please give code for this functionality. I tried but it not works.
Hi selva,
First, remove cellvaluechanging:
columns:[ {text: 'CommercialType', datafield: 'commercialType', width: 150, columntype: 'combobox', displayfield: 'commercialName', createeditor: function(row, column, editor) { editor.jqxComboBox({source: dataAdapter_commercial, selectedIndex: -1, dropDownHeight: 100, valueMember: 'comTyId', displayMember: 'commTypename', promptText: 'Please Choose', selectionMode: "dropDownList"}); }, }, {text: 'Unit of Measure', datafield: 'unit', width: 120, editable: false, createeditor: function(row, column, editor) { editor.jqxComboBox({source: list, selectedIndex: -1, dropDownHeight: 100, valueMember: 'value', displayMember: 'label', promptText: 'Please Choose', selectionMode: "dropDownList"}); }, }, ]
Then bind to the cellendedit event:
$("#agreementGrid").on('cellendedit', function (event) { var column = args.datafield; var row = args.rowindex; var value = args.value; var oldvalue = args.oldvalue; if (column == "commercialType") { var result = $.ajax({ type: 'GET', data: 'comm_ty_id=' + value, url: 'getUOMByCommercialType', async: false }).responseText; $('#agreementGrid').jqxGrid('setcellvalue', row, 'unit', result); } });
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Thanks. It’s working fine. But I have another one doubt. I want to add rows dynamically with data, at that time how can i call cellendedit function.
for example:
var result=1,2^2,4 var temp=result.split("^"); var localdata=new Array(); for(int i=0;i<temp.length;i++){ var data=temp[i].split(","); localdata.push({commercialType: data[0],unit: data[1]}); } var source={ datatype: 'array', datafields: [ {name: 'commercialName', value: 'comTyId', values: {source: dataAdapter_commercial_edit.records, value: 'comTyId', name: 'commTypename'}}, {name: 'commercialType', type: 'string'}, {name: 'unitName', value: 'uomId', values: {source: list, value: 'value', name: 'label'}}, {name: 'unit', type: 'string'}, ], localdata:localdata }
this code generates no of rows equivalent to temp.length but not loaded that corresponding value from combobox. How can i call cellendedit function for this scenario.
Hi selva,
cellendedit is not called when the grid is loaded. However, you can execute your code in the grid’s ready callback function or its bindingcomplete event handler.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
If you dont mine, please provide sample code for this scenario.
Hi selva,
Please try the following:
ready: function () { var rows = $('#agreementGrid').jqxGrid('getrows'); for (var i = 0; i < rows.length; i++) { var currentValue = rows[i].commercialType; var result = $.ajax({ type: 'GET', data: 'comm_ty_id=' + currentValue, url: 'getUOMByCommercialType', async: false }).responseText; $('#agreementGrid').jqxGrid('setcellvalue', i, 'unit', result); } }
where ready is the grid’s callback function, which fires when the grid is initialized and the binding is complete.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.