Is it possible to Disable CheckBox for certain values in MultiSelect Dropdown

[Alex]

Hi,

We want to be able to disable a checkbox in a MultiSelect Dropdown - for example a list of countries only some of which are available to select.  Is this possible?

Thanks,

[Sureshkumar P]

Hi Alex, 

 

Greetings from Syncfusion support. 

 

In our current source we cannot have built in support to disable the specific list element in the popup element. but we have achieved your requirement using JSIntrop functionality.  

 

Please find the code example here: 

[index.razor] 

 

@using Syncfusion.Blazor.DropDowns 

 

    <SfMultiSelect ID="MultiSelect" @bind-Value="@ClassIDs" TValue="string[]" Placeholder="Select Nice Classes" Mode="@VisualMode.CheckBox" 

                   DataSource="@Country" ShowSelectAll="false" EnableSelectionOrder="true"                    

                   ShowDropDownIcon="true" FilterBarPlaceholder="Nice Classes" > 

        <MultiSelectEvents TValue="string[]" Opened="PopupOpen"></MultiSelectEvents> 

        <MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings> 

    </SfMultiSelect> 

 

@code { 

        [Inject] 

        protected IJSRuntime JsRuntime { get; set; } 

 

    public string[] ClassIDs { get; set; } = new string[] { "CA", "CM" }; 

 

    public class Countries 

    { 

        public string Name { get; set; } 

        public string Code { get; set; } 

    } 

    private List<Countries> Country = new List<Countries> 

{ 

        new Countries() { Name = "Australia", Code = "AU" }, 

        new Countries() { Name = "Bermuda", Code = "BM" }, 

        new Countries() { Name = "Canada", Code = "CA" }, 

        new Countries() { Name = "Cameroon", Code = "CM" }, 

        new Countries() { Name = "Denmark", Code = "DK" }, 

        new Countries() { Name = "France", Code = "FR" }, 

        new Countries() { Name = "Finland", Code = "FI" }, 

        new Countries() { Name = "Germany", Code = "DE" } 

    }; 

 

    public void PopupOpen(Syncfusion.Blazor.DropDowns.PopupEventArgs args) 

    { 

        JsRuntime.InvokeVoidAsync("OnPopupOpen", "MultiSelect"); 

    } 

 

} 

 

[daterange.js] 

window.OnPopupOpen = (id) => { 

    console.log(id); 

    var instances = document.getElementById(id).ej2_instances[0]; 

    var LIElement = instances.popupObj.element.getElementsByClassName('e-list-item'); 

    var LICount = LIElement.length; 

    for (var item = 0; item < LICount; item++) { 

        var value = LIElement[item].getAttribute('data-value'); 

        if (instances.value && (instances.value.length > 0) && !instances.value.includes(value)) { 

            LIElement[item].classList.add('e-disabled'); 

        } 

    } 

    } 

     

 

[_Host.Cshtml] 

 

<script src="~/daterange.js"></script> 

 

 

Please find the sample here: https://www.syncfusion.com/downloads/support/forum/157795/ze/MultiSelect428913445  

 

Regards, 

Sureshkumar P 

[Alex]

Thanks for your help! we'll give that a go

[Prince Oliver]

Hi Alex, 

 

Most Welcome. We are glad to help you. 

 

Regards, 

Prince 

[Ewerton Luis de Mattos]

Trying to make it work but, for me, I cant find the ej2_instances[0] from the  document.getElementById(id)

What am I doing wrong?

[Prince Oliver]

Hello Ewerton, 

In the latest version, we have improved component performance and functionalities by removing JavaScript dependencies. Hence the ej2_instances[0] is not accessible. Hence we can achieve this requirement by modifying the code as below. 

[Razor] 

@inject IJSRuntime JS 

 

@using Syncfusion.Blazor.Inputs 

@using Syncfusion.Blazor.DropDowns 

@using Syncfusion.Blazor.Buttons 

 

  

    <SfMultiSelect TValue="string[]" TItem="Countries" ID="MultiSelect" @bind-Value="@ClassIDs" TValue="string[]" Placeholder="Select Nice Classes" Mode="@VisualMode.CheckBox"  

                   DataSource="@Country" ShowSelectAll="false" EnableSelectionOrder="true"                     

                   ShowDropDownIcon="true" FilterBarPlaceholder="Nice Classes" >  

        <MultiSelectEvents TValue="string[]" TItem="Countries" Opened="PopupOpen"></MultiSelectEvents>  

        <MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>  

    </SfMultiSelect>  

 

 

 

  

@code { 

 

    public string[] ClassIDs { get; set; } = new string[] { "CA", "CM" };  

 

    public class Countries  

    {  

        public string Name { get; set; }  

        public string Code { get; set; }  

    }  

    private List<Countries> Country = new List<Countries>  

{  

        new Countries() { Name = "Australia", Code = "AU" },  

        new Countries() { Name = "Bermuda", Code = "BM" },  

        new Countries() { Name = "Canada", Code = "CA" },  

        new Countries() { Name = "Cameroon", Code = "CM" },  

        new Countries() { Name = "Denmark", Code = "DK" },  

        new Countries() { Name = "France", Code = "FR" },  

        new Countries() { Name = "Finland", Code = "FI" },  

        new Countries() { Name = "Germany", Code = "DE" }  

    };  

 

    public class JsonData 

    { 

        public string id { get; set; } 

        public string[] items { get; set; } 

    } 

 

    public async Task PopupOpen(Syncfusion.Blazor.DropDowns.PopupEventArgs args)  

    { 

        JsonData data = new JsonData(); 

        data.id = "MultiSelect"; 

        data.items = ClassIDs; 

        await JS.InvokeVoidAsync("OnPopupOpen", data);  

    }  

  

} 

[HTML] 

    <script> 

        window.OnPopupOpen = (args) => { 

            var proxy = args; 

            setTimeout(()=>{ 

                var LIElement = document.getElementById(proxy.id+"_popup").getElementsByClassName('e-list-item');  

                var LICount = LIElement.length;  

                for (var item = 0; item < LICount; item++) {  

                    var value = LIElement[item].getAttribute('data-value');  

                    if (args.items && (args.items.length > 0) && !args.items.includes(value)) {  

                        LIElement[item].classList.add('e-disabled');  

                    } 

                }  

            },100); 

        }  

    </script> 

Regards, 

Prince