Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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);
}
like image 909
user1301708 Avatar asked Jul 03 '12 14:07

user1301708


People also ask

How to use GridView in updatepanel in asp net?

The updatepanel control in asp.net lets you to update the page without refreshing the whole page but only the specified content. To use the updatepanel control with GridView in asp.net you need to use asyncpostbacktrigger triggers in your page. The code is complete and pretty simple to understand.

How can create GridView programmatically in asp net?

GridView listTypeBot = new GridView(); // Create my column BoundField bf = new BoundField(); bf. HeaderText = "Types of bot available"; // Add my column to my gridview listTypeBot. Columns. Add(bf); // Create a row and a cell GridViewRow gvr = listTypeBot.


2 Answers

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

like image 126
Jupaol Avatar answered Sep 27 '22 22:09

Jupaol


Couldn't you just put the GridView in there at design time and just hide it by setting Visible=false?

If you don't know how many gridviews you need to repeat then you could wrap the GridView in a ListView. The concept is introduced here:

  • http://mattberseth.com/blog/2008/01/building_a_grouping_grid_with.html

This might not be the perfect solution I just thought I would offer it seeing as there is a bounty I assume you have hit a brick wall so far.

like image 32
rtpHarry Avatar answered Sep 27 '22 23:09

rtpHarry