Navigate to specific cell of selected row

1 Answer 25 Views
Top achievements
Rank 1
Francisco asked on 13 Jan 2022, 06:37 AM

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>
      function selectGridRow(searchedId, grid, idField){
        var dataSource = grid.dataSource;
        var filters = dataSource.filter() || {};
        var sort = dataSource.sort() || {};
        var models =;
        // 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;
        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;

        // 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;

        var row = grid.element.find("tr[data-uid='" + modelToSelect.uid + "']");
        if (row.length > 0) {

          // Scroll to the item to ensure it is visible

      $(document).ready(function () {

          var grid = $("#grid").data("kendoGrid");
          var searchedId = $("#numeric").data("kendoNumericTextBox").value();

          selectGridRow(searchedId, grid, "ProductID");

          min: 1,
          max: 78,
          format: "n0"

          dataSource: {
            type: "odata",
            transport: {
              read: ""
            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


And here is the DOJO:


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")

1 Answer, 1 is accepted

Sort by
Georgi Denchev
Telerik team
answered on 17 Jan 2022, 12:18 PM

Hello, Francsisco,

Thank you for the provided code snippet and Dojo.

If you wish to select a single cell you'll have to update the configuration of the selectable configuration:

selectable: "cell",

And then the logic will have to be updated slightly:

        var row = grid.element.find("tr[data-uid='" + modelToSelect.uid + "']");
        if (row.length > 0) {
          // Find the index of the UnitPrice column by using the name of the field.
          let indexOfUnitPrice = grid.thead.find("th[data-field='UnitPrice']").index();
          // Find the cell on the particular row.
          let cell = row.find("td:eq("+indexOfUnitPrice+")");
          // Manually apply the selected class.
          // Scroll to the item to ensure it is visible


Let me know if you have any questions.

Best Regards,
Georgi Denchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at

Asked by
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question