CSS to Conditionally set Asp.Net Repeater Row Background Colour using C# VB.Net

Asp.Net Repeater Control is used to represent data repeatedly. Sometimes we can use this control to represent data in tabular format. Since more often we use this control, we need to represent data visually meaningful. For such type of user/client requirement we need to apply CSS on Repeater control from server side or from code behind. That’s why in this article we are going to implement “How we can set Asp.Net Repeater Control Row Data Background Color based on business condition“. Though it’s a beginner level tutorial but to implement the below example you have to know some CSS in order to format the Repeater Control Background Color.

CSS to set Asp.Net Repeater Row Background Colour based on Condition in C# VB.Net

Steps to Set Repeater Control Background Color:
The main theme of this example is, here we have considered some cricketer of elite club with 3 types of member type. Those are Platinum, Gold & Orange. Based on membership category we will decorate Repeater Row background color using CSS.

CSS to Color Repeater Row:

    table thead
    table tbody

Repeater Control HTML Markup:

<table cellpadding="2" cellspacing="2">
    <asp:Repeater ID="RepeaterControl1" runat="server">
                <tr class="<%#defineCSS(Convert.ToInt32(Eval("CategoryID")))%>">
                    <td><%#Eval("Name") %></td>
                    <td><%#Eval("Address") %></td>
                    <td><%#Eval("Email") %></td>
                    <td><%#Eval("Category") %></td>

Apply CSS in Runtime:
C# Code:

    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
            DataTable oTable = new DataTable("CricketEliteClub");

            //Add DataTable column dynamically/run time/on the fly.
            oTable.Columns.Add(new DataColumn("ID", typeof(System.Int64)));
            oTable.Columns.Add(new DataColumn("Name", typeof(System.String)));
            oTable.Columns.Add(new DataColumn("Address", typeof(System.String)));
            oTable.Columns.Add(new DataColumn("Email", typeof(System.String)));
            oTable.Columns.Add(new DataColumn("Category", typeof(System.String)));
            oTable.Columns.Add(new DataColumn("CategoryID", typeof(System.Int32)));

            //Add DataTable rows dynamically/run time/on the fly.
            oTable.Rows.Add(1001, "Ricky Ponting", "Sydney, Australia","australia@eliteclub.com","Platinum",1);
            oTable.Rows.Add(1002, "Sachin Tendulkar", "Mumbai, India", "india@eliteclub.com", "Platinum", 1);
            oTable.Rows.Add(1003, "Kalu Vitaran", "Colombo, Srilanka", "lanka@eliteclub.com", "Orange", 3);
            oTable.Rows.Add(1004, "Joyabordone", "Colombo, Srilanka", "lanka@eliteclub.com", "Gold", 2);
            oTable.Rows.Add(1005, "Asoka Gurusinha", "Colombo, Srilanka", "lanka@eliteclub.com", "Gold", 2);
            oTable.Rows.Add(1006, "Shane Warne", "Sydney, Australia", "australia@eliteclub.com", "Platinum", 1);
            oTable.Rows.Add(1007, "Brain Lara", "West Indies", "wi@eliteclub.com", "Platinum", 1);
            oTable.Rows.Add(1008, "Brain Adams", "South Africa", "sa@eliteclub.com", "Gold", 2);
            oTable.Rows.Add(1009, "Brett Lee", "Sydney, Australia", "australia@eliteclub.com", "Gold", 2);
            oTable.Rows.Add(1010, "MS Dhoni", "Jharkhanda, India", "india@eliteclub.com", "Platinum", 1);
            oTable.Rows.Add(1011, "Roshon Mahanama", "Colombo, Srilanka", "srilanka@eliteclub.com", "Orange", 3);
            oTable.Rows.Add(1012, "Suresh Raina", "India", "india@eliteclub.com", "Orange", 3);
            oTable.Rows.Add(1013, "De Villiers", "South Africa", "sa@eliteclub.com", "Platinum", 1);
            oTable.Rows.Add(1014, "Chris Gayle", "West Indies", "wi@eliteclub.com", "Platinum", 1);
            oTable.Rows.Add(1015, "Shakib Al Hasan", "Dhaka, Bangladesh", "bd@eliteclub.com", "Platinum", 1);
            oTable.Rows.Add(1016, "Somuya Sarkar", "Dhaka, Bangladesh", "bd@eliteclub.com", "Platinum", 1);
            oTable.Rows.Add(1017, "Tanim Iqbal", "Dhaka, Bangladesh", "bd@eliteclub.com", "Platinum", 1);
            oTable.Rows.Add(1018, "Mushfiqur Rahman", "Dhaka, Bangladesh", "bd@eliteclub.com", "Platinum", 1);

            RepeaterControl1.DataSource = oTable;

    protected string defineCSS(Int32 CategoryID)
        string set_CSS_Class = string.Empty;
        if (CategoryID==1)
            set_CSS_Class = "platinum"; // name of the platinum CSS class.
        else if (CategoryID == 2)
            set_CSS_Class = "gold"; // name of the gold CSS class.
            set_CSS_Class = "orange"; // name of the orange CSS class.
        return set_CSS_Class;

VB.Net Code:

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Dim oTable As New DataTable("CricketEliteClub")

            'Add DataTable column dynamically/run time/on the fly.
            oTable.Columns.Add(New DataColumn("ID", GetType(System.Int64)))
            oTable.Columns.Add(New DataColumn("Name", GetType(System.String)))
            oTable.Columns.Add(New DataColumn("Address", GetType(System.String)))
            oTable.Columns.Add(New DataColumn("Email", GetType(System.String)))
            oTable.Columns.Add(New DataColumn("Category", GetType(System.String)))
            oTable.Columns.Add(New DataColumn("CategoryID", GetType(System.Int32)))

            'Add DataTable rows dynamically/run time/on the fly.
            oTable.Rows.Add(1001, "Ricky Ponting", "Sydney, Australia", "australia@eliteclub.com", "Platinum", 1)
            oTable.Rows.Add(1002, "Sachin Tendulkar", "Mumbai, India", "india@eliteclub.com", "Platinum", 1)
            oTable.Rows.Add(1003, "Kalu Vitaran", "Colombo, Srilanka", "lanka@eliteclub.com", "Orange", 3)
            oTable.Rows.Add(1004, "Joyabordone", "Colombo, Srilanka", "lanka@eliteclub.com", "Gold", 2)
            oTable.Rows.Add(1005, "Asoka Gurusinha", "Colombo, Srilanka", "lanka@eliteclub.com", "Gold", 2)
            oTable.Rows.Add(1006, "Shane Warne", "Sydney, Australia", "australia@eliteclub.com", "Platinum", 1)
            oTable.Rows.Add(1007, "Brain Lara", "West Indies", "wi@eliteclub.com", "Platinum", 1)
            oTable.Rows.Add(1008, "Brain Adams", "South Africa", "sa@eliteclub.com", "Gold", 2)
            oTable.Rows.Add(1009, "Brett Lee", "Sydney, Australia", "australia@eliteclub.com", "Gold", 2)
            oTable.Rows.Add(1010, "MS Dhoni", "Jharkhanda, India", "india@eliteclub.com", "Platinum", 1)
            oTable.Rows.Add(1011, "Roshon Mahanama", "Colombo, Srilanka", "srilanka@eliteclub.com", "Orange", 3)
            oTable.Rows.Add(1012, "Suresh Raina", "India", "india@eliteclub.com", "Orange", 3)
            oTable.Rows.Add(1013, "De Villiers", "South Africa", "sa@eliteclub.com", "Platinum", 1)
            oTable.Rows.Add(1014, "Chris Gayle", "West Indies", "wi@eliteclub.com", "Platinum", 1)
            oTable.Rows.Add(1015, "Shakib Al Hasan", "Dhaka, Bangladesh", "bd@eliteclub.com", "Platinum", 1)
            oTable.Rows.Add(1016, "Somuya Sarkar", "Dhaka, Bangladesh", "bd@eliteclub.com", "Platinum", 1)
            oTable.Rows.Add(1017, "Tanim Iqbal", "Dhaka, Bangladesh", "bd@eliteclub.com", "Platinum", 1)
            oTable.Rows.Add(1018, "Mushfiqur Rahman", "Dhaka, Bangladesh", "bd@eliteclub.com", "Platinum", 1)

            RepeaterControl1.DataSource = oTable
        End If
    End Sub

    Protected Function defineCSS(CategoryID As Int32) As String
        Dim set_CSS_Class As String = String.Empty

        If CategoryID = 1 Then
            set_CSS_Class = "platinum"
            ' name of the platinum CSS class.
        ElseIf CategoryID = 2 Then
            set_CSS_Class = "gold"
            ' name of the gold CSS class.
            set_CSS_Class = "orange"
        End If
        ' name of the orange CSS class.
        Return set_CSS_Class
    End Function

Note: Don’t forget to add “System.Data”. Here we have showed the example based on DataTable. But you can easily bind data from Database.

Code Explanation:
defineCSS is the main method/function to return the appropriate CSS for different membership type. Rest of the code is so simple & self explanatory. If still have issues please share with us through comment.

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Asp.net, C#, CSS, Repeater, VB.Net
One comment on “CSS to Conditionally set Asp.Net Repeater Row Background Colour using C# VB.Net
  1. Gilberto Tezini says:

    Cool! Good Stuff!

Leave a Reply

Your email address will not be published. Required fields are marked *