Navigate to specific cell

I'm using KendoUI Grid to display some data, the grid is pageable and scrollable, right now I'm able to select and scroll to a specific row, but now when I'm there I also should be able to navigate and select a specific cell (td) of that row. This is what I've so far.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>
</head>
<body>
  
    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: "ProductName",
              title: "Product Name 2",
              width: 230
            },{
              field: "ProductName",
              title: "Product Name 3",
              width: 230
            },{
              field: "ProductName",
              title: "Product Name 4",
              width: 230
            },{
              field: "ProductName",
              title: "Product Name 5",
              width: 230
            },{
              field: "UnitPrice",
              title: "Unit Price",
              width: 150
            }, {
              field: "UnitsInStock",
              title: "Units in Stock",
              width: 150
            }, {
              field: "Discontinued",
              width: 150
            }]
        });
      });
    </script>
</body>
</html>

For example what I want to do is to navigate to row 4 (this is working) but also navigate to column Discontinued and select that cell of that row.

Is there any way to do it? Using JavaScript or jQuery or a native function from KendoUI?

Here is a Dojo to play with.

Solution 1:

Add a class to your Discontinued column definition:

{
    field: "Discontinued",
    width: 150,
    attributes: {
        class: "discontinued"
    }
}

Change the selector you're using to select the row to the following:

var row = grid.element.find("tr[data-uid='" + modelToSelect.uid + "'] td.discontinued");

Replace grid.content.scrollTop(grid.select().position().top); with row[0].scrollIntoView();.

Navigate to specific cell

Solution 1:

Related

Recent Posts