Thursday, March 13, 2008

How To Hide GridView columns in normal mode, and show more columns in edit mode









When we use the TemplateField, a column for each field will be displayed, so if we do something like this:



<asp:TemplateField ..>

<ItemTemplate>

...

</ItemTemplate>

<EditItemTemplate>

...

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField ..>

<EditItemTemplate>

...

</EditItemTemplate>

</asp:TemplateField>




Both columns will be displayed in both normal and in edit node, even if we don’t specify an ItemTemplate for the other TemplateField. In some cases you probably want to display few columns in normal mode, and some more columns in edit mode. By using the RowDataBound event of the GridView, we can programmatically hide columns. So if we have a GridView with 4 columns (including the edit buttons etc) and want to hide the last two columns, we can do something like this in the RowDataBound event:





protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (GridView1.EditIndex >= 0)

return;



if ((e.Row.RowState == DataControlRowState.Normal || e.Row.RowState == DataControlRowState.Alternate) &&

(e.Row.RowType == DataControlRowType.DataRow || e.Row.RowType == DataControlRowType.Header))
{

e.Row.Cells[3].Visible = false;

e.Row.Cells[4].Visible = false;

}

}



The code above will exit the RowDataBound event if we selected a row for edit, the reason to this is that we don’t want to hide columns when we are in edit mode, instead display all the EditItems we have specified. The rest of the code will check if the current row that is data bound is in normal or alternate state (every second row will automatically have the mode Alternate) and also if the type of the row is a data row or header (We only want to hide the header column and the normal rows columns). By using the Row property of the GridViewRowEventArgs, we get access to the current row, the Cells property represents a collection of the columns we have specified. By using the index of the Cells property we get access to a specific Cell and can use the Visible property to hide the cell




<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewEdit.aspx.cs" Inherits="GridViewEdit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound"
OnRowEditing="GridView1_RowEditing" AutoGenerateEditButton="True">
<Columns>
<asp:TemplateField HeaderText="Id">
<ItemTemplate>
<asp:Label ID="Label1" runat="Server" Text='<%#Eval("Id")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="Server" Text='<%#Eval("Id") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="FirstName">
<ItemTemplate>
<asp:Label ID="Label2" runat="Server" Text='<%#Eval("FirstName")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="Server" Text='<%#Eval("FirstName") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="LastName">
<ItemTemplate>
<asp:Label ID="Label3" runat="Server" Text='<%#Eval("LastName")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TextBox3" runat="Server" Text='<%#Eval("LastName") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Lectures">
<ItemTemplate>
<asp:Label ID="Label4" runat="Server" Text='<%#Eval("Lectures")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TextBox4" runat="Server" Text='<%#Eval("Lectures") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>




using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class GridViewEdit : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{

GridView1.DataSource = GetDataTable();
GridView1.DataBind();
}

}
private DataTable GetDataTable()
{
//create table
DataTable dt = new DataTable("Members");
dt.Columns.Add("ID", Type.GetType("System.Int32"));
dt.Columns.Add("FirstName", Type.GetType("System.String"));
dt.Columns.Add("LastName", Type.GetType("System.String"));
dt.Columns.Add("Lectures", Type.GetType("System.Int32"));

//create fields
DataColumn[] pk = new DataColumn[1];
pk[0] = dt.Columns["ID"];
dt.PrimaryKey = pk;
dt.Columns["ID"].AutoIncrement = true;
dt.Columns["ID"].AutoIncrementSeed = 1;
dt.Columns["ID"].ReadOnly = true;

//fill rows
DataRow dr;
for (int x = 1; x <= 10; x++)
{
//make every other one different
if (Math.IEEERemainder(x, 2) == 0)
{
dr = dt.NewRow();
dr["Firstname"] = "Tom";
dr["LastName"] = "Riss";
dr["Lectures"] = 14;
dt.Rows.Add(dr);
}
else
{
dr = dt.NewRow();
dr["Firstname"] = "Bill";
dr["LastName"] = "Anders";
dr["Lectures"] = 3;
dt.Rows.Add(dr);

}
}

return dt;
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (GridView1.EditIndex >= 0)

return;



if ((e.Row.RowState == DataControlRowState.Normal || e.Row.RowState == DataControlRowState.Alternate) &&

(e.Row.RowType == DataControlRowType.DataRow || e.Row.RowType == DataControlRowType.Header))
{

e.Row.Cells[3].Visible = false;

e.Row.Cells[4].Visible = false;

}

}
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
GridView1.EditIndex = e.NewEditIndex;
GridView1.DataSource = GetDataTable();
GridView1.DataBind();
}
}

1 comment:

Anonymous said...

You are missing :
e.Row.RowState == DataControlRowState.Edit

mzk_tech@yahoo.com

Post a Comment