search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

refreshCallBack not working with a DropDownList

Asked by JFC
14 years ago.

Hello,

I'm updating the startdate of a daypilot calendar using an anthem calendar.

Everything is working untill I use a DropDownList in the same page: the refreshCallBack event is never received on the server side.

Is there a better way to update the startpage property using a callback ?

my code (remove 'dlUserName.Items.Add(new ListItem("erez", "fes"));' and it is working):

<%@ Page Language="C#" MasterPageFile="~/Sample.master" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>

<%@ Register Assembly="DayPilot" Namespace="DayPilot.Web.Ui" TagPrefix="DayPilot" %>
<%@ Register TagPrefix="anthem" Namespace="Anthem" Assembly="Anthem" %>

<script runat="server">

protected void DayPilotCalendar1_Refresh(object sender, DayPilot.Web.Ui.Events.RefreshEventArgs e)
{
DayPilotCalendar1.StartDate = Convert.ToDateTime(Session["ldt"]); // e.StartDate;
DayPilotCalendar1.DataBind();
DayPilotCalendar1.Update();
}



protected void cal_SelectionChanged(object sender, EventArgs e)
{
Session["ldt"] = cal.SelectedDate;
}

protected void Page_Load(object sender, EventArgs e)
{
dlUserName.Items.Add(new ListItem("erez", "fes"));
}

</script>

<asp:Content ContentPlaceHolderID="ContentPlaceHolder" runat="server">
<script language='javascript'>

function Test()
{
var ldt= new Date(Date.UTC(2007,11,24));
dpc1.refreshCallBack(ldt);
}


</script>
<h2>Example</h2>
<anthem:Calendar id="cal" runat="server"
EnableCallBack="true" EnableViewState="true"
TextDuringCallBack='<img src="tiny_red.gif" border=0 />'
PostCallBackFunction="Test" OnSelectionChanged="cal_SelectionChanged" >
</anthem:Calendar>
<DayPilot:DayPilotCalendar ID="DayPilotCalendar1" runat="server" ClientObjectName="dpc1" OnRefresh="DayPilotCalendar1_Refresh">
</DayPilot:DayPilotCalendar>
<asp:DropDownList ID="dlUserName" runat="server">
</asp:DropDownList>
</asp:Content>

Comment posted by Dan Letecky
14 years ago.
You are firing two HTTP requests (first updates Anthem calendar and the second - executed after the Anthem calendar is updated - updates DayPilotCalendar). The second request fails because Anthem does something with the ViewState (I don't know what exactly yet) that causes "The state information is invalid for this page and might be corrupted." error upon DayPilotCalendar callback.

Theoretically (without this bug) one of the solutions would be this (replacing the default action of day number click by JavaScript action calling refreshCallBack() directly):
<%@ Page Language="C#" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="DayPilot" Namespace="DayPilot.Web.Ui" TagPrefix="DayPilot" %>
<%@ Register TagPrefix="anthem" Namespace="Anthem" Assembly="Anthem" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
protected void DayPilotCalendar1_Refresh(object sender, DayPilot.Web.Ui.Events.RefreshEventArgs e)
{
DayPilotCalendar1.StartDate = e.StartDate; // e.StartDate;
DayPilotCalendar1.DataBind();
DayPilotCalendar1.Update();
}

protected void Page_Load(object sender, EventArgs e)
{
dlUserName.Items.Add(new ListItem("erez", "fes"));
}

protected void cal_DayRender(object sender, DayRenderEventArgs e)
{
e.Cell.Text = "<a href=\"javascript:dpc1.refreshCallBack(new Date('" + DayPilot.Utils.JsDate.FormatDateTime(e.Day.Date) + "'))\">" + e.Day.DayNumberText + "</a>";
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Anthem calendar test</title>

</head>
<body>
<form id="form1" runat="server">
<div>
<h2>
Example</h2>
<anthem:Calendar ID="cal" runat="server" EnableCallBack="true" EnableViewState="true"
TextDuringCallBack='<img src="tiny_red.gif" border=0 />'
OnDayRender="cal_DayRender">
</anthem:Calendar>
<DayPilot:DayPilotCalendar ID="DayPilotCalendar1" runat="server" ClientObjectName="dpc1"
OnRefresh="DayPilotCalendar1_Refresh">
</DayPilot:DayPilotCalendar>
<asp:DropDownList ID="dlUserName" runat="server">
</asp:DropDownList>
</div>
</form>
</body>
</html>
That works, but only until the first Anthem callback (e.g. when changing the current month).

The natural solution would be placing DayPilotCalendar inside an Anthem panel. That is not working out of the box because DayPilot requires an initialization JavaScript code to be executed (see Changing DayPilot StartDate Causes Error for a fix). However, since the time that topic was discussed a lot of DayPilot configuration code was moved from HTML to JavaScript (not only the initialization but the configuration as well) and this fix no longer helps for StartDate changes.

So I can try the following:

1. Take a look at the ViewState issue (if that's something that can be fixed inside DayPilot I will do it).
2. Make the method that generates initialization JavaScript public so you can assign it to PostCallBackFunction in cal_SelectionChanged method.
Comment posted by Dan Letecky
14 years ago.
Another solution, of course, would be to switch to ASP.NET AJAX:

Option #1:

Put both Calendar (from System.Web.UI) and DayPilotCalendar inside an UpdatePanel.

Option #2:

1. Put Calendar (from System.Web.UI) control inside an UpdatePanel to ensure that month switching is working without PostBack.
2. Use its DayRender event handler to change the default action to refreshCallBack().



I plan to add a native calendar control that could be used for StartDate switching to DayPilot package but it will take some time.
Comment posted by JFC
14 years ago.
Thanks Dan for this fast and excellent answer. I use Option #2 and it's perfectly working !
Comment posted by Sanson
14 years ago.

Dan,Sorry, Im having trouble working this out. I cant change the default action to refreshCallBack() of the DaypilotCalendar.

This is what i am trying. Can you please help mw it this? thanks

protected void DayPilotCalendar1_Refresh(object sender, DayPilot.Web.Ui.Events.RefreshEventArgs e) 
{

DayPilotCalendar1.StartDate = Calendar1.SelectedDate;
// e.StartDate
DayPilotCalendar1.DataBind();
DayPilotCalendar1.Update();
}

protected void Calendar1_Dayrender(object sender, System.Web.UI.WebControls.DayRenderEventArgs e)
{

DayPilotCalendar1_Refresh(DayPilotCalendar1, ???);
}

<asp:Content ID="Content1" ContentPlaceHolderID="Contentplaceholder2" Runat="Server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Calendar ID="Calendar1" runat="server" >

</asp:Calendar>

</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="Contentplaceholder1" Runat="Server">
<div id="Calendar_Container" style="width:95%;">
<DayPilot:DayPilotCalendar
ID="DayPilotCalendar1"
runat="server"
BackColor="#FFFFD5"
BorderColor="#000000"
CellSelectColor="#316AC5"
DataEndField="dtmEnd"
DataSourceID="AppointmentsObjectDataSource"
DataStartField="dtmStart"
DataTextField="strShortDetails"
DataValueField="uidAppointment"
Days="5"
DurationBarColor="Blue"
TimeFormat="Clock24Hours"
HeightSpec="BusinessHoursNoScroll"
EventMoveHandling="CallBack"
EventDeleteHandling="CallBack"
EventEditHandling="CallBack"
EventClickHandling="Edit"
EventResizeHandling="CallBack"
TimeRangeSelectedHandling="CallBack"
ClientObjectName="dpc1"
OnRefresh =""

>
</DayPilot:DayPilotCalendar>
</asp:Content> 
Comment posted by Dan Letecky
14 years ago.
These are the critical points:

1. Handle Refresh event of DayPilotCalendar1 properly. The easiest way to create an event handler is to double-click the Refresh event in Visual Studio / Designer, Events (flash icon) in the properties window. This will create the event binding in the ASPX page and a new event handler in the code. Your sample is missing the following in the ASPX declaration:
 OnRefresh="DayPilotCalendar1_Refresh"

The method should look like this:
protected void DayPilotCalendar1_Refresh(object sender, DayPilot.Web.Ui.Events.RefreshEventArgs e)
{
DayPilotCalendar1.StartDate = e.StartDate;
DayPilotCalendar1.DataBind();
DayPilotCalendar1.Update();
}
2. The same applies to Calendar1.DayRender event. Add this to the Calendar declaration in ASPX:
OnDayRender="Calendar1_DayRender"
And the following handler to the code:

    protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
e.Cell.Text = "<a href=\"javascript:dpc1.refreshCallBack(new Date('" + DayPilot.Utils.JsDate.FormatDateTime(e.Day.Date) + "'))\">" + e.Day.DayNumberText + "</a>";
}
I would like to add this sample to the DayPilot package. If you can wait until 4.1 release on Monday you will find it there working.
Comment posted by Anonymous
14 years ago.
protected void Page_Load(object sender, EventArgs e)
{
dlUserName.Items.Add(new ListItem("erez", "fes"));
}
This is the reason you're running into a problem with the ViewState. It gets executed during every callback, which modifies the ViewState and causes the "The state information is invalid for this page and might be corrupted" error. Wrapping this code in a if (Page.IsCallback) {} should do the trick.
Comment posted by Anonymous
14 years ago.
In my previous post, it should actually say if (!Page.IsCallback) {}
Comment posted by Dan Letecky
14 years ago.
Thanks for the helpful explanation!
This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.