Move Filter Icons in the Grid to the Left

Environment

Product Version	2017.2 621
Product	Progress® Kendo UI® Grid for jQuery

Description

When I tab through the application, the filter icon in the Grid headers is focused before the header title although the header title is visually displayed before the filter icon.

How can I display the Grid filter icon before the title?

Solution

Due to the way the filter icon is positioned in the header, the filter icon receives the focus before the title because it is rendered in the DOM before the title. To change the position of the filter icon, use CSS.

    <style>
        .k-cell-inner{
          display: flex !important;
          flex-direction: row-reverse !important;
        }
    </style>

The following example demonstrates the full implementation of the suggested approach.

<base href="https://demos.telerik.com/kendo-ui/grid/local-data-binding">
    <style>
        .k-cell-inner{
          display: flex !important;
          flex-direction: row-reverse !important;
        }
    </style>

        <script src="../content/shared/js/people.js"></script>
        <div id="example">
        <div id="grid"></div>

            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                      sortable: true,
                        dataSource: {
                            data: createRandomData(50),
                            schema: {
                                model: {
                                    fields: {
                                        City: { type: "string" },
                                        Title: { type: "string" },
                                        BirthDate: { type: "date" }
                                    }
                                }
                            },
                            pageSize: 15
                        },
                        height: 550,
                        scrollable: true,
                        filterable: {
                            extra: false,
                            operators: {
                                string: {
                                    startswith: "Starts with",
                                    eq: "Is equal to",
                                    neq: "Is not equal to"
                                }
                            }
                        },
                        pageable: true,
                        columns: [
                            {
                                title: "Name",
                                width: 160,
                                filterable: false,
                                template: "#=FirstName# #=LastName#"
                            },
                            {
                                field: "City",
                                width: 130,
                                filterable: {
                                    ui: cityFilter
                               }
                            },
                            {
                                field: "Title",
                                filterable: {
                                    ui: titleFilter
                                }
                            },
                            {
                                field: "BirthDate",
                                title: "Birth Date",
                                format: "{0:MM/dd/yyyy HH:mm tt}",
                                filterable: {
                                    ui: "datetimepicker"
                                }
                            }
                       ]
                    });
                });

                function titleFilter(element) {
                    element.kendoAutoComplete({
                        dataSource: titles
                    });
                }

                function cityFilter(element) {
                    element.kendoDropDownList({
                        dataSource: cities,
                        optionLabel: "--Select Value--"
                    });
                }

            </script>
        </div>