How to ShowHide Colums in Gridview Dynamically in Asp.Net

Description : In this article I will explain with an example, how to dynamically Show Hide GridView Columns on DropDownlist Controls Selected Columns Names respectively in ASP.Net.

In this article we will show how to dynamically show Hide columns in Gridview when we Select Columns Name from DropDownlist Controls only that column we have to hide or other column we want to show in GridView here is the complete code of show hide in GridView.

Html Code:-

<div>
  <asp:DropDownListID="DropDownList1"runat="server"AutoPostBack="True"OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
  </asp:DropDownList>
<br/>
  <asp:GridViewID="GridView1"runat="server"AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Horizontal">
  <Columns>
  <asp:BoundFieldDataField="country"HeaderText="country"ItemStyle-Width="30"> <ItemStyleWidth="30px"></ItemStyle></asp:BoundField>
  <asp:BoundFieldDataField="pub_id"HeaderText="pub_id"ItemStyle-Width="30">
    <ItemStyleWidth="30px"></ItemStyle>
  </asp:BoundField>
  <asp:BoundFieldDataField="pub_name"HeaderText="pub_name"ItemStyle-Width="30">
    <ItemStyleWidth="30px"></ItemStyle>
  </asp:BoundField>
  <asp:BoundFieldDataField="state"HeaderText="state"ItemStyle-Width="30">
    <ItemStyleWidth="30px"></ItemStyle>
  </asp:BoundField>
  </Columns>
  <FooterStyleBackColor="#CCCC99"ForeColor="Black"/>
  <HeaderStyleBackColor="#333333"Font-Bold="True"ForeColor="White"/>
  <PagerStyleBackColor="White"ForeColor="Black"HorizontalAlign="Right"/>
  <SelectedRowStyleBackColor="#CC3333"Font-Bold="True"ForeColor="White"/>
  <SortedAscendingCellStyleBackColor="#F7F7F7"/>
  <SortedAscendingHeaderStyleBackColor="#4B4B4B"/>
  <SortedDescendingCellStyleBackColor="#E5E5E5"/>
  <SortedDescendingHeaderStyleBackColor="#242121"/>
  </asp:GridView>
</div>

CODE BEHIND:

Bind Gridview from Database and display data in table from database. Use the connection string from web.config file to create connection in database.

string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
  {
    BindGrid();
    using (SqlConnection con = newSqlConnection(CS))
    {
      SqlCommand cmd = newSqlCommand("select ROW_NUMBER() OVER (ORDER BY column_name) AS Row, column_name from information_schema.columns where table_name='publishers'", con);
      SqlDataAdapter da = newSqlDataAdapter(cmd);
      DataTabledt = newDataTable();
      da.Fill(dt);
      DropDownList1.DataSource = dt;
      DropDownList1.DataTextField = "column_name";
      DropDownList1.DataValueField = "Row";
      DropDownList1.DataBind();
      ListItem li = newListItem("-Select-", "-1");
      DropDownList1.Items.Insert(0, li);
    }
  }
}

Create Method for Bind Gridview from Database.

public void BindGrid()
{
  using (SqlConnection con = newSqlConnection(CS))
  {
    SqlCommand cmd = newSqlCommand("select * from publishers", con);
    SqlDataAdapter da = newSqlDataAdapter(cmd);
    DataTabledt = newDataTable();
    da.Fill(dt);
    GridView1.DataSource = dt;
    GridView1.DataBind();
  }
}

Generate DropDownlist Controls SelectedIndexChanged event for when we changed from Controls that Column we have to hide in Gridview.

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
  if (Convert.ToInt32(ViewState["Column"]) >= 0)
  {
    GridView1.Columns[Convert.ToInt32(ViewState["Column"])].Visible = true;
  }
  if (DropDownList1.SelectedIndex >= 0)
  {
    for (inti = DropDownList1.SelectedIndex; i<= GridView1.Columns.Count; i++)
    {
      if (i == DropDownList1.SelectedIndex &&i> 0)
      {
        GridView1.Columns[i - 1].Visible = false;
        ViewState["Column"] = i - 1;
        //GridView1.Columns[i].ToString();
      }
    }
  }
}

Run your Application and Check for Show/Hide Columns in Gridview from Selecting Columns from DropDownlist Controls.

Author : Umesh Patel

Related Posts