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.
Thanks.
1 Answer, 1 is accepted
0
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:
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.
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.