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