Search code examples
c#asp.netgridviewupdatepanel

How do you add a Gridview programmatically to an UpdatePanel


I can't figure out how to programmatically add a GridView with buttons to an UpdatePanel.

I can do it with simple controls such as buttons and labels, but when I try to add a GridView with buttons a full Postback() occurs.

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">


protected override void OnInit(EventArgs e)
{
UpdatePanel up1 = new UpdatePanel();
    up1.ID = "UpdatePanel1";



    Button button1 = new Button();
    button1.ID = "Button1";
    button1.Text = "Submit";
    button1.Click += new EventHandler(Button_Click);


    Label label1 = new Label();
    label1.ID = "Label1";
    label1.Text = "A full page postback occurred.";


    GridView gv1 = new GridView();
    //Where the xml gets bonded to the data grind
    XmlDataSource xds = new XmlDataSource();
    xds.Data = xml;
    xds.DataBind();
    xds.EnableCaching = false;

    gv1.DataSource = xds;
    createButton(gv1, up1);
    gv1.RowCommand += new GridViewCommandEventHandler(CustomersGridView_RowCommand);
    gv1.DataBind();




    up1.ChildrenAsTriggers = true;

    up1.ContentTemplateContainer.Controls.Add(button1);
    up1.ContentTemplateContainer.Controls.Add(label1);

    up1.ContentTemplateContainer.Controls.Add(gv1);

    Page.Form.Controls.Add(up1);
}

protected void Page_Load(object sender, EventArgs e)
{


}
public void CustomersGridView_RowCommand(Object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "buttonClicked")
    {
        int index = Convert.ToInt32(e.CommandArgument);

    }
}

void createButton(GridView g)
{
    ButtonField tea = new ButtonField();
    tea.ButtonType = ButtonType.Image;
    tea.ImageUrl = "~/checkdailyinventory.bmp";
    tea.CommandName = "buttonClicked";
    tea.HeaderText = "space";
    g.Columns.Add(tea);
}

protected void Button_Click(object sender, EventArgs e)
{
    ((Label)Page.FindControl("Label1")).Text = "Panel refreshed at " +
        DateTime.Now.ToString();
}

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>UpdatePanel Constructor Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button2" runat="server" Text="Button" />
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
    </div>
    </form>
</body>
</html>

So how do you add a gridview with buttons programmatically to an UpdatePanel without causing a full PostBack() if the GridView is clicked?

Edit: Other things I have tried

   void gv1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    AsyncPostBackTrigger t = new AsyncPostBackTrigger();
    t.ControlID = e.Row.Cells[0].ClientID;
    t.EventName = "blah";
    up1.Triggers.Add(t);
}

Solution

  • Well according to:

    And I don't mind having the update panel created at the design time. I just need to be able to add stuff (like tables that contain gridviews that contain buttons into it) programmatically and then be able to do a partial postback

    Basically I used your code with small changes:

    • Removed the binding from the Init event and I execute it in the Load event

    • The UpdatePanel is created at design time with a nested panel, and you simply add your dynamic controls to that panel

    This code will do it (it works on my environment):

    ASPX

        <asp:ScriptManager runat="server" />
        <asp:UpdatePanel runat="server">
            <ContentTemplate>
                <asp:Panel runat="server" ID="myPanel">
                </asp:Panel>
                <br />
                <asp:Label runat="server" ID="lblMessage"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    

    Code behind

        protected void Page_Init(object sender, EventArgs e)
        {
            Button button1 = new Button();
            button1.ID = "Button1";
            button1.Text = "Submit";
            button1.Click += new EventHandler(Button_Click);
    
            Label label1 = new Label();
            label1.ID = "Label1";
            label1.Text = "A full page postback occurred.";
    
            var s1 = Builder<Product>.CreateListOfSize(15).Build();
            GridView gv1 = new GridView();
            gv1.DataSource = s1;
            createButton(gv1);
            gv1.RowCommand += new GridViewCommandEventHandler(CustomersGridView_RowCommand);
    
            this.myPanel.Controls.Add(button1);
            this.myPanel.Controls.Add(label1);
            this.myPanel.Controls.Add(gv1);
        }
    
        void createButton(GridView g)
        {
            ButtonField tea = new ButtonField();
            tea.ButtonType = ButtonType.Image;
            tea.ImageUrl = "~/checkdailyinventory.bmp";
            tea.CommandName = "buttonClicked";
            tea.HeaderText = "space";
            g.Columns.Add(tea);
        }
    
        protected void Button_Click(object sender, EventArgs e)
        {
            ((Label)Page.FindControl("Label1")).Text = "Panel refreshed at " +
                DateTime.Now.ToString();
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            this.DataBind();
        }
    
        public void CustomersGridView_RowCommand(Object sender, GridViewCommandEventArgs e)
        {
            if (e.CommandName == "buttonClicked")
            {
                //int index = Convert.ToInt32(e.CommandArgument);
    
                this.lblMessage.Text = DateTime.Now.ToString();
            }
        }
    

    Output

    enter image description here