RadTimePicker - Setting Style Client Side

5 posts, 0 answers
  1. Robert
    Robert avatar
    23 posts
    Member since:
    Feb 2009

    Posted 09 Mar 2009 Link to this post

    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:




    "#" + <%= 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.


  2. Dimo
    Dimo avatar
    8318 posts

    Posted 11 Mar 2009 Link to this post

    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:


    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" 
    <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> 
    <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"; 
        return false; 

    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.
  3. DevCraft R3 2016 release webinar banner
  4. Alexander
    Alexander avatar
    152 posts
    Member since:
    Jun 2012

    Posted 07 Mar 2011 Link to this post

    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.
  5. Dimo
    Dimo avatar
    8318 posts

    Posted 08 Mar 2011 Link to this post

    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.

    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!
  6. Alexander
    Alexander avatar
    152 posts
    Member since:
    Jun 2012

    Posted 09 Mar 2011 Link to this post

    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!
Back to Top
DevCraft R3 2016 release webinar banner