Остановить развал detailInit при добавлении новой строки в сетку? - PullRequest
Новая
       10

Остановить развал detailInit при добавлении новой строки в сетку?

0 голосов
/ 01 июля 2018

У меня есть сетка, которая имеет сетку в detailInit, и когда я добавляю новую строку в сетку в detailInit, detailInit разрушается.

Как я могу остановить его падение при добавлении новой записи? Я пытался использовать e.preventDefault () для события нажатия кнопки добавления новой строки, но это не сработало.

1 Ответ

0 голосов
/ 25 ноября 2018

Вы не можете предотвратить его свертывание, потому что каждый раз, когда вы что-то изменяете в данных, оно автоматически перепривязывает и перерисовывает таблицу.

Однако вы можете захватить повторную привязку, найти открытые детали и после завершения привязки снова открыть их: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
</head>
<body>

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

    <script>
        let data = [{id: 1, FirstName: "Nancy", LastName: "Davolio", orders: [{title: 1}, {title: 2}]}];

        $(document).ready(function () {
            let expanded = [];

            var element = $("#grid").kendoGrid({
                dataSource: data,
                toolbar: [{name: "create"}],
                height: 600,
                detailInit: detailInit,
                editable: true,
                columns: [
                    {
                        field: "id",
                        title: "id",
                    },
                    {
                        field: "FirstName",
                        title: "First Name",
                        width: "110px"
                    },
                    {
                        field: "LastName",
                        title: "Last Name",
                        width: "110px"
                    },
                    {command: ["destroy"]},
                ],
                dataBinding: function (e) {
                    expanded = $.map(this.tbody.children(":has(> .k-hierarchy-cell .k-i-collapse)"), function (row) {
                        return $(row).data("uid");
                    });
                },
                dataBound: function (e) {
                    this.expandRow(this.tbody.children().filter(function (idx, row) {
                        return $.inArray($(row).data("uid"), expanded) >= 0;
                    }));
                },
            });

        });

        function detailInit(e) {
            $("<div/>").appendTo(e.detailCell).kendoGrid({
                dataSource: {
                    transport: {
                        read: function (options) {
                            options.success(e.data.orders);
                        },
                    }
                },
            });
        }
    </script>
</div>
</body>
</html>
...