1. Home
  2. Forum
  3. Blazor
  4. Is it possible to disable the DropDown List in code?

Is it possible to disable the DropDown List in code?

I have a dropdown list that allows users to select an item.  Depending on data that the user enters after the selection I want to prevent the original item selected from the dropdown list being changed.  Is this possible? I thought of changing the 'Enabled' property to false in code, but this doesn't appear to be possible.

Any help would be appreciated.

(I have a work-around, but it doesn't seem very elegant!)



5 Replies 1 reply marked as answer
BC Berly Christopher Syncfusion Team March 4, 2021 11:07 AM UTC

Hi Christopher, 

Greetings from Syncfusion support. 

We have achieved the requested requirement with help of calling interop file in the open event of the DropDownList component. Kindly refer the below code snippet. 

@using Syncfusion.Blazor.DropDowns 
 
<SfDropDownList @ref="dropObj" ID="DDL" TValue="string" @bind-Value="@DropVal" TItem="Countries" ShowClearButton=="false" Placeholder="e.g. Australia" DataSource="@Country"> 
    <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings> 
    <DropDownListEvents TValue="string" TItem="Countries" Opened="OnOpen"></DropDownListEvents> 
</SfDropDownList> 
 
@code { 
    public string DropVal { get; set; } = "BM"; 
    SfDropDownList<string, Countries> dropObj; 
    [Inject] 
    protected IJSRuntime JsRuntime { get; set; } 
 
    public class Countries 
    { 
        public string Name { get; set; } 
 
        public string Code { get; set; } 
    } 
 
    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" }, 
        new Countries() { Name = "Greenland", Code = "GL" }, 
        new Countries() { Name = "Hong Kong", Code = "HK" }, 
        new Countries() { Name = "India", Code = "IN" }, 
        new Countries() { Name = "Italy", Code = "IT" }, 
        new Countries() { Name = "Japan", Code = "JP" }, 
        new Countries() { Name = "Mexico", Code = "MX" }, 
        new Countries() { Name = "Norway", Code = "NO" }, 
        new Countries() { Name = "Poland", Code = "PL" }, 
        new Countries() { Name = "Switzerland", Code = "CH" }, 
        new Countries() { Name = "United Kingdom", Code = "GB" }, 
        new Countries() { Name = "United States", Code = "US" }, 
    }; 
    public async Task OnOpen(PopupEventArgs args) 
    { 
        await JsRuntime.InvokeVoidAsync("onChange", "DDL", this.dropObj.Value); 
    } 
} 
[wwwroot/ddl.js] 
 
window.onChange = (id, DDLvalue) => { 
    setTimeout(function (e) { 
        var ddlObj = document.getElementById(id); 
        let lis = ddlObj.blazor__instance.popupObj.element.getElementsByTagName("li"); 
        for (let li of lis) { 
            let value = li.getAttribute("data-value"); 
            if (DDLvalue && DDLvalue.includes(value)) { 
                li.classList.add("e-disabled"); 
            } 
        } 
    },50) 
} 

  
 
Regards, 
Berly B.C 


CB Christopher Bell March 4, 2021 12:19 PM UTC

Hi Christopher

Thank you for your very speedy reply - much appreciated.

However, I suspect I'm being thick - I have downloaded the example from your sample link, but the dropdown list always remains enabled after selecting an item.  Is there something else I should add to disable the dropdown list (using your sample)?

Thanks in advance.

Chris

BC Berly Christopher Syncfusion Team March 5, 2021 06:43 AM UTC

Hi Christopher, 
 
Based on the provided details, we suspect that you want to disable the DropDownList component after changing the value from the popup. Kindly refer the below code example. 
  
<SfDropDownList @ref="dropObj" ID="DDL" TValue="string" Enabled="@enabled" ShowClearButton="false" @bind-Value="@DropVal" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country"> 
    <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings> 
    <DropDownListEvents TValue="string" TItem="Countries" ValueChange="OnChange"></DropDownListEvents> 
</SfDropDownList> 
 
@code { 
    public bool enabled { get; set; } = true; 
    public string DropVal { get; set; } = "BM"; 
    SfDropDownList<string, Countries> dropObj; 
    [Inject] 
    protected IJSRuntime JsRuntime { get; set; } 
 
    public class Countries 
    { 
        public string Name { get; set; } 
 
        public string Code { get; set; } 
    } 
 
    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" }, 
        new Countries() { Name = "Greenland", Code = "GL" }, 
        new Countries() { Name = "Hong Kong", Code = "HK" }, 
        new Countries() { Name = "India", Code = "IN" }, 
        new Countries() { Name = "Italy", Code = "IT" }, 
        new Countries() { Name = "Japan", Code = "JP" }, 
        new Countries() { Name = "Mexico", Code = "MX" }, 
        new Countries() { Name = "Norway", Code = "NO" }, 
        new Countries() { Name = "Poland", Code = "PL" }, 
        new Countries() { Name = "Switzerland", Code = "CH" }, 
        new Countries() { Name = "United Kingdom", Code = "GB" }, 
        new Countries() { Name = "United States", Code = "US" }, 
    }; 
    
    public async Task OnChange() 
    { 
        enabled = false; 
    } 
} 
 
  
  
If its does not meets your requirement, please share any screenshots or video demonstration for the requirement that will help us to check and proceed further at our end. 
  
Regards, 
Berly B.C 


Marked as answer
CB Christopher Bell March 5, 2021 10:06 AM UTC

Hi Christopher

Oops...  I am being incredibly thick - this is exactly what I wanted to know.  I knew there had to be a simple way of disabling the control.

Thanks for your prompt and helpful response.  Great support!

Chris



BC Berly Christopher Syncfusion Team March 5, 2021 10:49 AM UTC

Hi Christopher, 

Most welcome. Please let us know if you need further assistance on this. 

Regards, 
Berly B.C 


Loader.
Up arrow icon