Grid with Virtualization, Grouping, and Local Data

[Lee]

I have a kendo grid utilizing local data (returned in a single api call). I need to virtualize this grid because there are thousands of rows. I also need the grid to be grouped and have group footers. I tried to follow the instructions here but I end up with only 1 group when I add virtualization. I created a Sample Dojo with 500 Items. This is my actual code. I modified the variables in the Dojo to match the sample data available:

   $("#actualsGrid").kendoGrid({
            dataSource: {
                data: actualsData,
                pageSize: 20,
                transport: {
                    read: function (e) {
                        e.success(actualsData);
                    }
                },
                schema: {
                    model: {
                        id: "InvoiceID",
                        fields: {
                            InvoiceID: {
                                type: "number",
                            },
                            Account: {
                                type: "string"
                            }
                        }
                    }
                },
                group: {
                    field: "Account",
                    aggregates: [
                        {
                            field: "Amount",
                            aggregate: "sum"
                        }
                    ]
                }
            },
            columns: [
                {
                    field: "Account",
                    title: "Account",
                    width: 200
                },
                {
                    field: "Date",
                    title: "Accounting Date",
                    width: 100
                },
                {
                    field: "Description",
                    title: "Description",
                    width: 200
                },  
                {
                    field: "Amount",
                    title: "Amount",
                    width: 100,
                    groupFooterTemplate: ({ Amount }) => `${Amount.sum}`
                }
            ],
            height: 300,
            pageSize: 100,
            //scrollable: true,
            scrollable: {
                virtual: true,
                height: "400px",
            },
            pageable: {
                numeric: false,
                previousNext: false,
                messages: {
                    display: "Showing {2} data items"
                }
            },
        });

[Neli]

Hi Lee,

Please note that using grouping and virtual scrolling together is not supported, and this is noted in the Known limitations section:

- Virtual scrolling relies on calculating the average row height based on already loaded data. Having a large variance of row heights or an unknown number of rows that are not bound to data (such as group headers) might cause unexpected behavior.

Here you will find a link to the full article:

- https://docs.telerik.com/kendo-ui/controls/grid/scrolling/virtual-scrolling#known-limitations

I hope this helps.

Regards,

Neli