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?

Solution 1

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

Solution 2

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>

Solution 3

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

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

        $("#grid").kendoGrid({

            dataSource: {
                pageSize: 10
            },

        });
    });
</script>

Solution 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".

View more solutions

Comments

[Matt]

Please use code tags and also include an explanations to your answer

[kunal]

Kendo Pagesize will consider as NaN when you set it in the Grid and tries to bind it throgh jquery using DataSource. Hence just not assign PageSize in Grid declaration when using jquery datasource. Hope this will help

[mike123]

Was the case for me. Thanks!