RadCalender/RadDatePicker As PopUp In asp:GridView Column

2 posts, 0 answers
  1. Seth
    Seth avatar
    90 posts
    Member since:
    Jun 2007

    Posted 17 Mar 2009 Link to this post

    I have an asp:GridView column that is a date column.  When a user hovers over the column, we would like to popup a calendar.  Is this achievable using any of the Rad controls?  I can get it to work with RadDatePicker when the DateInput is visible, but I don't want any controls visible until the user hovers over the date.

  2. Dimo
    Dimo avatar
    8321 posts

    Posted 20 Mar 2009 Link to this post

    Hello Seth,

    It is not very clear what you are trying to do, but I am giving you a simple example, which should provide some directions:

    <%@ 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" /> 
    <div onmouseover="showCalendar(event)" style="border:1px solid #999;width:600px;height:200px"
        Move the mouse cursor over this area to: 
        <br /><br /> 
        show the RadCalendar 
    <div onmouseover="showPicker(event)" style="border:1px solid #999;width:600px;height:200px"
        Move the mouse cursor over this area to: 
        <br /><br /> 
        show the RadDateTimePicker and popup the TimeView control 
    <br /><br /> 
    <asp:Panel ID="CalendarPanel" runat="server" style="display:none;"
        <telerik:RadCalendar ID="RadCalendar1" runat="server" /> 
    <br /><br /> 
    <asp:Panel ID="PickerPanel" runat="server" style="display:none;"
        <telerik:RadDateTimePicker ID="RadDateTimePicker1" runat="server" /> 
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
    <script type="text/javascript"
    var CalendarShown = false
    var PickerShown = false
    function showCalendar(e) 
        if (CalendarShown) 
        var calendarPanel = $get("<%= CalendarPanel.ClientID %>"); 
        calendarPanel.style.display = ""
        calendarPanel.style.position = "absolute"
        calendarPanel.style.top = e.clientY + "px"; 
        calendarPanel.style.left = e.clientX + "px"; 
        CalendarShown = true
    function showPicker(e) 
        if (PickerShown) 
        var pickerPanel = $get("<%= PickerPanel.ClientID %>"); 
        pickerPanel.style.display = ""
        pickerPanel.style.position = "absolute"
        pickerPanel.style.top = e.clientY + "px"; 
        pickerPanel.style.left = e.clientX + "px"; 
        var picker = $find("<%= RadDateTimePicker1.ClientID %>"); 
        //show calendar popup 
        //show timeview popup 
        PickerShown = true

    Best wishes,
    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
Back to Top