user3985746
Reputation:
Show / Hide GridView Columns in ASP.NET
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>
<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> </td>
<td> </td>
</tr>
</table>
<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"> </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">
</td>
<td>
</td>
<td class="auto-style9">
</td>
<td class="auto-style3">
<asp:TextBox ID="TextBox3" runat="server" AutoPostBack="True"></asp:TextBox>
</td>
<td class="auto-style7"> </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">
</td>
<td>
</td>
<td class="auto-style9">
</td>
<td class="auto-style3">
</td>
<td class="auto-style7">
</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"> </td>
<td> </td>
<td class="auto-style9"> </td>
<td class="auto-style3"> </td>
<td class="auto-style7"> </td>
<td class="auto-style8">
</td>
</tr>
<tr>
<td class="auto-style5"> </td>
<td> </td>
<td class="auto-style9"> </td>
<td class="auto-style3"> </td>
<td class="auto-style7"> </td>
<td class="auto-style8">
</td>
</tr>
<tr>
<td class="auto-style5"> </td>
<td> </td>
<td class="auto-style9"> </td>
<td class="auto-style3"> </td>
<td class="auto-style7"> </td>
<td class="auto-style8">
</td>
</tr>
<tr>
<td class="auto-style5"> </td>
<td> </td>
<td class="auto-style9"> </td>
<td class="auto-style3"> </td>
<td class="auto-style7"> </td>
<td class="auto-style8"> </td>
</tr>
<tr>
<td class="auto-style5">
</td>
<td>
</td>
<td class="auto-style9"> </td>
<td class="auto-style3"> </td>
<td class="auto-style7"> </td>
<td class="auto-style8"> </td>
</tr>
<tr>
<td class="auto-style5">
</td>
<td>
</td>
<td class="auto-style9">
</td>
<td class="auto-style3">
</td>
<td class="auto-style7">
</td>
<td class="auto-style8">
</td>
</tr>
<tr>
<td class="auto-style5">
</td>
<td>
</td>
<td class="auto-style9">
</td>
<td class="auto-style3">
</td>
<td class="auto-style7">
</td>
<td class="auto-style8">
</td>
</tr>
</table>
<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>
<br />
<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".
Upvotes: 0
Views: 6837
Answers (4)
Manish Sharma
Reputation: 2426
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>
Upvotes: 0
mck
Reputation: 988
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;
}
}
}
Upvotes: 1
Edi G.
Reputation: 2422
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;
}
}
}
}
Upvotes: 0
SomeUser
Reputation: 390
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
Upvotes: 0
Related Questions
- conditionally show hide asp.net Gridview column
- GridView Hide Column by code
- Hiding GridView columns in asp.net 2.0
- Hide Column In Grid
- How to hide and show column in gridview
- How can I hide columns in GridView?
- How to show hide a column of GridView?
- ASP.NET GridView Can't hide Columns
- ASP.NET : Hiding columns in gridview
- How to set visibility of GridView Columns in ASP.NET?