Kendo UI Grid: Select single cell, get back DataItem, and prevent specific cells from being selected?

Question

I've got a Kendo UI Grid displaying a set of data and I need to be able to select specific cells (cells in specific columns), and when selected, return the DataItem for the row the selected cell is in, and the property of that DataItem that was clicked on. I don't know if this is possible, but I've been working on it all day and have concluded that I need some help.

Here's my grid and dataBound function, which currently gets me the DataItem, but that's it:

    var hhGrid = hhDiv.kendoGrid({
        dataSource: housing,
        scrollable: false,
        sortable: true,
        selectable: 'cell',
        columns: [
            { field: "Start", title: "Start", format: "{0:MM/dd/yyyy}", type: "date" },
            { field: "Stop", title: "Stop", format: "{0:MM/dd/yyyy}", type: "date" },
            { field: "Facility" },
            { field: "Area" },
            { field: "Pod" },
            { field: "Cell" },
            { field: "Comment" }
        ]
    }).data('kendoGrid');

    hhGrid.bind('change', grid_change);

function grid_change(e) {
    var selectedCells = this.select();
    var dataItem = this.dataItem(selectedCells[0].parentNode);
}

So first of all, is there a way to 'turn off' selection of specific columns in the grid definition? I can't find anything on doing this. I only want users to be able to select cells in the 'Area', 'Pod' and 'Cell' columns. If they click the other columns nothing should happen. Also, when they do click on those selected cells, I want to get the DataItem for the row the cell is in (which I currently can do using that grid_change method), as well as the column that was selected, or the property in the DataItem that was selected.

So, for example, if the user clicks a 'Pod' cell, I want to know that it was the pod cell that was clicked, and the other data for the row the cell is in. It seems that all of the data is there, so it shouldn't be this difficult, but I'm really struggling to find the data needed to accomplish this.

Thanks for your help!

Solution

Getting the data item is:

// Get selected cell
var selected = this.select();
// Get the row that the cell belongs to.
var row = this.select().closest("tr");
// Get the data item corresponding to this cell
var item = grid.dataItem(row);

For getting the column name you can get it doing:

// Get cell index (column number)
var idx = selected.index();
// Get column name from Grid column definition
var col = this.options.columns[idx].field;

An alternative method for getting the field associated to a columns is:

// Get column name from Grid column header data
var col = $("th", this.thead).eq(idx).data("field");       

The advantage is that is columns are sortable this will work anyway. In order to clear selection for columns that you don't want just need to invoke clearSelection().

if (col !== 'Area' && col !== 'Pod' && col !== 'Cell') {
    this.clearSelection();
}

Check an example here : http://jsfiddle.net/OnaBai/m5J9J/1/ and here: http://jsfiddle.net/OnaBai/m5J9J/2/ (using column header for getting column name)

Comments

[wenky]

after getting the cell object, if we want to make it read only on specific condition and set it back to editable upon the same not condition, how can we do that?