paging not moving to new data in kendogrid

Question

Please note that at this time I am new to ASP.NET MVC, JavaScript and Kendo. The Kendo grid paging works for the first 500 records returned, but won't allow paging to download more data from the server past 500. Here is my controller:

    public ActionResult ExecuteTestRule(string ruleId, string ruleSql, string uwi, List<PdsMatchRuleParam> parameters = null)
    {
        if (Request.Url != null)
        {
            var query = PaginationQuery.Parse(Request.QueryString);
            var upperLimit = query.FromUpper;
            var lowerLimit = query.FromLower;
            var dataSource = new MatchDataSource();
            List<DataAccess.DbParameter> dbParameters = null;
            var generatedSql = dataSource.GenerateQuerySql(ruleId, ruleSql, uwi, parameters, out dbParameters);
            var results = dataSource.ExecuteTestRule(ruleId, generatedSql, dbParameters, upperLimit, lowerLimit).Select(u => new { UWI = u });
            var response = new Dictionary<string, object>();
            response["result"] = results;
            response["rowCount"] = MatchDataSource.GetRowCount(generatedSql, dbParameters);

            return Json(response, JsonRequestBehavior.AllowGet);
        }
        return null;
    }

Here are the total number of rows available "rowCount" in the controller:

MatchDataSource.GetRowCount(generatedSql, dbParameters)
91637

Here is the Request.QueryString in the controller:

Request.QueryString
{}
    [System.Web.HttpValueCollection]: {}
    base {System.Collections.Specialized.NameObjectCollectionBase}: {}
    AllKeys: {string[0]}

Pressing this button has no effect:

Here is my JavaScript code:

function bindTestRuleResults() {
    PageState.Selected.Old.TestRuleResult = PageState.Selected.TestRuleResult;

    var dataSource = new kendo.data.DataSource({
        pageSize: 500,
        data: PageState.Selected.TestRuleResult,
        serverPaging: true
    });
    Grids.TestRuleResultsGrid.setDataSource(dataSource);
    PageState.Selected.TestRuleResult = null;
}

function initTestRuleResultsGrid() {
    $(IDS.testRuleResultsGrid).kendoGrid({
        autoBind: true,
        filterable: false,
        navigatable: true,
        pageable: {
            refresh: true,
            pageSizes: [10, 50, 100, 500],
            buttonCount: 5
        },
        scrollable: true,
        selectable: true,
        serverFiltering: false,
        serverPaging: true,
        serverSorting: true,
        sortable: false,
        columns: [
            { field: "UWI", title: "UWI", width: "100%", attributes: { tabindex: "1" } }
        ],

        change: function() {
            var selectedDataItem = this.dataItem(this.select());
            if (PageState.Selected.TestRuleResult !== selectedDataItem.TestRuleResult) {
                PageState.Selected.TestRuleResult = selectedDataItem.TestRuleResult;
                testRuleResultsSelectionChanged();
            }
        },
        editable: false
    });
    // Add vertical scroll bars
    $(IDS.testRuleResultsGrid + " .k-grid-content").css({
        "overflow-y": "scroll"
    });
    Grids.TestRuleResultsGrid = $(IDS.testRuleResultsGrid).data('kendoGrid');
}

function execTestRule(uwi) {
    $.ajax({
        type: 'POST',
        url: "ExecuteTestRule",
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({
            ruleId: PageState.Selected.RuleId,
            ruleSql: PageState.SqlEditor.RuleSql.getValue(),
            uwi: "'" + uwi + "'",
            parameters: PageState.RuleParameters
        }),
        schema: {
            errors: function(response) {
                return response.error;
            },
            data: function(response) {
                return response.result;
            },
            total: function(response) {
                return response.rowCount;
            }
        },
        success: function(matchedUwiList) {
            PageState.TestRuleResult = matchedUwiList.result;

            var dataSource = new kendo.data.DataSource({
                pageSize: 500,
                data: matchedUwiList.result,
                serverPaging: true
            });
            Grids.TestRuleResultsGrid.setDataSource(dataSource);
            PageState.Selected.ChildUwi = null;
            updateButtonStates();
        },
        error: function(e) {
            var errorObject = JSON.parse(e.xhr.responseText);
            var errorMessage = errorObject.Message;

            //clear old error message 
            Grids.TestRuleResultsGrid.clearErrorMessage("error-message");

            // add new error message
            Grids.TestRuleResultsGrid.addErrorMessage("error-message", errorMessage);
        }
    });
}

It clearly has serverPaging = true in the data source. What am I missing? Do I need to somehow make pageSize dynamic in my JavaScript code? TIA.

UPDATE:

Thank you for the feedback, @Brett. This is how I've simplified the code as you suggested. How do I remove the success: function outside of the ajax part?

function execTestRule(uwi) {
    $.ajax({
        type: 'POST',
        url: "ExecuteTestRule",
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({
            ruleId: PageState.Selected.RuleId,
            ruleSql: PageState.SqlEditor.RuleSql.getValue(),
            uwi: "'" + uwi + "'",
            parameters: PageState.RuleParameters
        }),
        success: function(matchedUwiList) {
            PageState.TestRuleResult = matchedUwiList.result;

            var dataSource = new kendo.data.DataSource({
                schema: {
                    data: 'results',
                    total: 'rowCount'
                },
                pageSize: 500,
                serverPaging: true
            });
            Grids.TestRuleResultsGrid.setDataSource(dataSource);
            PageState.Selected.ChildUwi = null;
            updateButtonStates();
        }
    });
}

When the execTestRule function is run, this is the error I'm getting:

Answer 1

As @Brett explained, resolved the problem by taking the schema out of the $.ajax() call. Also, started using a transport in the dataSource:

$.widget("myViewGrid", {
        // ...
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "{0}/ViewDataById".format(options.controllerUri),
                    type: "get",
                    dataType: "json",
                    data: {
                        viewId: view.viewId,
                        Id: options.Id
                    }
                }
            },
            schema: {
                data: "mydata",
                total: "total",
                model:dataSourceModel
            },
            pageSize: view.pageSize,
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true
        });
        // ...
 });

Answer 2

You code is confusing to me, but I do see one particular problem. You are not telling the Kendo UI DataSource where your data and row count properties are in the returned object from your controller.

In your controller, you specify that the data is located in the response["results"] property, while the row count is in the response["rowCount"] property. Therefore, your returned object looks like this:

{
  results: [...],
  rowCount: 91637
}

The Kendo UI DataSource object's schema, by default, expects data to be located in a "data" property and the row count (a.k.a. number of items in data) to be located in the "total" property. Since your object does not conform to convention, you need to tell the data source that your properties are named differently.

var dataSource = new kendo.data.DataSource({
  schema: {
    data: 'results',
    total: 'rowCount'
  },
  pageSize: 500,
  serverPaging: true
});

So, you might say you are doing that already, but look where you defined it. You defined it on the $.ajax() call. That is not correct. The $.ajax() function does not care about schema. The Kendo UI DataSource does.

Kendo UI DataSource API reference

jQuery $.ajax API reference