Why Does RadWindow Need an UpdatePanel When Parent Page Has an UpdatePanel?

[Robert]

I've constructed a simple AJAX-enabled web page with this code:

<%@ Page Language="C#" MasterPageFile="~/main.master" AutoEventWireup="true" Inherits="taskChecker" Codebehind="taskChecker.aspx.cs" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  <script type="text/javascript">
    function contentPageLoad(sender, e) {

    }
  </script>

  <asp:HiddenField ID="divScrollInit" runat="server" />

  <div class="contentHeader">
    Task Checker
  </div>

  <div class="content1">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
        <div style="font-size:14px; font-weight:bold; margin-left:-100px; margin-top:-30px">
          <asp:RadioButtonList ID="radioButtonMode" runat="server" RepeatDirection="Horizontal" AutoPostBack="true" OnSelectedIndexChanged="radioButtonMode_IndexChanged" CellSpacing="30">
            <asp:ListItem Text="Display Task" Value="Display" />
            <asp:ListItem Text="Compare Tasks" Value="Compare" />
          </asp:RadioButtonList>
        </div>

        <asp:UpdateProgress ID="UpdateProgress1" runat="server" Visible="true">
          <ProgressTemplate>
            <div id="progress" class="progress3">
              <img src="../Images/Progress/indicator_big.gif" />
              <br /><br />
              Please Wait
            </div>
          </ProgressTemplate>
        </asp:UpdateProgress>

        <asp:Panel ID="panelMain" runat="server" Visible="false" style="margin-left:-50px; margin-bottom:30px">
          <div class="titleBlack" style="padding-bottom:10px">
            <asp:Label ID="labelInstructions" runat="server" />
          </div>

          <div id="divTaskListGrid1" style="overflow-x:hidden; overflow-y:auto; width:705px; max-height:200px; border:1px solid black">
            <telerik:RadGrid ID="radGridTaskList" runat="server" AutoGenerateColumns="false" AllowSorting="true" Width="687px"
                              BorderColor="#E7E7FF" BorderStyle="Solid" BorderWidth="1" CellPadding="0" GridLines="Both" OnSelectedIndexChanged="radGridTaskList_SelectedIndexChanged">
              <HeaderStyle Font-Bold="true" ForeColor="#031d5b" VerticalAlign="Middle" Height="20" CssClass="pointerOnly headerGrid" />
              <ItemStyle CssClass="radGridItem" />
              <AlternatingItemStyle CssClass="radGridAltItem" />
              <ClientSettings EnablePostBackOnRowClick="true" EnableRowHoverStyle="true" Selecting-AllowRowSelect="true" />

              <MasterTableView BorderWidth="0" DataKeyNames="TaskID,TaskLevel">
                <Columns>
                  <telerik:GridBoundColumn DataField="TaskId" HeaderText="Task Id" SortExpression="TaskId" ItemStyle-HorizontalAlign="Center">
                    <HeaderStyle Width="55px" HorizontalAlign="Center" />
                    <ItemStyle HorizontalAlign="Center" />
                  </telerik:GridBoundColumn>

                  <telerik:GridBoundColumn DataField="TaskNumber" HeaderText="Task #" SortExpression="TaskNumber" ItemStyle-HorizontalAlign="Center">
                    <HeaderStyle Width="40px" HorizontalAlign="Center" />
                    <ItemStyle HorizontalAlign="Right" CssClass="indentRight20" />
                  </telerik:GridBoundColumn>

                  <telerik:GridBoundColumn DataField="TaskDate" HeaderText="Date" SortExpression="TaskDate" DataFormatString="{0:MMM yyyy}">
                    <HeaderStyle HorizontalAlign="Center" Width="60px" />
                    <ItemStyle HorizontalAlign="Center" />
                  </telerik:GridBoundColumn>

                  <telerik:GridTemplateColumn HeaderText="Mine">
                    <HeaderStyle HorizontalAlign="Center" Width="50px" />
                    <ItemStyle HorizontalAlign="Center" />
                    <ItemTemplate>
                      <%# GetMine(Convert.ToInt32(Eval("TaskLevel"))) %>
                    </ItemTemplate>
                  </telerik:GridTemplateColumn>

                  <telerik:GridTemplateColumn HeaderText="Contract">
                    <HeaderStyle HorizontalAlign="Center" Width="60px" />
                    <ItemStyle HorizontalAlign="Center" />
                    <ItemTemplate>
                      <%# GetContract(Convert.ToInt32(Eval("TaskLevel"))) %>
                    </ItemTemplate>
                  </telerik:GridTemplateColumn>

                  <telerik:GridBoundColumn DataField="TaskDescription" HeaderText="Description" SortExpression="TaskDescription" ReadOnly="True">
                    <HeaderStyle HorizontalAlign="Left" />
                    <ItemStyle Wrap="true" />
                  </telerik:GridBoundColumn>

                  <telerik:GridBoundColumn DataField="TaskStdHours" HeaderText="Std Hrs" SortExpression="TaskStdHours" ItemStyle-HorizontalAlign="Center">
                    <HeaderStyle Width="60px" HorizontalAlign="Center" />
                  </telerik:GridBoundColumn>

                  <telerik:GridTemplateColumn HeaderStyle-Width="60px" HeaderText="Completed" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                      <asp:Label ID="labelCompleted" runat="server" Text='<%# Convert.ToBoolean(Eval("TaskStatus")) ? "Yes" : "No" %>' />
                    </ItemTemplate>
                  </telerik:GridTemplateColumn>
                </Columns>
              </MasterTableView>
            </telerik:RadGrid>
          </div>

          <div id="divTaskListGrid2" runat="server" style="overflow-x:hidden; overflow-y:auto; width:705px; max-height:200px; border:1px solid black; margin-top:25px">
            <telerik:RadGrid ID="radGridTaskList2" runat="server" AutoGenerateColumns="false" AllowSorting="true" Width="687px"
                              BorderColor="#E7E7FF" BorderStyle="Solid" BorderWidth="1" CellPadding="0" GridLines="Both" OnSelectedIndexChanged="radGridTaskList2_SelectedIndexChanged">
              <HeaderStyle Font-Bold="true" ForeColor="#031d5b" VerticalAlign="Middle" Height="20" CssClass="pointerOnly headerGrid2" />
              <ItemStyle CssClass="radGridItem" />
              <AlternatingItemStyle CssClass="radGridAltItem" />
              <ClientSettings EnablePostBackOnRowClick="true" EnableRowHoverStyle="true" Selecting-AllowRowSelect="true" />

              <MasterTableView BorderWidth="0" DataKeyNames="TaskID,TaskLevel">
                <Columns>
                  <telerik:GridBoundColumn DataField="TaskId" HeaderText="Task Id" SortExpression="TaskId" ItemStyle-HorizontalAlign="Center">
                    <HeaderStyle Width="55px" HorizontalAlign="Center" />
                    <ItemStyle HorizontalAlign="Center" />
                  </telerik:GridBoundColumn>

                  <telerik:GridBoundColumn DataField="TaskNumber" HeaderText="Task #" SortExpression="TaskNumber" ItemStyle-HorizontalAlign="Center">
                    <HeaderStyle Width="40px" HorizontalAlign="Center" />
                    <ItemStyle HorizontalAlign="Right" CssClass="indentRight20" />
                  </telerik:GridBoundColumn>

                  <telerik:GridBoundColumn DataField="TaskDate" HeaderText="Date" SortExpression="TaskDate" DataFormatString="{0:MMM yyyy}">
                    <HeaderStyle HorizontalAlign="Center" Width="60px" />
                    <ItemStyle HorizontalAlign="Center" />
                  </telerik:GridBoundColumn>

                  <telerik:GridTemplateColumn HeaderText="Mine">
                    <HeaderStyle HorizontalAlign="Center" Width="50px" />
                    <ItemStyle HorizontalAlign="Center" />
                    <ItemTemplate>
                      <%# GetMine(Convert.ToInt32(Eval("TaskLevel"))) %>
                    </ItemTemplate>
                  </telerik:GridTemplateColumn>

                  <telerik:GridTemplateColumn HeaderText="Contract">
                    <HeaderStyle HorizontalAlign="Center" Width="60px" />
                    <ItemStyle HorizontalAlign="Center" />
                    <ItemTemplate>
                      <%# GetContract(Convert.ToInt32(Eval("TaskLevel"))) %>
                    </ItemTemplate>
                  </telerik:GridTemplateColumn>

                  <telerik:GridBoundColumn DataField="TaskDescription" HeaderText="Description" SortExpression="TaskDescription" ReadOnly="True">
                    <HeaderStyle HorizontalAlign="Left" />
                    <ItemStyle Wrap="true" />
                  </telerik:GridBoundColumn>

                  <telerik:GridBoundColumn DataField="TaskStdHours" HeaderText="Std Hrs" SortExpression="TaskStdHours" ItemStyle-HorizontalAlign="Center">
                    <HeaderStyle Width="60px" HorizontalAlign="Center" />
                  </telerik:GridBoundColumn>

                  <telerik:GridTemplateColumn HeaderStyle-Width="60px" HeaderText="Completed" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                      <asp:Label ID="labelCompleted" runat="server" Text='<%# Convert.ToBoolean(Eval("TaskStatus")) ? "Yes" : "No" %>' />
                    </ItemTemplate>
                  </telerik:GridTemplateColumn>
                </Columns>
              </MasterTableView>
            </telerik:RadGrid>
          </div>

          <div style="padding-top:20px">
            <asp:Button ID="buttonSubmit" runat="server" OnClick="buttonSubmit_Click" />
          </div>
        </asp:Panel>
      </ContentTemplate>
    </asp:UpdatePanel>

    <telerik:RadWindow ID="rwResults" runat="server" Behaviors="Close,Move" EnableShadow="true" VisibleStatusbar="false" VisibleTitlebar="true" AutoSize="true" Modal="true" >
      <ContentTemplate>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
          <ContentTemplate>
            <telerik:RadGrid ID="radGridResults" runat="server" AutoGenerateColumns="false" AllowSorting="true" Width="600" Height="400"
                              BorderColor="#E7E7FF" BorderStyle="Solid" BorderWidth="1" CellPadding="0" GridLines="Both">
              <HeaderStyle Font-Bold="true" ForeColor="#031d5b" VerticalAlign="Middle" Height="20" CssClass="pointerOnly headerGrid" />
              <ItemStyle CssClass="radGridItem" />
              <AlternatingItemStyle CssClass="radGridAltItem" />

              <MasterTableView>
                <Columns>
                  <telerik:GridBoundColumn DataField="TableName" Visible="false" />

                  <telerik:GridBoundColumn DataField="FieldName" HeaderText="Field" ItemStyle-HorizontalAlign="Left">
                    <HeaderStyle Width="80px" HorizontalAlign="Left" />
                  </telerik:GridBoundColumn>

                  <telerik:GridBoundColumn DataField="Value1">
                    <HeaderStyle HorizontalAlign="Center" Width="60px" BackColor="#bcd0fe" />
                    <ItemStyle HorizontalAlign="Center" />
                  </telerik:GridBoundColumn>

                  <telerik:GridBoundColumn DataField="Value2">
                    <HeaderStyle HorizontalAlign="Center" Width="60px" BackColor="#d6bcfe" />
                    <ItemStyle HorizontalAlign="Center" />
                  </telerik:GridBoundColumn>

    <%--              <telerik:GridImageColumn>
                    <HeaderStyle HorizontalAlign="Center" Width="30px" />
                  </telerik:GridImageColumn>--%>
                </Columns>
              </MasterTableView>
            </telerik:RadGrid>
          </ContentTemplate>
        </asp:UpdatePanel>
      </ContentTemplate>
    </telerik:RadWindow>
  </div>

  <div class="subtleMsg">
    <div id="msg" />
  </div>
</asp:Content>

Attached is a screenshot of one of the two modes of the page.  In this simpler mode, the user picks an item from a grid and presses "Display Task".  That causes a RadWindow to be opened which contains a summary grid displaying associated data for this item.

I spent several hours trying to get the RadGrid in the RadWindow to display.  It would not.  Only when I added an UpdatePanel in the RadWindow did it suddenly work.

Two questions:

1. If the parent page has an UpdatePanel then why does the RadWindow need an UpdatePanel too?
2. If #1 is always true then shouldn't your documentation include this fact?  For example, here it does not.

Sincerely,

Robert W.

[Marin Bratanov]

Hi Robert,

We have already discussed using AJAX with the RadWindow's ContentTemplate here: http://www.telerik.com/community/forums/aspnet-ajax/window/is-a-partial-postback-with-radwindow-possible.aspx.

The short answer to your questions is - because this is how AJAX works. THe main grid and button are in an update panel and a postback from within will not update parts of the page that are not inside update panels themselves. To be precise - update panels with UpdateMode set to Always (which is the default value). Once you added the update panel around the targeted grid its content was transferred to the browser instead of being rendered only on the server and you were able to see the desired data. This behaviour does not stem from the RadWindow, but from the general way partial postbacks work.

Regarding the help article you linked - its shows the feature of the RadWindow that makes it work almost like a simple asp:Panel control, instead of loading a full page in an iframe. How AJAX is used for this depends on the case and is considered general knowledge that is a prerequisite for working with the controls, because it it is functionality that comes from the MS AJAX framework we leverage. This help article explains the specifics of using a RadWindow with AJAX in greater detail.


Kind regards,
Marin Bratanov
the Telerik team

[Robert]

Thank you, Marin.

Robert