Add New Record button not working in kendo hierarchical grid

4
votes

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. enter image description here

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
jquerykendo-uitelerikkendo-gridtelerik-grid
You need to define CRUD operations Create,Update,Destroy in the Grid in order to work with Add,Edit,Destroy buttons on grid.. – Shaz
is that an absolute requirement? I don't think so, coz my parent grid working fine without that. The button also works in my child grid, when I'm creating new row, but not with the existing row. – Badhon Jain
i can't see create operation of your parent grid either...you are only reading it... – Shaz
The rows marked as new were created by using the add new record button, it worked for the parent & child grid. but the button only not working in child grid with existing rows. – Badhon Jain
No, I didn't use this grid, instead I used two separate grids one for the master data & the other for the child data, I loaded the child grid dynamically upon row click of master grid. – Badhon Jain

1 Answers

0
votes

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