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?

I've had this problem before, you probably need to define a DataSource _model_ in "studentdetail" — gitsitgo, May 30 '14 at 05:20

score 30 · Accepted Answer · edited Aug 15 '21 at 11:07

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

Kishore · Answer 2 · 2015-11-03T05:43:49.920

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>

score 4 · Answer 3 · edited Feb 25 '16 at 07:13

4

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

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

        $("#grid").kendoGrid({

            dataSource: {
                pageSize: 10
            },

        });
    });
</script>

edited Feb 25 '16 at 07:13

Jörn Buitink

2,906
2
22
33

answered Feb 25 '16 at 07:07

Majase

91
9

score 3 · Answer 4 · edited Aug 15 '21 at 09:44

3

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

edited Aug 15 '21 at 09:44

İsmail Y.

3,579
5
21
29

answered Apr 01 '17 at 07:07

Gurusinghe

512
5
12

Was the case for me. Thanks! – mike123 Jan 30 '20 at 16:35

score 0 · Answer 5 · answered Jan 08 '15 at 11:57

0

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

answered Jan 08 '15 at 11:57

kunal

11

Please use code tags and also include an explanations to your answer – Matt Jan 08 '15 at 12:16
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 – kunal Jan 08 '15 at 12:45

score 0 · Answer 6 · edited Aug 15 '21 at 10:54

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();

score 0 · Answer 7 · answered Jun 03 '20 at 20:48

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

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

7 Answers7

Linked

Related