Edit this page

Navigate Virtual Scrolling in Grid with Up and Down Arrows

Environment

Product Version 2018.1 221
Product Grid for ProgressĀ® Kendo UIĀ®

Description

How can I navigate the virtual scrolling of the Kendo UI Grid with the Up and Down keyboard arrows?

Solution

  1. In the dataBound event handler, add tabindex to the child div of the .k-scrollbar-vertical container.
  2. Handle the click event of the table of the Grid.
  3. In the click event handler, focus the child div of the .k-scrollbar-vertical container.
<style>
    .k-scrollbar-vertical div {
        outline: none;
    }
</style>

<div id="example">
    <div id="grid"></div>
    <script>
        $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    serverPaging: true,
                    serverSorting: true,
                    pageSize: 100,
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                    }
                },
                height: 543,
                scrollable: {
                    virtual: true
                },
                sortable: true,
                columns: [{
                        field: "OrderID",
                        title: "Order ID",
                        width: 110
                    },
                    {
                        field: "CustomerID",
                        title: "Customer ID",
                        width: 130
                    },
                    {
                        field: "ShipName",
                        title: "Ship Name",
                        width: 280
                    },
                    {
                        field: "ShipAddress",
                        title: "Ship Address"
                    },
                    {
                        field: "ShipCity",
                        title: "Ship City",
                        width: 160
                    },
                    {
                        field: "ShipCountry",
                        title: "Ship Country",
                        width: 160
                    }
                ],
                dataBound: function(e) {
                    setTimeout(function() {
                        $(".k-scrollbar-vertical div").attr("tabindex", "-1");
                        $(".k-scrollbar-vertical div")[0].focus();
                    })
                }
            });
            $(".k-virtual-scrollable-wrap").bind("click", function() {
                $(".k-scrollbar-vertical div")[0].focus();
            });
        });
    </script>
    <style>
        #grid table {
            min-width: 1190px;
        }
    </style>
</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