Calling server using Ajax

[farjadfarid]

Hi i am still very new to paramquery. I am using MVC  .net 4.5
i have gone through tutorials and set up a grid with getData to retrive data from the server. But the grid is not calling the server at all. Specially not after the initialising the page.
As a test i have set an ajax function which correctly calls the server and retrieves the data.
Any help would be much appreciated.
Here is the code i am using
        $(function () {
           
            var colModel = [
                { title: "ProductID", width: 100, dataType: "integer", dataIndx: "ProductID" },
                { title: "ProductName", width: 200, dataType: "string", dataIndx: "ProductName" },
                { title: "QuantityPerUnit", width: 150, dataType: "integer", align: "right", dataIndx: "integer" },
                { title: "UnitPrice", width: 150, dataType: "float", align: "right", dataIndx: "UnitPrice" },
                { title: "UnitsInStock", width: 150, dataType: "integer", align: "right", dataIndx: "UnitsInStock" },
                { title: "UnitsOnOrder", width: 150, dataType: "integer", align: "right", dataIndx: "UnitsOnOrder" },
                { title: "ReorderLevel", width: 150, dataType: "integer", align: "right", dataIndx: "ReorderLevel" },
                { title: "Discontinued", width: 150, dataType: "boolean", align: "right", dataIndx: "Discontinued" }
            ];

           
            var dataModel = {
                location: "remote",
                sorting: "remote",
                dataType: 'json',
                method: "GET",
                contentType: 'application/json; charset=UTF-8',
                getUrl: function() {
                    return '/Products2/GetAllData';
                },
               
                getData: function(dataJson) {
                   

                    return { data: JSON.parse(dataJson.data)};
                }

            }


            var obj = {
                bootstrap: { on: false },
                numberCell: { resizable: true, title: "#", width: 30, minWidth: 30 },
                editor: { type: 'textbox' },
                title: "ParamQuery Grid with JSON Data",
                dataModel: { data: dataModel },
                colModel: colModel,
                resizable: true,
                scrollModel: { autoFit: true, theme: true }
            };

  $("#grid_json").pqGrid(obj);

// also tried the following call. Neither of which invoke a call to the server!

var gridInfo = $("#grid_json").pqGrid({
                width: 900,
                height: 400,
                collapsible: false,
                pageModel: { type: "local", rPP: 20, strRpp: "{0}", strDisplay: "{0} to {1} of {2}" },
                selectionModel: { type: 'cell' },
                data: dataModel,
                colModel: colModel,
                wrap: false,
                hwrap: false,
                //freezeCols: 2,           
                numberCell: { show: false, resizable: true, title: "#" },
                title: "Shipping Orders",
                resizable: true
            });


 });

[paramvir]

getUrl callback return value format is incorrect.

Code: [Select]

getUrl: function() {
       return '/Products2/GetAllData';
},

correct one:

Code: [Select]

getUrl: function() {
        return { url: '/Products2/GetAllData' };
},


Alternatively since it's a static url, it can also be directly mentioned as url property of dataModel.

Code: [Select]

var dataModel = {
    .....
    url: "/Products2/GetAllData",
    .....
}


[farjadfarid]

Hi, thanks for the reply.
i changed the url.

Still it doesn't call the server at all!

Any other suggestion? Is there a working sample project ?

Thanks.

[farjadfarid]

-Got it working.

The problem was in obj model. The dataModel should have pointed to the base of the object.

var obj = {
                bootstrap: { on: false },
                numberCell: { resizable: true, title: "#", width: 30, minWidth: 30 },
                editor: { type: 'textbox' },
                title: "ParamQuery Grid with JSON Data",
                dataModel:dataModel ,
                colModel: colModel,
                resizable: true,
                scrollModel: { autoFit: true, theme: true }
            };