Edit this page

Scroll to the Last Grid Column


Product Progress Kendo UI Grid


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


  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>
    $(document).ready(function () {
            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;


Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article