How to get row index and cell index of row click kendo grid

Question

I have added onchange event for kendo-ui grid.

In that I am trying to get the ID value for that particular row. I have added an image column as first column in the grid. What I want is when the image is clicked, I want to open a image url.

So, basically what I want is that when I click the row, I want to get the clicked row index and also I want to get the clicked cell Index in that row.

So based on the row clicked and if it is not the first cell clicked, I want to display alert. If I the first cell is clicked I want to open image.

How can I get this index.

I have set selectable : row in the kendo-ui grid

Please help me on this.

Answer 1

Please try with below code snippet.

function onDataBound(e) {
    var grid = $("#Grid").data("kendoGrid");
    $(grid.tbody).on("click", "td", function (e) {
        var row = $(this).closest("tr");
        var rowIdx = $("tr", grid.tbody).index(row);
        var colIdx = $("td", row).index(this);
        alert(rowIdx + '-' + colIdx);
    });
}

$(document).ready(function () {
    $("#Grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
                dataType: "jsonp"
            },
            schema: {
                model: {
                    fields: {
                        OrderID: { type: "number" },
                        Freight: { type: "number" },
                        ShipName: { type: "string" },
                        OrderDate: { type: "date" },
                        ShipCity: { type: "string" }
                    }
                }
            },
            pageSize: 10,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        },
        dataBound: onDataBound,
        filterable: true,
        sortable: true,
        pageable: true,
        columns: [{
            field: "OrderID",
            filterable: false
        },
                        "Freight",
                        {
                            field: "OrderDate",
                            title: "Order Date",
                            width: 120,
                            format: "{0:MM/dd/yyyy}"
                        }, {
                            field: "ShipName",
                            title: "Ship Name",
                            width: 260
                        }, {
                            field: "ShipCity",
                            title: "Ship City",
                            width: 150
                        }
                    ]
    });
});


<div id="Grid"></div>

Answer 2

If all you need is knowing the row and column index in the table you can do:

$(grid.tbody).on("click", "td", function(e) {
    var row = $(this).closest("tr");
    var rowIdx = $("tr", grid.tbody).index(row);
    var colIdx = $("td", row).index(this);
    console.log("row:", rowIdx, "cell:", colIdx);
});

• Where I set a click handler for clicking in the cells of the grid.
• Then I find to which row (<tr>) that cell belongs to using jQuery closest.
• Next use jQuery index for finding the index of that row in the table.
• Do the same for finding the cell index inside the row.

But maybe there are simpler ways as detecting if the user clicked on an image, or set some CSS class in the image and then check if the clicked cell has that class,...

EDIT If in addition you want to retrieve the original item inside the click handler. Add

var item = grid.dataItem(row);

From there, you can get id or any other field for validation.

Example here : http://jsfiddle.net/OnaBai/MuDX7/