Gridview Row Text Color Change through DropDownList
Introduction:
In this project of web development, dynamic content presentation is crucial for enhancing user experience. In this article, we will explore how to leverage C# coding to bind data from a database table to an ASP.NET GridView and dynamically change the text color based on specific conditions. The focus will be on a practical example using a student marks database table
Create Database Table : StudentMarks
To begin, let's examine the structure of the database table named "StudentMarks." This table contains essential information about students, including their ID, name, subject scores, and result (Pass or Fail). The predefined data inserted through SQL script showcases various scenarios, setting the stage for dynamic text color changes in the GridView.
CREATE TABLE StudentMarks(
studentID int,
studentName varchar(30),
physics int,
chemistry int,
maths int,
computer int,
result varchar(5))
insert into StudentMarks values(1,'Krishna', 35,35,35,35,'Pass')
insert into StudentMarks values(2,'Parmesh', 75,56,46,71,'Pass')
insert into StudentMarks values(3,'Sathya', 64,83,25,63,'Fail')
insert into StudentMarks values(4,'Naresh', 37,51,42,67,'Pass')
insert into StudentMarks values(4,'Naresh', 43,31,62,17,'Fail')
HTML MarkUp Language
In the Default.aspx design page, a GridView control is utilized to display the student data. The corresponding HTML code demonstrates how to structure the GridView columns and customize the appearance. Notably, the GridView_RowDataBound event is employed to dynamically change the text color to red for rows where the result is marked as "Fail."
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
CellPadding="4" ForeColor="#333333" GridLines="None"
onrowdatabound="GridView1_RowDataBound">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
StudentID
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblStudentID" runat="server" Text='<%# Eval("studentID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Student Name
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblStudentName" runat="server" Text='<%# Eval("studentName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Physics
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblPhysics" runat="server" Text='<%# Eval("physics") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Chemistry
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblChemistry" runat="server" Text='<%# Eval("chemistry") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Maths
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblMaths" runat="server" Text='<%# Eval("maths") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Computer
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblComputer" runat="server" Text='<%# Eval("computer") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Result
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblResult" runat="server" Text='<%# Eval("result") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
C# Coding
Add Namespace to Default.aspx.cs i.e
using System.Data;
using System.Data.SqlClient;
C# Coding : BindGridview
The C# code in Default.aspx.cs contains the BindGridview method, responsible for fetching data from the "StudentMarks" table using a SqlDataAdapter. The DataSet is then bound to the GridView for display. This method is invoked in the Page_Load event to ensure that the GridView is populated when the page loads.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridview();
}
}
private void BindGridview()
{
SqlDataAdapter da = new SqlDataAdapter("Select * from StudentMarks", con);
DataSet ds = new DataSet();
da.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
}
C# Coding : Gridview_RowDataBound
The Gridview_RowDataBound event is a key component for dynamically altering text color based on specific conditions. This event is triggered for each row during data binding. In this example, the text color is changed to red for rows where the student's result is marked as "Fail." This enhances the visual representation of the GridView, providing instant feedback on student performance.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Label lblSID = (Label)e.Row.FindControl("lblStudentID");
Label lblSName = (Label)e.Row.FindControl("lblStudentName");
Label lblPhyscs = (Label)e.Row.FindControl("lblPhysics");
Label lblChemistry = (Label)e.Row.FindControl("lblChemistry");
Label lblMaths = (Label)e.Row.FindControl("lblMaths");
Label lblComputer = (Label)e.Row.FindControl("lblComputer");
Label lblResult = (Label)e.Row.FindControl("lblResult");
if (lblResult.Text == "Fail")
{
lblSID.Style.Add("color", "#f00");
lblSName.Style.Add("color", "#f00");
lblPhyscs.Style.Add("color", "#f00");
lblChemistry.Style.Add("color", "#f00");
lblMaths.Style.Add("color", "#f00");
lblComputer.Style.Add("color", "#f00");
lblResult.Style.Add("color", "#f00");
}
}
}
C# Coding : DropDownList
To add an interactive element, a DropDownList is introduced to allow users to modify the result of a student dynamically. The corresponding C# code captures the selected value and updates the database accordingly. If the result is changed from "Fail" to "Pass" or vice versa, the text color in the GridView is adjusted to reflect the change.
protected void ddlResult_SelectedIndexChanged(object sender, EventArgs e)
{
DropDownList ddlResult1 = (DropDownList)sender;
GridViewRow row = (GridViewRow)ddlResult1.Parent.Parent;
Label lblStudentID = (Label)row.FindControl("lblStudentID");
DropDownList ddlResult2 = (DropDownList)row.Cells[0].FindControl("ddlResult");
SqlCommand cmd = new SqlCommand("Update StudentMarks set result='" + ddlResult2.SelectedItem.Text + "' where studentID=" + lblStudentID.Text, con);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
BindGridview();
}
Conclusion:
In conclusion, this article has demonstrated a practical implementation of dynamic text color changes in an ASP.NET GridView based on database values. By utilizing C# coding, developers can enhance the visual representation of data and create a more interactive user experience. This approach is particularly valuable in scenarios where quick identification of specific conditions, such as student failures, is essential.
0 Comments