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. ASP.NET MVC
  4. Greying out background when ReadOnly(true)

Greying out background when ReadOnly(true)

I'm using Syncfusion's Date Picker, Edit Mask and DropdownList in my new application, and I am locking the controls using ReadOnly (true) instead of Disable (true) to retrieve the values from the controls when post.
However, ReadOnly does not grey out control's colour when its true just like Disable property.

When I am using ReadOnly, how can I set those controls to set its background colour to grey just like when Disable(true)?

3 Replies
KR Keerthana Rajendran Syncfusion Team September 18, 2017 07:35 AM UTC

Hi Andrew,   
   
Thank you for contacting Syncfusion Support.   
   
We have prepared a sample based on your requirement. Please refer to the below given link   
   
   
In the above sample, we have applied css properties of disabled controls through cssClass property of controls. Please refer to the below given code   
   
<div class="frame">   
  @Html.EJ().DropDownList("ddl").CssClass("customdisable").ReadOnly(true).WatermarkText("Select an item")   
       
    @Html.EJ().DatePicker("datepick").CssClass("customdisable").ReadOnly(true)   
   
    @Html.EJ().MaskEdit("edit").CssClass("customdisable").ReadOnly(true).WatermarkText("(999)999 - 9999")   
</div>   
 <style>   
     .customdisable.e-ddl.e-widget .e-input   
     {   
         background:#eee;   
          opacity: .35;   
           
     }   
      .customdisable.e-ddl.e-widget .e-in-wrap   
     {   
         border-color: #e3e3e3;   
         background-color: #f5f5f5;   
         opacity: initial;       
     }   
     .customdisable.e-ddl.e-widget .e-select   
     {   
         background: #d6d7d7;   
         border-color: #ccc;   
         opacity: .35   
     }   
     .customdisable.e-datewidget   
     {   
     background-color: #f5f5f5;   
    border-color: #e3e3e3;   
     
     }   
      .customdisable .e-datepicker.e-input,.customdisable.e-mask .e-maskedit{   
          opacity:0.35;   
      }   
     .customdisable.e-datewidget .e-select   
     {   
         background-color:#d6d7d7;   
         opacity:0.35;   
     }   
     .customdisable.e-mask{   
         background-color: #f5f5f5   
     }   
       
 </style>   
   
Please refer the below UG to know about cssClass property   
   
   
Regards,   
Keerthana   
 


AJ Andrew Jang September 18, 2017 05:39 PM UTC

It works, thank you for your help!


KR Keerthana Rajendran Syncfusion Team September 19, 2017 04:12 AM UTC

Hi Andrew,  
 
Thanks for your update. We are glad to hear that our suggestion helped you to achieve your requirement. Please get back to us if you require further assistance on this. We will be happy to assist you 
 
Regards, 
Keerthana. 


Loader.
Up arrow icon