Question

我正面临在kendo ui网格中实现延迟加载的问题。我添加了可滚动的虚拟属性和后端服务器端代码来处理它，但问题是在添加可滚动属性之后我无法在网格中看到滚动条。即使选定的行（20页大小）也会从网格底部消失到隐藏的溢出区域。

这是我的代码。

var managecustomerGrid = $("#customerGrid").kendoGrid({
    dataSource: {
        schema: {
            data: "results",
            total : "totalRecords",
            model: {
                id: "SRNUMBER",
                fields: {
                    SRNUMBER : {type: 'number'},
                    CUSTOMERNAME : {type: 'string'},
                    DATEPAID : {type: 'string'}
                }
            }
        },
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,
        pageSize: 20,
        batch: false,
        transport: {
            read: {
                type: "POST",
                url: "/customer/customer.cfc",
                dataType: "json",
                error: function (xhr, error) {
                    alert('Error In Getting Customer Information.');
                }
            },
            parameterMap: function(options, type) {
                return {
                    ntPageNumber: options.page,
                    ntRowLimit: options.pageSize,
                    vcSortOrder: JSON.stringify(options.sort),
                    vcFilterCondition: JSON.stringify(options.filter)
                }
            }
        }
    },
    toolbar: kendo.template($("#template").html()),
    height: 600,
    scrollable: {
        virtual: true
    },
    filterable: {
        operators: {
            string: {
                    contains: "Contains",
                    startswith: "Starts with",
                    endswith: "Ends with",
                    eq: "Is equal to",
                    doesnotcontain: "Doesn't contain"
            }
        }
    },
    sortable: true,
    columns: [      
        { field: "SRNUMBER", title: "SR No.", width: "80px", template: "<span id='#=SRNUMBER#'>#=SRNUMBER#</span>"},
        { field: "CUSTOMERNAME", title: "Customer Name", width: "110px"},
        { field: "DATEPAID", title: "Date", width: "110px"},
        { command: ["edit","detail","cancel"], title: "&nbsp;",  title: "Actions", width: "130px", filterable: false, sortable: false}
    ]
});

如果有人发现任何问题，请告诉我。我无法得到它。

Answer 1

剑道网格并不真正支持开箱即用的延迟加载。可能更容易做出一个空白的可滚动网格（没有分页），然后用ajax调用填充数据。您可以使用$ .merge（）将数据附加到数据数组，而对性能几乎没有影响。

$.ajax({
url: '/getNextData',
data: { filter: 'foo', lastLoaded: $("#Grid").data("kendoGrid").dataSource.at($("#Grid").data("kendoGrid").dataSource.total()-1).ID },
dataType: "json",
success: function (newData) {
    $("#Grid").data("kendoGrid").dataSource.data($.merge($("#Grid").data("kendoGrid").dataSource.data(), newData))
},
error: function (e) { console.log(e); }
});

在这个ajax示例中，我根据网格中的当前最后一项和一个过滤器加载下一个数据。我只是将响应附加到当前加载的数据。

Answer 2

我遇到了同样的问题，我的问题是控制器代码。在这里，我发布我的控制器，希望有一天能帮助某人

DEFINED

使用Scrollable进行延迟加载{Virtual：true}无法在Kendo UI Grid中使用

2 个答案: