Custom Button Control

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 howa€¦

For example:

I want to use the field "Gender" with two choice options - male and female.

In MOSS this field would be vertical display, with the radio buttons and the choices on top of each other:

0  Male

0 Female

But I don't want to waste so much screen space. It would be much better to have a horizontal display, with the choices and their radio buttons next to each other like so:

0 Male  0 Female

With a little Javascript 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):

    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 = "

    var closeTable = "

    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 + "" + obj[removed] + "";

        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[removed] = html;

             html = openTable;

        }

        if (i == radios.length-2)

        {

            html = html + "" + obj[removed] + "";

            html = html + closeTable;

            var obj2 = obj;

            while (true)

            {

               if (obj2.tagName == "SPAN")

                   break;

               else

                   obj2 = obj2.parentElement;

            }      

            obj2[removed] = html;

        }

    }

That all - now we have our Male/Female options in the desired view layout!