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

RadDatePicker MultiViewColumns set stops navigation

11 Answers 125 Views

Ajax

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

Duane asked on 30 Sep 2010, 10:00 AM

Hi Guys,

I wonder if any one can shed some light on an issue we are having?

The webpage we have an issue with has a telerik:RadDateTimePicker. If the 'MultViewColumns' and 'MultiViewRow' properties are not set then the navigation works on the calendar when it pops up works fine, as does the quick month/Year selection.

However as soon as we set the 'MultiViewColumns' to 2 or more the navigation quits working, along with the quick Month/Year selection. The List of months and years pops up but selecting anything does not refresh the calendar to teh correct new month.

The html code we are using below:

<telerik:RadDateTimePicker ID="fdCourseStartDateDateTimePicker"

runat="server"

Skin="GCI"

EnableEmbeddedSkins="false" AutoPostBackControl="Calendar" >

<DateInput ID="DateInput2" runat="server" DateFormat="D" ReadOnly="true" >

</DateInput>

<TimePopupButton runat="server" Visible="false" />

<Calendar ID="fdCourseStartDateCalendar"

runat="server"

EnableEmbeddedSkins="false"

Skin="GCI"

UseRowHeadersAsSelectors="False"

UseColumnHeadersAsSelectors="False"

MultiViewColumns="2" >

<FastNavigationSettings

DateIsOutOfRangeMessage="Erk!"

EnableTodayButtonSelection="true" />

</Calendar>

</telerik:RadDateTimePicker>

If any one can advise it will be aprreciated.

Best regards,
Dib.

11 Answers, 1 is accepted

answered on 30 Sep 2010, 03:41 PM

Hello Duane,

Your scenario is not supported out-of-the-box, because RadCalendar must postback if it is used in multimonth mode in order to navigate and select dates. However, in this case the RadCalendar is a child control of another control and posting back during navigation will cause that the calendar popup to close.

A workaround exists:

http://www.telerik.com/community/code-library/aspnet-ajax/calendar/how-to-use-raddatepicker-with-multimonthview-calendar.aspx

Sincerely yours,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 22 Mar 2012, 06:01 AM

Hi Jumpstart,

Thanks for your reply.

Here I am pasting my User Conrol code and the way it is used in parent. I am facing this issue for RAdControls 3.5 as well as 4.0 dlls
PickerControl.ascx code:-

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PickerControl.ascx.cs" Inherits="PickerControl" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<style type="text/css">

.nowHidden

{

display: none;

}

.nowVisible

{

position: absolute;

top: 0;

left: 0;

}

</style>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

var PickerClientID = "";

var CalendarClientID = "";

var HiddenCalendarClientID = "";

var shouldInvokeAjax = false;

function ToggleCalendar(hiddenCalWrapperId, calID, sender, event) {

PickerClientID = sender.id.replace("_popupButton", "");

CalendarClientID = calID;

SetCalendarIdInHidden(hiddenCalWrapperId);

HiddenCalendarClientID = hiddenCalWrapperId;

var cal = $find(CalendarClientID);

var todaysDate = new Date();

var todayTriplet = [todaysDate.getFullYear(), todaysDate.getMonth() + 1, todaysDate.getDate()];

SetCalendar();

}

function SetCalendar() {

var tb = $find(PickerClientID).get_textBox();

var calWrapper = $get(HiddenCalendarClientID);

var tbLocation = $telerik.getLocation(tb);

calWrapper.style.top = tbLocation.y + tb.offsetHeight + "px";

calWrapper.style.left = tbLocation.x + "px";

calWrapper.className = calWrapper.className.indexOf("nowHidden") != -1 ? "nowVisible" : "nowHidden";

shouldInvokeAjax = calWrapper.className.indexOf("nowHidden") != -1 ? false : true;

}

function myUserControlClickHandler() {

$find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest(["focusSelectedDate"]);

}

function HideCalendar() {

$get(HiddenCalendarClientID).className = "nowHidden";

ResetHidden();

if (shouldInvokeAjax) {

shouldInvokeAjax = false;

myUserControlClickHandler();

}

function DateSelected(sender, args) {

if (args.get_renderDay().IsSelected) {

var selectedDate = args.get_renderDay().get_date();

var newPickerDate = new Date();

newPickerDate.setFullYear(selectedDate[0]);

newPickerDate.setMonth(selectedDate[1] - 1);

newPickerDate.setDate(selectedDate[2]);

$find(PickerClientID).get_dateInput().set_selectedDate(newPickerDate);

HideCalendar();

}

else {

$find(PickerClientID).get_dateInput().clear();

}

function ValueChanged(sender, args) {

var cal = $find(CalendarClientID);

var calDates = cal.get_selectedDates();

if (args.get_newDate()) {

var NewCalDate = [args.get_newDate().getFullYear(), args.get_newDate().getMonth() + 1, args.get_newDate().getDate()];

cal.selectDate(NewCalDate);

}

else if (calDates.length != 0) {

var CurrentCalDate = [calDates[0][0], calDates[0][1], calDates[0][2]];

cal.unselectDate(CurrentCalDate);

}

document.documentElement.onclick = function (event) {

if (shouldInvokeAjax) {

if (window.event) {

var eventTarget = window.event.srcElement;

}

else {

var eventTarget = event.target;

}

if (eventTarget.id == PickerClientID + "_popupButton") {

return;

}

while (eventTarget = eventTarget.parentNode) {

if (eventTarget.id == CalendarClientID) {

return;

}

shouldInvokeAjax = false;

HideCalendar();

}

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadCalendar1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadCalendar1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<div>

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" Calendar-Visible="false">

<DateInput runat="server" OnTextChanged="SetOthersMinDate" ClientEvents-OnValueChanged="ValueChanged" AutoPostBack="true" />

</telerik:RadDatePicker>

<br />

</div>

<div id="HiddenCalendarWrapper" class="nowHidden" runat="server">

<telerik:RadCalendar ID="RadCalendar1" runat="server" SelectedDate=""

FirstDayOfWeek="Monday" ShowRowHeaders="false" UseRowHeadersAsSelectors="false"

UseColumnHeadersAsSelectors="false" EnableMultiSelect="false" AutoPostBack="true"

MultiViewColumns="2" ClientEvents-OnDateSelected="DateSelected"

ShowOtherMonthsDays="false" />

</div>

PickerControl.ascx.cs:-

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

public partial class PickerControl : System.Web.UI.UserControl

{

protected void Page_Load(object sender, EventArgs e)

{

RadDatePicker1.DatePopupButton.Attributes.Add("onclick", "ToggleCalendar('" + HiddenCalendarWrapper.ClientID + "', '" + RadCalendar1.ClientID + "', this, event);return false;");

//This will take care of requirement where they want to restrict navigation back from current month

RadCalendar1.RangeMinDate = DateTime.Now;

RadCalendar1.FastNavigationSettings.DateIsOutOfRangeMessage = string.Empty;

}

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)

{

if (e.Argument == "focusSelectedDate" && RadCalendar1.SelectedDates.Count > 0)

{

RadCalendar1.FocusedDate = RadCalendar1.SelectedDates[0].Date;

}

else if (e.Argument == "focusSelectedDate")

{

RadCalendar1.FocusedDate = DateTime.Now;

}

protected void SetOthersMinDate(object sender, EventArgs e)

{

if (((PickerControl)this.Parent.FindControl("picker2")).ID != this.ID)

{

((RadCalendar)((PickerControl)this.Parent.FindControl("picker2")).FindControl("RadCalendar1")).RangeMinDate = (DateTime)RadDatePicker1.DbSelectedDate;

((RadCalendar)((PickerControl)this.Parent.FindControl("picker2")).FindControl("RadCalendar1")).FastNavigationSettings.DateIsOutOfRangeMessage = string.Empty;

}

Here my Default.aspx:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ Register Src="~/PickerControl.ascx" TagName="pickerControl" TagPrefix="customControl" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function SetCalendarIdInHidden(shownCalendarID) {

var shownCalendar = document.getElementById("hiddenShownCalendar").value;

if (shownCalendar != "" && shownCalendar != shownCalendarID) {

$get(shownCalendar).className = "nowHidden";

}

document.getElementById("hiddenShownCalendar").value = shownCalendarID;

}

function ResetHidden() {

document.getElementById("hiddenShownCalendar").value = "";

}

</script></telerik:RadCodeBlock>

<div>

<asp:HiddenField ID="hiddenShownCalendar" runat="server" />

<asp:UpdatePanel ID="updatePanel1" runat="server"><ContentTemplate>

<customControl:pickerControl ID="picker1" runat="server" />

<br /><br /><br />

<customControl:pickerControl ID="picker2" runat="server" />

<br /><br /><br />

</ContentTemplate></asp:UpdatePanel>

</div>

</form>

</body>

</html>

This is all I have done. If you will remove update panel, navigation works fine. But inside user control it wont.

Thanks in advance