Style and appearance in Blazor MultiColumn ComboBox Component

25 Sep 20247 minutes to read

The following content provides the exact CSS structure that can be used to modify the control’s appearance based on the user preference.

Read-only mode

Specify the boolean value to the Readonly whether the MultiColumn ComboBox allows the user to change the value or not.

CSHTML

@using Syncfusion.Blazor.MultiColumnComboBox

<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" ReadOnly="true" PopupWidth="600px" 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();
    }
}

Disabled state

Specify the boolean value to the Disabled property that indicates whether the component is disabled or not.

CSHTML

@using Syncfusion.Blazor.MultiColumnComboBox

<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product" Disabled="true"></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();
    }
}

Applying custom CSS classes

Specifies the CSS class name that can be appended to the root element of the MultiColumn ComboBox. One or more custom CSS classes can be added to a MultiColumn ComboBox.

Some of the possible values are:

• e-success: Denotes the component in a success state, adding a green color to the ComboBox input field.
• e-warning: Denotes the component in a warning state, adding an orange color to the ComboBox input field.
• e-error: Denotes the component in an error state, adding a red color to the ComboBox input field.
• e-outline: Supports only the material theme.

RAZOR

@using Syncfusion.Blazor.MultiColumnComboBox

<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product" CssClass='@CssClass'></SfMultiColumnComboBox>
@code {
    string CssClass { get; set; } = "e-success";
    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();
    }
}

Customizing the disabled component’s text color

You can customize the text color of a disabled component by targeting its CSS class .e-input[disabled], which indicates the input element in a disabled state, and set the desired color to the -webkit-text-fill-color property.

CSHTML

@using Syncfusion.Blazor.MultiColumnComboBox

<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product" Disabled="true"></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();
    }
}
<style>
    .e-input-group.e-control-wrapper .e-input[disabled] {
        -webkit-text-fill-color: #0d9133;
    }
</style>