The Telerik MultiColumnComboBox for Blazor is an editor UI component that lets you choose values from a predefined list in a table-like structure. In its essence, it is an advanced select element with rich functionality, including data binding, filtering, grouping, rendering of custom content through templates, multiple options to configure its appearance, input of custom values, validation, built-in localization of messages, accessibility and keyboard navigation.
The Telerik Blazor MultiColumnComboBox provides an easy way for users to find items in its list of predefined values. When the multi-column combo box component is focused, users can start typing part of the text they are looking for, and the list of items will be populated with a suggested sub-list of items that match the given criteria. The component also provides configuration for the default filter operator via the FilterOperator parameter.
You can organize the Blazor MultiColumnComboBox list items into groups and make searching and browsing values easier and more intuitive. To enable grouping of items, all you have to do is provide a value to the GroupField parameter which matches a field in the dataset.
Using the multiple template options available for the Telerik Blazor MultiColumnComboBox, you can render custom content in every part of the component: above or below the list of items (Header and Footer Templates), custom content in each row of the MultiColumnComboBox (RowTemplate), as well as separate cell customizations via the HeaderTemplate and Template for each column.
Additionally, you can use the Class and HeaderClass parameters that let you apply CSS class on the columns’ cells and headers.
The built-in parameters FillMode, Rounded and Size parameters provide additional customizations of the Blazor MultiColumnComboBox appearance and let you easily shape it in any way you need.
Along with the list of predefined items, the MultiColumnComboBox for Blazor can be configured to allow app users to input custom values. In this scenario, the component behaves like a combination of a dropdown list and a textbox. In order to accept the entered item, users just need to press Enter or blur the input.
The Telerik UI for Blazor MultiColumnComboBox supports validation through data annotations in the model. This means that required and invalid values will be easily validated and а corresponding validation message can be displayed to app users.
When you deal with large datasets, you can take advantage of the Blazor MultiColumnComboBox virtualization feature. By enabling it, you can fetch items on demand rather than loading all data at once. You can control the number of items that need to be loaded each time a user scrolls through the component. To enable the virtualization feature, you need to set the ScrollMode, ListHeight, ItemHeight and PageSize parameters and let all the work and calculations be done automatically by the MultiColumnComboBox.
The Telerik UI for Blazor MultiColumnComboBox UI component is built with accessibility in mind and is compliant with the international web accessibility standards, including WCAG 2.1, Section 508 and WAI-ARIA attributes for screen readers.
Like the rest of the Telerik UI for Blazor components, the MultiColumnComboBox comes with built-in keyboard navigation, meaning that users can perform all actions in it with a keyboard only.
The MultiColumnComboBox has built-in localization support, which makes it easy to translate texts to any language that your Blazor app may require. The UI component contains localized strings (such as Clear, Open, No Data, etc.) that are available for customization through the resource files.
The Telerik UI for Blazor MultiColumnComboBox component comes with several built-in themes and color swatches, including Default (our own styling), Material (based on the Material Design guidelines), and Bootstrap.