KendoGrid paging has "undefined" and "NaN"

Question

Presently I am attempting to add paging to a Kendo Grid. Here is the full error message:

Error in event handler for (unknown): TypeError: Cannot read property 'url' of null
    at Object.tinyFilter.start (chrome-extension://nlfgnnlnfbpcammlnibfkplpnbbbdeli/site.js:61:43)
    at chrome-extension://nlfgnnlnfbpcammlnibfkplpnbbbdeli/site.js:137:16

Here is the code in my controller:

    public ActionResult ExecuteRule(string ruleId, string ruleSql, List<MatchRuleParam> parameters = null)
    {
        if (Request.Url != null)
        {
            var query = PaginationQuery.Parse(Request.QueryString);
            var upperLimit = query.FromUpper;
            var lowerLimit = query.FromLower;
            var dataSource = new MatchDataSource();
            var results = dataSource.ExecuteTestRule(ruleId, ruleSql, parameters, upperLimit, lowerLimit).Select(k => new { KEY = k });
            var response = new Dictionary<string, object>();
            response["result"] = results;
            response["rowCount"] = MatchDataSource.GetRowCount(ruleId, ruleSql, parameters);

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

When I try to put a breakpoint in chrome on the url line below, it does not stop in my JavaScript function:

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

            var dataSource = new kendo.data.DataSource({
                data: matchedList.result
            });
            Grids.RuleResultsGrid.setDataSource(dataSource);
            PageState.Selected.ChildKey = null;
            updateButtonStates();
        },
        error: function(e) {
            var errorObject = JSON.parse(e.xhr.responseText);
            var errorMessage = errorObject.Message;

            //clear old error message 
            //TODO: gridWidget.clearErrorMessage("error-message");

            // add new error message
            //TODO: gridWidget.addErrorMessage("error-message", errorMessage);
        },
        pageSize: 10,
        requestEnd: this.onRequestEnd
    });

The code works properly, except that for some reason the kendo grid has "undefined" and "NaN" which I have put red boxes around to highlight in this image:

enter image description here

The error happens as soon as I open the web page. Does anyone have any suggestions as to why I am receiving the TypeError? TIA.

UPDATE:

The "undefined" and "NaN" issue has been resolved, but now I can select various pageSize values, but when I do a grid refresh it is stuck with the value "10." Why is that occurring?

That error is from a Chrome extension, do you have [tinyFilter](https://chrome.google.com/webstore/detail/tinyfilter-reliable-conte/nlfgnnlnfbpcammlnibfkplpnbbbdeli?hl=en) installed? — DavidG, Jul 14 '15 at 16:27
Yes, I removed it, and it got rid of the error. Thank you! But my kendgrid paging still has the "undefined" and "NaN." Do you have any suggestions on how to fix that? — user8128167, Jul 14 '15 at 16:34
The problem we have now is that this question is meaningless. The title now doesn't match the issue you are seeing. — DavidG, Jul 14 '15 at 16:36

score 3 · Accepted Answer · edited May 23 '17 at 12:13

Had to put the pageSize in the data source:

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

            var dataSource = new kendo.data.DataSource({
                pageSize: 10,
                data: matchedList.result
            });
            Grids.RuleResultsGrid.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.RuleResultsGrid.clearErrorMessage("error-message");

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

Found solution here: Pager error in Kendo Grid(Nan-Nan of 1 items)

That said, the paging now does not accept different page sizes, say, of 10, 50, 100 or 500. I can select those values, but it always defaults back to the 10 value in my execRule function. Does anyone have any suggestions as to why that is happening?

UPDATE:

Fixed the problem with paging by updating my binding function to also include pageSize:

function bindRuleResults() {
    PageState.Selected.Old.RuleResult = PageState.Selected.RuleResult;

    var dataSource = new kendo.data.DataSource({
        pageSize: 10,
        data: PageState.Selected.RuleResult
    });
    Grids.RuleResultsGrid.setDataSource(dataSource);
    PageState.Selected.RuleResult = null;
}

Found this to be a useful article: http://www.codeproject.com/Articles/606682/Kendo-Grid-In-Action

If you found another question with an answer, then either delete this question or mark as duplicate. — DavidG, Jul 14 '15 at 17:28

KendoGrid paging has "undefined" and "NaN"

1 Answers1