Is “select all” checkbox option is removable from RadzenDropDown?

Radzen.Blazor Components
1

Hi,
I have two RadzenDropDown with Multiple="true". But I need to remove “select all” checkbox option from Product drowpdown only.

Screenshot 2023-10-13 081657

There are the list of Product Category and Product.

<label>Product Category</label>
                <RadzenDropDown class="form-control w-100" placeholder="Select Product"
                            AllowClear="true"                                FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                            FilterOperator="StringFilterOperator.StartsWith"
                            AllowFiltering="true"
                            Multiple="true"							
                            @bind-Value="@productCategoryValues"
                            TextProperty="Name" ValueProperty="Code" Data="@_ProductCategoryList" Change="@(args => onProductChange(args))" />
							
<label>Product</label>
                <RadzenDropDown Name="Product-multi-select" class="form-control w-100" placeholder="Select Product"
                            AllowClear="true"                                FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                            FilterOperator="StringFilterOperator.StartsWith"
                            AllowFiltering="true"
                            Multiple="true"
							LoadData=@searchValueChanged
                            AllowVirtualization=@isVirtualization
                            Count="@Count"
                            @bind-Value="@productListValues"
                            TextProperty="Name" ValueProperty="Code" Data="@_ProductList" Change="@(args => onProductChange(args))" />

I have tried below css style code by giving Name="Product-multi-select" attribute to product dropdown but it is not working.

<style>
    [name=Product-multi-select] div.rz-multiselect-header div.rz-chkbox {
        display: none !important;
    }

    [name=Product-multi-select] li[aria-label*='All'] div.rz-chkbox {
        display: none !important;
    }

    [name=Product-multi-select] {
        z-index: 0 !important;
    }
</style>

Thanks!

2
1 Like
3

Thanks for your valuable reply. You shared code is look like very complex but I just want to hide "select all" only. How can I do easily?

4

Hey @Rajesh_Kumar,

This is the code of the component itself and I’ve linked exactly the property that can be used to hide the select all check box.

1 Like