Open Source

Blazor ComboBox Templates

The Ignite UI for Blazor ComboBox component allows defining custom templates for different areas such as items, group headers, empty list, and icons.

ComboBox Templates Example

Template Types

Item Template

The ItemTemplate is a custom template that if defined should be used when rendering items in the list of options.

To template your items in a Blazor app, you need to define a template in a separate JavaScript file. Let’s create a new file under the wwwroot directory called templates.js.

In this file we can declare a new item template like so:

const html = window.igTemplating.html;

const itemTemplate = ({ item }) => {
    return html`<span><b>${item.Name}</b> [${item.Id}]</span>`;
}

igRegisterScript("ComboItemTemplate", itemTemplate, false);

Make sure to include the templates.js file in the index.html under wwwroot.

<body>
    <!-- importing JS used in the razor pages -->
    <script src="templates.js"></script>
</body>

Then in our application we can refer to the template we declared via the ItemTemplateScript property.

<IgbCombo ItemTemplateScript="ComboItemTemplate"></IgbCombo>

Group Header Template

The GroupHeaderTemplate is a custom template that if defined should be used when rendering group headers in the list of options.

First define the group header template:

const html = window.igTemplating.html;

const groupHeaderTemplate = ({ item }) => {
    return html`<span>Country of ${item.Country}</span>`;
}

igRegisterScript('ComboGroupHeaderTemplate', groupHeaderTemplate, false)

Then in our application we can refer to the template we declared via the GroupHeaderTemplateScript property.

<IgbCombo GroupHeaderTemplateScript="ComboGroupHeaderTemplate"></IgbCombo>

Slots

Other than custom templates, the Ignite UI for Blazor ComboBox component exposes several slots that allow users to pass custom content to different parts of the component. For all ComboBox slots, we recommend using a <span> element for simple text, symbols, or emojis, and an <igc-icon> component when adding icons. For the header and footer slots, you can also use more semantic elements such as <header> and <footer>.

Header Slot

To render a custom header above the list of options pass content to the header slot:

<IgbCombo>
  <span slot="header">Header content goes here</span>
</IgbCombo>

To render a custom footer below the list of options pass content to the footer slot:

<IgbCombo>
  <span slot="footer">Footer content goes here</span>
</IgbCombo>

Empty List Slot

To render a custom content when the filtering operation returns no result, use the empty slot:

<IgbCombo>
  <span slot="empty">¯\_(ツ)_/¯</span>
</IgbCombo>

Toggle Icon Slot

The toggle icon in the combo input can also be modified via the toggle-icon slot:

<IgbCombo>
  <IgbIcon slot="toggle-icon" IconName="down" Collection="material"></IgbIcon>
</IgbCombo>

Clear Icon Slot

The clear icon can be changed via the clear-icon slot:

<IgbCombo>
  <IgbIcon slot="clear-icon" IconName="clear" Collection="material"></IgbIcon>
</IgbCombo>

API References

IgbCombo