Gridview Row Text Color Change through DropDownList


Gridview Row Text Color Change through DropDownList

In this article let me show you how to bind database studentmark table data into gridview control by using c# coding. After binding gridview control gridview_rowdatabound event will fire its check every gridview row student records result value is "Pass | Fail", if result value is "Fail" then that row record will change text color to "Red".

Create Database Table : StudentMarks

StudentMarks is a database table which i'm using for demonstration purpose with predefined data that i'm inserting through script which i declare in below code snippet.

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 Default.aspx design page just drag and drop Gridview control and customize design as i shown in above image or simply copy and paste below html code in your web design page.

<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


BindGridview is a private method which is used to bind StudentMarks data into gridview control.

 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


how to use a RowDataBound event in a GridView to highlight the rows text color in ASP.NET. This example is helpful in situations where you need to highlight the GridView rows text based on a specific condition, i.e if student result = fail change text color red.

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

By using DropDownList is used to change result of the student i.e "Pass | Fail " if changing Fail to Pass gridview row text color change "Red - Black" or viceversa.

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();
    }
0 Komentar untuk "Gridview Row Text Color Change through DropDownList"

Back To Top