How do I reference a specific cell in kendo grid with javascript?

Question

Right now I have a kendo grid with 2 rows and 6 columns. I need some logic to highlight a specific cell but I don't know how to reference a cell. I used this example but I don't know what to pass in as the id.

myHub.client.highlightRow = function (id) {
    var data = $("#MyGrid").data("kendoGrid").dataSource.data();
    for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        if (dataItem.id == id) {
            //alert(dataItem.uid);
            $("#MyGrid").data("kendoGrid").tbody.find("tr[data-uid=" + dataItem.uid + "]").effect("highlight", { color: "#f35800" }, 3000);
        }
    }
};

Here is a sample of my grid.

function loadGaugeTable(siteId, dashboardId, endDate, planType) {
    var today = new Date();
    var metricTitle = "Metric, as of " + monthNames[today.getMonth()] + " " + today.getDate();
    var containerSize = $("#gaugeMetricTableContainer").width();
    var apiPath = "/" + getAppPath() + "/Analytics/api/DashboardApi/getAllMetricTDData" + "?siteId=" + siteId +
                                                                                    "&dashboardId=" + dashboardId +
                                                                                    "&endDate=" + escape(endDate) +
                                                                                    "&planType=" + planType

    $("#gaugeMetricTable").kendoGrid({

        attributes: {
            "class": "table-cell",
            style: "font-size: 10px"
        },
        height: 250,
        selectable: "row",
        scrollable: true,
        sortable: true,
        filterable: true,
        columns: [
            { field: "MetricName", title: metricTitle, width: containerSize / 4 + "px" },
            { field: "DailyActual", title: "Daily Actual", format: decimalPrecisionFormat },
            { field: "DailyTarget", title: "Daily Target", format: decimalPrecisionFormat },
            { field: "MTDActual", title: "MTD Actual", format: decimalPrecisionFormat },
            { field: "MTDTarget", title: "MTD Target", format: decimalPrecisionFormat },
            { field: "YTDActual", title: "YTD Actual", format: decimalPrecisionFormat },
            { field: "YTDTarget", title: "YTD Target", format: decimalPrecisionFormat }

        ],
        dataSource: {
            transport: {
                read: {
                    dataType: "json", url: apiPath
                }
            }
        },

    });
}

How would I go about referencing say row 1, column 2.

var data = $("#gaugeMetricTable").data("kendoGrid").dataSource.data();
data[0];

Returns the data for the row but I can't reference the column with data[0].columns[1].

Answer 1

In kendoGrid each data is represented by array of objects in which one array element is one row. Kendo adds uid property to all dataObjects in array. So one dataObject looks like:

var dataItem = {
    MetricName: "some-val",
    DailyActual: "some-val",
    DailyTarget: "some-val",
    MTDActual: "some-val",
    MTDTarget: "some-val",
    YTDActual: "some-val",
    YTDTarget: "some-val",
    uid: "uid-val"
};

Now to get this data row you can simply use:

var grid = $("#gaugeMetricTable").data("kendoGrid");
var row = grid.find("tr[data-uid=" + dataItem.uid + "]");

Next to get one of this cell by index you can write:

var cellIndex_1 = 5;
var cell_1 = row.find("td:eq(" + cellIndex_1 + ")");

To get one cell by property name you have to know it's index first, e.g. if you want to get cell corresponding to MTDActual property:

var cellName = "MTDActual";
var cellIndex_2 = grid.element.find("th[data-field = '" + cellName + "']").index();
var cell_2 = row.find("td:eq(" + cellIndex_2 + ")");

EDIT:

This code can be used for both regular grid and grid with locked columns:

var cellName = "MTDActual";
var grid = $("#gaugeMetricTable").data("kendoGrid");

var headerCells = grid.element.find("th");
var cellIndex = headerCells.index(grid.element.find("th[data-field = '" + cellName + "']"));

var rowCells = grid.element.find("tr[data-uid=" + dataItem.uid + "] td");
var cell = $(rowCells[cellIndex]);

Kendo DOJO example: https://dojo.telerik.com/oDUpuTAw