New to Kendo UI for jQuery? Download free 30-day trial

Place Vertical Scrollbars at the Top of Grids

Environment

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

Description

How can I implement a second vertical scrollbar at the top of the Grid which is synced with the built-in scrollbar?

Solution

  1. Create a scrollable container outside the Grid.
  2. Make sure that its width matches the width of the data container of the Grid.
  3. Sync both scrollbars within their scroll event accordingly.

The following example attaches the event handlers within the dataBound event of the Grid.

    <div id="example">
        <div id="dummyScrollWrapper" style="overflow-x: scroll; margin-right:17px; margin-left:2px;">
            <div id="dummyScroll" style="height: 20px;">
            </div>
        </div>

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

        <script>
            $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                        },
                        schema: {
                            model: {
                                fields: {
                                    OrderID: { type: "number" },
                                    ShipCountry: { type: "string" },
                                    ShipName: { type: "string" },
                                    ShipCity: { type: "string" },
                                    ShipAddress: { type: "string" }
                                }
                            }
                        },
                        pageSize: 30
                    },
                    height: 540,
                    sortable: true,
                    reorderable: true,
                    groupable: true,
                    resizable: true,
                    filterable: true,
                    columnMenu: true,
                    pageable: true,
                    dataBound: function (e) {
                        var dataElement = $(e.sender.element).find(".k-grid-content");
                        var fakeScroll = document.getElementById("dummyScroll");
                        fakeScroll.style.width = dataElement.children(0).width() + "px";

                        dataElement.scroll(function () {
                            $("#dummyScrollWrapper").scrollLeft(dataElement.scrollLeft());
                        });
                        $("#dummyScrollWrapper").scroll(function () {
                            dataElement.scrollLeft($("#dummyScrollWrapper").scrollLeft());
                        });
                    },
                    columns: [{
                        field: "OrderID",
                        title: "Order ID",
                        width: 150
                    }, {
                        field: "ShipCountry",
                        title: "Ship Country",
                        width: 300
                    }, {
                        field: "ShipCity",
                        title: "Ship City",
                        width: 300
                    }, {
                        field: "ShipName",
                        title: "Ship Name",
                        width: 300
                    }, {
                        field: "ShipAddress",
                        width: 400
                    }
                    ]
                });
            });
        </script>
    </div>
In this article