Virtual scrolling filter

1 Answer 41 Views
Filter Grid
emmanuel
Top achievements
Rank 1
emmanuel asked on 20 Oct 2023, 06:30 PM

I have the following kendo grid configuration,

backend service response scheme is correct, but doesnt work the virtual filter. I can't do virtual scrolling

var gridDefinition = {
    model: {
        id: "Id",
        fields: {
            Id: { type: "string" },
            Customer: { type: "string", editable: false },
            //other fields...              
        }
    },
    columns:[
        {
            field: "Customer",
            title: JsonModel.Resources.SAPCustomer,
            filterable: {
                multi: true,
                search: true,
                itemTemplate: function (e) {
                    var customers = $scope.customers || []; 
                    var itemsHtml = "";

                    for (var i = 0; i < customers.length; i++) {
                        var customer = customers[i];
                        itemsHtml += "<li class='k-item'><label class='k-label'><input type='checkbox' name='" + e.field + "' value='" + customer.Id + "'/><span>" + (customer.Description || customer.all) + "</span></label></li>";                                
                    }
                    return itemsHtml;
                }, 
                height: 220,
                virtual: {
                    itemHeight: 26,
                },
                dataSource: {
                    transport: {
                        read: {
                            url: JsonModel.Urls.ListIndexFilterUnique2,
                            type: "POST",
                            dataType: "json",
                            data: function () {
                                return {
                                    ColumnFilter: 'Customer'
                                };
                            }
                        }
                    },
                    requestEnd: function (e) {
                        if (e.type == "read" && e.response) {
                            if ($scope.customers) {
                                $scope.customers = $scope.customers.concat(e.response.customer);
                            } else {
                                $scope.customers = e.response.customer;
                            }
                        }

                    },
                    schema: {
                        data: "model",
                        total: "Total",
                        model: {
                            data: {
                                Id: { type: "string" },
                                Description: { type: "string" }
                            }
                        }
                    },
                    pageSize: 10,
                    serverPaging: true,
                    serverFiltering: true
                },
            },
            headerAttributes: { "class": "kendoui-column-header" }
        },//other columns

                        

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 25 Oct 2023, 12:21 PM

Hello, Emmanuel,

If you wish to enable the virtual scrolling in the Grid, you need to set the scrollable.virtual option to true as it is disabled by default. Please refer to the Virtual Scrolling demo.

Let me know if I am missing something from the issue.

Regards,
Martin
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Tags
Filter Grid
Asked by
emmanuel
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or