Implement Multiple Columns in Drop Downs with Wijmo's dropDownCssClass

Scrolling through a long list of items in a drop down can be tiresome for the user, and Wijmo's dropDownCssClass allows you to display multiple columns in a drop down list. Several Wijmo controls have drop-down elements that show lists, calendars, or other editors. Styling drop-downs can be tricky because the drop-down elements are re-parented before they are displayed, and become direct children of the document bodym rather than of the control they belong to. This prevents standard CSS selectors based on the control to work for drop-down elements. The dropDownCssClass property adds a specified class name to the drop-downs, allowing you to style them easily with CSS. For example, this CSS uses the FlexBox model to make ListBox controls display their items in three columns rather than one:

/* CSS for multi-column listBox (note: FlexBox is not supported by IE9) */  
.multi-column {  
display: flex;  
flex-wrap: wrap;  
max-width: 430px;  
}  
.multi-column .wj-listbox-item {  
min-width: 140px;  
}

And this markup adds the “multi-column” class to the drop-down controls associated with a ComboBox, a MultiSelect, and a data-mapped FlexGrid column: Here's the result. Notice how using multiple columns allows the controls to show more items at once, making it easier to find and select items: Multiple Columns in a Drop Down List Multiple Columns with a CheckBox Multi-column Drop Down in a JavaScript DataGrid Added in version 5.20153.113