0

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

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

顺便说一句，我在您的本地演示“virtualization-local-data.html”上进行了测试，都一样。似乎代码只是在 DataSource 小部件的“范围”函数中运行循环。

<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>
4

2 回答 2

2

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

所以，接下来是场景：

  • 将项目添加到数据数组
  • 放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
});
于 2013-11-06T19:07:34.950 回答
0

尝试在这个小提琴上建立：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();
});

编辑 ：

剑道支持的回答：

不支持在启用虚拟滚动的情况下向网格添加新元素。请记住，您可以随时在我们的反馈论坛中提交它，以便我们在未来的版本中考虑它。

于 2013-07-10T08:41:16.560 回答