Scroll to the Last Grid Column

Environment

Product

Progress® Kendo UI® Grid for jQuery

Description

How can I scroll the last column into view when a Grid with many columns is initially loaded?

Solution

1. Handle the dataBound event of the Grid.
2. In the handler, get a reference of the last column and its offset.
3. Call the scrollLeft method with the acquired offset.

<div id="grid" style="width: 400px;"></div>
<script>
    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                pageSize: 20
            },
            height: 550,
            width: 400,
            groupable: true,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },

            dataBound: onDataBoundhandler,

            columns: [{
                template: "<div class='customer-photo'" +
                    "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                    "<div class='customer-name'>#: ContactName #</div>",
                field: "ContactName",
                title: "Contact Name",
                width: 240
            }, {
                field: "ContactTitle",
                title: "Contact Title",
                width: 200,
            }, {
                field: "CompanyName",
                title: "Company Name",
                width: 250
            }, {
                field: "Country",
                width: 150
            }]
        });

        function onDataBoundhandler(e) {
            var grid = this;
            var numberOfColumns = grid.columns.length;
            var lastColumnField = grid.columns[numberOfColumns - 1].field;
            var lastColumnOffset = $("th[data-field='" + lastColumnField + "']").offset().left;

            grid.content.scrollLeft(lastColumnOffset);

        }
    });
</script>