Set ASP.Net RadioButton color based on Database value and selection using jQuery

Hi ramco,

It is not possible to do with the CSS. So you need to set using jQuery also.

Please refer below sample.

HTML

<style type="text/css">
    body { font-family: Arial; font-size: 30pt; }
    .radius { border-radius: 100% !important; }
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<asp:Repeater ID="rptStudents" runat="server" OnItemDataBound="OnItemDataBound">
    <HeaderTemplate>
        <table class="table">
            <tr>
                <td>StudentId</td>
                <td>StudentName</td>
                <td>Status</td>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td><asp:Label ID="lblId" Text='<%#Eval("StudentId") %>' runat="server" /></td>
            <td><asp:Label ID="lblName" Text='<%#Eval("StudentName") %>' runat="server" /></td>
            <td>
                <asp:HiddenField ID="hfdStatus" runat="server" Value='<%# Eval ("Status") %>' />
                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                    <label id="pnlP1" runat="server" style="margin-right: 10px">
                        <asp:RadioButton ID="rb1" GroupName="options" runat="server" Text="P" />
                    </label>
                    <label id="pnlA1" runat="server">
                        <asp:RadioButton ID="rb2" GroupName="options" runat="server" Text="A" />
                    </label>
                </div>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>
<script type="text/javascript">
    $(function () {
        $(".radius").click(function () {
            var option1 = $(this).closest('tr').find('[id*=pnlP1]');
            var option2 = $(this).closest('tr').find('[id*=pnlA1]');

            if ($(this).attr('id').indexOf('pnlP1') != -1) {
                $(option1).attr('class', 'btn btn-success radius rb1');
                $(option2).attr('class', 'btn btn-default radius rb2');
            }

            if ($(this).attr('id').indexOf('pnlA1') != -1) {
                $(option1).attr('class', 'btn btn-default radius rb1');
                $(option2).attr('class', 'btn btn-danger radius rb2');
            }
        });
    });
</script>

Namespace

C#

using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.UI.HtmlControls;

VB.Net

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.UI.HtmlControls

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindRepeater();
    }
}

private void BindRepeater()
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT StudentId, StudentName, Status FROM Students", con))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                DataTable dt = new DataTable();
                sda.Fill(dt);
                rptStudents.DataSource = dt;
                rptStudents.DataBind();
            }
        }
    }
}
protected void OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        HiddenField status = (e.Item.FindControl("hfdStatus") as HiddenField);

        HtmlGenericControl pnlP1 = (e.Item.FindControl("pnlP1") as HtmlGenericControl);
        HtmlGenericControl pnlA1 = (e.Item.FindControl("pnlA1") as HtmlGenericControl);

        pnlP1.Attributes.Add("class", "btn btn-default radius rb1");
        pnlA1.Attributes.Add("class", "btn btn-default radius rb2");
        if (status.Value.ToUpper() == "P")
        {
            pnlP1.Attributes.Add("class", "btn btn-success radius rb1");
        }
        if (status.Value.ToUpper() != "P")
        {
            pnlA1.Attributes.Add("class", "btn btn-danger radius rb2");
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.BindRepeater()
    End If
End Sub

Private Sub BindRepeater()
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(conString)
        Using cmd As SqlCommand = New SqlCommand("SELECT StudentId, StudentName, Status FROM Students", con)
            Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
                Dim dt As DataTable = New DataTable()
                sda.Fill(dt)
                rptStudents.DataSource = dt
                rptStudents.DataBind()
            End Using
        End Using
    End Using
End Sub

Protected Sub OnItemDataBound(ByVal sender As Object, ByVal e As RepeaterItemEventArgs)
    If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
        Dim status As HiddenField = (TryCast(e.Item.FindControl("hfdStatus"), HiddenField))
        Dim pnlP1 As HtmlGenericControl = (TryCast(e.Item.FindControl("pnlP1"), HtmlGenericControl))
        Dim pnlA1 As HtmlGenericControl = (TryCast(e.Item.FindControl("pnlA1"), HtmlGenericControl))
        pnlP1.Attributes.Add("class", "btn btn-default radius rb1")
        pnlA1.Attributes.Add("class", "btn btn-default radius rb2")
        If status.Value.ToUpper() = "P" Then
            pnlP1.Attributes.Add("class", "btn btn-success radius rb1")
        End If
        If status.Value.ToUpper() <> "P" Then
            pnlA1.Attributes.Add("class", "btn btn-danger radius rb2")
        End If
    End If
End Sub

Screenshot