SharePoint Form Radio Buttons: Switch from Vertical to Horizontal with jQuery
UPDATE 2010-05-27: Back in January, 2010, I added a generalized function called $().SPServices.SPArrangeChoices to accomplish this to my SPServices library. It works basically the same way, but can be easily called with the name of the column for which you’d like to rearrange the radio buttons or checkboxes. It also includes an option to randomize the order of the values displayed. Check it out!
I’ve seen a few threads over on the MSDN SharePoint – Design and Customization forum about doing this, but never felt the need to make it happen myself. My answer has always been “jQuery would be the way to go with this”. Well, I was building a custom form the other day, and those pesky vertical radio buttons got to bugging me, too, so I decided to fix ’em with jQuery.
The form in question is a multi-item edit form, with one row per item, which lets the user set the column values and then check in each item using SharePoint’s Lists Web Services.  And, yes, I’m using my jQuery Library for SharePoint Web Services for this! (The released version doesn’t have the CheckInFile operation in it; what better way to test adding it in than to really use it? Next release, it’ll be there.)
Each row contains these column types: Name, Lookup, Lookup, and finally, the radio buttons. Because I’ve customized the form, it’s easy for me to add an id to the table cell which will contain the radio buttons when the page is rendered:Â
<td id="AuditRequired{$Pos}">
    <SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="Edit" FieldName="Audit_x0020_Required" ItemId="<a href="mailto:{@ID">{@ID</a>}" __designer:bind="{ddwrt:DataBind('u',concat('ff4',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Audit_x0020_Required')}"/>
    <!--<SharePoint:FieldDescription runat="server" id="ff4description{$Pos}" FieldName="Audit_x0020_Required" ControlMode="Edit"/>-->
   </td>
 The reason for adding the id to the table cell is that, surprisingly, SharePoint doesn’t give you anything good to select on for the radio button group. If you haven’t customized the form, then your initial selector would need to be more complicated. Note that I’m being a good doobie and making each id unique by appending the $Pos variable (this is an indicator for the row number which SharePoint generates, and takes the form ‘_1’, ‘_2’, etc.). Making the ids unique is good practice for cross-browser compatibility.
With the id in place, my jQuery looks like this:
$().find("[id^='AuditRequired']").each(function() {
var radios = "";
$(this).find("tr").each(function() {
radios += $(this).html();
});
$(this).find("tr:first").html(radios).nextAll().remove();
});
Let’s break that down a little:
- Line 01:Â Finds all of the table cells with the id starting with (that’s the ^= bit) ‘AuditRequired’, and then does an each loop for them
- Line 03: Finds each table row in $(this), which references the table cell found in Line 01
- Line 04: Appends the contents of that table row (the table cell containing the radio button) to the radios variable.
- Line 06: Finds the first table row, sets the html for that row to the radios variable containing all of the cells with radio buttons, then finds all of the other rows and removes them.
The net effect of this is to convert the view of the radio buttons from the default vertical arrangement to a horizontal arrangement, which tightens up my form nicely. Simple!
Awesome. I found one other example of how to do this and it did not work. How would this be altered to define the amount of columns acceptable? Like 4 across and 5 down instead of 20 accross?
Allan:
I like the word “awesome”. Glad you found this useful.
After I posted tihs, I had the same thought. I think that I will be adding this into my jQuery Library for SharePoint Web Services in the near term. A function something like this would be useful, eh?
$().SPServices.SPRearrangeRadioButtons({
columnName: “Audit Required”,
radioButtonsPerRow: 4
});
Are there any other options you can think of that would be useful?
M.
No. Just the column option. I found this previous: http://sharepointjavascript.wordpress.com/2009/08/19/wrap-choice-field-in-multiple-columns/
But it depends on the td class instead of the id wich works better for us. Couldn’t figure out how to apply parts of this script with yours to get the columns needed.
Thanks
That post isn’t bad, but the method is a little clunky. In my post above, I just collect all of the radio buttons into one string and then dump them into the first table row. To do what you want, we’d want to collect the radio buttons into an array and then output them one by one into cells, closing off each row when radioButtonsPerRow has been reached.
M.
I have another solution for the same
$(document).ready(function()
{
$(‘.ms-RadioText’).each(function() {
debugger;
try
{
str1 = $(this).parents()[2].innerHTML;
str1 =str1.replace(new RegExp(”, ‘g’),””);
str1 =str1.replace(new RegExp(”, ‘g’),””);
str1 =str1.replace(new RegExp(”, ‘g’),””);
str1 =str1.replace(new RegExp(”, ‘g’),””);
$(this).parents()[2].innerHTML = “” + str1 + “”;
} catch(err) {
} });});
Most Awesome, Marc! This was a fantastic solution and a
novel approach. Worked like a charm. Is this cross browser
compatible? Great work, and thanks. On an unrelated note, can you
point me to the tool you use for rendering your blog’s code
snippets? I love the copy to clipboard and view source
functionality.
Jeremiah:
Glad you liked it. Be sure to look at the
SPServices version of this, which is more robust.
For code formatting, I just use the sourcecode tags built into WordPress.com. See this article for details:
http://en.support.wordpress.com/code/posting-source-code/
M.
I’ll have a look at the SPServices version. Thanks on both fronts, Marc.
Apparently this does not work in SP2010. Just set it up and it didn’t work.
Jill:
Actually, it should work in 2010, though it may require a small tweak or two. I’d suggest, though, that you use the SPServices function, as it’s far more robust.
M.
Hi,
Where do you place the jquery mentioned above?
Fatima:
As noted in the post, you should use the SPArrangeChoices function in SPServices for this. The SPServices site has instructions in the documentation.
M.
Thanks.
Unfortunately for the third day, a page that I had been working in one minute ago, is now placing “error rendering controls” everywhere. I give up.
Ctrl-Z is your best friend. ;+)
M.
Unfortunately it doesn’t help for cases which this is that was rendering properly before closing.
That is true. I always suggest small, incremental changes, saving after each, especially until you’re very comfortable with things.
M.
Oh I only did small changes after the 30th time. But no matter what I have been doing, even after I successfully make changes, and it looks good to me before closing (ie – test in browser) the enxt day when I open the form, the fatal ‘error rendering’. No idea what to do.
Okay, I’m trying this again.
I’ve added my info the jquery SPServices file;
hmmm…nothing
Fatima:
Since it’s really an SPServices question at this point, why don’t you post what you are doing and your code on the SPServices Discussions? You can easily post and format code there, which is harder here. I’m not sure what all the changes are you’re triying to do with the form, but let’s start with a fresh copy of one of the default forms and get that working for you. You can customize from there.
M.
I am novice and I does not how understand to insert the code into my form in Sharepoint
This should just be fixed in the SharePoint interface. I hate all these “awesome” workarounds that require custom coding. YUCK.
Hi Marc,
I tried it and it didn’t work. I placed the code in the form, a script line connecting to the jquery. Don’t know why?
@Richard:
This is a very old post. Depending on what version of SharePoint you’re on and what version of SPServices you’re using, it may or may not work.
M.