CODEWITHSUNDEEP
javascriptjquerytelerik
JD Varu
JD Varu

Reputation: 216

change RadTextbox(Telerik textbox) and RadDatePicker(Telerik DatePicker) background color using jquery or Javascript

I am using telerik controls in my application. I have to change background colors of RadTextbox and RadDatePicker

how to change RadTextbox(Telerik textbox) and RadDatePicker(Telerik DatePicker) background color using jquery or Javascript?

Upvotes: 5

Views: 10335

Answers (3)

awhig
awhig

Reputation: 647

I needed to change the CSS class of a RadDatePicker dynamically and came across this posting.

http://www.telerik.com/community/forums/aspnet/calendar/how-to-change-css-class-in-javascript.aspx

function changeClass() 
{ 
    var pickerWrapper = $get("<%= RadDatePicker11.ClientID %>_wrapper"); 
    pickerWrapper.className += " myClass"; 
}

I think it's better as you are changing the class of the top level element of the RadDatePicker instead of delving into the DatePicker component to change the class of the text field.

This is the code I ended up using for my purposes.

I'm using WebBlue as my telerik style.

function setDatePickerRequired(o, required)
{

    if (required)
    {
        $get(o.get_id()+"_wrapper").className = "RadPicker RadPicker_WebBlue RequiredDate";
    }
    else
    {
        $get(o.get_id()+"_wrapper").className = "RadPicker RadPicker_WebBlue";
    }

}

my css

div.RadPicker_WebBlue.RequiredDate input.riTextBox
{
    background-image: url(images/required-tick.gif);
    background-position: right top;
    background-repeat: no-repeat;
}

Rich

Upvotes: 2

JD Varu
JD Varu

Reputation: 216

I am getting solution as below:

ASPX page Code

 <asp:ButtonID="Button"runat="server"  OnClientClick="click1();return false;"
          Text="click"/> 
      <telerik:RadDatePickerID="RadDatePicker1"runat="server"> 
          <DateInput> 
          </DateInput> 
      </telerik:RadDatePicker> 
      <telerik:RadTextBoxID="RadTextBox1"runat="server"> 
      </telerik:RadTextBox>

Javascript

<script type="text/javascript"> 
function click1() 
 { 
     varpicker = $find("<%= RadDatePicker1.ClientID %>"); 
     vartextbox = $find("<%= RadTextBox1.ClientID %>"); 
     textbox.get_styles().EnabledStyle[0] += "background-color: red;"; 
     textbox.updateCssClass(); 
     picker.get_dateInput()._textBoxElement.style.backgroundColor = "yellow"; 
 } 
</script>

By that change BG color of telerik control

Upvotes: 2

Widor
Widor

Reputation: 13285

You can specify a 'skin' for most Telerik controls which are generally derived from a generic default stylesheet, so if you simply want to restyle the controls then you can create your own skin.

If you really want to do it on-the-fly with JavaScript, then you can do.

Taking the RadCalendar/DatePicker example, the names of the CSS classes and what they refer to can be found here: http://www.telerik.com/help/aspnet-ajax/calendar-css-skin-file-selectors.html.

If you want to change a particular style, you'll need to either replace the CSS class with your own, or apply an inline style that overrides the stylesheet.

To apply your own style using jQuery's CSS, simply use something like:

$(".your-telerik-css-class").css("background-color","red");

EDIT : This link will help you with the structure of the control to see what the classes will affect: http://www.telerik.com/help/aspnet-ajax/calendar-understanding-skin-css-file.html

Upvotes: 1

Related Questions