Edit this page

Keep Tab Order on Edited Grid Row with Frozen Columns

Environment

Product Progress Kendo UI Grid
Made with version 2017.3.1026

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, .k-grid-delete").attr("tabindex", "1");
            },
            cancel: function (e) {
                setTimeout(function () {
                    $(".k-grid-edit, .k-grid-delete").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", editor: customBoolEditor },
                { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
            editable: "inline"
        });


    });

    function customBoolEditor(container, options) {
        var guid = kendo.guid();
        $('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
        $('<label class="k-checkbox-label" for="' + guid + '">‚Äč</label>').appendTo(container);
    }
</script>
</div>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy