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

How to stop flickering of DayPilotCalendar in updatePanel

Asked by harshad jadhav
9 years ago.

Hello All,

I have two DayPilotCalendar cotrols on my web page.
Both are in different update panel. On checkbox change i am updating both of them.
But I found that first DayPilotCalendar is comming ok,but the secod is flickering.
so can someone tell me how to stop flickering of second DayPilotCalendar.

following is the code.
<tr>
<td>
<asp:UpdatePanel ID="UpdatePanelCalendar" runat="server" UpdateMode="Conditional"
ChildrenAsTriggers="false">
<ContentTemplate>
<asp:CheckBoxList ID="chkClinicList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="chkClinicList_SelectedIndexChanged"
AppendDataBoundItems="true">
<asp:ListItem Text="one" Value="1"></asp:ListItem>
<asp:ListItem Text="two" Value="2"></asp:ListItem>
<asp:ListItem Text="three" Value="3"></asp:ListItem>
<asp:ListItem Text="four" Value="4"></asp:ListItem>
</asp:CheckBoxList>
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<DayPilot:DayPilotCalendar ID="DayPilotCalendar1" runat="server" ClientObjectName="dpc1"
HourNameBackColor="#ECE9D8" BorderColor="#A0A0A0" CellBorderColor="#A0A0A0" EventBorderColor="#505050"
AllDayEventBorderColor="#a0a0a0" TimeRangeSelectedHandling="PostBack" EventClickHandling="PostBack"
EventDeleteHandling="JavaScript" EventResizeHandling="CallBack" EventMoveHandling="CallBack"
Width="200">
</DayPilot:DayPilotCalendar>
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<DayPilot:DayPilotCalendar ID="DayPilotCalendar2" runat="server" ClientObjectName="dpc1"
HourNameBackColor="#ECE9D8" BorderColor="#A0A0A0" CellBorderColor="#A0A0A0" EventBorderColor="#505050"
AllDayEventBorderColor="#a0a0a0" TimeRangeSelectedHandling="PostBack" EventClickHandling="PostBack"
EventDeleteHandling="JavaScript" EventResizeHandling="CallBack" EventMoveHandling="CallBack"
Width="200">
</DayPilot:DayPilotCalendar>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>

server side code
protected void chkClinicList_SelectedIndexChanged(object sender, EventArgs e)
{
UpdatePanel1.Update();
UpdatePanel2.Update();
}

thanks in advance

Comment posted by Dan Letecky [DayPilot]
9 years ago.

Is it flickering during update only?

Comment posted by harshad jadhav
9 years ago.

yes it only gives the problem when update. i have binded the values in following manner

Server side code on checkBox click
protected void chkClinicList_SelectedIndexChanged(object sender, EventArgs e)
{
DayPilotCalendar1.DataSource = fnGetRecordsBasedOnCritria(strDoctorId, strClinicListId);
DayPilotCalendar1.DataBind();

DayPilotCalendar2.DataSource = fnGetWaitingRecordsBasedOnCritria(strDoctorId, strClinicListId);
DayPilotCalendar2.DataBind();

UpdatePanel1.Update();
UpdatePanel2.Update();
}

Answer posted by Dan Letecky [DayPilot]
9 years ago.

If you place the Calendar inside an UpdatePanel it gets redrawn completely during update. Different browsers may be able to handle it differently (IE is not very good at smooth redrawing). The page layout may also have some influence (you can try it with a plain page).

I would recommend switching to CallBack updates. Even full update doesn't redraw everything so it will be faster and smoother.

See also here (this doc page is for Scheduler but you can use the same mechanism with Calendar):

http://www.daypilot.org/scheduler-commandcallback.html

Comment posted by Anonymous
9 years ago.

I have to filter the data in the calender based on the check boxes clicked.
Can you tell me how to do that using commandcallback. based on the check on the checkbox.

Thanks in advance

Harshad

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.