DayPilot Knowledge Base

AJAX Calendar/Scheduling Controls
DayPilot Pro (AJAX Calendar Control)
» DayPilot AJAX Calendar
DayPilot Pro (AJAX Monthly Calendar Control)
» DayPilot AJAX Monthly Calendar
DayPilot Pro (AJAX Scheduler Control)
» DayPilot AJAX Scheduler
DayPilot » Knowledge Base » How to update a GridView after an AJAX callback update of the main calendar control

How to update a GridView after an AJAX callback update of the main calendar control

Last revision: Jul 15, 2012

If you are showing a GridView with data that need be updated during an AJAX callback on one of the calendar controls (CalendarMonthScheduler) you can use AfterRenderJavaScript handler to trigger the update.

1. Place the GridView inside an UpdatePanel:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

...

<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load" >
  <ContentTemplate>
    <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">
      ...
    </asp:GridView>
  </ContentTemplate>
</asp:UpdatePanel>

2. Handle AfterRender client-side event of the calendar control:

AfterRenderJavaScript="afterRender(isCallBack)"

This event is fired after initial page load (isCallBack == false) and after every internal AJAX callback (isCallBack == true).

3. Refresh the UpdatePanel manually from afterRender() function:

<script type="text/javascript">
  function afterRender(isCallBack) {
    if (isCallBack) {  // skip this action during initial page load
      __doPostBack('<%= UpdatePanel1.ClientID %>', '');
    }
  }
</script>

4. Update the content using UpdatePanel1_Load:

protected void UpdatePanel1_Load(object sender, EventArgs e)
{
  GridView1.DataSource = ...;
  GridView1.DataBind();
}

Related

How to show the selected date using a Label control
How to show a modal dialog in ASP.NET MVC 3 Razor
How to show an event calendar in ASP.NET MVC 3 Razor
How to use DayPilot Scheduler with LINQ to SQL