Kendo UI Grid server paging with scroll virtual

[Wu]

I'm working on a mvc project which retrieve data from server and present to client via Kendo UI Grid & OData & Web API. I would like to use virtual scrolling to implement server paging, and I followed the demo virtualization-remote-data, but it did not work for me, here is my client code:

<script>
    $(document).ready(function () {       
        var webApiUrl = gms.App.getApiBaseUrl() + "odata/Containers";

        $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                serverPaging: true,
                serverSorting: true,
                pageSize: 50,
                schema: {
                    data: function (data) {
                        if (data.value) {
                            return data.value;
                        }
                        delete data["odata.metadata"];
                        return [data];
                    },
                    total: function (data) {
                        return data["odata.count"];
                    }
                },
                transport: {
                    read: { url: webApiUrl, dataType: "json" },
                    parameterMap: function (options, type) {
                        // this is optional - if we need to remove any
                        // parameters (due to partial OData support in WebAPI
                        var parameterMap = kendo.data.transports.odata.parameterMap(options);

                        delete parameterMap.$inlinecount;  // remove inlinecount parameter
                        delete parameterMap.$format;       // remove format parameter

                        return parameterMap;
                    }
                }
            },
            //filterable: {mode:"row"},
            //columnMenu: true,
            selectable: "single",
            //reorderable: true,    
            sortable: true,                    
            height: 640,
            scrollable: { virtual: true },
            sortable: true,
            columns: [
                { field: "ContainerId", title: "Container Id" },
                { field: "UtcDt", title: "Utc Date" },
                { field: "TempSetpoint", title: "Temperature °C" },
                { field: "SupplyTemp", title: "Supply °C" },
                { field: "Usda1", title: "Usda1 °C" },
                { field: "Usda2", title: "Usda2 °C" }
            ],
        });
    });
</script>

There was no scrolling bar display when I set the configuration of grid as the code present.

[Alexander Valchev]

Hi Wu,

Your Kendo UI configuration looks OK. I am afraid that the provided information is not sufficient enough in order to determine what exactly goes wrong. Is it possible for you to isolate the case in a sample project with mock data so I can examine it and advise you further?

Thank you in advance for the cooperation.

Regards,
Alexander Valchev
Telerik

 

 

[Wu]

Hi Alex,
Thank you for your support, I created a demo project by using vs2013 which would indicate the issue as I mentioned.
You could be able to download the demo project from link https://drive.google.com/open?id=0B7NJ4FKPwcAyc09YWm5RQ29wNkE&authuser=0

please have a look.

[Alexander Valchev]

Hi Wu,

I believe that the issue is related to the server side implementation - the data is not paged on the server:

public IQueryable<Container> Get()
{
    List<Container> containerList = new List<Container>();
    for (int i = 0; i < 1000; i++)
    {
        containerList.Add(new Container { ContainerId = "ContainerId_" + i.ToString(), ContainerName = "ContainerName_" + i.ToString() });
    }

    return containerList.AsQueryable();
}

Please implement paging on the server and let me know if the problem still persists.

Regards,
Alexander Valchev
Telerik

 

 

[Wu]

Hi Alex,

I am not quite sure what you mean, I looked in to the demo Grid / Virtualization of remote data, it seems that it didn't do the paging from server side. I still got some questions as following:

1. Does scrollable.virtual support paging from server side without next page link and previous page link and ...?
2. If I implement paging from server side, eg. 100 records per page, the grid will display 100 records with scroll bar, then grid will load next page data automatically when I dragging scroll bar down out of the previous range. am I right?

[Wu]

Hi Alex,

I already implemented paging from server side, please download the project from https://drive.google.com/open?id=0B7NJ4FKPwcAybm1VVE1JMXZ4SEk&authuser=0

but the scrolling bar is still disabled. I have no idea what's going on?
Should I change the IQueryable<T> to PageResult<T> for return value or what I supposed to do?

[Alexander Valchev]

Hello Wu,

The issue occurs because the server do not send total amount of records available on the server. The total property of the DataSource is zero which is invalid. Please see the attached screen shot.

Regards,
Alexander Valchev
Telerik