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.
Make a Donation
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.
BUY IT
NOW |