Kendo Ui Grid Serverside Paging

[Sitaramaiah]

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.

[Pavlina]

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

[Sitaramaiah]

Hi Pavlina,

Could you provide any working example using MVC5.

[Pavlina]

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

[Eliel]

It is not possible to use Razor helpers to do Server Side Paging?

[Aleksandar]

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

[Eliel]

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

[Aleksandar]

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