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>