Kendo Grid - Custom Command to Enable row in Edit

Question

I have a Kendo Grid that uses Inline Editing. Instead of using the standard Edit() command that is available within the Kendo Framework, I would like to have a kendo Custom Command that when clicked it finds the current row and puts that row in edit mode.

This grid also appends a new row to the bottom of the grid.

Note: I am trying to simulate batch editing client side.

Systematix Infotech Systematix Infotech · Accepted Answer · 2014-04-03T05:14:30

Please follow this example :

<body>
    <h1>Kendo Grid</h1>
    <hr />
     <div id="Correspondence"></div>
    <input type="hidden" id="hdnEmployeeId" />
    <script>
        //Parent grid
        $(document).ready(function () {
            var element = $("#Correspondence").kendoGrid({
                dataSource: {
                    data: @Html.Raw(Json.Encode(Model)),
                    editable: { destroy: true },
                    batch: true,
                    pageSize: 5,
                    schema: {
                        model: {
                            id: "EmployeeId",
                            fields: {
                                EmployeeId: { type: "number" },
                                Name: { type: "string" },
                                Gender: { type: "string" },
                                City: { type: "string" }
                            }
                        }
                    }
                },
                height: 430,
                sortable: true,
                pageable: true,
                selectable: true,
                detailInit: detailInit,
                dataBound: function () {
                    this.expandRow(this.tbody.find("tr.k-master-row").first());
                },
                columns:
                        [
                            { field: "EmployeeId", title: "EmployeeId", width: "110px" },
                            { field: "Name", title: "Name", width: "110px" },
                            { field: "Gender",title: "Gender", width: "110px" },
                            { field: "City",title: "City", width: "110px" },

                        ],
                change: function () {
                    //Get the selected row id
                    alert("EmployeeId "+ this.dataItem(this.select()).EmployeeId);

                }   
            });

            //you can expand it programatically using the expandRow like this
            element.on('click', 'tr', function () {
                $(element).data().kendoGrid.expandRow($(this));
            })

            //Child grid
            function detailInit(e) {
                    $("<div/>").appendTo(e.detailCell).kendoGrid({
                    dataSource: {
                        data: @Html.Raw(Json.Encode(Model)),
                        editable: { destroy: true },
                        batch: true,
                        pageSize: 5,
                        schema: {
                            model: {
                                id: "EmployeeId",
                                fields: {
                                    EmployeeId: { type: "number" },
                                    Name: { type: "string" },
                                    Gender: { type: "string" },
                                    City: { type: "string" }
                                }
                            }
                        }
                    },
                    scrollable: false,
                    sortable: false,
                    selectable: true,
                    pageable: true,
                    columns:
                            [
                                { field: "EmployeeId", title: "EmployeeId", width: "110px" },
                            { field: "Name", title: "Name", width: "110px" },
                            { field: "Gender",title: "Gender", width: "110px" },
                            { field: "City",title: "City", width: "110px" },
                            ]
                }).data("kendoGrid");
            }

        }); // end ready




    </script>
</body>

Kendo Grid - Custom Command to Enable row in Edit

1 Answers