Pager error in Kendo Grid(Nan-Nan of 1 items)

Question

I am trying to create a Kendo grid with a list of student details. On click of the add button, the pager shows \"Nan-Nan of 1 items\".

@(Html.Kendo().Grid<         


        

Answer 1

I made it work like below: specifying the pagesize inside the datasource fixed my problem (Nan-Nan of 1 items)

< script type = "text/javascript" >

  $(document).ready(function() {

    var modelData = @Html.Raw(Json.Encode(Model));

    $("#grid").kendoGrid({

      reorderable: true,
      pageable: {
        input: true,
        numeric: false
      },
      scrollable: true,
      sortable: true,
      dataSource: {
        data: modelData,
        pageSize: 10 // specifying the pagesize inside the datasource fixed my problem (Nan-Nan of 1 items)
      },
      columns: [{
        field: "fieldparameter",
        title: "titleparameter",
        filterable: true,
        sortable: true
      }]
    });
  }); < /script>

Answer 2

Remove .PageSize(5) from @(Html.Kendo().Grid() Add pageSize: 5 in var studentdetail = new kendo.data.DataSource({

Answer 3

As the others said, you need to assign the pageSize property. The same if you need to re-assign the data source:

var dataSource = new kendo.data.DataSource({
   data: gridData,
   pageSize: 15 // this property
});
var grid = $('#grid').data('kendoGrid');
grid.setDataSource(dataSource);

Answer 4

For some reason, simply adding pageSize to my datasource was not working for me.

I solved this problem by setting my initial grid page to 1, and my pageSize is also defined in my datasource:

                    var grid = $("#grid").data("kendoGrid");
                    var dataSource = new kendo.data.DataSource({ data: response.data });
                    grid.setDataSource(dataSource);
                    grid.dataSource.page(1); // need so that Nan - Nan is not the starting page.
                    grid.dataSource.read();

Answer 5

You need to define the pageSize in the grid data source. Not in the success function.

In your case you only need to include in your data source the following:

 $.ajax({
                url: '../Student/GetStudentDetails?StudentId=' + Data.StudentId,
                type: 'POST',
                contentType: 'application/json',
                dataType: 'json',
                pageSize: 10,
                success: function (data) {...

I hope this helps. More information at: Sudarsan Dash'blogs

Answer 6

This is what you need to resolve the issue. Works like a dream!

<script>
    $(document).ready(function () {

        $("#grid").kendoGrid({

            dataSource: {
                pageSize: 10
            },

        });
    });
</script>