CODEWITHSUNDEEP
c#asp.nethtmlradiobuttonlist
Rachel
Rachel

Reputation: 132618

How can I add a custom property to a RadioButtonList items?

How can I add a bound Html5 data- attribute to the items generated with a bound RadioButtonList?

My code looks like this:

<asp:Repeater Id="QuestionList" ...>
    <ItemTemplate>
        <asp:RadioButtonList DataSource='<%# Eval("Answers") %>'
                         SelectedValue='<%# Eval("SelectedAnswerId") %>'
                         DataTextField="Answer" 
                         DataValueField="AnswerId"
                         Tag='<%# Eval("QuestionId") %>' />
    </ItemTemplate>
</asp:Repeater>

var List<Question> questions = GetQuestions();
QuestionList.DataSource = questions;
QuestionList.DataBind();

It is bound to a class structure that looks like this:

public class Question
{
    int QuestionId;
    string Question;
    List<Answer> Answers;
}

public class Answers
{
    int AnswerId;
    string Answer;
    bool SomeFlag;
}

I need to add SomeFlag to the UI for jQuery to use, so the end result is that each item generated should look like this:

<input type="radio" data-flag="true" ... />

Is there a way to add a html data- attribute to the input objects generated from a bound RadioButtonList?

Upvotes: 5

Views: 7979

Answers (3)

Adil
Adil

Reputation: 148180

You can use ListItem attributes to add custom attributes to the items in the radio button list. You can check how your html is generated for radio button list and make jquery to get the required data attribute for you.

On server side

ListItem li1 = new ListItem();
ListItem li2 = new ListItem();
li1.Attributes.Add("data-flag", "true");
li2.Attributes.Add("data-flag", "true");
RadioButtonList1.Items.Add(li1);
RadioButtonList1.Items.Add(li2);

Generated html for radio button list

<table id="RadioButtonList1" border="0">
    <tr>
        <td><span data-flag="true"><input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="" /></span></td>
    </tr><tr>
        <td><span data-flag="true"><input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="" /></span></td>
    </tr>
</table>

Accessing in jquery

$(':radio[id*=RadioButtonList1]').click(function(){
      alert($(this).closest('span').data('flag'));
})

Upvotes: 3

Felipe Oriani
Felipe Oriani

Reputation: 38638

You can set an Attribute in the ItemDataBound event of Repeater, try something like:

protected void repeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    // if it is an item (not header or footer)
    if (e.Item.ItemType == ListItemType.Item)
    {
        // get your radioButtonList
        RadioButtonList optionsList = (RadioButtonList)e.Item.FindControl("rblOptionsList");

        // loop in options of the RadioButtonList
        foreach (ListItem option in optionsList.Items)
        {
            // add a custom attribute
            option.Attributes["data-flag"] = "true";
        }
    }
}

And remember to set the IDs and Events for your controls

<asp:Repeater Id="QuestionList" ItemDataBound="QuestionList_ItemDataBound" ...>
    <ItemTemplate>
        <asp:RadioButtonList ID="rblOptionsList" DataSource='<%# Eval("Answers") %>'
                         SelectedValue='<%# Eval("SelectedAnswerId") %>'
                         DataTextField="Answer" 
                         DataValueField="AnswerId"
                         Tag='<%# Eval("QuestionId") %>' />
    </ItemTemplate>
</asp:Repeater>

Upvotes: 1

Ann L.
Ann L.

Reputation: 13975

Your best bet if you need to generate the attributes server-side would be to subclass the RadioButtonList control and override the Render method.

If you have a copy of Reflector or a similar product that can show decompiled code, this would be very helpful in determining exactly where the ListItem element is being rendered as a radio button.

Upvotes: 1

Related Questions