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

javascript, jquery, kendo-grid

Solution

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

Problem

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?

Original source