Столбцы Kendo Grid Скрыть/Показать, Включить/Отключить

Question

Как скрыть/показать и включить/отключить столбцы в сетке кендо при условии или событии. Я мог найти только вариант включения/выключения колонки kendogrid в .model

Любая помощь приветствуется.

Спасибо заранее!

Answer 1

Вы показ/скрытие столбцов в KendoUI сетке вы должны использовать showColumn и hideColumn и использовать в качестве аргумента номер (индекс столбца, который вы хотите, чтобы показать/скрыть) или строку (имя поля, связанное с тем, что колонка).

Пример:

var grid = $("#grid").kendoGrid({ 
    dataSource: ds, 
    editable : false, 
    pageable : true, 
    columns : 
    [ 
     { field: "FirstName", width: 90, title: "First Name" }, 
     { field: "LastName", width: 90, title: "Last Name" }, 
     { field: "City", width: 100 } 
    ] 
}).data("kendoGrid"); 

$("#show_col1").on("click", function() { 
    // Use the index of the column to show 
    grid.showColumn(0); 
}); 

$("#hide_col1").on("click", function() { 
    // Use the name of the field to hide it 
    grid.hideColumn("FirstName"); 
}); 

Вы можете контролировать, если столбец должен быть изначально скрыты путем установки hidden в инициализации столбца.

Смотрите пример здесь: http://jsfiddle.net/OnaBai/XNcmt

Answer 2

Сетка Кендо содержит метод showColumn, который будет содержать строку индекса или столбца. Чтобы включить скрытие/отображение столбцов, вы инициализируете столбец gridX как обычный столбец и отмечаете его скрытым (в MVC это метод .Hidden() при связывании столбца). Затем на основе события страницы вы можете просто вызвать showColumn (а затем скрытьColumn, чтобы отменить операцию).

Answer 3

Для Кендо сетки, которая уже была создана, вы можете показать/скрыть сделать все столбцы редактируемые/нередактируемы по:

var allowEdit = false; 
var grid = $("#sampleGrid").data("kendoGrid"); 
grid.showColumn(0); 
grid.showColumn(1); 

if (!allowEdit) { 
    grid.hideColumn(0); 
    grid.hideColumn(1); 
} 
var len = $("#sampleGrid").find("tbody tr").length; 
for (var i = 0; i <= len ; i++) { 
    var model = $("#sampleGrid").data("kendoGrid").dataSource.at(i); 
    if (model) { 
     for (i = 0; i <= (grid.columns.length - 1) ; i++) { 
      var column = grid.columns[i]; 
      model.fields[column.field].editable = allowEdit; 
     } 
    } 
}