DayPilot » Knowledge Base » How to update a GridView after an AJAX callback update of the main calendar control

If you are showing a GridView with data that need be updated during an AJAX callback on one of the calendar controls (Calendar, Month, Scheduler) 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();
}