This is a migrated thread and some comments may be shown as answers.

Enable paging in the Grid

4 Answers 652 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Juha
Top achievements
Rank 1
Juha asked on 06 Oct 2017, 12:45 PM

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

4 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 10 Oct 2017, 10:47 AM
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. 



Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Juha
Top achievements
Rank 1
answered on 10 Oct 2017, 11:39 AM
[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. 

[/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?

0
Juha
Top achievements
Rank 1
answered on 10 Oct 2017, 12:19 PM
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. 
0
Viktor Tachev
Telerik team
answered on 12 Oct 2017, 08:32 AM
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. 


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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Juha
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Juha
Top achievements
Rank 1
Share this question
or