I have a Gridview
, it have a column called student_Class
. There are around of 80 Class on grid view. I have grouped this class using GroupBy query.
Now I want to Style this different class with different color. How is it possible?
It is not easy to write all classes on RowDataBound
and giving color.
Is there any other way?
Code:
groups = (ArrayList)Session["selectedclass"];
SELECT id,name,student_Class FROM student where
student_Class='"+groups[0].ToString().Trim()+"'
group by student_Class.
Gives Data as
id name student_class
1 aa A
2 bb A
3 cc A
4 dd B
5 ee B
6 as B
7 ss B
8 AZZ D
The student class with value A
need same color(for cell) and B
need other color., etc.
ASPX:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="id" DataSourceID="SqlDataSource1"
ondatabound="GridView1_DataBound" onrowdatabound="GridView1_RowDataBound">
<Columns>
<asp:BoundField DataField="id" HeaderText="id" ReadOnly="True"
SortExpression="id" />
<asp:BoundField DataField="name" HeaderText="name" SortExpression="name" />
<asp:BoundField DataField="student_class" HeaderText="student_class"
SortExpression="student_class" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:SiteConnectionString %>"
SelectCommand="SELECT * FROM [student]">
</asp:SqlDataSource>
Code behind:
static string[,] ClassNames =
{
{"A","Red"},
{"B","Blue"},
{"C","Pink"},
{"D","Green"},
// and so on
};
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
string className = e.Row.Cells[2].Text;
string color = "Black";
for (int i = 0; i <= ClassNames.GetUpperBound(0); i++)
{
if (ClassNames[i, 0] == className)
{
color = ClassNames[i, 1];
e.Row.Cells[2].ForeColor = Color.FromName(color);
e.Row.Cells[2].BorderColor = Color.Black;
break;
}
}
}
If you only want to style depend on the value, I must recommend you to do it client-side, by using Jquery or javaScript.
Also, it won't affect performance as it's on the client-side rather than doing it on RowDataBound
Code: Using Client-Side - (which i recommend more)
Here you can set as many conditions to depend on your class values, no need to write extra server-side code
$(document).ready(function () {
$(".myGvClass").find("td").each(function () {
if ($(this).text() == "Class B") {
$(this).css("color", "Red");
}
if ($(this).text() == "Class A") {
$(this).css("color", "Blue");
}
if ($(this).text() == "Class C") {
$(this).css("color", "green");
}
// ..... and so on
});
HTML markup:
<asp:GridView ID="GridView1" runat="server" CssClass="myGvClass">
</asp:GridView>
CodeBehind:
GridView1.DataSource = YourDataTable;
GridView1.DataBind();
ScreenShot:
Code: Using serverside
Looping over Gridview rows at myGridview_DataBound
event, and check condition cell value and set respective colors.
protected void myGridview_DataBound(object sender, EventArgs e)
{
for (int i = 0; i <= myGridview.Rows.Count - 1; i++)
{
string myClassVal = myGridview.Rows[i].Cells[2].Text;
if (myClassVal == "Class A")
{
myGridview.Rows[i].Cells[2].BackColor = Color.Green;
}
else if (myClassVal == "Class B")
{
myGridview.Rows[i].Cells[2].BackColor = Color.Red;
}
else
{
myGridview.Rows[i].Cells[2].BackColor = Color.Orange;
}
}
}
HTML :
<asp:GridView ID="myGridview" runat="server" ondatabound="myGridview_DataBound">
</asp:GridView>
Code Behind:
myGridview.DataSource = YourDataTable;
myGridview.DataBind();
ScreenShot:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With