Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Jack
815
Append Rows On Demand with Remote Data Source
posted

I am using Infragistics 15.2 with JQuery 1.11.3 and JQuery UI 1.11.4.

I have an igGrid using the "Append Rows on Demand" feature. My data source is a JSON object which is returned from an AJAX call.

Here is a sample of my data source with 1 record:

[{
    "TotalRowCount":"1404",
    "DataRecords":[{
         "ID":"ced1b903-d378-e511-80f1-8a6026a92b47",
         "ContractNumber":"16453",
         "Surname":"Smith",
         "Status":"New Order",
         "Cemetery":"Land of Memory",
         "CustomerName":"John Smith",
         "Store":"ABC Monument Works",
         "DateCreated":"10/22/2015 10:39:01 AM"
        }]
}]

Here is the code for my grid:

                    $("#GRIDContracts").igGrid({
                        columns: [
                            { headerText: "Options", key: "Options", dataType: "string", unbound: true, template: optionString },
                            { headerText: "ID", key: "DataRecords.ID", dataType: "string", hidden: true },
                            { headerText: "Contract #", key: "DataRecords.ContractNumber", dataType: "string" },
                            { headerText: "Surname", key: "DataRecords.Surname", dataType: "string" },
                            { headerText: "Status", key: "DataRecords.Status", dataType: "string" },
                            { headerText: "Cemetery", key: "DataRecords.Cemetery", dataType: "string" },
                            { headerText: "Customer", key: "DataRecords.CustomerName", dataType: "string" },
                            { headerText: "Store", key: "DataRecords.Store", dataType: "string" },
                            { headerText: "Entry Date", key: "DataRecords.DateCreated", dataType: "date" }
                        ],
                        features: [
                            {
                                name: "AppendRowsOnDemand",
                                type: "remote",
                                recordCountKey: "TotalRowCount",
                                chunkIndexUrlKey: "ChunkIndex",
                                chunkSizeUrlKey: "ChunkSize",
                                chunkSize: 10,
                                loadTrigger: "button"
                            }
                        ],
                        responseDataKey: "DataRecords",
                        autoCommit: true,
                        height: "500px",
                        autoGenerateColumns: false,
                        renderCheckboxes: true,
                        primaryKey: "ID",
                        dataSourceUrl: "https://martusstonedev.etvsoftware.com/AJAX_Handlers/GetContractsWDG.ashx?StoreID=" + masterStoreID
                    });
My AJAX call returns the first chunk of 10 rows as expected, but the rows do not show up in the grid. When I click the "Load more data" button, no AJAX call is made to load the next chunk.
Can anyone offer any suggestions for this?
  • 815
    Offline posted

    UPDATE:

    The initial chunk will now load successfully after changing this line

    responseDataKey: "DataRecords"

    to

    responseDataKey: "0.DataRecords"

    However, I am still unable to load additional rows when clicking the "Load more data" button. No AJAX call gets made when I click the button and the same is happening when I use loadTrigger: "auto".

    Why would this be happening? Am I using an incompatible version of JQuery possibly?