Grille Kendo Grille de boutons à un seul bouton Menu pour afficher/masquer les colonnes de la grille

Question

Au lieu d'afficher un menu de colonnes sur chacune des colonnes de ma grille, je veux un seul menu en haut de la grille avec lequel je peux contrôler afficher/masquer des colonnes & gel/dégel des colonnes.

Voir l'image de référence ci-jointe pour avoir une idée.

Answer 1

cadre UI Kendo a un widget kendoColumnMenu. En supposant 'grille' est un élément de grille, nous avons: HTML (fa -... sont les styles font-impressionnants):

<a class="btn btn-icon grid-column-menu fa fa-columns" href="#" title="Manage columns."></a> 

JS:

var $gridColumnMenuButton = $(".grid-column-menu").kendoColumnMenu({ 
    filterable: false, 
    sortable: false, 
    dataSource: grid.data("kendoGrid").dataSource, 
    columns: true, 
    owner: grid.data("kendoGrid"), 
}); 

$gridColumnMenuButton.on("click", function(e) { 
    $(this).find(".k-header-column-menu").click(); 

    return false; 
}); 

CSS:

.grid-column-menu .k-header-column-menu { 
height: 35px; 
visibility: hidden; 
position: absolute; 
left: 0; } 

Cela vous permettra de masquer/afficher les colonnes.