Kendo Ui Grid Serverside Paging

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

    Posted 08 Mar 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
    6084 posts

    Posted 09 Mar 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. UI for ASP.NET MVC is VS 2017 Ready
  4. Sitaramaiah
    Sitaramaiah avatar
    2 posts
    Member since:
    Feb 2016

    Posted 09 Mar in reply to Pavlina Link to this post

    Hi Pavlina,

    Could you provide any working example using MVC5.

  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 11 Mar 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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready