虚拟滚动无法使用kendo网格 [英] Virtual Scroll is not working with kendo grid

问题描述

我正在使用kendo网格。我想显示超过40000条记录。

Json不支持那么多数据，所以我不能使用分页。

所以我决定使用虚拟滚动条。但它不起作用。

下面是代码。

任何人都可以帮我解决错误。

Hi,

I am working with kendo grid. I want to show more than 40000 records.
Json is not supporting that much data, so i can not use paging.
So i decided to user virtual scroll bar. But it is not working.
Below is the code.
Can any one help me what is wrong.

$(document).ready(function () {
        
        $("#divReports").kendoGrid({
            
            dataSource: {
                type: "json",
                transport: {
                    read: '/Report/GetReportData'
                },
            },
            
            height: 650,
            scrollable: {
                virtual: true
            },            
            groupable: true,
            resizable: true,
            sortable: true,
            serverPaging: true,
            serverSorting: true,
            pageSize: 50,
            batch: false,
            
            columns: [{
                field: "PatientFirstName",
                title: "Patient First Name", width: 100, filterable: false
            }, {
                field: "PatientLastName",
                title: "Patient Last Name", width: 100, filterable: false
            }, {
                field: "Cost",
                title: "Cost", width: 50, filterable: false
            }, {
                field: "PatientPayAmount",
                title: "Patient PayAmount", width: 120, filterable: false
            }]
        });
    });

推荐答案

（ document ）。ready（ function （）{

(document).ready(function () {

（ #divReports）。kendoGrid（{

dataSource：{
type： json，
transport： {
读取：' / Report / GetReportData'
}，
}，

高度： 650 ，
可滚动：{
virtual： true
}，
groupable： true ，
可调整大小： true ，
sortable： true ，
serverPaging： true ，
serverSorting： true ，
pageSize： 50 ，
批次： false ，

列：[{
字段： PatientFirstName，
title： 患者名字，宽度： 100 ，可过滤： false
}，{
字段： PatientLastName，
title： 患者姓氏 ，width： 100 ，可过滤： false
}，{
字段：< span class =code-string> Cost，
title： 成本，宽度： 50 ，可过滤： false
}，{
字段： PatientPayAmount，
title： Patient PayAmount，width： 120 ，可过滤： false
}]
}）;
}）;

("#divReports").kendoGrid({ dataSource: { type: "json", transport: { read: '/Report/GetReportData' }, }, height: 650, scrollable: { virtual: true }, groupable: true, resizable: true, sortable: true, serverPaging: true, serverSorting: true, pageSize: 50, batch: false, columns: [{ field: "PatientFirstName", title: "Patient First Name", width: 100, filterable: false }, { field: "PatientLastName", title: "Patient Last Name", width: 100, filterable: false }, { field: "Cost", title: "Cost", width: 50, filterable: false }, { field: "PatientPayAmount", title: "Patient PayAmount", width: 120, filterable: false }] }); });

这篇关于虚拟滚动无法使用kendo网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！