I am attempting to use jQuery to set the background-color style of the RadTimePicker on the client side. While I can set this property using the BackColor attribute on the server side, setting it on the client side never results in visual changes... even though the code executes correctly.
I realize that the input text box in question has a ClientID that differs from the ClientID of the RadTimePicker control. It seems that it always follows the format MyTimePickerClientID_dateInput_text. So in order to change the background color, I do the following:
I realize that the input text box in question has a ClientID that differs from the ClientID of the RadTimePicker control. It seems that it always follows the format MyTimePickerClientID_dateInput_text. So in order to change the background color, I do the following:
$(
"#" + <%= this.MyTimePickerControl.ClientID %> + "_dateInput_text").css("background-color", "#FF0000");
This jQuery code seems to run fine, and when I check the background-color in the debugger, it is indeed set to red. Yet there is no visual change in the browser window.
Is what I'm trying to do possible? If so, what am I doing wrong? I have tried this same technique with other style, such as border, but with the same lack of effect.
4 Answers, 1 is accepted
0
Hello Robert,
RadDateInput styles are kept on the client and refreshed, depending on the control's state (default, hovered, focused, etc). That's why changes in the styles on the client should be done through the control's API:
http://www.telerik.com/help/aspnet-ajax/input_clientsidebasics.html
Here is an example with RadTimePicker.
Regards,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
RadDateInput styles are kept on the client and refreshed, depending on the control's state (default, hovered, focused, etc). That's why changes in the styles on the client should be done through the control's API:
http://www.telerik.com/help/aspnet-ajax/input_clientsidebasics.html
Here is an example with RadTimePicker.
| <%@ Page Language="C#" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
| <title>RadControls for ASP.NET AJAX</title> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadTimePicker ID="RadTimePicker1" runat="server" /> |
| <br /><br /> |
| <asp:Button ID="Button1" runat="server" OnClientClick="return ChangeBackground();" Text="Change Background" /> |
| <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> |
| <script type="text/javascript"> |
| function ChangeBackground() |
| { |
| var dateinput = $find("<%= RadTimePicker1.ClientID %>").get_dateInput(); |
| dateinput.get_styles().EnabledStyle[0] += "background:#ffc"; |
| dateinput.get_styles().HoveredStyle[0] += "background:#ff9"; |
| dateinput.get_styles().FocusedStyle[0] += "background:#fc9"; |
| dateinput.updateCssClass(); |
| return false; |
| } |
| </script> |
| </telerik:RadCodeBlock> |
| </form> |
| </body> |
| </html> |
Regards,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Alexander
Top achievements
Rank 1
Rank 1
answered on 07 Mar 2011, 10:27 AM
Hello. I am curious to know - why i can get Rad object reference via $find (ajax method, right?), but I cannot do it via $jquery?
I extensively use jquery to work with controls and for commonality I'd prefer to use it on Rad time controls, too.
Is there a way to get Rad control reference via jquery, not ajax?? I tried to use $('#rad_datetimepicker_ID') and $telerik.$('#rad_datetimepicker_ID'), but only $find('rad_datetimepicker_ID') returns me RadDateTimePicker object, jquery returns me a generic object.
I extensively use jquery to work with controls and for commonality I'd prefer to use it on Rad time controls, too.
Is there a way to get Rad control reference via jquery, not ajax?? I tried to use $('#rad_datetimepicker_ID') and $telerik.$('#rad_datetimepicker_ID'), but only $find('rad_datetimepicker_ID') returns me RadDateTimePicker object, jquery returns me a generic object.
0
Hello Alexander,
You have answered your question pretty much yourself.
jQuery selectors return a jQuery object.
$find() returns an ASP.NET AJAX control instance.
jQuery knows nothing about ASP.NET AJAX controls, so you can't use it to obtain reference to ASP.NET AJAX client control instances.
Greetings,
Dimo
the Telerik team
You have answered your question pretty much yourself.
jQuery selectors return a jQuery object.
$find() returns an ASP.NET AJAX control instance.
jQuery knows nothing about ASP.NET AJAX controls, so you can't use it to obtain reference to ASP.NET AJAX client control instances.
Greetings,
Dimo
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Alexander
Top achievements
Rank 1
Rank 1
answered on 09 Mar 2011, 11:46 AM
Hmm... but the point is that AJAX method, $find, returned me Rad object, not jquery! :) So everything happened on the contrary of expected... jquery method, $('#id'), that successfully returns HTML controls (select, input, etc), treats Rad object as some HTML stuff while $find returns exactly Rad object!