Archive for July, 2008

It’s all gone radio rental

Posted in ASP / ASP.Net with tags , , , on July 19, 2008 by Si

Feel free to leave now if you’ve had enough of radio buttons….

So having dealt with radio buttons on my filter (read my other post, Missing / (in)action for background), I had the next challenge of getting radio buttons in a gridview. “Template Columns” I hear you shouting at me, and you’d be right. While there is a built-in column type for checkboxes, the same thing doesn’t exist for radio buttons. So a quick bit of markup like:

<asp:TemplateColumn><ItemTemplate><asp:RadioButton ..... /></ItemTemplate></asp:TemplateColumn>

you’d think would work nicely. But it doesn’t. Try it, and you’ll find that you can select the radio button in each data row, at the same time. The idea is, of course, that only one would be selected at a time. Something is going slightly wrong here.

Have a butcher’s at the air force (butcher’s hook = look, air force = source) and you’ll see that each rendered <input> element has a different name attribute. The browser uses this attribute to group radio buttons together, so as far as the browser is concerned each radio button is in its own group and so can be selected at the same time.

The two and six (=fix) for this is to use a Literal control in the item template,

<asp:Literal ID="RadioButtonMarkup" runat="server"><asp:Literal>

then override the gridview’s RowCreated event with something like:

Protected void GridView1_RowCreated(Object sender, GridViewRowEventArgs e)

{

If (e.Row.RowType == DataControlRowType.DataRow}

{

' Grab a reference to the Literal control

Literal outputRow = (Literal)e.Row.FindControl("RadioButtonMarkup");

' Output the markup except for the "checked" attribute

outputRow.Text = String.Format( "<input type="radio" name="radioButtonGroup" " & _ "id="RowSelector{0}" value="{0}" />", e.Row.RowIndex);

}

}

Job done. You get a radio button in each row, and you can only select one at a time. This also has the advantage that you can modify the code should you need to (e.g. I am changing this so depending on a parameter this will display radio buttons or check boxes).

There is still the issue of remembering the selected item after postback. This can be done, I suggest reading the rest of the article from which I half-inched (=pinched) the above: Microsoft ASP.net – Adding a GridView Column of Radio Buttons. Essentially it involves adding a private property to store an ID of the selected item, then checking for that in the RowCreated handler above.

Si.

btw: radio rental = mental

Missing / (in)action

Posted in AJAX, ASP / ASP.Net on July 19, 2008 by Si

Despite my recent lack of postings I am still alive!! 🙂

And that’s not the only reason for the title of this post. I have a monster in the making. Not a good monster mind, a real ugly monster. This monster is an ASP.NET user control. What started out as a simple task to develop a control that would allow users to specify some filters/parameters before generating a report seemed on paper, quite simple and feasible. However, adding in some nested user controls, several of my own hand-crafted javascript calendars (the built-in .NET calendar is really slow and I think painful to use), and some optional radio-buttons as a template column on a datagrid has given this a life of its own. A whole screen full of viewstate is really not the way forward!!!

Anyway, the other reason for this post is to spread/share the knowledge about radio buttons, AJAX and postback. In my monster control, I have a few radio buttons that let the user switch between filters, but obviously when the page loads I want a default filter to be shown. Correspondingly I want one of the radio buttons to be checked. “Easy!” you say, and, well, yes it is, and it might look something like:

<asp:RadioButton ID="RadioButton1" runat="server" GroupName="group1" Text="Option 1" Checked="true" OnCheckedChange="RadioButton1_CheckedChanged"/>

But is it quite that simple? When a radio button is selected, I want to do some stuff server-side and show a different filter through the magik of AJAX. The code above might work for buttons 2 and 3, but there is a distinct lack of action when button 1 is re-selected (after selecting 2 or 3). “Huh?” you say? The reason for this is the Checked="true" bit. When the page is rendered, this radio button doesn’t get the postback javascript associated with it’s onclick event, and so never triggers a postback. Solution? Wrap the radio buttons in an update panel so they get updated when AJAX does its thing.

Read this article for more info (it helped me win this particular battle with the monster): http://smarx.com/posts/the-case-of-the-radiobuttonlist-half-trigger.aspx.

I fight on….

Si