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].

Yetac

Do you have some markup for the grid in the page? – Baecher

Thanks for your response I just updated the initial post – Yetac

One way is to use row or cell templates: dojo.telerik.com/@ezanker/ugIFo – Sr

@Sr thanks for your suggestion it should work but is there any way of specifying a cell without html and just in the javascript. I don't have my tables formatted like that in html so it would be difficult to change all of them. I just use a div tag and let kendo handle the rest. – Yetac

I don't know what do you want: get html <td> element of cell by row and column index or what? Just tell me what data you do have and what you want to get. – Nudism

@Jarosław Kończak sorry for not being clear, I have the data for the cell and I know which cell I want to modify but I don't know how to reference the cell. Do I need the index or something else. Right now $("#gaugeMetricTable").data("kendoGrid").tbody.find("tr[data-uid=" + dataItem.uid + "]").css('color', colour ); will change the color of the entire row. I want to specify from that row, a specific cell by either column or data, I have both. – Yetac

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

Papiamento

This is exactly what I was looking for. I was having trouble finding the documentation for .find. Thanks alot! – Yetac

This answer is very useful Thanks @Jaroslaw – Ramillies

@Jaroslaw, I know its too late to ask, can you please tell how to get cell reference for frozen columns? – Schuyler

@AdershM For frozen columns it's bit more complicated. If you sure that column you trying to find is the frozen or nonfrozen part, you can use code below, just add .k-grid-content-locked or .k-grid-content on begining of each selector (+ space before td/tr/th) in find function. If you really need universal function I can try to write it. – Nudism

@JarosławKończak Thanks for the info. I have tried the same, but the problem arises when locked columns can be unlocked and rearranged. There, we can't assure whether it is .k-grid-content-locked or .k-grid-content. Hope you could help.. – Schuyler

@AdershM I just found a time to wrote it. It's not to late. – Nudism

Answer 2

This worked for me:

function onChange(arg) {
       var cell = this.select();
       var cellIndex = cell[0].cellIndex;
       var column = this.columns[0];
       ...

An de Value of the cell at column 0, for example, from the selected row is at:

var mydata = dataItem[column.field];

Happy Coding KendoGrid.

Concavoconcave

Answer 3

You can apply try using the following steps:

First, get a specific row from which you want apply CSS to specific column by name. In my requirement found row using row's UID with specific column class name.

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

var row = grid.dataSource.getByUid("your-row-uid");

And at last, get your selected row specific cell value by its class name.

$(row).find("td.className").css("background-color", "lightblue");

Retain