The Add New Record button does not work in the kendo hierarchy

Question

I am trying to add a new row to the details grid of the hierarchical kendo hierarchy, but the Add New Record button does not work. However, if I omit the filter parameter in the detailed grid definition, then the button works, but when filtering, I cannot separate the child lines according to the main line.

I am adding an image to describe the problem.

Here is my hierarchical grid code:

 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 sort it out. Thanks in advance.

Answer 1

html,

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

$( "" ) ();.

,