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.
Unfortunately, activation email could not send to your email. Please try again.

Greying out background when ReadOnly(true)

Thread ID:

Created:

Updated:

Platform:

Replies:

132705 Sep 16,2017 03:18 AM Sep 19,2017 12:12 AM ASP.NET MVC 3
loading
Tags: DropDownList
Andrew Jang
Asked On September 16, 2017 03:18 AM

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 [Syncfusion]
Replied On September 18, 2017 03:35 AM

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;   
         opacityinitial;       
     }   
     .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   
 


Andrew Jang
Replied On September 18, 2017 01:39 PM

It works, thank you for your help!


Keerthana Rajendran [Syncfusion]
Replied On September 19, 2017 12:12 AM

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. 


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.

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.

;