Greying out background when ReadOnly(true)

[Andrew Jang]

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)?

[Keerthana Rajendran]

Hi Andrew,   

   

Thank you for contacting Syncfusion Support.   

   

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

   

Sample: http://www.syncfusion.com/downloads/support/forum/132705/ze/CSS_Sample-1887918310.zip   

   

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   

   

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

https://help.syncfusion.com/api/js/ejdatepicker#members:cssclass   

https://help.syncfusion.com/api/js/ejmaskedit#members:cssclass   

   

Regards,   

Keerthana   

 

[Andrew Jang]

It works, thank you for your help!

[Keerthana Rajendran]

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.