|
In this article we will illustrate how to change the font color of all items
that have been edited in a DataGrid. Essentially, it works like this: A user
edits item one in a DataGrid. After the item has been successfully updated the
next time the page is rendered (within the same session) the edited items text
will be red and bold. The user can then edit an additional item (Item 23) and
that also will be red and bold. So now, both item 1 and 23 will be red and bold
so the user can visually see what items he or she has edited.
This is achomplished by establishing a key for each row that is edited and
saving it in a session variable. Then we use a ItemDataBound event handler to
change each item that has been edited attributes. The following code is our
webform:
|
| WebForm1.aspx |
<%@ Page language="c#" Inherits="HowTos.DataGrid.ChangingFont.WebForm1"
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<body>
<form runat="server">
<asp:DataGrid AutoGenerateColumns="False"
OnItemDataBound="DataGrid1_ItemCreated" id="DataGrid1" runat="server"
Font-Size="8" OnCancelCommand="DataGrid1_Cancel"
OnUpdateCommand="DataGrid1_Update" OnEditCommand="DataGrid1_Edit">
<Columns>
<asp:EditCommandColumn
ButtonType="LinkButton" CancelText="Cancel" EditText="Edit" UpdateText="Update"
HeaderText="<b>Commands</b>" />
<asp:TemplateColumn>
<HeaderTemplate>
<b>Author First Name</b>
</HeaderTemplate>
<ItemTemplate>
<asp:Label runat="server" id="lblfname"
Text='<%# DataBinder.Eval( Container.DataItem, "au_fname" ) %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtfname" Runat="server"
Text='<%# DataBinder.Eval( Container.DataItem, "au_fname" ) %>' />
</EditItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<HeaderTemplate>
<b>Author Last Name</b>
</HeaderTemplate>
<ItemTemplate>
<asp:Label runat="server" id="lbllname"
Text='<%# DataBinder.Eval( Container.DataItem, "au_lname" ) %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox runat="server" ID="txtlname"
Text='<%# DataBinder.Eval( Container.DataItem, "au_lname" ) %>' />
</EditItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<HeaderTemplate>
<b>Author ID</b>
</HeaderTemplate>
<ItemTemplate>
<asp:Label runat="server" id="lblid"
Text='<%# DataBinder.Eval( Container.DataItem, "au_id" ) %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtid" Runat="server"
Text='<%# DataBinder.Eval( Container.DataItem, "au_id" ) %>' />
</EditItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</form>
</body>
</HTML>
|
| WebForm1.aspx.cs |
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient ;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace HowTos.DataGrid.ChangingFont
{
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid DataGrid1;
protected ArrayList EditedRowNums;
#region User Defined Code { DataGrid Event Handlers }
protected void DataGrid1_ItemCreated( System.Object sender,
System.Web.UI.WebControls.DataGridItemEventArgs e )
{
if ( e.Item.ItemType ==
ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem ||
e.Item.ItemType == ListItemType.SelectedItem )
{
System.String _auid = ((Label)e.Item.Cells[3].Controls[1]).Text;
for (
System.Int32 i = 0; i < EditedRowNums.Count; i ++ ) {
if ( _auid == EditedRowNums[i].ToString() ) {
((Label)e.Item.Cells[3].Controls[1]).ForeColor = System.Drawing.Color.Red;
((Label)e.Item.Cells[3].Controls[1]).Font.Bold = true;
((Label)e.Item.Cells[2].Controls[1]).ForeColor = System.Drawing.Color.Red;
((Label)e.Item.Cells[2].Controls[1]).Font.Bold = true;
((Label)e.Item.Cells[1].Controls[1]).ForeColor = System.Drawing.Color.Red;
((Label)e.Item.Cells[1].Controls[1]).Font.Bold = true;
}
}
}
}
protected void DataGrid1_Update( System.Object sender,
System.Web.UI.WebControls.DataGridCommandEventArgs e) {
System.String _auid = ( ( TextBox )
e.Item.Cells[3].Controls[1] ).Text ;
EditedRowNums.Add( _auid );
this.DataGrid1.EditItemIndex = -1;
this.BindData();
}
protected void DataGrid1_Edit(System.Object source,
System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
DataGrid1.EditItemIndex =
e.Item.ItemIndex;
this.BindData();
}
protected void DataGrid1_Cancel(System.Object source,
System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
DataGrid1.EditItemIndex = -1;
this.BindData();
}
#endregion
#region User Defined COde { Page Event Handlers }
protected void Page_Load(object sender, System.EventArgs e)
{
if ( ! this.IsPostBack )
{
EditedRowNums = new ArrayList();
Session[
"EditedRowNums" ] = EditedRowNums;
this.BindData();
}
else
{
EditedRowNums = ( ArrayList ) Session[ "EditedRowNums" ];
}
}
#endregion
#region User Defined Code { General }
protected void BindData()
{
SqlCommand cmd = new SqlCommand(
"SELECT TOP 10 au_id, au_fname, au_lname FROM authors", con("Server=LocalHost;
DataBase=Pubs; TRUSTED_CONNECTION=TRUE"));
this.DataGrid1.DataSource =
cmd.ExecuteReader( CommandBehavior.CloseConnection );
this.DataGrid1.DataBind();
}
protected SqlConnection con(System.String ConnectionString
){
SqlConnection c = new SqlConnection(
ConnectionString );
c.Open();
return c;
}
#endregion
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}
private void InitializeComponent()
{
this.Load += new
System.EventHandler(this.Page_Load);
}
#endregion
}
}
|
|
The first part of code I'd like to call attention to is the Page_Load
event handler. Within this method you'll notice that if this is the first time
the page is loaded I add a new ArrayList to a session variable
named EditRowNums and if it is a Page.PostBack
then I retrieve the EditRowNums object from the session. This
ArrayList is what we are going to use to keep track of all edited
rows in the DataGrid. Now let's walk through what happens when
an item is edited in the DataGrid. Everything up to the DataGrid_Update
event is boiler plate - let's examine this method: I don't do an actual
database update, but that code would go here, what I do want to point out is
EditedRowNums.Add( _auid ); Recall this is the ArrayList
object - here I am adding the Author ID as a key to use when rendering the
DataGrid.
Now lets look at the DataGrid1_ItemCreated which is actually
the event hanlder for the DataGrid.ItemDataBound event and not
the DataGrid.ItemCreated event. Within this event I first make
sure that the Item or row that is being databound is not a header, footer, or
an item in edit mode etc. Then I get the value that is being rendered in the
Author ID field and looking in the ArrayList to see if it
is present. If it is present I change the Font color and boldness in the Label
control that is being rendered for that row.
The following figure is this page after a few items have been edited:
|
|
| This is a simple and neat little trick to make the users experience a little nicer and
doesn't require much code to implement just a little server memory |
|