Keep Tab Order on Edited Grid Row with Frozen Columns

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product Version	2020.3.1021

Description

How can I keep the focus when I tab through the edited Grid cells when the Grid has its frozen columns enabled?

Solution

The default order in which the browser focuses elements on the page cause the rendering of the frozen (locked) columns in a separate table element. When the Tab key is clicked, the browser moves the focus to the first focusable element in the next table and the buttons are focused first.

To keep the tab order:

1. Handle the dataBound event of the Grid.
2. Get the reference of all Edit and Delete buttons.
3. Increase the tabindex attributes for the buttons.

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

<script>
    $(document).ready(function () {
        var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
            dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: crudServiceBaseUrl + "/Products",
                        dataType: "jsonp"
                    },
                    update: {
                        url: crudServiceBaseUrl + "/Products/Update",
                        dataType: "jsonp"
                    },
                    destroy: {
                        url: crudServiceBaseUrl + "/Products/Destroy",
                        dataType: "jsonp"
                    },
                    create: {
                        url: crudServiceBaseUrl + "/Products/Create",
                        dataType: "jsonp"
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return { models: kendo.stringify(options.models) };
                        }
                    }
                },
                batch: true,
                pageSize: 20,
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            ProductID: { editable: false, nullable: true },
                            ProductName: { validation: { required: true } },
                            UnitPrice: { type: "number", validation: { required: true, min: 1 } },
                            Discontinued: { type: "boolean" },
                            UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                        }
                    }
                }
            });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            height: 550,
            toolbar: ["create"],
            sortable: true,
            reorderable: true,
            groupable: true,
            resizable: true,
            filterable: true,
            columnMenu: true,
            dataBound: function (e) {
                $(".k-grid-edit-command, .k-grid-remove-command").attr("tabindex", "1");
            },
            cancel: function (e) {
                setTimeout(function () {
                    $(".k-grid-edit-command, .k-grid-remove-command").attr("tabindex", "1");
                });
            },
            columns: [
                { width: "200px", field: "ProductName", title: "Product Name", locked: true, lockable: false },
                { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
                { field: "UnitsInStock", title: "Units In Stock", width: "120px" },
                { field: "Discontinued", width: "120px" },
                { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
            editable: "inline"
        });


    });
</script>
</div>