Kendo网格行选择客户端持久性问题

Question

We have selections persisting, maybe just a bit too much. 我们的选择还在持续，也许只是太多了。 :D ：d

For example, if you have a multipage kendo grid with client side data, do this with a client side kendo grid: 例如，如果您有一个包含客户端数据的多页面剑道网格，请使用客户端剑道网格来执行此操作：

Select a row on Page 1 在第1页上选择一行
Go to Page 2 转到第2页
Select a row on Page 2 THEN deselect it and select another row 在第2页上选择一行，然后取消选择它并选择另一行
Go back to Page 1 (row selection persists) 返回第1页（行选择仍然存在）
Go back to Page 2 返回第2页

Row selection persists, but also the row that was previously deselected is also selected. 行选择仍然存在，但也会选择先前取消选择的行。

Is there a solution to this? 有针对这个的解决方法吗？ Something we can use in the change event: 我们可以在change事件中使用的东西：

http://dojo.telerik.com/@crunchfactory/uhEZe/7 http://dojo.telerik.com/@crunchfactory/uhEZe/7

Thank you, 谢谢，

j Ĵ

Answer 1

Please try with the below code snippet. 请尝试使用以下代码段。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.material.min.css" />

    <script src="https://kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
    <script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>

    <div id="example">
        <div id="grid"></div>

        <script>
            $(document).ready(function () {

                var selectedOrders = [];
                var idField = "ProductID";


                $("#grid").kendoGrid({
                    dataSource: {
                        data: products,
                        schema: {
                            model: {
                                fields: {
                                    ProductName: { type: "string" },
                                    UnitPrice: { type: "number" },
                                    UnitsInStock: { type: "number" },
                                    Discontinued: { type: "boolean" }
                                }
                            }
                        },
                        pageSize: 20
                    },
                    height: 550,
                    scrollable: true,
                    sortable: true,
                    selectable: "multiple, row",
                    pageable: {
                        input: true,
                        numeric: false
                    },
                    columns: [
                        "ProductName",
                        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                        { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
                        { field: "Discontinued", width: "130px" }
                    ],
                    change: function (e, args) {
                        var grid = e.sender;
                        var items = grid.items();
                        items.each(function (idx, row) {
                            var idValue = grid.dataItem(row).get(idField);
                            if (row.className.indexOf("k-state-selected") >= 0) {
                                selectedOrders[idValue] = true;
                            } else if (selectedOrders[idValue]) {
                                delete selectedOrders[idValue];
                            }
                        });
                    },
                    dataBound: function (e) {
                        var grid = e.sender;
                        var items = grid.items();
                        var itemsToSelect = [];
                        items.each(function (idx, row) {
                            var dataItem = grid.dataItem(row);
                            if (selectedOrders[dataItem[idField]]) {
                                itemsToSelect.push(row);
                            }
                        });

                        e.sender.select(itemsToSelect);
                    }
                });
            });
        </script>
    </div>


</body>
</html>

Let me know if any concern. 让我知道是否有任何问题。

Kendo网格行选择客户端持久性问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-10-03 15:47:09

Kendo网格行选择客户端持久性问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-10-03 15:47:09

解决方案1
1 已采纳 2015-10-03 15:47:09