Dropdown Column in Grid

[priyam.basuParticipant]

Hi,

So I am trying to make one of the columns in the grid act like a dropdown. I’m getting the data for the dropdown in json format. But the data doesnt seem to be binding. The dropdown is blank.

$(“#TableDefinitionGrid”).jqxGrid(
{
source: dataAdapter,
columnsresize: true,
theme: ‘energyblue’,
sortable: true,
//pageable: true,
autoheight: true,
columnsresize: true,
editable: true,
width: 650,
editmode: ‘singlerow’,

columns: [
{ text: ‘TableFieldDefinitionID’, datafield: ‘TableFieldDefinitionID’, hidden: true },
{ text: ‘Display Name’, datafield: ‘DisplayName’, width: ‘210’ },
{ text: ‘Internal Name’, datafield: ‘InternalName’, width: ‘210’ },
// { text: ‘Description’, datafield: ‘Description’, width: ‘230’ },
{
text: ‘Data Type’, datafield: ‘DataType’, width: 230, columntype: ‘dropdownlist’,
createeditor: function (row, column, editor) {
//var dataSource1 = [‘Cappuccino’, ‘Caramel Latte’, ‘Caffe Espresso’];
//editor.jqxDropDownList({ source: dataSource1 });

var ListUrl = ‘/’ + portal() + ‘/Services/TableFieldDefinition.aspx/ListDataTypes’;
$.ajax({
async: false,
contentType: “application/json; charset=utf-8”,
type: “POST”,
url: ListUrl,
success: function (data) {
var dataSource1 =
{
datatype: “json”,
datafields: [
{ name: ‘DisplayName’ },
{ name: ‘DataTypeID’ }
],
id: ‘DataTypeID’,
localdata: data.d
};
dataAdapterDataTypes = new $.jqx.dataAdapter(dataSource1);
editor.jqxDropDownList({ source: dataSource1, autOpen: true });

}
});

},
// update the editor’s value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == “”) return oldvalue;
},
geteditorvalue: function (row, cellvalue, editor) {
// return the editor’s value.
var selectedIndex = editor.jqxDropDownList(‘getSelectedIndex’);
alert(selectedIndex);
return editor.find(‘input’).val();
}
}

]
});

Thanks!

[Peter StoevKeymaster]

Hi priyam.basu,

The DropDownList’s source property should point to the dataAdapter instance, not to the dataSource1 object.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts