Mark Allison
Mark Allison

Reputation: 7228

How to convert a RadioButtonList into a JQuery UI Button List?

I have an ASP.NET RadioButtonList on my form and I would like to convert it so that it is a JQuery Button like this.

My simple code:

<asp:Label ID="lblOrderType" Text="Order Type" runat="server" CssClass="label" />
<asp:RadioButtonList ID="radOrderType" runat="server" RepeatDirection="Horizontal" CssClass="radioButtonList">
    <asp:ListItem value="M" Selected="True">Market</asp:ListItem>
    <asp:ListItem value="L">Limit</asp:ListItem>
    <asp:ListItem value="S">Stop</asp:ListItem>
</asp:RadioButtonList>

<asp:Button 
    ID="btnInsert" 
    runat="server" 
    Text="Insert" 
    onclick="btnInsert_Click" CssClass="button" 
/>

When the btnInsert button is clicked I want to retrieve the value of the selected radio button, but using a JQuery button.

protected void btnInsert_Click(object sender, EventArgs e)
{
    // some database code
    DB.Insert(radOrderType.SelectedValue);
}

How would I go about doing this?

Upvotes: 1

Views: 2666

Answers (1)

Adam
Adam

Reputation: 629

Assuming you've already got a reference to the jquery and jquery-ui js files try adding this to your markup:

<script type="text/javascript">
$(document).ready(function() { $("#<%= radOrderType.ClientID %>").buttonset(); });
</script>

Upvotes: 2

Related Questions