Curious Cat Curious Cat - 2 months ago 6
Javascript Question

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

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

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, eg if you wanna 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 + ")");

Caution: If you wanna to use it with frozen columns, you have to slighty modify cell getting method.