Grid Settings in Blazor MultiColumn ComboBox Component

4 Nov 20259 minutes to read

Setting the gridlines

Grid lines are the visual dividers shown between rows and columns in the popup’s grid layout. Configure their appearance using the GridLines property to show horizontal lines, vertical lines, both, or none. The default value is Default.

The following example configures the GridLines property to show both horizontal and vertical lines in the dropdown popup.

CSHTML

@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 enables alternating row styles to improve readability. When enabled, every other row uses an alternate style; when disabled, all rows share the same style. The default value is false.

The following example enables alternate row styling, where every other row has a different style.

CSHTML

@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

Column resizing lets users adjust column widths by dragging the edge of a column header. Enable this behavior with the AllowColumnResizing property. This provides flexibility to tailor the popup layout to the data and available space.

The following example enables column resizing, allowing users to adjust the width of the columns by dragging the header edges.

CSHTML

@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

Text wrapping ensures longer text in headers and cell content is displayed neatly within the available space. Enable wrapping with the EnableTextWrap property and configure behavior as needed.

Key features

• TextWrapElement: enum (Header, Content, Both) that specifies where text wrapping is applied.
• TextOverflowMode: enum (Ellipsis, EllipsisWithTooltip) that specifies how overflowed content is handled—truncate with an ellipsis or show an ellipsis with a tooltip.

The following example enables text wrapping for the header in the Blazor MultiColumn ComboBox, ensuring that longer text is displayed without overflowing.

CSHTML

@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();
    }
}