Reputation: 216
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
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
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
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