Set Style From Code Behind

[Ryan Grossman]

I'm updating an application from  the Classic controls to the newest version. Some of the scripts are working correctly. I need to set the border and background of a RadCombobox to Red to signify its a required field. I used to do the following:

 RadAjaxPanelContacts.ResponseScripts.Add("LoadCombobox(" & rcbContactTxt.ClientID & ");")

 function LoadCombobox(combobox)
{
combobox.InputDomElement.style.border = "solid 1px #a80532";
combobox.InputDomElement.style.color = "#a80532";
combobox.InputDomElement.style.background = "white";
}

 

This now triggers a javascript error type error element undefined. I tried replacing with:

 

function LoadCombobox(combobox)
{
    combobox.element.style.border = "solid 1px #ff0000";
    combobox.element.style.color = "#ff0000";
    combobox.element.style.background = "white";
}

 

 Doesn't work either. How do I do what the old code does with the newer version of the controls?

[Magdalena]

Hello Ryan,

We recommend you to apply styling by stylesheet and by JavaScript apply only a CSS class that can be used as a CSS selector. You can apply a custom CSS class to the RadComboBox by the following:

function pageLoad() {
    var combobox = $find("RadComboBox1").get_element();
    $telerik.$(combobox).addClass("custom");
}

After that you can apply color, border and background rules to the selector .RadComboBox.custom .rcbReadOnly {}. or .RadComboBox.custom .rcbInner {} - depending of the scenario.

Regards,
Magdalena
Telerik

 

 

[Ryan Grossman]

I'm not using jquery. How do I do this without jquery? The old way worked fine with plain javascript.

[Magdalena]

Hello Ryan,

The CSS class can be added to an element also by .className:

function pageLoad() {
    var comboboxElement = $find("RadComboBox1").get_element();
    comboboxElement.className += comboboxElement.className + " custom";
}

Regards,
Magdalena
Telerik

 

 

[Ryan Grossman]

That worked. How can I do the same for a RadTextBox? I tried the following but maybe my CSS class is wrong and not applying.

 function ValueChanged(sender, eventArgs)
{
    sender.get_styles().EnabledStyle[1] += " custom3";
    sender.updateCssClass();
}

 .RadInput.custom3 .riTextBox {
    background-color: #e7ffe8 !important;
    border-color: #035105 !important;
    color: #035105 !important;
}

 

[Magdalena]

Hi Ryan,

If you debug the ValueChanged function, you can see that the "sender" is TextBox object, not Input object. So the CSS selector will be .RadInput .riTextBox.custom3 {}.

The other approach is to set the class name in a similar way as in the first solution:

function ValueChanged(sender, eventArgs)
{
    var inputElement = sender.get_element();
    inputElement.className += inputElement.className + " custom";
}

Please, keep in mind, that if you do not use jQuery "addClass()", it is necessary to do verification if the class has not already been added. Otherwise the class will be added every time when the ValueChanged function is fired.

Regards,
Magdalena
Telerik

 

 

[Ryan Grossman]

This is working good for the combo and textbox. Can you provide an example of how to change a raddatepicker as well?

 

<telerik:RadDatePicker ID="rdpShippedDate" Width="100%" runat="server" DateInput-Width="100%"></telerik:RadDatePicker>

[Magdalena]

Hi Ryan,

It will be the same as ComboBox:

datePickerElement.className += datePickerElement.className + " custom";

Regards,
Magdalena
Telerik