Link button to display grid view asp.net dynamically

Question

I have to display n grids, n is variable, then I dont know how many grids I'll have.

My problem is, I have to init this grids with Visible false and when click in a button show the grid specific for that button, then how can I link a button to a gridview?

My code that generate the grids:

    foreach (List<DataRow> lst in grids)
    {

        dt = lst.CopyToDataTable();

        GridView grv = new GridView();
        grv.AlternatingRowStyle.BackColor = System.Drawing.Color.FromName("#cccccc");
        grv.HeaderStyle.BackColor = System.Drawing.Color.Gray;
        grv.ID = "grid_view"+i;
        grv.Visible = false;
        grv.DataSource = dt;
        grv.DataBind();


        Label lblBlankLines = new Label();
        lblBlankLines.Text = "<br /><br />";


        Label lblTipo = new Label();
        string tipoOcorrencia = lst[0]["DESC_OCORRENCIA"].ToString();
        tipoOcorrencia = CultureInfo.CurrentCulture.TextInfo.ToTitleCase(tipoOcorrencia);
        int quantidade = lst.Count;
        lblTipo.Text = tipoOcorrencia + ": " + quantidade;


        LinkButton lkBtn = new LinkButton();
        lkBtn.ID = "link_button"+i;
        lkBtn.Text = "+";

        place_grids.Controls.Add(lblBlankLines);
        place_grids.Controls.Add(lkBtn);
        place_grids.Controls.Add(lblTipo);
        place_grids.Controls.Add(grv);


        place_grids.DataBind();

        i++;
    }

Thanks in advance.

Answer 1

Modify your foreach loop as below.

private void GenerateControls()
{
    int i = 0;
    foreach (List<DataRow> lst in grids)
    {
        dt = lst.CopyToDataTable();

        GridView grv = new GridView();
        grv.AlternatingRowStyle.BackColor = System.Drawing.Color.FromName("#cccccc");
        grv.HeaderStyle.BackColor = System.Drawing.Color.Gray;
        grv.ID = "grid_view" + i;
        //grv.Visible = false;//Commented as the grid needs be generated on client side, in order to make it visible from JavaScript/jQuery
        grv.Attributes.Add("style", "display:none;");
        grv.DataSource = dt;
        grv.DataBind();

        //Adding dynamic link button
        LinkButton lnkButton = new LinkButton();
        lnkButton.Text = "button " + i;
        //lnkButton.Click += new EventHandler(lnkButton_Click);
        lnkButton.ID = "lnkButton" + i;
        lnkButton.OnClientClick = "ShowGrid('" + grv.ClientID + "');";

        Label lblTipo = new Label();
        lblTipo.Text = "text " + i;
        lblTipo.ID = "lbl" + i;

        tempPanel.Controls.Add(lblTipo);
        tempPanel.Controls.Add(grv);
        tempPanel.Controls.Add(lnkButton);

        tempPanel.DataBind();
        i++;
    }
}

Then you will have to add a link button click event as below, if you want server side event to fire. (Un-comment the line where event handler is assigned to link button.)

protected void lnkButton_Click(Object sender, EventArgs e)
{
    LinkButton lnkButton = (LinkButton)sender;
    String index = lnkButton.ID.Substring(lnkButton.ID.Length - 1);

    GridView grv = (GridView)tempPanel.FindControl("grid_view" + index);
    grv.Visible = true;
}

You will need to add all dynamically added controls in the Page_Init event for maintaining their state. Refer below links can be useful.

Dynamically Created Controls losing data after postback

ViewState in Dynamic Control

Call method GenerateControls from Page_Init event as below.

protected void Page_Init(object sender, EventArgs e)
{
    GenerateControls();
}

EDIT :

JavaScript function...

function ShowGrid(gridID) {
    document.getElementById(gridID).style.display = ''
}

I have kept the server side click event as it is. But I have commented the line where the event handler is assigned to the link button.