4

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.

Badhon Jain
  • 938
  • 6
  • 20
  • 38
  • You need to define CRUD operations Create,Update,Destroy in the Grid in order to work with Add,Edit,Destroy buttons on grid.. – Shazhad Ilyas Apr 29 '14 at 10:57
  • 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 Apr 29 '14 at 11:12
  • i can't see create operation of your parent grid either...you are only reading it... – Shazhad Ilyas Apr 29 '14 at 11:19
  • 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 Apr 30 '14 at 11:48
  • I saw the problem is with the filter option in detail grid, if I omit that statement, then I can create new row, but then the child records are not filtering as their master one. – Badhon Jain May 21 '14 at 03:58
  • @Jain where is your working demo? – Just code May 22 '14 at 05:02
  • Well, the problem has changed now, after adding serversorting, serverfiltering & serverpaging, Now I can create new rows under the existing parent rows. but when I'm creating new parent row, can't create child row under that parent row. here is the link to working demo. http://jsbin.com/curawozu/2/edit – Badhon Jain May 23 '14 at 07:52
  • I know this post is old, but have you ever resolve this? how? regards – Japa Feb 23 '16 at 14:20
  • 1
    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 Feb 24 '16 at 03:03

1 Answers1

0

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

Mateen
  • 1,631
  • 1
  • 23
  • 27