Quantcast
Channel: SharePoint Diary
Viewing all articles
Browse latest Browse all 1058

Arrange Choice Field Radio Buttons Horizontally in SharePoint List Forms

$
0
0
Requirement is to arrange choice fields of Radio buttons to horizontally in a SharePoint 2013 custom list form:
How to arrange choice field options Horizontally?
Step 1: Create new Custom list form, Wrap your choice field in <Span> tag to give it a ID. E.g.
<span id="optReqType">
<SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="Change_x0020_Request_x0020_Type" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Change_x0020_Request_x0020_Type')}"/>
<SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="Change_x0020_Request_x0020_Type" ControlMode="New"/>
</span>

Step 2: In the custom list form, find the tag <AdditionnalPageHead> and add this code just below it.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function() {
var firstRadio = $("#optReqType table tbody tr td .ms-RadioText:eq(0)");
$("#optReqType table tbody tr td .ms-RadioText:gt(0)").appendTo($(firstRadio));

});
</script>
When you have multiple choice fields in the form, its better to create a function to arrange them horizontally.
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

function alignOptions(fieldName)
{
var firstRadio = $("#"+fieldName +" table tbody tr td .ms-RadioText:eq(0)");
$("#"+fieldName +" table tbody tr td .ms-RadioText:gt(0)").appendTo($(firstRadio));
}

$(document).ready(function() {

//Call function to arrange Radio buttons horizontally
alignOptions("optChgImpact");
alignOptions("optChgPriority");

});
</script>
Here is my screen:
SPServices Framework also offers this functionality:
http://spservices.codeplex.com/wikipage?title=%24%28%29.SPServices.SPArrangeChoices

Viewing all articles
Browse latest Browse all 1058

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>