Everyone needs color to fill his life. In this article I will show you that how you can color the rows of the GridView control based on the data in the database. I will make a very small database table "MyChores" which will contain the chores that I have completed and chores that are not yet completed.
Introduction:
Everyone needs color to fill his life. In this article I will show you that how you can color the rows of the GridView control based on the data in the database. I will make a very small database table "MyChores" which will contain the chores that I have completed and chores that are not yet completed.
Creating the User Interface:
The user interface simply contains a GridView control and a Button control. Take a look at the screen shot below to have a clear idea.
The chores that I have completed are checked and are green colored while the chores that are not completed are not checked and hence red colored. Chore number 2 is compulsory or else it's trouble :).
DataTable Table:
I have attached the database script file as well as stored procedure in the project files but here is a quick look the table "MyChores".
I have just included few fields to make this example simple.
The Code:
Ok, now to the fun part. Let's see how all this is implemented. Let's first see the GridView HTML code to have a clear idea about the columns and bindings associated with the GridView control.
|
<asp:GridView
ID="GridView1"
runat="server"
AutoGenerateColumns="False"
OnRowDataBound="GridView1_RowDataBound"> <Columns> <asp:BoundField DataField="ChoreID" HeaderText="ChoreID" /> <asp:BoundField DataField="Title" HeaderText="Title" /> <asp:BoundField DataField="DateCreated" HeaderText="DateCreated" /> <asp:TemplateField HeaderText="Select"> <ItemTemplate> <asp:CheckBox Checked='<%# Eval("Active") %>' ID="CheckBox1" runat="server" /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> |
As, you can see in the above code that I have 3 bound columns and 1 template column. The CheckBox control Checked property is based on the database field named "Active". This means that if the database field "Active" is 1 then the CheckBox will be checked else it won't.
Now, we need to find a method that binds each row to the data source of the GridView control when it is loaded. Fortunately the event GridView_RowDataBound come to our rescue. GridView_RowDataBound event is fired each time the GridViewRow binds to the source.
|
protected
void
GridView1_RowDataBound(object
sender, GridViewRowEventArgs
e) { if (e.Row.RowType == DataControlRowType.DataRow) { bool result = ((CheckBox)e.Row.FindControl("CheckBox1")).Checked; if (result) e.Row.BackColor = System.Drawing.Color.Green; else e.Row.BackColor = System.Drawing.Color.Red; } } |
In the GridView1_RowDataBound method I check that if the row is of DataRow type and belong to the item template. Then I simply retrieve the value of the CheckBox to a boolean variable. If the CheckBox is checked then I color the row green else I color it red.
Updating the Color Based on User Selection:
The main part of this application is to update the color based on the user choices. Once you are done selecting the chores using the CheckBoxes you can simply press the "Update My Chores" button which will transfer your chores to the database. Take a look at the Button click code below:
|
protected
void Button1_Click(object
sender, EventArgs
e) { foreach (GridViewRow row in GridView1.Rows) { bool result = ((CheckBox)row.FindControl("CheckBox1")).Checked; int choreID = Convert.ToInt32(row.Cells[0].Text); UpdateChores(choreID, result); } BindData(); } |
The last method of our interest is the UpdateChores method which sends the new values to the database. Take a look at the implementation of UpdateChores method below:
|
private
void UpdateChores(int
choreID, bool
result) { SqlConnection myConnection = new SqlConnection(ConnectionString); SqlCommand myCommand = new SqlCommand(SP_UPDATE_CHORES, myConnection); myCommand.CommandType = CommandType.StoredProcedure; myCommand.Parameters.AddWithValue("@ChoreID", choreID); myCommand.Parameters.AddWithValue("@Active", result); try { myConnection.Open(); myCommand.ExecuteNonQuery(); } finally { myConnection.Close(); myCommand.Dispose(); } } |
I have attached the source code files with this project which contains the stored procedure and the database script along with the complete C# code so please free to download them.
I hope you liked this article, happy coding!
| If you are one of the
thousands that visit GridViewGuy for your .NET articles and resources, you
might be interested in making a donation. Extra cash helps pay for the
hosting services and speed things up
around here, and makes this website possible.
Once, again thank you very much and remember its because of you FINE people that this website is up and running. |
| Export Button is a custom control that let's you export your DataGrid or TextBox data to several different formats. The control is extremely easy to use and also exposes design time features. In this article I will discuss some of the features of the Export Button and how it benefits the developer. |