Cannot add a new CSS class from js, because it's being removed by internal jQuery

Simona posted over 12 years ago

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;

}

24497

[Infragistics] Viktor Snezhko posted over 12 years ago

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.
Cancel
Reply

Cancel