Hi,
I have a grid which I would like to group by 3 columns. Here is my code:
var source =
{
datatype: ‘json’,
datafields:
[
{ name: ‘EmpId’, type: ‘number’ },
{ name: ‘EmployeeTitleId’, type: ‘number’ },
{ name: ‘Shift’, type: ‘number’ },
{ name: ‘StatusId’, type: ‘number’ },
{ name: ‘EmployeeGroup’, type: ‘string’ },
{ name: ‘ShiftName’, type: ‘string’ },
{ name: ‘StatusName’, type: ‘string’ },
{ name: ‘Name’, type: ‘string’ },
{ name: ‘Day1’, type: ‘string’ },
{ name: ‘Day2’, type: ‘string’ },
{ name: ‘Day3’, type: ‘string’ },
{ name: ‘Day4’, type: ‘string’ },
{ name: ‘Day5’, type: ‘string’ },
{ name: ‘Day6’, type: ‘string’ },
{ name: ‘Day7’, type: ‘string’ }
],
id: ‘EmpId’,
url: ‘/Home/GetSchedule/’ + $(“#ScheduleId”).val()
}
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#grd”).jqxGrid(
{
width: 960,
source: dataAdapter,
theme: theme,
editable: false,
columnsresize: true,
groupable: true,
groups: [‘EmployeeGroup’, ‘ShiftName’, ‘StatusName’],
showgroupsheader:false,
columns: [
{ text: ‘Name’, datafield: ‘Name’, width: 140 },
{ text: ‘MON’, datafield: ‘Day1’, width: 100 },
{ text: ‘TUE’, datafield: ‘Day2’, width: 100 },
{ text: ‘WED’, datafield: ‘Day3’, width: 100 },
{ text: ‘THU’, datafield: ‘Day4’, width: 100 },
{ text: ‘FRI’, datafield: ‘Day5’, width: 100 },
{ text: ‘SAT’, datafield: ‘Day6’, width: 100 },
{ text: ‘SUN’, datafield: ‘Day7’, width: 100 }
],
id: ‘EmpId’
});
I have search all the documentation and everything seems to be in order with the code listed above. However, when I execute the script, I get a blank grid with the scroll bars indicating that there are rows there, but not visible. If I scroll down, the rows appear, however the grouping is all messed up, the expanding and contracting does not work and the group headers are not visible. When I check my JS error console I see the following error: Type Error: l is null.
I am using jqWidgets 2.7, jQuery 1.8.3 and jQuery UI 1.10.0.Any help is greatly appreciated.
Thank you.
