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

admin管理员组

文章数量:1338781

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

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

• javascript
• kendo-ui
• kendo-grid
• kendo-asp-mvc

Share Improve this question Follow edited Jun 18, 2015 at 16:06 Curious Cat asked Jun 18, 2015 at 15:40 Curious CatCurious Cat 30911 gold badge33 silver badges1515 bronze badges 6

• Do you have some markup for the grid in the page? – StuperUser Commented Jun 18, 2015 at 15:55
• Thanks for your response I just updated the initial post – Curious Cat Commented Jun 18, 2015 at 16:06
• One way is to use row or cell templates: dojo.telerik./@ezanker/ugIFo – ezanker Commented Jun 18, 2015 at 19:36
• @ezanker 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. – Curious Cat Commented Jun 19, 2015 at 14:22
• 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. – Jarosław Kończak Commented Jun 19, 2015 at 16:06

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 14

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./oDUpuTAw

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.

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");

本文标签： How do I reference a specific cell in kendo grid with javascriptStack Overflow