Thursday, May 19, 2011

Separating radio button selections into another row in SharePoint

Came across an interesting problem when an user requirement is to separate the radio buttons into two different rows in a form. Plus attaching some click events to both selections. It took me about 15 mins or so to figure out but I thought it was interesting. SharePoint renders the radio buttons together as something like this:

<SharePoint:FormField runat="server" id="ff2{$Pos}" controlmode="New" fieldname="No_x0020_Knowledge" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@No_x0020_Knowledge')}" />

You can't simply move one as you would if you are using html. Thankfully, a little jQuery and a little css comes to the rescue. The solution is actually a real simple one. BTW, I did tried using just jQuery to move the the 2nd radio button down but the attached click event was lost somehow.

On to the solution. If you have a field with selections 'A' and 'B', you want to move 'B' to the next row, the jQuery line:

of course the css:

The after effect:

The attached events for each radio button also worked. You would need to update the left and top positions to fit your needs though.