kendo grid delete row in hierarchy grid

Question

I want to delete row in hierarchy grid of kendo grid. Can any one show me example.

One more thing, jQuery is not targeting the elements with id/class that exist in hierarchy grid. jQuery can target elements exists in main kendo grid but can not target/capture elements inside hierarchy grid with id/class.

Answer 1

To delete row from kendo grid add command "destroy" and editable "inline/popup". It works for hierarchy grid also. Small demo:

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

        <script>
            $(document).ready(function() {
                var element = $("#grid").kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                        },
                        pageSize: 6,
                        serverPaging: true,
                        serverSorting: true
                    },
                    height: 600,
                    sortable: true,
                    pageable: true,
                    detailInit: detailInit,
                    dataBound: function() {
                        this.expandRow(this.tbody.find("tr.k-master-row").first());
                    },
                    columns: [
                        {
                            field: "FirstName",
                            title: "First Name",
                            width: "110px"
                        },
                        {
                            field: "LastName",
                            title: "Last Name",
                            width: "110px"
                        },
                        {
                            field: "Country",
                            width: "110px"
                        },
                        {
                            field: "City",
                            width: "110px"
                        },
                        {
                            field: "Title"
                        }
                    ]
                });
            });

            function detailInit(e) {
                $("<div/>").appendTo(e.detailCell).kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                        },
                        serverPaging: true,
                        serverSorting: true,
                        serverFiltering: true,
                        pageSize: 10,
                        filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
                    },
                    scrollable: false,
                    sortable: true,
                    pageable: true,
                    columns: [
                        { field: "OrderID", width: "70px" },
                        { field: "ShipCountry", title:"Ship Country", width: "110px" },
                        { field: "ShipAddress", title:"Ship Address" },
                        { field: "ShipName", title: "Ship Name", width: "300px" },

                        { command: ["destroy"]} // Added the delete command
                    ],
                  editable: "inline" // set edit mode here
                });
            }

The hierarchy grid is defined in "detailInit" function and destroy command is added in the hierarchy grid. Referenced from here with little modification.

Hope this helps!