Grid Settings in Blazor MultiColumn ComboBox Component
13 Dec 20249 minutes to read
Setting the gridlines
Grid lines refer to the visual lines displayed between rows and columns in a grid-like structure. You can customize how these lines appear by using the GridLines property. This allows for control over the visibility of horizontal, vertical, both, or no grid lines at all. The default value is Default.
The following example configures the GridLines property to show both horizontal and vertical lines in the dropdown popup.
@using Syncfusion.Blazor.MultiColumnComboBox
<SfMultiColumnComboBox @bind-Value="@Value" GridLines="GridLine.Both" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product"></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 }
};
return base.OnInitializedAsync();
}
}Setting alternate rows
The EnableAltRow property controls whether the rows in the grid are styled with alternating colors. This property helps in improving readability by differentiating rows visually. When enabled, every other row will be rendered with a different style, while all rows will have the same styling if this property is disabled.
The following example enables alternate row styling, where every other row will have a different style.
@using Syncfusion.Blazor.MultiColumnComboBox
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product" EnableAltRow="true">
</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();
}
}Resizing the column
The Column resizing allows users to adjust the width of columns in the MultiColumn ComboBox by dragging the edge of the column header. The AllowColumnResizing property. This property is useful for providing flexibility in adjusting the grid layout based on user preferences.
The following example enables column resizing, allowing users to adjust the width of the columns by dragging the header edges.
@using Syncfusion.Blazor.MultiColumnComboBox
<SfMultiColumnComboBox @bind-Value="@Value" AllowColumnResizing="true" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product"></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 }
};
return base.OnInitializedAsync();
}
}TextWrap for header and content
The TextWrap in the Blazor MultiColumn ComboBox ensures proper wrapping of text within both headers and data content. 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 the header 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" TextOverflowMode="TextOverflowMode.EllipsisWithTooltip">
<MultiColumnComboboxColumns>
<MultiColumnComboboxColumn Field="Name" Header="Name of the employee" Width="150"></MultiColumnComboboxColumn>
<MultiColumnComboboxColumn 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();
}
}