kendo-ui - pageable - kendo grid template

Columnas de la cuadrícula de Kendo Ocultar/Mostrar, Habilitar/Deshabilitar

Question

Cómo ocultar / mostrar y habilitar / deshabilitar columnas en la cuadrícula de kendo en condición o evento. Solo pude encontrar la opción de habilitar / deshabilitar la columna kendogrid en .model

Cualquier ayuda es apreciada.

¡Gracias de antemano!

Answer 1

La cuadrícula de Kendo contiene un método showColumn que tomará un índice o la cadena de nombre de columna. Para habilitar la ocultación / visualización de columnas, inicializará la cuadrícula X como una columna normal y la marcará oculta (en MVC, este es el método .Hidden () cuando se vincula la columna). Luego, en función de un evento de página, puede simplemente llamar a showColumn (y luego ocultarColumn para revertir la operación).

Answer 2

Para Kendo Grid que ya se ha creado, puede mostrar / ocultar que todas las columnas sean editables / no editables mediante:

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

Answer 3

Para mostrar / ocultar columnas en KendoUI Grid, debe usar showColumn y hideColumn y usar como argumento un número (el índice de la columna que desea mostrar / ocultar) o una cadena (el nombre del campo asociado en esa columna).

Ejemplo:

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

Puede controlar si la columna debe estar inicialmente oculta configurando el modo hidden en la inicialización de la columna.

Vea un ejemplo aquí: http://jsfiddle.net/OnaBai/XNcmt