Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Simona
70
Cannot add a new CSS class from js, because it's being removed by internal jQuery
posted

Hi,

I'm trying to create a custom control by adding some new functionalities.

I added an attribute "IsRequired" and I want to display a picture on the background when this attribute is present. What I've noticed is that my newly added class "igte_ValueDisplay_Required" is being removed by some function fixCss if i hover the mouse over the control on Initialize or on blur.

Is there a way to add css clases from jQuery and have them not being removed by internal jQuery functions?

eg:

<ig:WebDatePicker ID="datepicker" DropDownCalendarID="wmc1" runat="server" IsRequired="True"  ClientSideEvents-Blur=" WebDatePicker_Blur"  ClientSideEvents-Initialize="WebDatePicker_Initialize"   >
    </ig:WebDatePicker>

function WebDatePicker_Initialize(sender, eventArgs) {

  if ($('table[id="' + sender._id + '"]').attr("IsRequired") == "True") {
    if (sender.get_text().length == 0 || sender.get_text() == sender.get_nullText()) {
      $('table[id$="' + sender._id + '"]').addClass("igte_ValueDisplay_Required");
      sender.addCssClass("igte_ValueDisplay_Required");
    }
}

function WebDatePicker_Blur(sender, eventArgs) {
 
  if ($('table[id="' + sender._id + '"]').attr("IsRequired") == "True")

    if (sender.get_text().length > 0 && sender.get_text() != sender.get_nullText() && sender.get_text() != "__/__/____") {
      $('table[id$="' + sender._id + "" + '"]').removeClass("igte_ValueDisplay_Required");
    }
    else {
      $('table[id$="' + sender._id + "" + '"]').addClass("igte_ValueDisplay_Required");
    }
}

.igte_ValueDisplay_Required .igte_EditInContainer{
       
    background-image: url('images\\tCurvedUnderlinePattern.png');
    background-repeat:repeat-x;
    background-position  :3px 18px;
   
}

 

 

Parents
No Data
Reply
  • 24497
    posted

    Hi noshoch,

    To render special appearance for empty editor, I suggest you to use NullTextCssClass and NullText properties. In order for NullTextCssClass have effect, the NullText should be defined. Below are suggestions.

    Set NullText property to " " or any other apporpriate not empty value.
    1. On server set NullTextCssClass="igte_ValueDisplay_Required".


     2. Or if you prefer to do it on client, then you may use internal variable _nullCss. You will need to process only Initialize event:

    function WebDatePicker_Initialize(sender, eventArgs) {
      sender._nullCss += ' igte_ValueDisplay_Required';
      //if ($('table[id="' + sender._id + '"]').attr("IsRequired") == "True") {
      //or better
      if ($(sender.get_element()).attr("IsRequired") == "True") {
        if (!sender.get_value()) {
          $(sender.get_inputElement()).addClass("igte_ValueDisplay_Required");
        }
       }
    }

    Since css is applied directly to INPUT, css should not have selectors:

    .igte_ValueDisplay_Required {
        background-image: url('images\\tCurvedUnderlinePattern.png');
        background-repeat:repeat-x;
        background-position  :3px 18px;
    }

    Note: changing css on client is hard to implement for 2 reasons:
    1. ClientEvents are raised before appearance is adjsuted internally. So application should use delays like:
    function WebDatePicker_Blur(sender, eventArgs) {
       setTimeout(function () { adjustCss(sender); }, 1);
    }
    2. Since editor have special appearance/css for hover state, application also need to process other mouse events like mouseover, mouseout, mousedown.

     

Children
No Data