Kendo UI网格:选择单个单元格，取回DataItem，并防止选择特定的单元格? [英] Kendo UI Grid: Select single cell, get back DataItem, and prevent specific cells from being selected?

问题描述

我有一个显示一组数据的Kendo UI网格，我需要能够选择特定的单元格(特定列中的单元格)，并且在选择后，返回所选单元格所在行的DataItem，并单击的那个DataItem的属性.我不知道这是否可行，但我整天都在努力，得出的结论是我需要一些帮助.

这是我的grid和dataBound函数，该函数当前为我获取DataItem，仅此而已:

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

因此，首先，是否有一种方法可以关闭"网格定义中特定列的选择?我找不到任何有关此操作的信息.我只希望用户能够在区域"，窗格"和单元格"列中选择单元格.如果他们单击其他列，则不会发生任何事情.另外，当他们确实单击那些选定的单元格时，我想获取该单元格所在行的DataItem(我目前可以使用grid_change方法执行此操作)，选定的列或所选的数据项.

例如，如果用户单击"Pod"单元格，我想知道单击的是Pod单元格，以及该单元格所在行的其他数据.数据在那里，所以不应该那么困难，但是我真的很努力地找到完成此任务所需的数据.

感谢您的帮助！

解决方案

获取数据项是:

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

要获取列名，可以执行以下操作:

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

获取与列关联的字段的另一种方法是:

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

优点是列是可排序的，无论如何都会起作用. 为了清除对不需要的列的选择，只需要调用clearSelection().

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

在此处检查示例: http://jsfiddle.net/OnaBai/m5J9J/1/和此处: http://jsfiddle.net/OnaBai/m5J9J/2/(使用列标题获取列名)

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!

解决方案

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)

这篇关于Kendo UI网格:选择单个单元格，取回DataItem，并防止选择特定的单元格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！