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

Ответ 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

Ответ 2

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

Ответ 3

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

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