KWizCom Professional Services – http://www.kwizcom.com/
Have you noticed that field choice only gives a vertical view?
But what if I want a horizontal view?
When you want to customize your view but don't know how it can be very frustrating but there is always a way, you just have to know how…
For example:
I want to use the field "Gender" with two choice options – male and female.
This is how such a field would normally look in MOSS:
But I don't want to waste so much screen space. It would be much better to have something like this:
With a little Java script it's not so hard to go from vertical to horizontal. Here's how you do it:
Simply add this code to the form (add it in the SPD to NewForm.aspx and EditForm.aspx for the list that includes the view you want to change):
That all – now we have our Male/Female options in the desired view layout!
+++++++++++++++++++++++++++++++++++++++
For more helpful tips and guidelines please visit: http://kwizcom.blogspot.com/
NEW – You can now follow KWizCom on Twitter: https://twitter.com/KWizCom
18 comments:
This looks very promising, any chance we could get a text version of the code (instead of an image?)
Thanks.
here goes:
var inputs = document.getElementsByTagName("INPUT");
var radios = new Array();
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "radio")
radios.push(inputs[i]);
}
var html = new String();
var openTable = "<TABLE cellSpacing='0' cellPadding='0' width='100%' border='0'><TR>";
var closeTable = "</TR></TABLE>";
for (var i = 0; i < radios.length-1; i++)
{
if (i == 0)
html = openTable;
var obj = radios[i];
while (true)
{
if (obj.tagName == "TD")
break;
else
obj = obj.parentElement;
}
html = html + "<TD>" + obj.innerHTML + "</TD>";
if (radios[i].name != radios[i+1].name)
{
html = html + closeTable;
var obj2 = obj;
while (true)
{
if (obj2.tagName == "SPAN")
break;
else
obj2 = obj2.parentElement;
}
obj2.innerHTML = html;
html = openTable;
}
if (i == radios.length-2)
{
obj = radios[i+1];
while (true)
{
if (obj.tagName == "TD")
break;
else
obj = obj.parentElement;
}
html = html + "<TD>" + obj.innerHTML + "</TD>";
html = html + closeTable;
var obj2 = obj;
while (true)
{
if (obj2.tagName == "SPAN")
break;
else
obj2 = obj2.parentElement;
}
obj2.innerHTML = html;
}
}
Thanks.
Where is put Java Script code New form.aspx
Please let me know which line bewlo
All you need is to find script code and add it there..
ex:
If you have this code
<asp:Content ContentPlaceHolderId="PlaceHolderTitleAreaClass" runat="server">
<script id="onetidPageTitleAreaFrameScript">
document.getElementById("onetidPageTitleAreaFrame").className="ms-areaseparator";
</script>
...
Add it after </script>. Don't forget to wrap the code in a script tag
<script language="javascript" type="text/javascript">
CODE
</script>
I am working on j2ee Application and I am using smartclient.
I have radiogroup.
{ID:"AccrualSummaryFrequency",name:"summFrequency",title:"Accrual Frequency",type:"radioGroup",valueMap:["Daily","Monthly"]},
This displys in vertical.But I want it as Horizontal.How I can get it?
Hi Binal,
J2EE is a bit out of our scope here, but the javascrtipt principal should be similar if you can inject javascript to the page.
Hello, Thanks for this script.
Nevertheless, i have a question. What happens if you have 10 radio buttons.
Do they stay on one row or are they arranged on several rows ?
I would need my radio buttons to be on 2 or 3 rows ?
Could you tell me how to fo it ?
Thanks !
Cedric
Thanks so much for this info, I've been looking everywhere to find this solution!!! Thanks also to Roi for telling where to put the script :-)
Great Work !!!
This code will work for one column(Gender) is we have more than one?? Please advice.
Hi Royal,
The code posted should run for all radio buttons, why would you say it only runs for one column named "Gender"?
I dont understand, do you want to limit it only to one column?
If that is what you mean, you will have to add custom conditions there that will only take radio buttons of the fields you want to change.
I'm afraid this code is provided as is, but it shouldnt be too hard to limit it.
Dear Petel,
Sorry for the confusion.
Let me explain, I have a user and admin forms.The user form have two columns with two radio buttons with an option ‘Yes’ and ‘No’.
Likewise the Admin form have 4 columns with 4 radio buttons and all ‘Yes’ and ‘No’.
When I ran the java scripts it made the horizontal radio buttons but in the user form it displayed like this
Level1: Yes No
Level2: Yes Yes
And in the Admin form
Level1: Yes No
Level2: Yes No
Level3: Yes No
Level4: Yes Yes
Basically the last Radio button had some issue. The last TD is not appended to the innerHTML.
Somehow I have managed to write the jquery for this and now the issue has been resolved.
script language="JavaScript" src=".. /scripts/jquery-1.4.2.min.js" /script
$(document).ready(function()
{
Your code here…..
} var arr = $('input[type="radio"]'), last = arr[arr.length - 1],ref = radios[radios.length - 1];
$(last).attr('id',ref.id);
$(last).val(ref.value);
$(last).next().html('No').parent().attr('title','No');
}); /script
NOTE: The User and the Admin forms are the customized one from the New and Edit form.
Oh, perhaps we have a bug in our script,
Glad to see you resolved it - thanks for posting your fix!
Hi Nice post Thanks buddy it's help me a lot
nice blog thanks buddy
Hello Shai,
I was looking for how to enable the "Gender" in the user properties so then he can have a choice.
Then I see that you have enable it ! How have you done that?! I'm stuck for this "feature".
Hello,
how do you enable the gender choice in Sharepoint 2010 ?
I'm looking for this property for the user profile page ! But I dont found it.
Hi Thomas,
This example is reffering to any list where you manually add a radio button choice field.
It is just an example, not something from the user profile.
If you do have a question about the user profile feel free to email me and I'll try to help.
Post a Comment