This is a migrated thread and some comments may be shown as answers.

RadCalender/RadDatePicker As PopUp In asp:GridView Column

1 Answer 124 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Seth
Top achievements
Rank 1
Seth asked on 17 Mar 2009, 08:42 PM
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.

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 20 Mar 2009, 09:13 AM
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.
Tags
Calendar
Asked by
Seth
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or