Menu de colonnes de grille à un bouton de la grille Kendo pour afficher / masquer les colonnes de la grille - jquery, kendo-ui, grille de kendo, kendo-ui-mvc, kendo-ui-grid

Au lieu d'afficher un menu de colonnes sur chacune des colonnes de ma grille, je souhaite un menu unique en haut de la grille avec lequel je puisse contrôler l'affichage / le masquage des colonnes et le gel / le déblocage des colonnes.

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

Réponses:

Le framework Kendo UI a un widget kendoColumnMenu. En supposant que "grid" soit un élément de la grille, nous avons: HTML (fa -... are font-awesome styles):

<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.