Блог

У меня есть сетка пользовательского интерфейса Kendo, отображающая набор данных, и мне нужно иметь возможность выбирать определенные ячейки (ячейки в определенных столбцах), а при выборе возвращать элемент данных для строки, в которой находится выбранная ячейка, и свойство этого элемента данных, на который был нажат. Я не знаю, возможно ли это, но я работал над этим весь день и пришел к выводу, что мне нужна помощь.

Вот моя сетка и функция привязки к данным, которая в настоящее время возвращает мне элемент данных, но это все:

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

Итак, прежде всего, есть ли способ «отключить» выбор определенных столбцов в определении сетки? Я ничего не могу найти для этого. Я только хочу, чтобы пользователи могли выбирать ячейки в столбцах «Область», «Модуль» и «Ячейка». Если они нажмут на другие столбцы, ничего не должно произойти. Кроме того, когда они нажимают на эти выбранные ячейки, я хочу получить элемент данных для строки, в которой находится ячейка (что я в настоящее время могу сделать, используя этот метод 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' amp;amp; col !== 'Pod' amp;amp; col !== 'Cell') {
    this.clearSelection();
}
  

Посмотрите пример здесь: http://jsfiddle.net/OnaBai/m5J9J/1 / и здесь: http://jsfiddle.net/OnaBai/m5J9J/2 / (использование заголовка столбца для получения имени столбца)