Grid displays only the first row

[dpdragnevMember]

Hello,

I have a grid define as such:

var sourceTO =
{
datatype: ‘json’,
datafields:
[
{ name: ‘EmpId’, type: ‘number’ },
{ name: ‘StartDate’, type: ‘string’ },
{ name: ‘EndDate’, type: ‘string’ },
{ name: ‘Type’, type: ‘string’ },
{ name: ‘DateSubmitted’, type: ‘string’ },
{ name: ‘Status’, type: ‘string’ },
{ name: ‘StatusNotes’, type: ‘string’ }
],
id: ‘EmpId’,
url: ‘/Home/GetTimeOffRequests/’ + $(“#EmpId”).val()
}

var daTO = new $.jqx.dataAdapter(sourceTO);

var cellsrenderer = function (row, datafield, value) {
if (value == ‘Approved’) {
return ‘<div style=”height: 100%; width: 100%; font-weight: bold; text-align: center; padding-top: 5px; background-color: green;”>Approved</div>’
}

if (value == ‘Denied’) {
return ‘<div style=”height: 100%; width: 100%; font-weight: bold; text-align: center; padding-top: 5px; background-color: red; color: yellow;”>Denied</div>’
}
}

$(“#grdTimeOff”).jqxGrid(
{
width: 960,
height: 400,
source: daTO,
theme: theme,
editable: false,
columnsresize: true,
altrows: true,
columns: [
{ text: ‘Start’, datafield: ‘StartDate’, width: 120 },
{ text: ‘End’, datafield: ‘EndDate’, width: 120 },
{ text: ‘Type’, datafield: ‘Type’, width: 120 },
{ text: ‘Submitted’, datafield: ‘DateSubmitted’, width: 120 },
{ text: ‘Status’, datafield: ‘Status’, width: 120, cellsalign: ‘center’, cellsrenderer: cellsrenderer },
{ text: ‘Notes’, datafield: ‘StatusNotes’, width: 300 }
]
});

When I check the request from the server, everything seems fine. The server returns all the rows, but for some reason the grid displays only the first row.

I am using version 2.7 with jQuery version 1.9.1.

Any help would be greatly appreciated.

Thanks.

[Peter StoevKeymaster]

Hi,

From the posted code, I do not know what could be the issue. One possible option is to return your data as a String instead of JSON, on your server code you should have something like:

        public JsonResult GetEmployees()
        {
            var dbResult = db.Employees.ToList();
            var employees = (from employee in dbResult
                             select new
                             {
                                 employee.BirthDate,
                                 employee.Gender,
                                 employee.JobTitle,
                                 employee.SickLeaveHours,
                                 employee.VacationHours
                             });
            return Json(employees, JsonRequestBehavior.AllowGet);
        }

If that is not the issue here, then please provide sample data in the format returned by your server and we will test your client script with it.

Best Regards,
Peter Stoev

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

[Tony CParticipant]

I see you are using ‘EmpId’ as the id, but it looks like ‘EmpId’ will be the same for every record returned, therefore will only get the first row as there is only 1 unique id.

try this, remove

id: ‘EmpId’ 

from the source definition, you don’t need to specify id at all.

regards
Tony C

[dpdragnevMember]

Thank you Tony, your suggestion worked. This was driving me nuts for 2 days already. Appreciate your help.

[Author]

Posts