How to disable a dropdownlist but keeping the same color as an enabled control

[dsapo]

Hi Support:

I have a cascade dropdownlist so when the State dropdown list changes, this drop must be enabled.

<ej-drop-down-list id="District"  

                                       datasource="@Model.Districts" 

                                       watermark-text="Select" enabled="false">

                        <e-drop-down-list-fields text="Name" value="ID" />

                    </ej-drop-down-list>

but the color of the control is too light, so it looks that the control is not on the page.

Then I tried this, and looks much better:

<ej-drop-down-list id="District"  

                                       datasource="@Model.Districts" 

                                       watermark-text="Select" readonly="false">

                        <e-drop-down-list-fields text="Name" value="ID" />

                    </ej-drop-down-list>

But my problem is that I dont know how to remove the readonly once is set.

What should I do make this drop unselectable,  but not too light, and then be able enable it once their parent is selected.

Thanks in advanced

David

[Keerthana Rajendran]

Hi David,   

Thank you for contacting Syncfusion support.    

 We suggest you to use cssClass property of DropDownList to apply custom css to make the control appear as enabled one. Kindly refer to the below code snippet   

   

<ej-drop-down-list id="countryList" datasource="(IEnumerable<Countries>)ViewBag.datasource1" enabled="false"    

css-class="custom"></ej-drop-down-list>   

   

<style>   

   .custom .e-select{   

        opacity:inherit;   

    }   

</style>   

   

We have prepared a cascading sample based on your requirement. Please refer to the below given link   

   

Sample: http://www.syncfusion.com/downloads/support/forum/130523/ze/WebApplication812294875.zip   

   

UG Link: https://help.syncfusion.com/api/js/ejdropdownlist#members:cssclass   

   

   

Regards,   

Keerthana.   

 

[dsapo]

Hi Keerthana:

What I did based on your suggestion was to break the css in two parts, as follows:

    .custom {   

        border: 1px solid silver;     /* This is for the border of the dropdownlist */

    }   

      .custom .e-select {            /* This is for the color of the the down arrow */

        opacity:1;   

       

    }  

Thanks for your help

David

[Keerthana Rajendran]

Hi David , 

 

We are glad to hear that your issue has been resolved. Please get back to us if you require any further assistance on this.We will be happy to assist you  

 

Regards, 

Keerthana.