The header row of the combobox columns

[Maryam Sarikhani]

Dear support team

How can I remove the header row of the combobox columns?

Attachment: blazor_multicolumn_combobox_columntextalign_c2c5c189.rar

[Yohapuja Selvakumaran]

Hi Maryam Sarikhani,

Thank you for reaching out to us. After carefully reviewing your requirement, we are pleased to inform you that you can hide the header of the MultiColumn ComboBox by setting the display property of the header to none. This allows you to customize the appearance of the dropdown and remove the header from view.

For your convenience, we have created a sample that demonstrates how this can be achieved. Kindly review the sample and code snippet provided below:

Code Snippet:

 

@using Syncfusion.Blazor.MultiColumnComboBox

<div class="col-lg-12">

    <div class="col-lg-8 control-section sb-property-border">

        <div class="control-wrapper">

            <label class="example-label">Select a product</label>

            <SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product">

            </SfMultiColumnComboBox>

        </div>

    </div>

    <div class="col-lg-4">

        <div class="property-panel-section">

            <div class="property-panel-header">Properties</div>

            <div class="property-panel-content">

                <div class="property-value">Selected Value : <b>@Value</b></div>

            </div>

        </div>

    </div>

</div>

<style>

    .control-section {

        min-height: 370px;

    }

    .control-wrapper {

        max-width: 250px;

        margin: 0 auto;

        padding: 50px 0px 0px;

    }

    .example-label {

        font-size: 14px;

        margin-bottom: 6px;

    }

    .property-panel-section .property-value {

        padding: 5px 0px 10px;

        font-size: 14px;

    }

    .property-panel-content {

        padding: 0px 0px 15px 0px;

    }

    .property-panel-content:last-child {

        padding: 0px 0px 40px 0px;

    }

    thead{

        display:none;

    }

</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 },

            new Product { Name = "Smartwatch", Price = 199.99m, Availability = "Limited Stock", Category = "Wearables", Rating = 4.4 },

            new Product { Name = "Monitor", Price = 129.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 },

            new Product { Name = "Keyboard", Price = 39.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.1 },

            new Product { Name = "Mouse", Price = 19.99m, Availability = "Out of Stock", Category = "Accessories", Rating = 4.3 },

            new Product { Name = "Printer", Price = 89.99m, Availability = "In Stock", Category = "Office Supplies", Rating = 4.2 },

            new Product { Name = "Camera", Price = 499.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.7 },

            new Product { Name = "Speakers", Price = 149.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.5 },

            new Product { Name = "Router", Price = 79.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.4 },

            new Product { Name = "External Hard Drive", Price = 59.99m, Availability = "In Stock", Category = "Storage", Rating = 4.6 },

            new Product { Name = "USB Flash Drive", Price = 9.99m, Availability = "In Stock", Category = "Storage", Rating = 4.2 },

            new Product { Name = "Webcam", Price = 29.99m, Availability = "Limited Stock", Category = "Accessories", Rating = 4.1 },

            new Product { Name = "Smart TV", Price = 799.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.8 },

            new Product { Name = "Projector", Price = 299.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.5 },

            new Product { Name = "VR Headset", Price = 349.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.7 },

            new Product { Name = "Drone", Price = 599.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 },

            new Product { Name = "Fitness Tracker", Price = 99.99m, Availability = "In Stock", Category = "Wearables", Rating = 4.3 }

        };

        return base.OnInitializedAsync();

    }

}

 

 

In this example, we have used the thead { display: none; } CSS rule to hide the header of the MultiColumn ComboBox. This approach ensures that the header is not visible when the dropdown is rendered.

You can test the functionality and explore further using the sample provided here:

Sample: https://blazorplayground.syncfusion.com/rtBTCDNlfQqMcQkJ

Regards,

Yohapuja S

[Sam]

Hi

This answer does not work properly because it affects the Sfgrid and Hides its header too, but the following answer only works on the SfMultiColumn ComboBox

.e-popup.e-multicolumn-list .e-gridheader {

    display: none;

}

[Yohapuja Selvakumaran]

Hi Maryam Sarikhani

Thank you for sharing these details with us. We’re glad to hear that the provided solution worked for the SfMultiColumn ComboBox. However, we understand that this approach may affect the SfGrid by hiding its header, which is not the desired behavior. If you need any further assistance with us, please get back to us.

Regards,

Yohapuja S