Show Column List in Multiple Columns
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Product Version | Created with version 2018.2.221 |
Description
How can I split the column menu into multiple columns in a Grid that renders many columns?
Solution
Use custom CSS rules.
<style>
ul ul {
width: 400px;
}
li.k-columns-item .k-animation-container li.k-item {
float: left;
}
ul .k-menu-group li {
width: 50%;
}
</style>
<div id="grid" style="width: 2000px;"></div>
<script>
var options = {
columns: [
{ field: "name" },
{ field: "age" }
],
columnMenu: {
columns: true
},
sortable: true,
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
};
for (var c = 1; c <= 10; c++) {
options.columns.push({ field: 'col' + c });
}
$("#grid").kendoGrid(options);
</script>