web-dev-qa-db-fra.com

Colonnes Kendo Grid Masquer/Afficher, Activer/Désactiver

Comment masquer/afficher et activer/désactiver des colonnes dans une grille de kendo selon une condition ou un événement .

Toute aide est appréciée.

Merci d'avance!

kendo-uikendo-grid
21
Apurv Deshmukh

Si vous affichez/cachez des colonnes dans KendoUI Grid, vous devez utiliser showColumn et hideColumn et utiliser comme argument un nombre (l’index de la colonne à afficher/masquer) ou une chaîne de caractères (le nom du champ associé dans cette colonne).

Exemple:

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

Vous pouvez contrôler si la colonne doit être initialement masquée en définissant hidden dans l'initialisation de la colonne.

Voir un exemple ici: http://jsfiddle.net/OnaBai/XNcmt

33
OnaBai

La grille de Kendo contient une méthode showColumn qui prend un index ou la chaîne du nom de la colonne. Pour activer l'affichage/masquer des colonnes, vous devez initialiser la grille columnX en tant que colonne normale et la marquer comme masquée (dans MVC, il s'agit de la méthode .Hidden () lors de la liaison de la colonne). Ensuite, en fonction d'un événement de page, vous pouvez simplement appeler showColumn (puis hideColumn pour inverser l'opération).

1
Rick Mortensen

Pour Kendo Grid qui a déjà été créé, vous pouvez afficher/masquer toutes les colonnes modifiables/non modifiables en:

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