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<Student.Models.StudentDetails>()
            .Name("StudentDetailsGrid")
             .Pageable()
                 .HtmlAttributes(new { id="StudentDetailsGrid"})
            .Columns(col =>
                {col.Bound(a => a.FirstName).Title("Name");

                    col.Bound(a => a.LastName).Hidden()
                    col.Bound(a => a.StudentID).Hidden();
                    col.Command(a => { a.Destroy(); a.Edit(); }).Title("");
                }
            )
            .ToolBar(toolbar => toolbar.Create().Text("Add").HtmlAttributes(new {@id="btnCreateStudent"}))
            .Editable(editable => editable.Mode(GridEditMode.InLine))
                .Scrollable(scrol => scrol.Enabled(true))

            .DataSource(source => source
                .Ajax()
                .PageSize(5)

                .Model(a =>
                {
                    a.Id(b => b.StudentID);


                })

             .Read(read => read.Action()
             .Create(create => create.Action())
             .Destroy(destroy => destroy.Action())
             .Update(update => update.Action())


           ).Events(even => even.Save("SaveDetails").Edit("ChangeNoOfStudent").DataBound("StudentValidate")))

`

on Document.ready function :

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

                    if (data.length > 0) {


                        var studentdetail = new kendo.data.DataSource({
                            data: data,
                            pageSize: 5

                        });
                        $("#StudentDetailsGrid").data("kendoGrid").setDataSource(studentdetail);

                    }

I have added the page size, but I can still see the "Nan-Nan of 1 items".

Can you please help?

Answer 1

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

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

        $("#grid").kendoGrid({

            dataSource: {
                pageSize: 10
            },

        });
    });
</script>

Answer 2

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 3

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 4

Add pageSize:5 inside of dataSource:{ } as,

         dataSource: {
            pageSize: 5
         }

if you put pageSize: 5 outside of dataSource:{ } you will get that error "Nan-Nan"

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

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