Configuring the Columns
13 Dec 202424 minutes to read
TextWrap for column
The TextWrap in the Blazor MultiColumn ComboBox ensures proper wrapping of text within data content for a particular column. By enabling EnableTextWrap, you can manage how text appears when it exceeds the available space.
Key features
-
TextWrapElement: This is an enum(Header,Content ,Both) Defines the element where text wrapping is applied.
-
TextOverflowMode:This is an enum(Ellipsis ,EllipsisWithTooltip) Defines truncates the cell content when it overflows its area.
The following example enables text wrapping for a particular column in the Blazor MultiColumn ComboBox,ensuring that longer text is properly displayed without overflowing.
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.MultiColumnComboBox
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Employees" Width="300px" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select an employee" EnableTextWrap="true" TextWrapElement="TextWrapElement.Header" >
<MultiColumnComboboxColumns>
<MultiColumnComboboxColumn Field="Name" Header="Name of the employee" Width="150"></MultiColumnComboboxColumn>
<MultiColumnComboboxColumn TextOverflowMode="TextOverflowMode.EllipsisWithTooltip" Field="Position" Header="Position" Width="100" Format="C2"></MultiColumnComboboxColumn>
<MultiColumnComboboxColumn Field="Department" Header="Department" Width="100"></MultiColumnComboboxColumn>
<MultiColumnComboboxColumn Field="Salary" Format="c2" Header="Salary" Width="100"></MultiColumnComboboxColumn>
<MultiColumnComboboxColumn Field="Rating" Header="Rating" Width="100"></MultiColumnComboboxColumn>
</MultiColumnComboboxColumns>
</SfMultiColumnComboBox>
@code {
public class Employee
{
public string Name { get; set; }
public string Position { get; set; }
public string Department { get; set; }
public decimal Salary { get; set; }
public double Rating { get; set; }
}
private List<Employee> Employees = new List<Employee>();
private string Value { get; set; } = "Jonathan Alexander Smith";
protected override Task OnInitializedAsync()
{
Employees = new List<Employee>
{
new Employee { Name = "Jonathan Alexander Smith", Position = "Senior Software Engineer", Department = "Engineering Department", Salary = 105000m, Rating = 4.8 },
new Employee { Name = "Sophia Elizabeth Johnson", Position = "Lead Product Designer", Department = "Design & UX Team", Salary = 95000m, Rating = 4.7 },
new Employee { Name = "Alexander James Thompson", Position = "Chief Marketing Officer", Department = "Marketing Division", Salary = 125000m, Rating = 4.9 },
new Employee { Name = "Madeline Grace Harris", Position = "Project Manager for Enterprise Solutions", Department = "Project Management Office", Salary = 85000m, Rating = 4.5 },
new Employee { Name = "Christopher Daniel Roberts", Position = "Data Scientist with AI Expertise", Department = "Data Analytics & AI", Salary = 115000m, Rating = 4.6 },
new Employee { Name = "Rebecca Olivia Martinez", Position = "Human Resources Manager", Department = "Human Resources & Recruiting", Salary = 77000m, Rating = 4.3 },
new Employee { Name = "James Benjamin Lee", Position = "Senior Web Developer and Full Stack Specialist", Department = "Engineering & Development", Salary = 98000m, Rating = 4.7 },
new Employee { Name = "Chloe Isabelle Cooper", Position = "Product Marketing Manager", Department = "Product Strategy & Marketing", Salary = 87000m, Rating = 4.4 },
new Employee { Name = "William Joseph Anderson", Position = "Senior IT Infrastructure Architect", Department = "IT Infrastructure & Operations", Salary = 102000m, Rating = 4.6 },
new Employee { Name = "Charlotte Emily Carter", Position = "Customer Success Lead for Global Clients", Department = "Customer Success Team", Salary = 92000m, Rating = 4.8 },
};
return base.OnInitializedAsync();
}
}
Setting the text align
The MultiColumn ComboBox supports auto-generating columns, which simplifies the process by automatically creating columns based on the data source. Additionally, you can customize the column header text to reflect specific data, adjust the column Width for optimal display, and set the TextAlign (left, center, or right) to enhance readability.
@using Syncfusion.Blazor.MultiColumnComboBox
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product">
<MultiColumnComboboxColumns>
<MultiColumnComboboxColumn Field="Name" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
<MultiColumnComboboxColumn Field="Price" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
<MultiColumnComboboxColumn Field="Availability" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
</MultiColumnComboboxColumns>
</SfMultiColumnComboBox>
@code {
public class Product
{
public string Name { get; set; }
public decimal Price { get; set; }
public string Availability { get; set; }
public string Category { get; set; }
public double Rating { get; set; }
}
private List<Product> Products = new List<Product>();
private string Value { get; set; } = "Smartphone";
protected override Task OnInitializedAsync()
{
Products = new List<Product>
{
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 }
};
return base.OnInitializedAsync();
}
}
Setting the column template
| The MultiColumn ComboBox supports Template within the column, allowing you to define a column template that renders a customized element in each cell. |
In the following sample, defines how to use Template inside the column.
@using Syncfusion.Blazor.MultiColumnComboBox
<SfMultiColumnComboBox TItem="Employee" TValue="string" AllowFiltering="true" PopupWidth="650px"
@bind-Value="@Value" DataSource="@Employees" ValueField="Name"
TextField="Name" Placeholder="Select an employee" Width="250px">
<MultiColumnComboboxColumns>
<MultiColumnComboboxColumn Field="EmployeeID" Width="80px">
<Template>
@{
var EmployeeInfo = (context as Employee);
<div class="image">
<img src="./images/employees/@EmployeeInfo.EmployeeID" alt="@EmployeeInfo.EmployeeID" />
</div>
}
</Template>
</MultiColumnComboboxColumn>
<MultiColumnComboboxColumn Field="Name" Width="120px">
<Template>
@{
var EmployeeInfo = (context as Employee);
<div class="ename"> @EmployeeInfo.Name </div>
<div class="job"> @EmployeeInfo.Role </div>
}
</Template>
</MultiColumnComboboxColumn>
<MultiColumnComboboxColumn Field="Department" Width="80px" />
<MultiColumnComboboxColumn Field="Experience" Width="80px" />
<MultiColumnComboboxColumn Field="Location" Width="80px" />
</MultiColumnComboboxColumns>
</SfMultiColumnComboBox>
@code {
public class Employee
{
public string Name { get; set; }
public string Department { get; set; }
public string Role { get; set; }
public string Location { get; set; }
public int Experience { get; set; }
public int EmployeeID { get; set; }
}
private string Value { get; set; } = "Alice Johnson";
private List<Employee> Employees = new List<Employee>();
protected override Task OnInitializedAsync()
{
Employees = new List<Employee>
{
new Employee
{
Name = "Alice Johnson",
Department = "Engineering",
Role = "Software Engineer",
Location = "New York",
Experience = 5,
EmployeeID = 1
},
new Employee
{
Name = "Bob Smith",
Department = "Marketing",
Role = "Marketing Manager",
Location = "San Francisco",
Experience = 7,
EmployeeID = 7
},
new Employee
{
Name = "Catherine Lee",
Department = "Finance",
Role = "Financial Analyst",
Location = "Chicago",
Experience = 4,
EmployeeID = 3
},
new Employee
{
Name = "David Kim",
Department = "Engineering",
Role = "DevOps Engineer",
Location = "Austin",
Experience = 6,
EmployeeID = 8
},
new Employee
{
Name = "Eva Brown",
Department = "Sales",
Role = "Sales Executive",
Location = "Boston",
Experience = 3,
EmployeeID = 5
},
new Employee
{
Name = "Frank White",
Department = "Human Resources",
Role = "HR Manager",
Location = "Seattle",
Experience = 8,
EmployeeID = 9
},
new Employee
{
Name = "Grace Green",
Department = "Design",
Role = "UX Designer",
Location = "Los Angeles",
Experience = 5,
EmployeeID = 2
},
new Employee
{
Name = "Hank Wilson",
Department = "Engineering",
Role = "Product Manager",
Location = "Denver",
Experience = 24,
EmployeeID = 10
}
};
return base.OnInitializedAsync();
}
}
<style>
.control-wrapper {
max-width: 250px;
padding: 30px 0px 0px;
margin: 0 auto;
}
.example-label {
font-size: 14px;
margin-bottom: 6px;
}
@@font-face {
font-family: 'ej2-headertemplate';
src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
font-weight: normal;
font-style: normal;
}
.e-grid .e-icon-userlogin::before, .e-grid .e-icon-calender::before {
font-family: 'ej2-headertemplate';
width: 15px !important;
}
.e-grid .e-icon-userlogin::before {
content: '\e702';
}
.e-grid .e-icon-calender::before {
content: '\e960';
}
.e-multicolumn-list .ename {
display: block !important;
opacity: .87;
font-size: 16px;
margin-top: 8px;
}
.e-multicolumn-list .job {
opacity: .54;
font-size: 14px;
margin-top: 15px;
margin-bottom: 7px;
}
</style>Header template
The HeaderTemplate of the MultiColumn ComboBox component used to customize the header element of a MultiColumn. With this property, you can render custom HTML elements or Blazor components to the header element. This feature allows you to add more functionality to the header, such as sorting or filtering.
In the following sample, defines how to use HeaderTemplate.
@using Syncfusion.Blazor.MultiColumnComboBox
<SfMultiColumnComboBox TItem="Employee" TValue="string" AllowFiltering="true" PopupWidth="650px"
@bind-Value="@Value" DataSource="@Employees" ValueField="Name"
TextField="Name" Placeholder="Select an employee" Width="250px">
<MultiColumnComboboxColumns>
<MultiColumnComboboxColumn Field="EmployeeID" Width="80px">
<Template>
@{
var EmployeeInfo = (context as Employee);
<div class="image">
<img src="./images/employees/@EmployeeInfo.EmployeeID" alt="@EmployeeInfo.EmployeeID" />
</div>
}
</Template>
<HeaderTemplate>
<div>
<span class="e-icon-userlogin e-icons employee"></span> Photo
</div>
</HeaderTemplate>
</MultiColumnComboboxColumn>
<MultiColumnComboboxColumn Field="Name" Width="120px">
<Template>
@{
var EmployeeInfo = (context as Employee);
<div class="ename"> @EmployeeInfo.Name </div>
<div class="job"> @EmployeeInfo.Role </div>
}
</Template>
</MultiColumnComboboxColumn>
<MultiColumnComboboxColumn Field="Department" Width="80px" />
<MultiColumnComboboxColumn Field="Experience" Width="80px" />
<MultiColumnComboboxColumn Field="Location" Width="80px" />
</MultiColumnComboboxColumns>
</SfMultiColumnComboBox>
@code {
public class Employee
{
public string Name { get; set; }
public string Department { get; set; }
public string Role { get; set; }
public string Location { get; set; }
public int Experience { get; set; }
public int EmployeeID { get; set; }
}
private string Value { get; set; } = "Alice Johnson";
private List<Employee> Employees = new List<Employee>();
protected override Task OnInitializedAsync()
{
Employees = new List<Employee>
{
new Employee
{
Name = "Alice Johnson",
Department = "Engineering",
Role = "Software Engineer",
Location = "New York",
Experience = 5,
EmployeeID = 1
},
new Employee
{
Name = "Bob Smith",
Department = "Marketing",
Role = "Marketing Manager",
Location = "San Francisco",
Experience = 7,
EmployeeID = 7
},
new Employee
{
Name = "Catherine Lee",
Department = "Finance",
Role = "Financial Analyst",
Location = "Chicago",
Experience = 4,
EmployeeID = 3
},
new Employee
{
Name = "David Kim",
Department = "Engineering",
Role = "DevOps Engineer",
Location = "Austin",
Experience = 6,
EmployeeID = 8
},
new Employee
{
Name = "Eva Brown",
Department = "Sales",
Role = "Sales Executive",
Location = "Boston",
Experience = 3,
EmployeeID = 5
},
new Employee
{
Name = "Frank White",
Department = "Human Resources",
Role = "HR Manager",
Location = "Seattle",
Experience = 8,
EmployeeID = 9
},
new Employee
{
Name = "Grace Green",
Department = "Design",
Role = "UX Designer",
Location = "Los Angeles",
Experience = 5,
EmployeeID = 2
},
new Employee
{
Name = "Hank Wilson",
Department = "Engineering",
Role = "Product Manager",
Location = "Denver",
Experience = 24,
EmployeeID = 10
}
};
return base.OnInitializedAsync();
}
}
<style>
.control-wrapper {
max-width: 250px;
padding: 30px 0px 0px;
margin: 0 auto;
}
.example-label {
font-size: 14px;
margin-bottom: 6px;
}
@@font-face {
font-family: 'ej2-headertemplate';
src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
font-weight: normal;
font-style: normal;
}
.e-grid .e-icon-userlogin::before, .e-grid .e-icon-calender::before {
font-family: 'ej2-headertemplate';
width: 15px !important;
}
.e-grid .e-icon-userlogin::before {
content: '\e702';
}
.e-grid .e-icon-calender::before {
content: '\e960';
}
.e-multicolumn-list .ename {
display: block !important;
opacity: .87;
font-size: 16px;
margin-top: 8px;
}
.e-multicolumn-list .job {
opacity: .54;
font-size: 14px;
margin-top: 15px;
margin-bottom: 7px;
}
</style>
Setting display as checkbox
The MultiColumn ComboBox component allows you to render boolean values as checkboxes in columns. This can be achieved by using the DisplayAsCheckBox property. This property is useful when you have a boolean column in your MultiColumn ComboBox and you want to display the values as checkboxes instead of the default text representation of true or false.
To enable the rendering of boolean values as checkboxes, you need to set the DisplayAsCheckBox property to true.
@using Syncfusion.Blazor.MultiColumnComboBox
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product">
<MultiColumnComboboxColumns>
<MultiColumnComboboxColumn Field="Name" Width="200px"></MultiColumnComboboxColumn>
<MultiColumnComboboxColumn Field="Price" Width="200px"></MultiColumnComboboxColumn>
<MultiColumnComboboxColumn Field="IsAvailable" Width="200px" DisplayAsCheckBox="true"></MultiColumnComboboxColumn>
</MultiColumnComboboxColumns>
</SfMultiColumnComboBox>
@code {
public class Product
{
public string Name { get; set; }
public decimal Price { get; set; }
public bool IsAvailable { get; set; } // Changed to Boolean
public string Category { get; set; }
public double Rating { get; set; }
}
private List<Product> Products = new List<Product>();
private string Value { get; set; } = "Smartphone";
protected override Task OnInitializedAsync()
{
Products = new List<Product>
{
new Product { Name = "Laptop", Price = 999.99m, IsAvailable = true, Category = "Electronics", Rating = 4.5 },
new Product { Name = "Smartphone", Price = 599.99m, IsAvailable = false, Category = "Electronics", Rating = 4.3 },
new Product { Name = "Tablet", Price = 299.99m, IsAvailable = true, Category = "Electronics", Rating = 4.2 },
new Product { Name = "Headphones", Price = 49.99m, IsAvailable = true, Category = "Accessories", Rating = 4.0 }
};
return base.OnInitializedAsync();
}
}
Setting custom attributes
You can customize the appearance of the column headers in MultiColumn ComboBox using the CustomAttributes property.
You can set the CustomAttributes property of the desired column to an object that contains the CSS class custom css. This CSS class will be applied to the header cell of the specified rows in the Multicolumn.
<MultiColumnComboboxColumn Field="Name" Width="200px" CustomAttributes="@(new Dictionary<string, object>() { { "class", "customcss" } })"></MultiColumnComboboxColumn>The following example demonstrates how to customize the appearance of the Multicolumn Combobox columns using custom attributes.
@using Syncfusion.Blazor.MultiColumnComboBox
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product">
<MultiColumnComboboxColumns>
<MultiColumnComboboxColumn Field="Name" Width="200px" CustomAttributes="@(new Dictionary<string, object>() { { "class", "customcss" } })"></MultiColumnComboboxColumn>
<MultiColumnComboboxColumn Field="Price" Width="200px" CustomAttributes="@(new Dictionary<string, object>() { { "class", "customcss" } })"></MultiColumnComboboxColumn>
<MultiColumnComboboxColumn Field="Availability" Width="200px" CustomAttributes="@(new Dictionary<string, object>() { { "class", "customcss" } })"></MultiColumnComboboxColumn>
</MultiColumnComboboxColumns>
</SfMultiColumnComboBox>
<style>
.e-multicolumn-grid .e-rowcell.customcss {
background-color: rgb(43, 205, 226);
color: black;
}
</style>
@code {
public class Product
{
public string Name { get; set; }
public decimal Price { get; set; }
public string Availability { get; set; }
public string Category { get; set; }
public double Rating { get; set; }
}
private List<Product> Products = new List<Product>();
private string Value { get; set; } = "Smartphone";
protected override Task OnInitializedAsync()
{
Products = new List<Product>
{
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 }
};
return base.OnInitializedAsync();
}
}
Setting the format
The Format property to a column in the SfMultiColumnComboBox, specify a valid format string that matches the data type of the column, such as numeric or date formats. For example, you can apply currency formatting to a price field by using the format “C2”.
The following example the Price column uses “C2” to display values in a currency format.
@using Syncfusion.Blazor.MultiColumnComboBox
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product">
<MultiColumnComboboxColumns>
<MultiColumnComboboxColumn Field="Name" Width="200px"></MultiColumnComboboxColumn>
<MultiColumnComboboxColumn Field="Price" Width="200px" Format="C2"></MultiColumnComboboxColumn> <!-- C2 for currency format -->
</MultiColumnComboboxColumns>
</SfMultiColumnComboBox>
@code {
public class Product
{
public string Name { get; set; }
public double Price { get; set; }
public string Availability { get; set; }
public string Category { get; set; }
public double Rating { get; set; }
}
private List<Product> Products = new List<Product>();
private string Value { get; set; } = "Smartphone";
protected override Task OnInitializedAsync()
{
Products = new List<Product>
{
new Product { Name = "Laptop", Price = 999.99, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
new Product { Name = "Smartphone", Price = 599.99, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
new Product { Name = "Tablet", Price = 299.99, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
new Product { Name = "Headphones", Price = 49.99, Availability = "In Stock", Category = "Accessories", Rating = 4.0 }
};
return base.OnInitializedAsync();
}
}