jQuery - Kendo UI Grid - Large Number of Columns

Question

I have a Kendo UI grid that has a large number of columns (50). Although the user will likely only select a few columns to view, he/she needs the ability to select from any of the 50 columns. Unfortunately, on most displays, the kendo grid column menu will be greater than the display. Is there a way to make the column menu scrollable or set sub-menus (that contain groups of columns) within the column menu?

Also, I found that the initial creation of the kendo Grid component is slow to build 50 columns with column menus. This is even true when initially hiding all the columns. Please let me know if also have a way to help with performance if the view issue above can be resolved. Many thanks in advance.

Answer 1

You can use CSS to reduce the height of the column menu and add a scrollbar:

.k-group .k-group
{
  height: 100px;
  overflow: auto;
}

Here is a demo: http://jsbin.com/ebenay/1/edit