Show / Hide GridView Columns in ASP.NET

Question

I'm creating a web project in Visual Studio 2012 using C# which fetch data from database and shows in a grid-view. There are many number of columns in the database, which shows on the grid-view as it is. I want to make an option for the user to eliminate unwanted columns using check-boxes and after checking, on a button click it must update.

Till now I've tried doing the code shown below but no luck.

protected void btn_modify_Click(object sender, EventArgs e)
{
    if (CheckBox2.Checked)
    {

        this.GridView1.Columns[2].Visible = false;        

    }
    else
    {        
        this.GridView1.Columns[2].Visible = true;
    }
}

.aspx code is as follows.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Reporting Mopdule.aspx.cs" Inherits="WebApplication1.Reporting_Mopdule" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajax" %>

<!DOCTYPE html>



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .newStyle1 {
            font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
            font-size: x-large;
        }
        .newStyle2 {
            font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
            color: #0000FF;
        }
        .newStyle3 {
            font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
            color: #0000FF;
        }
        .newStyle4 {
            color: #0000FF;
            font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
        }
        .newStyle5 {
            font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
            color: #0000FF;
        }
        .auto-style3 {
            width: 122px;
        }
        .newStyle6 {
            font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
            font-size: x-large;
        }
        .newStyle7 {
            position: absolute;
        }
        .auto-style5 {
            width: 117px;
        }
        .auto-style7 {
            width: 59px;
        }
        .auto-style8 {
            width: 65px;
        }
        .newStyle8 {
            position: absolute;
        }
        .newStyle9 {
            position: absolute;
        }
        .auto-style9 {
            width: 305px;
        }
        .newStyle10 {
            position: absolute;
        }
        .newStyle11 {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <form id="form1" runat="server">
    <div>
    <ajax:ToolkitScriptManager ID="toolkit1" runat="server"></ajax:ToolkitScriptManager>
    </div>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <table style="width:100%;">
            <caption style="width: 478px">
                <asp:Label ID="Label6" runat="server" CssClass="newStyle6" Font-Bold="True" Text="Report On Energy Development"></asp:Label>
            </caption>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
&nbsp;
        <table style="width: 69%; margin-top: 0px; height: 303px;">
            <caption>
                <br />
            </caption>
            <tr>
                <td class="auto-style5">
                    <asp:Label ID="Label1" runat="server" CssClass="newStyle2" Text="State"></asp:Label>
                </td>
                <td>
                    <asp:Label ID="Label2" runat="server" CssClass="newStyle3" Text="Cluster"></asp:Label>
                </td>
                <td class="auto-style9">
                    <asp:Label ID="Label3" runat="server" CssClass="newStyle4" Text="DateFrom : "></asp:Label>
                </td>
                <td class="auto-style3">
                    <asp:Label ID="Label4" runat="server" CssClass="newStyle5" Text="DateTo :"></asp:Label>
                </td>
                <td class="auto-style7">&nbsp;</td>
                <td class="auto-style8">
                    <asp:Button ID="Button3" runat="server" Height="34px" OnClick="Button3_Click" Text="Export To Excel" Width="138px" />
                </td>
                <td class="auto-style8" rowspan="11">
                    <asp:Panel ID="Panel1" runat="server" Width="224px">
                        <table style="width: 99%;">
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox17" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox17_CheckedChanged" Text="All" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox2" runat="server" Text="SerialNo" OnCheckedChanged="CheckBox2_CheckedChanged" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox11" runat="server" Text="Load_Enegy_Cumulative" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox3" runat="server" Text="SiteName" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox12" runat="server" Text="Mains_Energy_Daily" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox4" runat="server" Text="SiteId" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox13" runat="server" Text="Mains_Energy_Cumulative" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox5" runat="server" Text="State" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox14" runat="server" Text="Solar_Energy_Daily" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox6" runat="server" OnCheckedChanged="CheckBox6_CheckedChanged" Text="Cluster" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox15" runat="server" Text="Solar_Energy_Cumulative" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox7" runat="server" Text="Date" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox16" runat="server" Text="Generate_Date" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox8" runat="server" Text="Dg_Energy_Daily" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox9" runat="server" Text="Dg_Energy_Cumulative" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox10" runat="server" Text="Load_Energy_Daily" />
                                </td>
                            </tr>
                        </table>
                    </asp:Panel>
                </td>
            </tr>
            <tr>
                <td class="auto-style5">
                    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                    </asp:DropDownList>
                </td>
                <td>
                    <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True">
                    </asp:DropDownList>
                </td>
                <td class="auto-style9">
                    <asp:TextBox ID="TextBox1" runat="server"  style="margin-top: 0px" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
                    <ajax:CalendarExtender ID="TextBox1_CalendarExtender" runat="server" Enabled="True" TargetControlID="TextBox1">
                    </ajax:CalendarExtender>
                </td>
                <td class="auto-style3">
                    <asp:TextBox ID="TextBox2" runat="server" OnTextChanged="TextBox2_TextChanged" ></asp:TextBox>
                    <ajax:CalendarExtender ID="TextBox2_CalendarExtender" runat="server" Enabled="True" TargetControlID="TextBox2">
                    </ajax:CalendarExtender>
                </td>
                <td class="auto-style7">
                    <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
                </td>
                <td class="auto-style8">
                    <asp:Button ID="Button4" runat="server" Height="30px" OnClick="Button4_Click" Text="Export To PDF" Width="139px" />
                </td>
            </tr>
            <tr>
                <td class="auto-style5">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td class="auto-style9">
                    &nbsp;</td>
                <td class="auto-style3">
                    <asp:TextBox ID="TextBox3" runat="server" AutoPostBack="True"></asp:TextBox>
                </td>
                <td class="auto-style7">&nbsp;</td>
                <td class="auto-style8">
                    <asp:Button ID="Button5" runat="server" OnClick="Button5_Click" Text="Hide" Width="44px" />
                    <asp:Button ID="Button6" runat="server" OnClick="Button6_Click" Text="Show" />
                </td>
            </tr>
            <tr>
                <td class="auto-style5">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td class="auto-style9">
                    &nbsp;</td>
                <td class="auto-style3">
                    &nbsp;</td>
                <td class="auto-style7">
                    &nbsp;</td>
                <td class="auto-style8">
                    <asp:Button ID="Button7" runat="server" Height="31px" OnClick="Button7_Click" Text="Modify Table" Width="139px"
                        />
                </td>
            </tr>
            <tr>
                <td class="auto-style5">&nbsp;</td>
                <td>&nbsp;</td>
                <td class="auto-style9">&nbsp;</td>
                <td class="auto-style3">&nbsp;</td>
                <td class="auto-style7">&nbsp;</td>
                <td class="auto-style8">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style5">&nbsp;</td>
                <td>&nbsp;</td>
                <td class="auto-style9">&nbsp;</td>
                <td class="auto-style3">&nbsp;</td>
                <td class="auto-style7">&nbsp;</td>
                <td class="auto-style8">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style5">&nbsp;</td>
                <td>&nbsp;</td>
                <td class="auto-style9">&nbsp;</td>
                <td class="auto-style3">&nbsp;</td>
                <td class="auto-style7">&nbsp;</td>
                <td class="auto-style8">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </td>
            </tr>
            <tr>
                <td class="auto-style5">&nbsp;</td>
                <td>&nbsp;</td>
                <td class="auto-style9">&nbsp;</td>
                <td class="auto-style3">&nbsp;</td>
                <td class="auto-style7">&nbsp;</td>
                <td class="auto-style8">&nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style5">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td class="auto-style9">&nbsp;</td>
                <td class="auto-style3">&nbsp;</td>
                <td class="auto-style7">&nbsp;</td>
                <td class="auto-style8">&nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style5">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td class="auto-style9">
                    &nbsp;</td>
                <td class="auto-style3">
                    &nbsp;</td>
                <td class="auto-style7">
                    &nbsp;</td>
                <td class="auto-style8">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style5">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td class="auto-style9">
                    &nbsp;</td>
                <td class="auto-style3">
                    &nbsp;</td>
                <td class="auto-style7">
                    &nbsp;</td>
                <td class="auto-style8">
                    &nbsp;</td>
            </tr>
        </table>
&nbsp;&nbsp;<table style="width:100%;">
            <tr>
                <td>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server" CellPadding="3" Height="185px" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" Width="297px" AutoGenerateColumns="false" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellSpacing="2">
                    <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
                    <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
                    <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
                    <PagerTemplate>
                        <asp:CheckBox ID="CheckBox1" runat="server" />
                    </PagerTemplate>
                    <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
                    <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
                    <SortedAscendingCellStyle BackColor="#FFF1D4" />
                    <SortedAscendingHeaderStyle BackColor="#B95C30" />
                    <SortedDescendingCellStyle BackColor="#F1E5CE" />
                    <SortedDescendingHeaderStyle BackColor="#93451F" />
                </asp:GridView>
            </ContentTemplate>
        </asp:UpdatePanel>
                </td>
            </tr>
        </table>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </form>
</body>
</html>

In the below image you can see many check-boxes. I want the user to select what all columns they need by clicking on the check-boxes and only those columns be shown in the grid-view, after clicking the button "Modify Table".

enter image description here

can you provide your .aspx code? so we can easily give answer to you. — Manish Sharma
– Manish Sharma, Commented Sep 2, 2014 at 7:05

mck · Accepted Answer · 2014-09-02 09:46:42Z

1

You can use the following code

protected void btn_modify_Click(object sender, EventArgs e)
{
      foreach (ListItem val in CheckBoxList.Items)
      {
          if (val.Checked)
           {
               this.GridView1.Columns[0].Visible = false;
                               .
                               .
                               .
           }
          else
           {
               this.GridView1.Columns[0].Visible = true;
           }
      }
}

edited Sep 2, 2014 at 9:46

answered Sep 2, 2014 at 9:27

mck

9883 gold badges14 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manish Sharma · Accepted Answer · 2014-09-02 10:41:27Z

0

try this, Using column name you can achieve this.

<asp:GridView ID="GridView1" runat="server" CellPadding="3" Height="185px" Width="297px"
     BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px"  CellSpacing="2">
                        <Columns>
                            <asp:BoundField HeaderText="ColumnName" DataField="ColumnName" />
                            <%--Add Boundfield as per your columns--%>
                            <asp:BoundField HeaderText="ColumnName" DataField="ColumnName" />
                        </Columns>
</asp:GridView>

edited Sep 2, 2014 at 10:41

answered Sep 2, 2014 at 6:32

Manish Sharma

2,4562 gold badges18 silver badges33 bronze badges

5 Comments

Manish Sharma Over a year ago

@jilu you have to use itemdatabound or itemtemplate for this.if you are bind data with directly so you can not get any column index in your code.

user3985746 Over a year ago

thank you for the reply... Can you please tell me how can I do that. Because I'm not that good in programming... Your help will be greatly appreciated.

user3985746 Over a year ago

Ok... after that how can I hide the columns using check box. (I want my app to show only those columns which user have checked in the check box)

Manish Sharma Over a year ago

after using boundfield you can visible true or false your column thorough your code.

user3985746 Over a year ago

Thank you for your help. :) Is it possible to show a column by its name?

SomeUser · Accepted Answer · 2014-09-02 06:57:28Z

0

Try this code inside row created event of your gridview:

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
if(checkbox2.checked)
e.Row.Cells[2].Visible = false; 
else
e.Row.Cells[2].Visible = true;
}

On Button click jus call the method which binds the grid

answered Sep 2, 2014 at 6:57

SomeUser

3908 silver badges23 bronze badges

2 Comments

user3985746 Over a year ago

how can I make the row index number connected with the check boxes so that user can select what all columns they want to see.

SomeUser Over a year ago

I didnt get you. What do you mean by connected with check boxes

Edi G. · Accepted Answer · 2014-09-02 09:38:11Z

0

Dont remove the column: GridView1.Columns.RemoveAt(2);

protected void btn_modify_Click(object sender, EventArgs e)
{
    GridView1.Columns[1].Visible = false;
    GridView1.Columns[0].Visible = false;
    if (CheckBox2.Checked)
    {

        TextBox3.Enabled = false;
        //GridView1.Visible = false; --> Hides the whole Gridview
        this.GridView1.Columns[2].Visible = false;
        //GridView1.Columns.RemoveAt(2);

    }
    else
    {
        TextBox3.Enabled = true;
        GridView1.Visible = true;
        this.GridView1.Columns[2].Visible = true;

    }
}

When your Columns are autogeneratet (Default=true) then you change the visibility by creating the CELL.. if all cells are invisible, the column will hides automaticly

protected void gridview1_RowDataBound(object sender, GridViewRowEventArgs e)
{

    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        //ShowColumn Check
        if (CheckBox2.Checked)
        {
            e.Row.Cells[2].Visible = false;
        }
        else
        {
            e.Row.Cells[2].Visible = true;
        }   
    }
}

for show only selected rows:

1.) Add a new templateColumn (at first position):

<Columns>
   <asp:TemplateField>
        <ItemTemplate>
            <asp:CheckBox runat="server"/>
        </ItemTemplate>
    </asp:TemplateField>
</Columns>

2.) Add a new Button

<asp:Button runat="server" ID="FilterSelected" OnClick="FilterSelected_Click"/>

3.) Add a new ClickEvent Code:

protected void FilterSelected_Click(object sender, EventArgs e)
{
    foreach (GridViewRow rowItem in gridview1.Rows )
    {
        var myCheckbox = rowItem.Cells[0].Controls[1] as CheckBox; // ONLY if your Checkbox in the FIRST column!!!!

            if (myCheckbox != null && !myCheckbox.Checked)
            {
                rowItem.Visible = false;
            }   
        }
    }
}

edited Sep 2, 2014 at 9:38

answered Sep 2, 2014 at 6:29

Edi G.

2,4207 gold badges25 silver badges36 bronze badges

9 Comments

user3985746 Over a year ago

I'm getting "ArgumentOutOfRangeException was unhandled" error.

user3985746 Over a year ago

Any better suggestions will be greatly appreciated.

Edi G. Over a year ago

hmm... Is ArgumentOutOfRangeException was unhandled fired by GridView1.Columns[2].Visible ?

Edi G. Over a year ago

It sounds like you're using a GridView with AutoGenerateColumns=true, which is the default. I recommend setting AutoGenerateColumns=false and adding the columns manually.

user3985746 Over a year ago

I have made few changes in the code please review the code once again.

|

Collectives™ on Stack Overflow

Show / Hide GridView Columns in ASP.NET

4 Answers 4

Comments

5 Comments

2 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

2 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related