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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

130523 May 16,2017 09:10 PM UTC May 19,2017 06:56 AM UTC ASP.NET Core 3
loading
Tags: DropDownList
dsapo
Asked On May 16, 2017 09:10 PM UTC

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 [Syncfusion]
Replied On May 18, 2017 11:12 AM UTC

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   
   
   
   
   
Regards,   
Keerthana.   
 


dsapo
Replied On May 19, 2017 12:47 AM UTC

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 [Syncfusion]
Replied On May 19, 2017 06:56 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;