Enable paging in the Grid

5 posts, 0 answers
  1. Juha
    Juha avatar
    3 posts
    Member since:
    Sep 2017

    Posted 06 Oct 2017 Link to this post

    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"))
        )
  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2470 posts

    Posted 10 Oct 2017 Link to this post

    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.
  3. Juha
    Juha avatar
    3 posts
    Member since:
    Sep 2017

    Posted 10 Oct 2017 in reply to Viktor Tachev Link to this post

    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. 

    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?

  4. Juha
    Juha avatar
    3 posts
    Member since:
    Sep 2017

    Posted 10 Oct 2017 Link to this post

    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. 
  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2470 posts

    Posted 12 Oct 2017 Link to this post

    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.
Back to Top