Je souhaite fournir l'option de menu de colonne des colonnes uniquement dans une colonne spécifique de la grille de Kendo. De plus, lorsque la page charge, je souhaite afficher une colonne spécifique et masquer les autres colonnes. L'utilisateur peut sélectionner les autres colonnes (cachées) de l'option de menu de colonne fournie dans l'une des colonnes.
J'ai fait quelque chose comme ceci pour masquer le menu de colonne à partir de certaines colonnes: p>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipName: { type: "string" },
ShipAddress: { type: "string" }
}
}
},
pageSize: 30,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
pageable: true,
columnMenu: true,
columns: [{
field: "OrderID",
title: "Order ID",
width: 120
}, {
field: "ShipCountry",
title: "Ship Country"
}, {
field: "ShipName",
title: "Ship Name"
}, {
field: "ShipAddress",
filterable: false
}
]
});
});
$(function(){
$('#grid .k-header-column-menu').eq(0).hide();
$('#grid .k-header-column-menu').eq(1).hide();
$('#grid .k-header-column-menu').eq(2).hide();
})
</script>
</div>
</body>
3 Réponses :
J'ai eu une demande similaire, mais je n'ai pas mis de menu de colonne dans une colonne plutôt que je l'ai plongée à l'extérieur dans la section Barre d'outils, j'ai ajouté des boutons d'exportation dans le même modèle.
var toolbarTemplate = '<div id="column-menu-button" style="float:left" ></div>';
var templ = '<div class="toolbar buttons-wrap" style="text-align: right;"><div id="toolbar"></div></div>';
var grid = $("#grid").kendoGrid({
toolbar: kendo.template(templ),
columns: [
{field: "name", menu: true, hidden: true},
{field: "age", menu: false}
],
sortable: true,
dataSource: [
{name: "Jane Doe", age: 30},
{name: "John Doe", age: 33}
]
}).getKendoGrid();
var createKendoColumnMenu = function (id, dataSource, owner) {
var kendoColumnMenu = $(id).kendoColumnMenu({
dataSource: dataSource,
filterable: false,
sortable: false,
columns: true,
owner: owner,
});
};
var createKendoToolBar = function (id) {
var kendoToolBar = $(id).kendoToolBar().getKendoToolBar();
return kendoToolBar;
};
createKendoToolBar('#toolbar').add({
template: toolbarTemplate,
id: 'column-menu',
overflow: 'never'
});
createKendoColumnMenu('#column-menu-button', grid.dataSource, grid);
Cette méthode fonctionne bien. Mais maintenant j'ai découvert un autre problème. Chaque fois que j'utilise la propriété cachée dans la colonne Kendo Grid pour masquer certaines colonnes par défaut ou chaque fois que j'applique certains filtres sur la grille à partir d'un modèle de filtrage externe, ma colonne de grille se déplace hors de commande. C'est-à-dire que les données de ligne pour chaque colonne se déplacent à droite et il semble désordred. J'utilise des données à distance pour peupler ma grille.
Changez votre matrice de colonnes pour ajouter la propriété cachée.
columns: [{
field: "OrderID",
title: "Order ID",
width: 120,
hidden: true
}, {
field: "ShipCountry",
title: "Ship Country",
hidden: true
}, {
field: "ShipName",
title: "Ship Name",
hidden: true
}, {
field: "ShipAddress",
filterable: false
}]
La propriété cachée rend mes colonnes à sortir de l'ordre. Je peuplage la grille avec des données distantes. Les données de ligne pour les colonnes ressemblent comme si elles sont décalées à gauche, mais les colonnes restent dans la même position.
J'ai trouvé une solution pour activer l'option ColumnMenu uniquement dans une colonne. Fondamentalement, j'ajoute un élément div au niveau de la charge de colonne dans laquelle je souhaite activer cette fonctionnalité. Et puis, j'attache un kendocolumnmenu. Voici un exemple: Columinummenu