Hi, I'm trying to scroll my grid to a specific cell (td) in a specific row. Currently I'm able to navigate to X row in a paginable grid and I can get the information of that row but I'm wondering if there is something similar to what I'm using to scroll to row. This is the code I have for now:
Select row with ID = <input id="numeric" /> (1-78)
<button id="searchBtn" class="k-button">Go</button>
<div id="grid"></div>
<script>
function selectGridRow(searchedId, grid, idField){
var dataSource = grid.dataSource;
var filters = dataSource.filter() || {};
var sort = dataSource.sort() || {};
var models = dataSource.data();
// We are using a Query object to get a sorted and filtered representation of the data, without paging applied, so we can search for the row on all pages
var query = new kendo.data.Query(models);
var rowNum = 0;
var modelToSelect = null;
models = query.filter(filters).sort(sort).data;
// Now that we have an accurate representation of data, let's get the item position
for (var i = 0; i < models.length; ++i) {
var model = models[i];
if (model[idField] == searchedId) {
modelToSelect = model;
rowNum = i;
break;
}
}
// If you have persistSelection = true and want to clear all existing selections first, uncomment the next line
// grid._selectedIds = {};
// Now go to the page holding the record and select the row
var currentPageSize = grid.dataSource.pageSize();
var pageWithRow = parseInt((rowNum / currentPageSize)) + 1; // pages are one-based
grid.dataSource.page(pageWithRow);
var row = grid.element.find("tr[data-uid='" + modelToSelect.uid + "']");
if (row.length > 0) {
grid.select(row);
// Scroll to the item to ensure it is visible
grid.content.scrollTop(grid.select().position().top);
}
}
$(document).ready(function () {
$("#searchBtn").click(function(){
var grid = $("#grid").data("kendoGrid");
var searchedId = $("#numeric").data("kendoNumericTextBox").value();
selectGridRow(searchedId, grid, "ProductID");
});
$("#numeric").kendoNumericTextBox({
min: 1,
max: 78,
format: "n0"
});
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { type: "number" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" }
}
}
},
pageSize: 10
},
height: 350,
sortable: true,
filterable: true,
selectable: "row",
pageable: {
refresh: true,
pageSizes: true
},
columns: [
{
field: "ProductID",
title: "ID",
width: 100
},{
field: "ProductName",
title: "Product Name",
width: 180
}, {
field: "UnitPrice",
title: "Unit Price"
}, {
field: "UnitsInStock",
title: "Units in Stock"
}, {
field: "Discontinued",
width: 150
}]
});
});
</script>
And here is the DOJO: https://dojo.telerik.com/OBaYiguF
Right now the code is navigating to any row in the grid (that's okay) the next thing I want to do is once that I'm in the selected row then select a specific cell (for example "Units in stock")