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
EXAMPLE
MODULES
DATA
RAZOR
JS
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
// required for registering IgniteUIBlazorusing IgniteUI.Blazor.Controls;
namespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Infragistics Blazor
builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule));
builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule));
await builder.Build().RunAsync();
}
}
}cs
using System;
using System.Collections;
using System.Collections.Generic;
namespaceInfragistics.Samples
{
publicclassCity {
publicstring Id { get; set; }
publicstring Name { get; set; }
publicstring Country { get; set; }
}
publicclassSampleData {
publicstatic List<City> Cities = GetCities();
publicstatic List<City> GetCities() {
var data = new List<City> {
new City {
Id = "UK01",
Name = "London",
Country = "United Kingdom",
},
new City {
Id = "UK02",
Name = "Manchester",
Country = "United Kingdom",
},
new City {
Id = "UK03",
Name = "Birmingham",
Country = "United Kingdom",
},
new City {
Id = "UK04",
Name = "Glasgow",
Country = "United Kingdom",
},
new City {
Id = "UK05",
Name = "Liverpool",
Country = "United Kingdom",
},
new City {
Id = "US01",
Name = "New York",
Country = "United States of America",
},
new City {
Id = "US02",
Name = "Miami",
Country = "United States of America",
},
new City {
Id = "US03",
Name = "Philadelphia",
Country = "United States of America",
},
new City {
Id = "US04",
Name = "Chicago",
Country = "United States of America",
},
new City {
Id = "US05",
Name = "Springfield",
Country = "United States of America",
},
new City {
Id = "US06",
Name = "Los Angeles",
Country = "United States of America",
},
new City {
Id = "US07",
Name = "Houston",
Country = "United States of America",
},
new City {
Id = "US08",
Name = "Phoenix",
Country = "United States of America",
},
new City {
Id = "US09",
Name = "San Diego",
Country = "United States of America",
},
new City {
Id = "US10",
Name = "Dallas",
Country = "United States of America",
},
new City {
Id = "BG01",
Name = "Sofia",
Country = "Bulgaria",
},
new City {
Id = "BG02",
Name = "Plovdiv",
Country = "Bulgaria",
},
new City {
Id = "BG03",
Name = "Varna",
Country = "Bulgaria",
},
new City {
Id = "BG04",
Name = "Burgas",
Country = "Bulgaria",
},
new City {
Id = "IT01",
Name = "Rome",
Country = "Italy",
},
new City {
Id = "IT02",
Name = "Milan",
Country = "Italy",
},
new City {
Id = "IT03",
Name = "Naples",
Country = "Italy",
},
new City {
Id = "IT04",
Name = "Turin",
Country = "Italy",
},
new City {
Id = "IT05",
Name = "Palermo",
Country = "Italy",
},
new City {
Id = "IT06",
Name = "Florence",
Country = "Italy",
},
};
return data;
}
}
}cs
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:
Make sure to include the templates.js file in the index.html under wwwroot.
Then in our application we can refer to the template we declared via the ItemTemplateScript property.
Other than custom templates, the Ignite UI for Blazor ComboBox component exposes several slots that allow users to pass custom content to different combo parts.
Header Slot
To render a custom header above the list of options pass content to the header slot:
<IgbCombo><headerslot="header">
Header content goes here
</header></IgbCombo>razor
Footer Slot
To render a custom footer below the list of options pass content to the footer slot:
<IgbCombo><footerslot="footer">
Footer content goes here
</footer></IgbCombo>razor
Empty List Slot
To render a custom content when the filtering operation returns no result, use the empty slot: