refreshCallBack not working with a DropDownList

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>

Asked by JFC 4 years ago.

asp.net bug

Replies

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 4 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 Dan Letecky 4 years ago.

Thanks Dan for this fast and excellent answer. I use Option #2 and it's perfectly working !

Comment posted by JFC 4 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 Sanson 4 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 Dan Letecky 4 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 4 years ago.

In my previous post, it should actually say if (!Page.IsCallback) {}

Comment posted by Anonymous 4 years ago.

Thanks for the helpful explanation!

Comment posted by Dan Letecky 4 years ago.

New Reply

This reply is

a comment

an answer

Your name (optional):

Tools

E-mail notifications

Feed

DayPilot Forums

refreshCallBack not working with a DropDownList