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