CODEWITHSUNDEEP
javascriptjqueryasp.netcsstelerik
VladN
VladN

Reputation: 739

ASP.NET Telerik control styling with jQuery

I have a radTextBox with CssClass="mandatory". In jQuery I have the next thing:

$(".mandatory").focusout( function () {
  if($(this).val() == "") $(this).css("border", "1px solid #ff0000");
});

The problem is that on focusout, my style is "overwritten" by the classes that the control has by default on different events. I've also tried in jQuery the next thing:

$(".mandatory").focusout( function () {
  if($(this).val() == "") $(this).addClass("mandatoryErr");
});

But still nothing, the class is immediately removed after it was added. So how can I add style to teleriks control using jQuery?

Upvotes: 2

Views: 2608

Answers (2)

jaimenino
jaimenino

Reputation: 64

I've done this, and works for me.

        function txtRadNum_change(e){
            var mustAddColor = e.get_value() == "";
            e.get_styles().EnabledStyle[0] = getStyle(e.get_styles().EnabledStyle[0], mustAddColor);
            e.get_styles().FocusedStyle[0] = getStyle(e.get_styles().FocusedStyle[0], mustAddColor);
            e.get_styles().HoveredStyle[0] = getStyle(e.get_styles().HoveredStyle[0], mustAddColor);
        }

        function getStyle(originalStyle, mustAddColor){
            var lstStyles = originalStyle.split(';');
            var newEnabledStyle = "";
            $.each(lstStyles, function(idx, style){
                if(style.indexOf("background-color") < 0 && style != ""){
                    newEnabledStyle += style + ";";
                }
            });

            if(mustAddColor){
                newEnabledStyle += "background-color:#FC4C02;"
            }

            return newEnabledStyle;
        }

You must override the EnabledStyle, FocusedStyle and HoveredStyle http://docs.telerik.com/devtools/aspnet-ajax/controls/input/client-side-programming/inputstyles-client-object

Upvotes: 0

carlbergenhem
carlbergenhem

Reputation: 1989

The easiest way to accomplish this would be to hook into the various styling options you have on the client using the Client-side API of the RadTextBox. Here's a snippet that takes essentially your initial code and applies it to the RadTextBox API:

        <script type="text/javascript">
        function ChangeBorder () {
            var textBox = $find("<%= RadTextBox1.ClientID %>");
            if (textBox.get_value() == "") {
                textBox.get_styles().EnabledStyle[0] += "border-color: #ff0000";
                textBox.updateCssClass();
            }
            else {
                //revert back to old CSS
            }
        }
    </script>

    <telerik:RadTextBox ID="RadTextBox1" runat="server" ClientEvents-OnBlur="ChangeBorder">
    </telerik:RadTextBox>

The important items to get out of this is that we are subscribing to a client-side event of the RadTextBox (OnBlur). Then we access the RadTextBox client-side object, check if the value is "" or not and then access the styles of the RadTextBox object. There are several different styles, but it seems as if you're looking for the EnabledStyle. To directly apply some CSS just use the first element of the style array. Alternatively you can apply a CSSClass: 

textBox.get_styles().EnabledStyle[1] += " mandatoryErr";

Where you will be accessing the second element in the styles array. Here you can have mandatoryErr be (for example):

    <style>
    .mandatoryErr
    {
        border-color: #ff0000 !important;
    }
</style>

The !important tag is just there to increase the specificity of the CSS rule, otherwise it will not be applied (if you're using the built-in styles).

If you are looking for more information on all of this, the linked documentation articles should help. You can also use the Chrome Dev Tools and FireBug to inspect the textBox variable above and see what the _styles property holds :)

Upvotes: 3

Related Questions