jqGrid not populating

I'm am new to jqGrid. I am trying to implement a jqGrid that is populated with data returned by a REST call and several checkboxes that a user can edit to upload a new object to the DB using another rest call. I am having trouble populating the grid.

The issue I am experiencing is that the grid seems to take up the vertical space on the page, but is not displaying any information. The headers of the grid displayed fine when I just had a grid with no data.

During debug with Chrome, I found that the properties I expected to be returned from the row object when evaluated in the console are not there, ie. they are undefined.

Here is the code I am using:

var RGrid = [];

$.ajax({
    url: restApi + EndPoint + '/' + Number,
    type: 'GET',
    success: function (response) {
        Object2 = response;

        var rData = $('#ResGrid').jqGrid().getRowData();

        for (var i = 0; i < Object2.Requests.length; i++) {
            var existingRows = rData.filter(function (a) {
                return a.rId == Object2.Requests[i].Resource.Id;
            });
            if (existingRows.length == 0) {
                var newObj = {
                    a: Object2.Requests[i].Resource.Name,
                    e: Object2.Requests[i].Resource.Id,
                    f: Object2.Requests[i].Id,
                    d: false,
                    b: false,
                    c: false
                };
                RGrid.push(newObj);
                $('#ResGrid').jqGrid('addRowData', 1, newObj);
            }
        }
    },
    error: function (textStatus) {
        Error('We were unable to retrieve the item');
    }
});

$('#ResGrid').jqGrid({
    defaults: {
        emptyrecords: "No items assigned",
        loadtext: "Loading..."
    },
    data: RGrid,
    autowidth: true,
    datatype: "local",
    colModel: [
        { label: 'a', name: 'a', align: 'left', editable: false },
        {
            label: 'b', name: 'b', align: 'center', editable: true, edittype: 'checkbox',
            editoptions: { value: "True:False" },
            formatter: "checkbox", formatoptions: { disabled: false }
        },
        {
            label: 'c', name: 'c', align: 'center', editable: true, edittype: 'checkbox',
            editoptions: { value: "True:False" },
            formatter: "checkbox", formatoptions: { disabled: false }
        },
        {
            label: 'd', name: 'd', align: 'center', editable: true, edittype: 'checkbox',
            editoptions: { value: "True:False" },
            formatter: "checkbox", formatoptions: { disabled: false }
        },
        { name: 'e', hidden: true },
        { name: 'f', hidden: true }
    ],
    rowNum: 1000,
    height: 'auto',
    viewrecords: true,
    caption: "Desc",
    grouping: false,
    loadonce: true
});

I have tried not passing values for the checkbox columns and several overloads of the addRowData method, none have had an effect. Curiously, the objects passed to the RGrid array appear to have all the property-value pairs I expect, so I suspect the issue is either with the colModel declaration or the way I am using addRowData method.

EDIT: The json I receive from the server:

{"Id":4,"JobNumber":"PrNum75","OrderNumber":null,"QuoteNumber":"1401291641","QuoteId":33,"Requests":[{"Id":10,"PlannedDays":[{"Id":20,"Hours":4.0,"Date":"2014-02-20T00:00:00"}],"PlannedSkillDef":{"Id":1,"Description":"IPE Inspector","DefaultRate":200.0},"QuoteSection":{"Id":54,"Description":"Ves","NumberOf":5,"TotalServices":1000.0,"TotalConsumables":100.0,"TotalTravel":5.0,"TotalAmountPerVessel":1105.0,"TravelExpenses":[{"Id":26,"AgreedRate":3.0,"Quantity":1,"TravelDef":{"Id":1,"Description":"Resource & NDT Travel ","UnitDescription":"Km","DefaultRatePerUnit":3.0}},{"Id":27,"AgreedRate":2.0,"Quantity":1,"TravelDef":{"Id":2,"Description":"Mechanical Service Travel","UnitDescription":"Km","DefaultRatePerUnit":2.0}}],"Consumables":[{"Id":16,"Quantity":1,"AgreedPrice":100.0,"ConsumableDef":{"Id":3,"Description":"Cans of MT / PT consumables","UnitPrice":100.0}}],"Services":[{"Id":17,"ServiceDef":{"Id":1,"Description":"Non Destructive Testing - Inspections","DefaultSkill":{"Id":2,"Description":"CPV","DefaultRate":250.0},"TasksRequired":[{"Id":1,"Description":"Thickness Testing"},{"Id":2,"Description":"Surface Crack Testing"},{"Id":3,"Description":"Reporting"},{"Id":4,"Description":"NDT Travel"}],"TravelDefs":[{"Id":1,"Description":"Resource & NDT Travel ","UnitDescription":"Km","DefaultRatePerUnit":3.0},{"Id":2,"Description":"Mechanical Service Travel","UnitDescription":"Km","DefaultRatePerUnit":2.0}],"ConsumableDefs":[{"Id":3,"Description":"Cans of MT / PT consumables","UnitPrice":100.0}]},"DefaultSkill":{"Id":70,"Rate":0.0,"SkillDef":{"Id":2,"Description":"CPV","DefaultRate":250.0}},"AgreedSkill":{"Id":69,"Rate":250.0,"SkillDef":{"Id":1,"Description":"IPE Inspector","DefaultRate":200.0}},"ServiceTasks":[{"Id":92,"TaskHours":1,"NumberOfShifts":1,"NumberOfStaff":1,"ServiceTaskDef":{"Id":1,"Description":"Thickness Testing"}},{"Id":93,"TaskHours":1,"NumberOfShifts":1,"NumberOfStaff":1,"ServiceTaskDef":{"Id":2,"Description":"Surface Crack Testing"}},{"Id":94,"TaskHours":1,"NumberOfShifts":1,"NumberOfStaff":1,"ServiceTaskDef":{"Id":3,"Description":"Reporting"}},{"Id":95,"TaskHours":1,"NumberOfShifts":1,"NumberOfStaff":1,"ServiceTaskDef":{"Id":4,"Description":"NDT Travel"}}]}]},"Resource":{"Id":1,"ADUserName":"###","Name":"Matthew Smith","SkillDefs":[]},"ServiceDef":{"Id":1,"Description":"Non Destructive Testing - Inspections","DefaultSkill":{"Id":2,"Description":"CPV","DefaultRate":250.0},"TasksRequired":[{"Id":1,"Description":"Thickness Testing"},{"Id":2,"Description":"Surface Crack Testing"},{"Id":3,"Description":"Reporting"},{"Id":4,"Description":"NDT Travel"}],"TravelDefs":[{"Id":1,"Description":"Resource & NDT Travel ","UnitDescription":"Km","DefaultRatePerUnit":3.0},{"Id":2,"Description":"Mechanical Service Travel","UnitDescription":"Km","DefaultRatePerUnit":2.0}],"ConsumableDefs":[{"Id":3,"Description":"Cans of MT / PT consumables","UnitPrice":100.0}]}}],"Consumables":[],"TravelAllocations":[]}

The part of interest to me is WorkRequests, where I need the Name and the Id of the Resource.

Answers


you can try doing this in complete: function(){// here your jqgrid}:

"loadonce: true" no need to use this as your datatype is local

var RGrid = [];

$.ajax({
    url: restApi + EndPoint + '/' + Number,
    type: 'GET',
    success: function (response) {
        Object2 = response;

        var rData = $('#ResGrid').jqGrid().getRowData();

        for (var i = 0; i < Object2.Requests.length; i++) {
            var existingRows = rData.filter(function (a) {
                return a.rId == Object2.Requests[i].Resource.Id;
            });
            if (existingRows.length == 0) {
                var newObj = {
                    a: jobObject2.Requests[i].Resource.Name,
                    b: jobObject2.Requests[i].Resource.Id,
                    c: jobObject2.Requests[i].Id,
                    d: false,
                    e: false,
                    f: false
                };
                RGrid.push(newObj);
            }
        }
    },
    error: function (textStatus) {
        Error('We were unable to retrieve the item');
    },
    complete: function(){

              $('#ResGrid').jqGrid({
                    defaults: {
                        emptyrecords: "No items assigned",
                        loadtext: "Loading..."
                    },
                    data: RGrid,
                    autowidth: true,
                    .........

    }
});

It's better if you would use datatype: "json". In the case jqGrid will make the request to the server. You need just use url option like url: restApi + EndPoint + '/' + Number and jsonReader like jsonReader: {root: "Requests", repeatitems: false}. It will inform jqGrid where to find the data in the response. Additionally you would need to use jsonmap option to bind columns with the names 'a', 'b', 'c', ... to properties Resource.Name and other in the server response.

The mapping of jobObject2.Requests[i].Resource.Id and jobObject2.Requests[i].Id to 'b' and 'c' columns having formatter: "checkbox" seems me very suspected. It's strange to have ids which possible value could be True or False only. Additional problem is the usage of variable Object2 in the loop, but usage of undefined jobObject2 in the body of the loop. I suppose that minimal fixing of your current code would be: moving of creating of the grid inside of success or complete callback and replacing jobObject2 to Object2. I would see the problem as the next one. Your current question is: how to fill the grid with the data returned from the server.

The code which I suggest should look about the following:

$('#ResGrid').jqGrid({
    datatype: "json",
    url: restApi + EndPoint + '/' + Number,
    gridview: true,
    autoencode: true,
    loadonce: true,
    jsonReader: {
        root: "Requests",
        repeatitems: false
    },
    colModel: [
        { name: "a", jsonmap: "Resource.Name" },
        { name: "b", jsonmap: "Resource.Id", align: "center" },
        { name: "c", jsonmap: "Id", align: "center" }
    ]
    ...
});

UPDATED: The demo shows that posted above options work with the last version of JSON data which you posted.


I have figured out what the issue was. The code declaring and populating the jqGrid was in a script file, which in the page was referenced above the declaration of the table that was supposed to act as the grid. A basic novice mistake on my part.

Thank you all for trying to help me out, and sorry to take up your time. Guess it's back to C# for me...


Need Your Help

Namespace management with Web References

web-services namespaces

I have a seemingly simple goal, but I'm tripping over namespace issues. I wrote a sharepoint web service client class, called sharepoint.cs, and it has its own namespace. I want to re-use this cl...

select function returning -1 on Windows Phone platform

c++ sockets winapi network-programming winsock2

I am struggling with select function. The function works fine if I am passing just readfds and exceptfds parameter, but when i pass writefds parameter a select functions returns -1 and WSAGetLastEr...