Вместо того, чтобы показывать меню столбца в каждом из столбцов в моей сетке, я хочу одно меню поверх сетки, с помощью которого я могу управлять отображением/скрытием столбцов и замораживанием/размораживанием столбцов.
См. прикрепленное справочное изображение, чтобы получить представление.
Фреймворк Kendo UI имеет виджет kendoColumnMenu. Предполагая, что «сетка» — это элемент сетки, мы имеем: HTML (fa-... — это шрифтовые стили):
<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; }
Это позволит вам скрыть/показать столбцы.
Во-первых, установите id в директиву сетки кендо: <kendo-grid id="grid"><kendo-grid>, именно кендо-сетка; Во-вторых, создайте свой собственный html с флажками или что вы хотите, чтобы имя поля было скрыто или нет, например:
<ul>
<li><input type="checkbox" id="Id" /><span>Id</span></li>
<li><input type="checkbox" id="Name" /><span>Name</span></li>
</ul>
Тогда получите все:
var columns = JSON.stringify({
"Id":$('#Id').is(':checked');,
"Name": $('#Name').is(':checked');,
});
Затем повторите их:
var grid = $("#grid").data("kendoGrid");
angular.forEach(columns , function (value, key) {
if (value) {
grid.showColumn(key);
} else {
grid.hideColumn(key);
}
});
/////////////////////////////////////////////
grid.showColumn("FieldName"); // by column field
grid.showColumn(1); // by column index
Заморозить/разморозить: просто добавьте отключенный атрибут к входам
