gridPanel (in updatePanel) disappears after partial postback

[rach]

Hi,

I have a problem with partial postback when there is ext.net gridpanel inside updatePanel -
I have a button in updatePanel, and when clicking on it - it calls a gridPanel (which is also in UpdatePanel). But - the gridPanel actually appears only after first page-loaded, and by clicking the button - not.

Here is my code:

<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="uPnlBtn" runat="server">
        <ContentTemplate>
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Partial Postback" />
        </ContentTemplate>
    </asp:UpdatePanel>
    <br />
    <asp:UpdatePanel ID="uPnlGrid" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" AutoHeight="true">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:JsonReader>
                                <Fields>
                                    <ext:RecordField Name="a1" />
                                    <ext:RecordField Name="a2" />
                                    <ext:RecordField Name="a3" />
                                    <ext:RecordField Name="a4" />
                                </Fields>
                            </ext:JsonReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column Header="a11" DataIndex="a1">
                        </ext:Column>
                        <ext:Column Header="a21" DataIndex="a2">
                        </ext:Column>
                        <ext:Column Header="a31" DataIndex="a3">
                        </ext:Column>
                        <ext:Column Header="a41" DataIndex="a4">
                        </ext:Column>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </ContentTemplate>
    </asp:UpdatePanel>
 
 public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {      
                LoadGrid();
        }
 
        protected void Button1_Click(object sender, EventArgs e)
        {
          
                LoadGrid();
                uPnlGrid.Update();
        }
 
        private void LoadGrid()
        {
                DataTable dt = new DataTable();
                dt.Columns.Add("a1");
                dt.Columns.Add("a2");
                dt.Columns.Add("a3");
                dt.Columns.Add("a4");
 
                for (int i = 0; i < 10; i++)
                {
                    DataRow dr = dt.NewRow();
 
                    dr["a1"] = "aaa";
                    dr["a2"] = "bbb";
                    dr["a3"] = "ccc";
                    dr["a4"] = "ddd";
 
                    dt.Rows.Add(dr);
                }
 
                this.Store1.DataSource = dt;
                Store1.DataBind();
        }
    }

Thanks!

[geoffrey.mcgill]

Hi rach,

The answer to your problem is to remove the GridPanel from inside the UpdatePanel. The GridPanel does not need to be inside the UpdatePanel.

After you move the GridPanel from inside the UpdatePanel, you should also remove the UpdatePanel from your Page. It's not required. After removing the UpdatePanel, you can remove the <asp:ScriptManager> Control from your Page. It shouldn't be required either.

As well, you might need to add an if (!X.IsAjaxRequest) { ... } around your LoadGrid() Method call inside the Page_Load event.

Hope this helps.

[rach]

I've found that to keep the GridPanel updated you should add the update function (GridPanel1.Update()) at the end of the loading. It is relevant in both cases - with or without puting the gridPanel in updatePanel.