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

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 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>