Kendo Ui Grid Serverside Paging

8 posts, 0 answers
  1. Sitaramaiah
    Sitaramaiah avatar
    2 posts
    Member since:
    Feb 2016

    Posted 08 Mar 2016 Link to this post

    Hi,

    I want to use server side paging for grid in my project. I was unable to achieve that. Could you provide any working sample of code. Below is my code.

     

     @{Html.Kendo().Grid<ViewModels.GridModel>()
                                                                .Name("grdTasks")
                                                                .Columns(columns =>
                                                                {
                                                                columns.Bound(o => o.ActionItemId)
                                                                        .Hidden(true);

                                                                columns.Bound(o => o.StudyNo)
                                                                    .Title(@Html.GetResourceValue("DashboardWidget.TaskTracking", "AI_UI_Label_ActionItemStudy")
                                                                    .ToHtmlString())
                                                                    .Width(75)
                                                                    .HtmlAttributes(new { @class = "gridRowLeftAligned", style = "color:black;" })
                                                                    .HeaderHtmlAttributes(new { @class = "gridHeaderRow", style = "border:none; font-family:Arial text-align:left;font-size: 12px; " })
                                                                    .Filterable(false)
                                                                    .Sortable(true);

                                                                columns.Bound(o => o.SiteName)
                                                                    .Title(@Html.GetResourceValue("DashboardWidget.TaskTracking", "AI_UI_Label_ActionItemSite")
                                                                    .ToHtmlString())
                                                                    .Width(95)
                                                                    .HtmlAttributes(new { @class = "gridRowLeftAligned" ,style = "color:black;" })
                                                                    .HeaderHtmlAttributes(new { @class = "gridHeaderRow", style = "border:none;font-family:Arial;text-align:left;font-size: 12px; " })
                                                                    .Filterable(false)
                                                                    .Sortable(true);

                                                                columns.Bound(o => o.AssignedToName)
                                                                        .Title(@Html.GetResourceValue("DashboardWidget.TaskTracking", "AI_UI_Label_ActionItemAssignedto")
                                                                        .ToHtmlString())
                                                                        .Width(85)
                                                                        .HtmlAttributes(new { @class = "gridRowLeftAligned", style = "color:black;" })
                                                                        .HeaderHtmlAttributes(new { @class = "gridHeaderRow", style = "border:none; font-family:Arial;text-align:left;font-size: 12px; " })
                                                                        .Filterable(false)
                                                                        .Sortable(true);
                                                            })
                                                                                              .NoRecords(@<text>Loading...</text>)
                                                                                                .DataSource(dataSource => dataSource.Ajax()
                                                                                                  .Read(read => read.Action("GrdActionListAjaxBindingKendo", "ActionItem", new { filterKey = (string)ViewData["filterKey"] }))
                                                                                                  .Model(model => model.Id(site => site.StudyId))
                                                                                                  .PageSize((int)ViewData["pageSize"])
                                                                                                  .Total((int)ViewData["totalRecords"])
                                                                                                  .ServerOperation(true)
                                                                                              )
                                                                                              .EnableCustomBinding(true)
                                                                                              .Events(events=>events.DataBound("Tasks_OnDataBound"))
                                                                                              .Sortable()
                                                                                              .Scrollable()
                                                                                              .HtmlAttributes(new { style = "font-size:10px; font-weight:bold; font-family:Arial; width:100%;" })
                                                                                              .Pageable(page => page.Enabled(true).PageSizes(new Int32[] { 20, 30, 50, 100 }))
                                                                                              .Render();

     

    Here datais binding properly only for the first time. But based on Total records grid has to display paging info. It is not doing that.

    Could you help me.

  2. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 09 Mar 2016 Link to this post

    Hello,

    You can refer to the code library below for an example implementation of server operations and ASP.NET MVC:
    http://www.telerik.com/support/code-library/grid-bound-to-asp-net-mvc-action-methods---crud-operations

    Regards,
    Pavlina
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Sitaramaiah
    Sitaramaiah avatar
    2 posts
    Member since:
    Feb 2016

    Posted 09 Mar 2016 in reply to Pavlina Link to this post

    Hi Pavlina,

    Could you provide any working example using MVC5.

  4. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 11 Mar 2016 Link to this post

    Hi,

    The same code should run without problems on MVC5. Therefore I suggest you use the same implementation and in case you encounter any problems after you create your MVC5 project send it to us and we will look at it right away.

    Regards,
    Pavlina
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Eliel
    Eliel avatar
    7 posts
    Member since:
    Nov 2018

    Posted 27 Mar Link to this post

    It is not possible to use Razor helpers to do Server Side Paging?
  6. Aleksandar
    Admin
    Aleksandar avatar
    117 posts

    Posted 31 Mar Link to this post

    Hi Eliel,

    Go I understand correctly that you need to configure the Grid with Tag helpers? If that is the case you could configure the Grid's DataSource for server-side paging, filtering etc. using the server- configuration option. For server-side implementation you can refer to the previously provided example:

    <kendo-grid name="grid" height="550">
    //additional configuration options
        <datasource type="DataSourceTagHelperType.Ajax" 
                    page-size="20"
                    server-operation="true"
                    server-paging="true"
                    server-filtering="true"
                    server-aggregates="true"
                    server-grouping="true"
                    server-sorting="true">
            <transport>
                <read url="@Url.Action("Orders_Read", "Grid")" />
            </transport>
        </datasource>
    </kendo-grid>

    Regards,
    Aleksandar
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  7. Eliel
    Eliel avatar
    7 posts
    Member since:
    Nov 2018

    Posted 31 Mar in reply to Aleksandar Link to this post

    Hi Aleksandar,

    Thanks for the response, maybe I use incorrect the terms, I was wondering about Razor Tags, but I found out that it is not possible, it requires a different configuration and I manage to made it work with something like:
    @(Html.Kendo().Grid<MyViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
    columns.Bound(c => c.Name).Width(200);
    })
    .DataSource(dataSource => dataSource
    .Ajax()
    .ServerOperation(true)
    .Read(read => read.Action("Operation_Read").Data("forgeryToken"))
    ))

  8. Aleksandar
    Admin
    Aleksandar avatar
    117 posts

    Posted 02 Apr Link to this post

    Hello Eliel,

    The approach shown in the provided code snippet would be the correct approach, as demonstrated in the Paging section of the documentation. To enable paging you need to add Pageable() configuration option. The .ServerOperation() configuration default value is true, it might not be configured explicitly:

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
          .Name("Grid")  
          ...         
          .Pageable()
          .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(15)
                ...
          )
    )

     

    Regards,
    Aleksandar
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top