Kendo Grid UI - serverPaging issue in asp.net core.

[Santosh]

Hi Team,

 

We follow your example : https://docs.telerik.com/kendo-ui/knowledge-base/retrieve-visible-grid-columns-data-with-select-odata-parameter.

We just replace with our API endpoint and columns fields. Its returns only 20 records first page of records. Rest of the records not showing.

API returns json format.

[
    {
        "workflowId": 48,
        "id": 177,
        "workflowName": "Observations",
    },
    {
        "workflowId": 64,
        "id": 178,
        "workflowName": "IncidentManagement",
    },
    {
        "workflowId": 64,
        "id": 183,
        "workflowName": "IncidentManagement",
    },
    {
        "workflowId": 64,
        "id": 185,
        "workflowName": "IncidentManagement",
    },
]

-----------------------------------------

[Aleksandar]

Hello Santosh,

The provided details are not enough to be sure what is causing the issue. Therefore I modified the Telerik ASP.NET Core Grid oData Binding example with the approach suggested and it works on my end. For details on the backend configuration refer to the GitHub service repository and the equivalent ASP.NET Core Grid configuration is:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(e => e.OrderID).Filterable(false);
        columns.Bound(e => e.Freight);
        columns.Bound(e => e.OrderDate).Width(120).Format("{0:MM/dd/yyyy}");
        columns.Bound(e => e.ShipName).Width(260);
        columns.Bound(e => e.ShipCity).Width(150);
    })
    .DataSource(dataSource => dataSource
        .Custom()
        .Type("odata")
        .Transport(transport =>
           transport.Read(read => read.Url("https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders").Data("additionalData"))
        ) 
        .PageSize(20)
        .ServerPaging(true)
        .ServerSorting(true)
        .ServerFiltering(true)
    )
    .ColumnMenu()
    .Events(ev=>ev.ColumnShow("onColumnShow"))
    .Pageable()
    .Sortable()
    .Filterable()
)
<script>
    function onColumnShow(e){
        e.sender.dataSource.read();
    }
    function additionalData(){
        return {
            $select:getColumns
        }
    }
    function getColumns() {
            return $("#grid").data("kendoGrid")
                .columns
                .filter(item => !item.hidden)
                .map(function(item) {
                    return item.field
                }).join(",");
        }
</script>

Here is a REPL where you can inspect the above. Hide a page from the column menu and navigate to another page. Inspect the Network Tab and note only data for the visible columns is returned.

I hope this helps.

Regards,
Aleksandar
Progress Telerik