可滚动 {Virtual:true} 的延迟加载在 Kendo UI Grid 中不起作用答案

【问题标题】：Lazy Load with Scrollable {Virtual:true} not working in Kendo UI Grid可滚动 {Virtual:true} 的延迟加载在 Kendo UI Grid 中不起作用
【发布时间】：2013-12-25 19:49:36
【问题描述】：

我在 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}
    ]
});

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

【问题讨论】：

标签： javascript jquery kendo-ui kendo-grid

【解决方案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 示例中，我根据网格中的当前最后一项和一个过滤器加载下一个数据。我只是将响应附加到当前加载的数据中。

【讨论】：

【解决方案2】：

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

 public JsonResult GetJson(int? projectid,int skip, int take, int pageSize, int page)
    {

        using (sqlCon)
        {
            var myData = sqlCon.Query<Device>("Select  * from workbook.dbo.TargetList", new { projectid = projectid });
            var data = myData .Skip(skip).Take(pageSize).ToList();
            var total = myData .Count();
            var json = new { data = myData };
            var jsonResult = Json(new {data= data, total= total}, JsonRequestBehavior.AllowGet);
            jsonResult.MaxJsonLength = int.MaxValue;
            return jsonResult;
        }

    }

【讨论】：