Enable paging in the Grid

[Juha]

I’m currently testing the Grid control for ASP.NET MVC 5 and I need some help with paging. I’ve managed to get it working with my ASP.NET MVC 5 application at a basic level (data is fetched from a database and displayed in the grid) but the paging is not working (paging buttons are grayed out).

I found the following guide to enable paging but I still can’t make it working:

http://demos.telerik.com/aspnet-core/grid/paging

I mean what does it require to enable paging buttons? My goal is to fetch data, for example, 20 rows at a time (page 1), and when you click on the next button, you'll get the next 20 items (page 2) from the database etc. Is this possible with the Grid?

Here's my code that I'm using to show the grid and fetch the data:

 @(Html.Kendo().Grid<PluTable>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Code);
        columns.Bound(p => p.Description1);
        columns.Bound(p => p.Price);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable(pageable => pageable
      .Input(true)
      .Numeric(true)
      .Info(true)
      .PreviousNext(true)
      .Refresh(true)
      .PageSizes(true)
      .ButtonCount(5))     
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events
        .Error("error_handler")
        )
        .Model(model => model.Id(p => p.Code))
        .Create(update => update.Action("EditingInline_Create", "Grid"))
        .Read(read => read.Action("EditingInline_Read", "Grid"))
        .Update(update => update.Action("EditingInline_Update", "Grid"))
        .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
    )

[Viktor Tachev]

Hi Juha,

I have examined the code and the Grid configuration looks fine to me. Nevertheless, the behavior you describe can be caused by different causes. 

The first option is to have only 20 items in the data source. In that case the pager buttons will be disabled as there are no other pages available in the Grid.

Another possibility is that the response from the server does not contain the total number of items in the data source. In that case the Grid does not know how many items are the pager will show only one available page. Please ensure that the Read Action is defined as the one in the following article and see how the behavior changes. 

• https://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding

Regards,
Viktor Tachev
Progress Telerik

[Juha]

[quote]Viktor Tachev said:Hi Juha,

Another possibility is that the response from the server does not contain the total number of items in the data source. In that case the Grid does not know how many items are the pager will show only one available page. Please ensure that the Read Action is defined as the one in the following article and see how the behavior changes. 

• https://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding

[/quote]

Thanks, I think the main problem here is that I'm not using the Entity framework but DataTables and that's why the total number of items is missing. Is it possible to use datatables or am I forced to use ORM?

[Juha]

I got it working! The main problem was that I wasn’t using the Entity Framework like in your examples but DataTables. After I implemented it via the Entity Framework it started working and now paging works beautifully. 

[Viktor Tachev]

Hello Juha,

I am glad that the functionality is working as expected.

One additional followup - in case you are using DataTable in the application it can be converted to IEnumerable. The thread below describes how this can be implemented. 

• https://stackoverflow.com/questions/3392612/convert-datatable-to-ienumerablet

When the data is converted to IEnumerable ToDataSourceResult can be called for it and then returned by the Read ActionMethod.



Regards,
Viktor Tachev
Progress Telerik