MultiColumnComboBox Templates
The MultiColumnComboBox component allows you to change what is rendered in its header and footer through templates.
In this article:
Row Template
The RowTemplate allows you to control the rendering of each whole row in the dropdown. Use a row template if separate column templates do not allow enough customization.
You can access the context object and cast it to the bound model to employ some custom business logic. The contenxt represents the current data item for the row.
The MultiColumnComboBox items render as a list (
<ul>), not a<table>. Using table cells inside the row template is possible only if you render a complete table for each item. To mimic the default component appearance, use two sibling containers inside the<RowTemplate>with ak-table-tdCSS class.
Header Template
The HeaderTemplate controls the content that you can place above the list of items inside the dropdown element. It is always visible when the combobox is expanded. By default it is empty.
Footer Template
The FooterTemplate allows you to render content below the list of items inside the dropdownlist element. It is always visible when the dropdown is expanded. By default it is empty.
No Data Template
The NoDataTemplate controls the content of the popup element when the component does not have any items. By default, simply "No data" text is rendered.
Example
Using MultiColumnComboBox Templates