Add New Record button not working in kendo hierarchical grid

问题

I'm trying to add new row to the detail grid of the kendo hierarchical grid, but the Add new record button not working. However if I omit the filter option in detail grid definition, then the button works, but with filtering off, I can't separate the child rows according to the master row.

I'm adding an image to describe the problem.

Here is my code for the hierarchical grid:

 var element = $("#grid").kendoGrid({
            dataSource: {
                type: "JSON",
                transport: {
                    read: {
                        url: "/Home/Read",
                        type: "GET"
                    }
                },
                pageSize: 6

            },
            height: 700,
            sortable: true,
            pageable: true,
            selectable: 'row',
            navigatable: true,
            editable: true,
            toolbar: ["create", "save", "cancel"],
            batch: true,
            detailInit: detailInit,
            dataBound: function () {
                this.expandRow(this.tbody.find("tr.k-master-row").first());
            },
            columns: [
                {
                    field: "EmployeeID",
                    title: "Employee ID",
                    width: "50px"
                },
                {
                    field: "EmployeeName",
                    title: "Employee Name",
                    width: "50px"
                }

            ]
        });

        function detailInit(e) {
            $('<div id="childGrid"></div>').appendTo(e.detailCell).kendoGrid({
                dataSource: {
                    type: "JSON",
                    transport: {
                        read: {
                            url: "/Home/Details",
                            type: "POST"
                        }
                    },

                    pageSize: 5,
                    filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
                },
                scrollable: false,
                dataBound: function () {
                    this.expandRow(this.tbody.find("tr.k-master-row").first());
                },
                //sortable: true,
                pageable: true,
                selectable: 'row',
                editable: true,
                toolbar: ["create"],
                editable: true,
                batch: true,
                columns: [
                    { field: "Department", title: "Department", width: "30px" },
                    { field: "Designation", title: "Designation", width: "30px" }

                ]
            });

Please help me to sort it out. Thanks in advance.

回答1:

i give a simpler suggestion get the html row which you want the append from its previous row as below

'var row = $("previous row selectore").html();'

then append this row to the table

$("table").append(row);

after then change the id if you have any

来源：https://stackoverflow.com/questions/23355784/add-new-record-button-not-working-in-kendo-hierarchical-grid