Question

我正在使用kendo ui v.2013.1.514，但是当我使用网格小部件时遇到了一个非常可怕的错误。

正如您所见，我将虚拟滚动选项设置为“true”，页面大小为25.使用addRow函数向网格添加新行后，每次向下滚动时，Web浏览器都会崩溃网格。这真的很糟糕，因为我需要虚拟化，我也需要在网格中添加一些新记录。我在下面粘贴了一些测试代码，希望这可以提供一些帮助。

顺便说一下，我测试你的本地演示'virtualization-local-data.html'，都是一样的。似乎代码只是在DataSource小部件的'range'函数中运行循环。

<script>
$(function() {
    var arrayDataSource = [];
    for (var i = 0; i < 1000; i++) {
        arrayDataSource.push({ 
            check: true, 
            ip: "10.1.201.3"
        });
    }

    $('#grid').kendoGrid({
        height: 600,
        dataSource: {
            data: arrayDataSource,
            schema: {
                model: {
                    fields: {
                        check: { type: 'boolean' },
                        ip: { type: 'string' }
                    }
                }
            },
            pageSize: 25
        },
        columns: ['check', 'ip'],
        editable: false,
        scrollable: {
            virtual: true
        }
    });

    $('#add').click(function() {
        $('#grid').data('kendoGrid').addRow();
    });
});
</script>
</head>
<body>
    <div id="grid"></div>
    <button id="add">add</button>
</body>
</html>

Answer 1

运行相同的问题，没有在互联网上找到任何解决方法，所以在挖掘了剑道源后发现似乎有效的解决方法，但只有完整的数据源刷新

所以，场景是下一个：

将项目添加到数据阵列
设置grid.dataSource._skip = 0;
刷新dataSource like grid.dataSource.data(data);
像$("#grid .k-scrollbar-vertical").scrollTop(0);

我更新了小提琴：http://jsfiddle.net/rDPBu/7/

<button id="add">addRow - not working</button>
<button id="add-top">add top</button>
<button id="add-bottom">add bottom</button>
<div id="grid"></div>

var data = [];
for(var i = 0; i < 100; i++) {
    data.push({
        check: i + 1,
        ip: '10.1.201.3'
    });
}

var grid = $('#grid').kendoGrid({
    height: 300,
    dataSource: {
        data: data,
        pageSize: 10,
        schema: {
            model: {
                id: "check",
                ip: "ip"
            }
        }
    },
   columns: [
               { field: "check" },
               { field: "ip" }
              ],
   editable: true,
     scrollable: {
            virtual: true
        }
}).data('kendoGrid');

var scroller = $("#grid .k-scrollbar-vertical");

$('#add').click(function () {
    grid.addRow();
});

$('#add-top').click(function () {
    data.splice(0,0,{check: 0, ip: '1.1.1.1'});
    grid.dataSource._skip = 0; // fix databind
    grid.dataSource.data(data);
    scroller.scrollTop(0); // should refresh scroll
});

$('#add-bottom').click(function () {
    data.push({check: 999, ip: '9.9.9.9'});
    grid.dataSource._skip = 0; // fix databind
    grid.dataSource.data(data);
    scroller.scrollTop(scroller.prop("scrollHeight")); // should refresh scroll
});

Answer 2

尝试建立这个小提琴：http://jsfiddle.net/vojtiik/rDPBu/3/

var grid = $('#grid').kendoGrid({
    height: 300,
    dataSource: {
        data: [
               {check: 1,ip: "10.1.201.3"},
               {check: 2,ip: "10.1.201.3"},
               {check: 3,ip: "10.1.201.3"},
               {check: 4,ip: "10.1.201.3"},
               {check: 5,ip: "10.1.201.3"},
               {check: 6,ip: "10.1.201.3"},
               {check: 7,ip: "10.1.201.3"},
               {check: 8,ip: "10.1.201.3"}
              ],
        schema: {
            model: {
                id: "check",
                ip: "ip"
            }
        }
    },
   columns: [
               { field: "check" },
               { field: "ip" }
              ],
   editable: true,
     scrollable: {
            virtual: true
        }
}).data('kendoGrid');

$('#add').click(function () {
    grid.addRow();
});

编辑：

来自剑道支持的答案：

在启用虚拟滚动的情况下向网格添加新元素不是受支持的设置。请记住，您始终可以在我们的反馈论坛中提交，因此我们将来的版本可以将其考虑在内。

添加新行后滚动虚拟化网格时，Web浏览器崩溃

2 个答案: