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.

score 31 · Accepted Answer · answered Jun 28 '13 at 11:18

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>

Why do you need: `var rowIdx = $("tr", grid.tbody).index(row);`? Wouldn't be enough to just call `index()` directly on the row, like this: `var rowIdx = row.index()`? — Lucian, Mar 06 '14 at 13:40

OnaBai · Answer 2 · 2013-06-28T10:51:40.937

20

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/

edited Jun 28 '13 at 10:51

answered Jun 27 '13 at 14:30

OnaBai

40,767
6
96
125

Thanks for your reply. How can I attach the event to grid and actually I want the values of cell index and row index in onchange event as further logic is in that method – user2117983 Jun 28 '13 at 04:58
When I viewed the value for row index and column index I always get -1 value – user2117983 Jun 28 '13 at 06:43
What do you mean by `onchange`? Do you mean Kendo UI Grid change event (http://docs.kendoui.com/api/web/grid#events-change)? – OnaBai Jun 28 '13 at 07:16
Yes, I have added onchange event for kendo ui grid and in that I am trying to get the row index of the clicked row and also the cell index of the clicked cell. Sorry for any confusion – user2117983 Jun 28 '13 at 08:59
What you call onchange (and I call `change`) is a row based event that is triggered when you **select** a row and not when you click on a cell. So, from there, the only thing that you can do is getting the row but never the cell. – OnaBai Jun 28 '13 at 09:03
If you explain me exactly what you are trying to do in that _onchange_ / `change` event handler maybe there is an easy way of doing it. From you original question I cannot see why you need to bind it to _onchange_ / `change` event that `click` cannot work – OnaBai Jun 28 '13 at 09:07
So what I was doing that, on the onchange event I want to get the id of the selected row where that column is hidden. Also I want to get the cell index if I can get, so if the first cell of every row is clicked I want to different action and if reset of the cells of rows are clicked I want to do different action. – user2117983 Jun 28 '13 at 10:34
For getting the clicked cell you need to go with `click` event. For knowing the id of the row from inside the `click` handler see my **EDIT** above – OnaBai Jun 28 '13 at 10:43
@OnaBai: Your code is very similar to the other answer, so I'm asking you the same thing: Why do you need: var rowIdx = $("tr", grid.tbody).index(row);? Wouldn't be enough to just call index() directly on the row, like this: var rowIdx = row.index()? – Lucian Mar 06 '14 at 13:46
2

@OneBai: I imagine that I want to obtain the index of the row (tr element) that is the parent of the current cell. This row is already obtained in `$(this).closest("tr")`. Shouldn't be enough to just call `index()` on it? – Lucian Mar 06 '14 at 16:57
1

@Lucian, ok, I got it! Yes, would be enough. – OnaBai Mar 06 '14 at 17:01
Always the best answers for kendo scenarios :) – Vinay Pratap Singh Bhadauria Feb 12 '16 at 07:29

The_Black_Smurf · Answer 3 · 2016-08-22T14:26:50.977

Kendo has introduced frozen columns since the question has been answered so I think it deserved a little update to deal with that feature.

When you have a frozen column, the grid will create new header / content tables to manage the frozen columns. If you freeze a column, it will move item linked to this column from the regular grid's tbody / thead to the lockedContent / lockedHeader (the opposite is also true).

If you get the index using the accepted answer, you'll get the index of the cell within the tbody (or -1 if the cell is frozen). The real question is what do you want to do with the column index? If you really want an index number, you may have to adjust the value by adding the number of columns in the lockedContent depending on your needs. However, if your final goal is to get the grid's column object, this can be done by using the th element:

var row = cell.closest("tr");

var body;
var header;

if (cell.closest(grid.lockedContent).length) {
  body = grid.lockedContent;
  header = grid.lockedContent;
} else {
  body = grid.tbody;
  header = grid.thead;
}

var rowIndex = $("tr", body).index(row);
var columnIndex = $("td", row).index(cell);
var columnField = header.find("th").eq(columnIndex).attr("data-field");

var column;

$.each(grid.columns, function () {

  if (this.field === columnField) {
    column = this;
    return false;
  }

});

Disclaimer: just to add a level of complexity, you should also consider that kendo has also introduced a multiple column header feature that may invalidate my code above.

score 0 · Answer 4 · answered Jun 22 '17 at 21:26

0

For the cell index, kendo grid has a method cellIndex(cell)

var cell = $("#grid td:eq(1)");
console.log(grid.cellIndex(cell));

answered Jun 22 '17 at 21:26

Gonzalo.-

12,512
5
50
82

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

4 Answers4