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
517
Grid loading all data from datasource on initial load
posted

I have an igGrid that has a JSON array as its datasource.  The JSON array data comes from an ajax call to a webservice.  The grid works and returns the data I'm expecting, but when the grid is loaded, it looks like all the data is loading to the client in one burst.  I have about 10,000 records that I'm expecting from my webservice.  I have paging turned on to show 20 records/page. 

How do I configure the grid so only 20 records are retrieved initially, then as I page or use the filter, additional records are retrieved from the datasource so the load times are faster?  Here's my grid setup. I also tried changing the "mode" to remote for paging & filtering, but that seems to break the paging & filtering altogether.

    $.ajax({
        type: "POST",
        url: "Services/TextileService.asmx/GetAllTextiles",
        data: {},
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        traditional: true,
        success: function (data) {
            $("#grid2").igGrid({
                autoGenerateColumns: false,
                columns: [
                    { headerText: "Pattern", key: "Pattern", dataType: "string" },
                    { headerText: "Colorway", key: "Colorway", dataType: "string" },
                    { headerText: "Mill", key: "Mill", dataType: "string" },
                    { headerText: "Grade", key: "Grade", dataType: "string" },
                    { headerText: "PartID", key: "PartID", dataType: "string" },
                    { headerText: "Obsolete", key: "Obsolete", dataType: "string" },
                    { headerText: "Class", key: "Class", dataType: "string" }
                ],
                width: "100%",
                dataSource: data.d,
                responseDataKey: "Records",
                tabIndex: 1,
                primaryKey: "PartID",
                fixedHeaders: true,
                autoAdjustHeight: false,
                features: [
                {
                    name: "Filtering",
                    type: "local",
                    dataFiltering: filteringHandler,
                    allowFiltering: true,
                    caseSensitive: false,
                    columnSettings: [
                        { columnKey: "Pattern", allowFiltering: true, condition: "contains" },
                        { columnKey: "Colorway", allowFiltering: true, condition: "contains" },
                        { columnKey: "Mill", allowFiltering: true, condition: "contains" },
                        { columnKey: "Grade", allowFiltering: true, condition: "contains" },
                        { columnKey: "PartID", allowFiltering: true, condition: "contains" },
                        { columnKey: "Obsolete", allowFiltering: true, condition: "contains" },
                        { columnKey: "Class", allowFiltering: true, condition: "contains" }
                    ]
                },
                {
                    name: "Sorting",
                    type: "local",
                    //mode: "multi",
                    columnSettings: [
                        { columnKey: "Pattern", allowSorting: true, currentSortDirection: "asc", firstSortDirection: "asc" },
                        { columnKey: "Colorway", allowSorting: true, currentSortDirection: "asc", firstSortDirection: "asc" },
                        { columnKey: "Mill", allowSorting: true, firstSortDirection: "asc" },
                        { columnKey: "Grade", allowSorting: true, firstSortDirection: "asc" },
                        { columnKey: "PartID", allowSorting: true, firstSortDirection: "asc" },
                        { columnKey: "Obsolete", allowSorting: true, firstSortDirection: "asc" },
                        { columnKey: "Class", allowSorting: true, firstSortDirection: "asc" }
                    ]
                },
                {
                    name: "Selection",
                    mode: "row",
                    rowSelectionChanging: rowSelectionHandler,
                    multipleSelection: false,
                    activation: true
                },
                {
                    name: 'Paging',
                    type: "local",
                    pageSize: 20,
                    visiblePageCount: 5,
                    totalRecCountKey: "servertotalcount"
                }
                ]

            });

        },
        failure: function (data) {
            alert("ERROR: GetAllTextiles");
        }
    });

 

Thanks,

John

Parents Reply Children