Grid Cell population using key value and drop down

[NIKHILARParticipant]

Hi

I have created dropdownlist in a grid cell. When selecting items in drop down using custom editor, nothing is getting printed in the cell.
Checked many examples but still not able to make it work. Can you please provide some help . Below is the code

var data = [{“productname”:”Cold Drink”, “productid”:”1″},{“productname”:”Coffee”,”productid”:”2″}];
var products =
{
localdata: data,
datatype: “array”,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failder.
commit(true);
},
datafields:
[

{ name: ‘productname’, type: ‘string’ },
{ name: ‘productid’, type: ‘string’ }

]
};

var pdtAdapter = new $.jqx.dataAdapter(products, {
autoBind: true});

var source =
{
localdata: data,
datatype: “array”,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failder.
commit(true);
},
datafields:
[

{ name: ‘mode’, type: ‘string’ },
{ name: ‘strSubModes’, value: ‘mode’, values: {source: pdtAdapter.records, value: ‘productid’, name: ‘productname’ } }

]
};

var dataAdapter = new $.jqx.dataAdapter(source);

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 850,
source: dataAdapter,
editable: true,
selectionmode: ‘singlecell’,
columns: [

{
text: ‘Products’, columntype: ‘dropdownlist’, datafield: ‘mode’, displayfield:’strSubModes’,
createeditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
editor.jqxDropDownList({
checkboxes: true, source: pdtAdapter, displayMember: ‘productname’, valueMember: ‘productid’, width: width, height: height,
selectionRenderer: function () {
return “<span style=’top:4px; position: relative;’>Please Choose:</span>”;
}
});
},cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
alert(newvalue + ‘ old ‘ +oldvalue);

},
initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
// set the editor’s current value. The callback is called each time the editor is displayed.
var items = editor.jqxDropDownList(‘getItems’);
editor.jqxDropDownList(‘uncheckAll’);
if(null!=cellvalue){
var values = cellvalue.split(/,\s*/);
for (var j = 0; j < values.length; j++) {
for (var i = 0; i < items.length; i++) {
if (items[i].value === values[j]) {
editor.jqxDropDownList(‘checkIndex’, i);
editor.jqxDropDownList(‘selectedIndex’, i);
}
}
}
}

},
geteditorvalue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();
}

}

]
});
});`

[Peter StoevKeymaster]

I think the return object should be something like: {label: …., value: … } as it is key/value column i.e editor.val() will not be enough as it returns only the value as Text where object is expected.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[NIKHILARParticipant]

HI Peter
I tried it using below command

return {label: returnLabel, value:returnValue}; // where label and value is calculated by looping into selected items. returnLabel is concatenation of list names i.e. product names and returnValue is concatenation of list values i.e. product ids

Now the problem is that label is getting displayed but when opening the drop down again – selected items are not getting auto selected because the cell value is coming as product names .

How to overcome this ?
I would also want my product ids to be stored in cell value but display the product names

[Author]

Posts