How to bind a specific cell in a kendo grid with javascript?
I now have a kendo grid with 2 rows and 6 columns. I need logic to highlight a specific cell, but I don't know how to refer to the cell. I used this example, but I don't know what to pass 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's an example 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 can I make a reference to row 1, column 2.
var data = $("#gaugeMetricTable").data("kendoGrid").dataSource.data();
data[0];
Returns data for a row, but I cannot reference the data column [0] .columns [1].
source to share
In kendoGrid, each information is represented by an array of objects in which one element of the array is one row. Kendo adds a uid property to all dataObjects in the array. So one dataObject looks like this:
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 row of data, 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 must first know its index, for example, if you want to get the cell corresponding to the 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 + ")");
Note: if you want to use it with frozen columns, you need to slightly change the way you get the honeycomb.
source to share