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
- Handle the
dataBound
event of the Grid. - In the handler, get a reference of the last column and its offset.
- 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>