two dropdown columns in a grid

[hkParticipant]

I am trying to add two dropdownboxes in my grid …the first one works but as soon as I add the second one it gives me an error -Line: 7
Error: Unable to get property ‘height’ of undefined or null reference
here is my code –
$(“#jqxgrid”).jqxGrid(
{
width:1300,
pageable: true,
Source: dataAdapter,
autoheight: true,
columnsResize: true,
sortable: true,
theme: ‘blue’,
editable: true,
pagerrenderer: pagerrenderer,
columns: [
{ text: ‘User Name’, align: ‘center’, datafield: ‘username’, width: 120 },
{ text: ‘Admin’, datafield: ‘access_level’, columntype: ‘checkbox’, width: 67, cellsalign: ‘center’, align: ‘center’ },
{ text: ‘Schedule’, columngroup: ‘Services’, datafield: ‘service_id’, displayfield: ‘service’, columntype: ‘dropdownlist’,
createeditor: function (row, value, editor) {
editor.jqxDropDownList({checkboxes: true, source: servicelistAdapter, displayMember: “service”, valueMember: “service_id”, animationType: ‘fade’, width: 200, height: 25 });
}},
{ text: ‘Operator’, columngroup: ‘Services’, datafield: ‘service_id’, displayfield: ‘service’, columntype: ‘dropdownlist’,
createeditor: function (row, value, editor) {
editor.jqxDropDownList({checkboxes: true, source: servicelistAdapter, displayMember: “service”, valueMember: “service_id”, animationType: ‘fade’, width: 200, height: 25 });
}},

this is how I make my servicelist adapter
var servicelist =
{
datatype: “json”,
datafields: [
{ name: ‘service_id’ },
{ name: ‘service’ }
],
url: ‘../models/qp_channel_data.php?getServiceList=true’,
root: ‘Rows’,
async: false
};
var servicelistAdapter = new $.jqx.dataAdapter(servicelist);

[hkParticipant]

I found an example similar to what I want but I keep getting the below error
Line: 270
Error: Unable to get property ‘split’ of undefined or null reference

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/cellcustomediting.htm

[hkParticipant]

ok so now I see the dropdown in my grid only when I click on the cell .it is blank when I start
1) how can I show the dropdown as soon as the grid loads

2) what I want is the dropdown loads with all the services as checkboxes and the ones saved in the database to be checked automatically
I can see the dropdowns and checkboxes but they are always unchecked even though the data saves to the database.

{ text: ‘Schedule’, align: ‘center’, columngroup: ‘Services’, datafield: ‘schedule_service_id’, displayfield: ‘schedule’, columntype: ‘template’,
createeditor: function (row, value, editor) {
editor.jqxDropDownList({
checkboxes: true, source: servicelistAdapter, displayMember: “service”, valueMember: “service_id”, width:180, height: 25 ,
selectionRenderer: function () {
return “<span style=’top:4px; position: relative;’>Please Choose:</span>”;
}
});
},
initeditor: function (row, value, editor) {
// set the editor’s current value. The callback is called each time the editor is displayed.
var items = editor.jqxDropDownList(‘getItems’);
editor.jqxDropDownList(‘uncheckAll’);
var values = value.split(/,\s*/);
for (var j = 0; j < values.length; j++) {
for (var i = 0; i < items.length; i++) {
if (items[i].label === values[j]) {
editor.jqxDropDownList(‘checkIndex’, i);
}
}
}
},
geteditorvalue: function (row, value, editor) {
// return the editor’s value.
return editor.val();
}
},

adapters –
var servicelist =
{
datatype: “json”,
datafields: [
{ name: ‘service_id’ },
{ name: ‘service’ }
],
url: ‘../models/qp_channel_data.php?getServiceList=true’,
root: ‘Rows’,
async: false
};
var servicelistAdapter = new $.jqx.dataAdapter(servicelist, {
autoBind: true
});

var dataAdapter = new $.jqx.dataAdapter(Source);
var getservicelistAdapter = function (datafield) {
var Source =
{
dataType: “json”,
datafields: [
{ name: ‘schedule_service_id’}
],
url: ‘../models/qp_user_data.php’,
root: ‘Rows’,
cache: true
};
var dataAdapter = new $.jqx.dataAdapter(Source, { uniqueDataFields: [datafield] });
return dataAdapter;
}

[DimitarParticipant]

Hello hk,

Please make sure the data adapters are defined before the grid initialization.

Best Regards,
Dimitar

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

[Author]

Posts