DevExpress v24.2 Update — Your Feedback Matters
Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.
Take the survey
Not interested
DxComboBoxSettings.ItemTemplate Property
Specifies the template used to display the combo box editor’s items.
Namespace : DevExpress.Blazor
Assembly :
DevExpress.Blazor.v24.2.dll
NuGet Package :
DevExpress.Blazor
# Declaration
# Property Value
Place HTML markup in the <ItemTemplate>
tag to define custom content for the combo box editor’s items. Use the template’s context parameter to access a data object and its fields (for instance, you can get a data field value).
The following code snippet displays the combo box editor’s items in a card-like view. Each item shows an employee’s first name, last name, photo, and phone number.
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
<DxGrid Data ="Orders"
EditMode ="GridEditMode.EditRow" >
<Columns >
<DxGridCommandColumn />
<DxGridDataColumn FieldName ="EmployeeId" Caption ="Employee" Width ="20%" >
<EditSettings >
<DxComboBoxSettings Data ="Employees"
TextFieldName ="LastName"
ValueFieldName ="EmployeeId" >
<ItemTemplate >
@{ var employee = (Employee)context; }
<div class ="combobox-item-template" >
<img src ="@ StaticAssetUtils.GetImagePath(GetImageFileName(employee))" />
<div class ="combobox-item-template-text" >
<span > @ employee.FirstName @ employee.LastName</span >
<span class ="combobox-item-template-employee-phone" > @ employee.HomePhone</span >
</div >
</div >
</ItemTemplate >
</DxComboBoxSettings >
</EditSettings >
</DxGridDataColumn >
<DxGridDataColumn FieldName ="ShippedDate" />
<DxGridDataColumn FieldName ="ShipCountry" />
<DxGridDataColumn FieldName ="ShipCity" />
<DxGridDataColumn FieldName ="ShipName" Width ="20%" />
</Columns >
</DxGrid >
@ code {
NorthwindContext Northwind { get ; set ; }
List<Order> Orders { get ; set ; }
List<Employee> Employees { get ; set ; }
protected override async Task OnInitializedAsync ( ) {
Northwind = NorthwindContextFactory.CreateDbContext();
Orders = await Northwind.Orders.ToListAsync();
Employees = await Northwind.Employees.ToListAsync();
}
public void Dispose ( ) {
Northwind?.Dispose();
}
}
using Microsoft.EntityFrameworkCore ;
#nullable disable
namespace Grid.Northwind {
public partial class NorthwindContext : DbContext {
public NorthwindContext (DbContextOptions<NorthwindContext> options )
: base (options ) {
}
public virtual DbSet<Order> Orders { get ; set ; }
public virtual DbSet<Employee> Employees { get ; set ; }
protected override void OnConfiguring (DbContextOptionsBuilder optionsBuilder ) {
if (!optionsBuilder.IsConfigured) {
optionsBuilder.UseSqlServer("Server=.\\sqlexpress;Database=Northwind;Integrated Security=true" );
}
}
protected override void OnModelCreating (ModelBuilder modelBuilder ) {
modelBuilder.HasAnnotation("Relational:Collation" , "SQL_Latin1_General_CP1_CI_AS" );
modelBuilder.Entity<Order>(entity => {
entity.HasIndex(e => e.CustomerId, "CustomerID" );
entity.HasIndex(e => e.CustomerId, "CustomersOrders" );
entity.HasIndex(e => e.EmployeeId, "EmployeeID" );
entity.HasIndex(e => e.EmployeeId, "EmployeesOrders" );
entity.HasIndex(e => e.OrderDate, "OrderDate" );
entity.HasIndex(e => e.ShipPostalCode, "ShipPostalCode" );
entity.HasIndex(e => e.ShippedDate, "ShippedDate" );
entity.HasIndex(e => e.ShipVia, "ShippersOrders" );
entity.Property(e => e.OrderId).HasColumnName("OrderID" );
entity.Property(e => e.CustomerId)
.HasMaxLength(5 )
.HasColumnName("CustomerID" )
.IsFixedLength(true );
entity.Property(e => e.EmployeeId).HasColumnName("EmployeeID" );
entity.Property(e => e.Freight)
.HasColumnType("money" )
.HasDefaultValueSql("((0))" );
entity.Property(e => e.OrderDate).HasColumnType("datetime" );
entity.Property(e => e.RequiredDate).HasColumnType("datetime" );
entity.Property(e => e.ShipAddress).HasMaxLength(60 );
entity.Property(e => e.ShipCity).HasMaxLength(15 );
entity.Property(e => e.ShipCountry).HasMaxLength(15 );
entity.Property(e => e.ShipName).HasMaxLength(40 );
entity.Property(e => e.ShipPostalCode).HasMaxLength(10 );
entity.Property(e => e.ShipRegion).HasMaxLength(15 );
entity.Property(e => e.ShippedDate).HasColumnType("datetime" );
entity.HasOne(d => d.Customer)
.WithMany(p => p.Orders)
.HasForeignKey(d => d.CustomerId)
.HasConstraintName("FK_Orders_Customers" );
entity.HasOne(d => d.ShipViaNavigation)
.WithMany(p => p.Orders)
.HasForeignKey(d => d.ShipVia)
.HasConstraintName("FK_Orders_Shippers" );
});
modelBuilder.Entity<Employee>(entity => {
entity.HasIndex(e => e.EmployeeId, "EmployeeId" );
entity.HasIndex(e => e.LastName, "LastName" );
entity.HasIndex(e => e.FirstName, "FirstName" );
entity.HasIndex(e => e.Title, "Title" );
entity.HasIndex(e => e.BirthDate, "BirthDate" );
entity.HasIndex(e => e.HireDate, "HireDate" );
entity.HasIndex(e => e.Notes, "Notes" );
});
OnModelCreatingPartial(modelBuilder);
}
partial void OnModelCreatingPartial (ModelBuilder modelBuilder ) ;
}
}
public partial class Order {
public Order ( ) {
OrderDetails = new HashSet<OrderDetail>();
}
public int OrderId { get ; set ; }
public string CustomerId { get ; set ; }
public int ? EmployeeId { get ; set ; }
public DateTime? OrderDate { get ; set ; }
public DateTime? RequiredDate { get ; set ; }
public DateTime? ShippedDate { get ; set ; }
public int ? ShipVia { get ; set ; }
public decimal ? Freight { get ; set ; }
public string ShipName { get ; set ; }
public string ShipAddress { get ; set ; }
public string ShipCity { get ; set ; }
public string ShipRegion { get ; set ; }
public string ShipPostalCode { get ; set ; }
public string ShipCountry { get ; set ; }
}
public partial class Employee {
public int EmployeeId { get ; set ; }
public string LastName { get ; set ; }
public string FirstName { get ; set ; }
public string Title { get ; set ; }
public string TitleOfCourtesy { get ; set ; }
public Nullable<System.DateTime> BirthDate { get ; set ; }
public Nullable<System.DateTime> HireDate { get ; set ; }
public string Address { get ; set ; }
public string City { get ; set ; }
public string Region { get ; set ; }
public string PostalCode { get ; set ; }
public string Country { get ; set ; }
public string HomePhone { get ; set ; }
public string Extension { get ; set ; }
public byte [] Photo { get ; set ; }
public string Notes { get ; set ; }
public Nullable<int > ReportsTo { get ; set ; }
public string PhotoPath { get ; set ; }
public virtual ICollection<Order> Orders { get ; set ; }
public string Text => $"{FirstName} {LastName} ({Title} )" ;
public string ImageFileName => $"Employees/{EmployeeId} .jpg" ;
}
.combobox-item-template {
display : flex;
align-items : center;
}
.combobox-item-template > img {
border-radius : 50% ;
width : 2rem ;
height : 2rem ;
}
img + .combobox-item-template-text {
margin-left : 1rem ;
}
.combobox-item-template-text {
display : flex;
flex-flow : column;
}
.combobox-item-template-employee-phone {
opacity : 0.65 ;
}
To change the item template at runtime, use the IComboBoxSettings.ItemTemplate property.
See Also