locked
SharePoint Radio choice columns? RRS feed

  • Question

  • We have a radio control having 6 options in sharepoint. All radio are going to display in 1 column.

    Can we split three three choices in 2 columns?

    Tuesday, March 20, 2012 2:39 PM

Answers

  •  

    Hi pauljustin,

    You can achieve it by javascript.  Here is the sample code.

    /* Wrap choice-field in multiple columns

    * ----------------------------------------------------

    * Author: Alexander Bautz

    * alexander.bautz@gmail.com

    * Version: 1.2

    * LastMod: 08.10.2009

    * ----------------------------------------------------

    * Must include reference to jQuery

    * ----------------------------------------------------

    Use:

      Explained:

      wrapChoiceField("FieldInternalName of your field",number of columns to wrap it into);

      Example:

      wrapChoiceField("MyChoiceField",4);

    * ----------------------------------------------------

    */

    // Standard list

    var tdClassToFind = '.ms-formbody';

    // Is it a survey?

    if($("td.ms-formbodysurvey").length>0){

                tdClassToFind = '.ms-formbodysurvey';

    }

    fields = init_fields();

    function wrapChoiceField(FieldInternalName,cols){

    // Is there a field with this FieldInternalName? - if not exit the function

    if(fields[FieldInternalName]==undefined)return;

    // Find the number of choices

    var rowsTotal = $(fields[FieldInternalName]).find('.ms-RadioText').length;

    // Column width

    var colWidth = Math.round(100/cols);

    // Wrappings for the new table

    var preWrap = "<table width='100%' cellpadding='0' cellspacing='0'><tr id='SkipThisTR'>";

    var postWrap = "</tr></table>";

    var mid = '';

    // Build the columns in the new table

    for(i=0;i<cols;i++){

     mid += "<td valign='top'><table width='" + colWidth + "%' id='" + FieldInternalName + "ChoicelistHolderT" + i + "' cellpadding='0' cellspacing='0'></table></td>";

    }

    // Insert new table with placeholders for the new columns of choices

    $(fields[FieldInternalName]).find(tdClassToFind).prepend(preWrap + mid + postWrap);

    // "Counters" to help placing the choices in the appropriate column

    var colNr = 0;

    var rowsPrColumn = Math.ceil(rowsTotal/cols);

    var count = rowsPrColumn

    // Loop trough all the choices and place them in their respective column

    $(fields[FieldInternalName]).find(tdClassToFind + " tr:not('#SkipThisTR')").each(function(i){

    if(i==count){

    count = count + rowsPrColumn;

    colNr = colNr + 1;

    }

    // Prevent the text from wrapping

    $(this).find('td').attr('style','white-space:nowrap');

    // Move the choice to its new position

    $(this).appendTo("#" + FieldInternalName + "ChoicelistHolderT" + colNr);

    });

    }

    function init_fields(){

      var res = {};

      $("td" + tdClassToFind).each(function(){

      if($(this).html().indexOf('FieldInternalName="')<0) return;

      var start = $(this).html().indexOf('FieldInternalName="')+19;

      var stopp = $(this).html().indexOf('FieldType="')-7;

      var nm = $(this).html().substring(start,stopp);

      res[nm] = this.parentNode;

      });

      return res;

    }

    The more details please refer to the following link.

    http://sharepointjavascript.wordpress.com/2009/08/19/wrap-choice-field-in-multiple-columns/

    Thanks,

    Jack
    Wednesday, March 21, 2012 8:46 AM
    Moderator