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.

    Thanks.
  2. Dimo
    Admin
    Dimo avatar
    8330 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" 
    "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" /> 
     
    <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> 
     
    <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 
    </div> 
     
     
    <br /><br /> 
     
    <asp:Panel ID="CalendarPanel" runat="server" style="display:none;"
        <telerik:RadCalendar ID="RadCalendar1" runat="server" /> 
    </asp:Panel> 
     
    <br /><br /> 
     
    <asp:Panel ID="PickerPanel" runat="server" style="display:none;"
        <telerik:RadDateTimePicker ID="RadDateTimePicker1" runat="server" /> 
    </asp:Panel> 
     
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
    <script type="text/javascript"
     
    var CalendarShown = false
    var PickerShown = false
     
    function showCalendar(e) 
        if (CalendarShown) 
            return; 
         
        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) 
            return; 
             
        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 
        //picker.showPopup(); 
         
        //show timeview popup 
        picker.showTimePopup(); 
         
        PickerShown = true
     
    </script> 
    </telerik:RadCodeBlock> 
     
    </form> 
    </body> 
    </html> 
     


    Best wishes,
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top