We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Blazor
  4. Is it possible to Disable CheckBox for certain values in MultiSelect Dropdown

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

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,


5 Replies 1 reply marked as answer
SP Sureshkumar P Syncfusion Team September 14, 2020 11:42 AM UTC

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> 
 
 
 
Regards, 
Sureshkumar P 


Marked as answer
AL Alex September 14, 2020 12:36 PM UTC

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

PO Prince Oliver Syncfusion Team September 15, 2020 07:06 AM UTC

Hi Alex, 
 
Most Welcome. We are glad to help you. 
 
Regards, 
Prince 


EL Ewerton Luis de Mattos January 24, 2022 02:51 PM UTC

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?



PO Prince Oliver Syncfusion Team January 25, 2022 08:44 AM UTC

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 


Loader.
Up arrow icon