Skip to main content
Kinetic Community

Checkbox in Columns - Using jQuery

 
Import Files
Service Item CheckboxinColumns.zip
KURL Checkbox in Columns.rb
This Service Item uses jQuery along with JavaScript to put Checkbox Elements into multiple columns.

Description

If you have a situation where you have several values in your Checkbox list that Checkbox can start to start to look a little ugly.  For example you have a Checkbox which contains all 32 NHL Teams.  If you configure the Question to have a Horizontal Justification:

Question Justification Horizontal.png

Then the question will appear like:

NHL Teams - Horizontal.png

As this isn't a very user friendly way to display the Question you can change the Justification of the Question to be Vertical:

Question Justification Vertical.png

Now when you view this Question it will be better:

NHL Teams - Vertical.png

In this situation the Vertical Justification is better however, this Question will consume a lot of real estate on your Service Item.  So what else can we do to make our large Checkbox Question more appealing to our end users?

The answer is that we can use jQuery along with some JavaScript to put the Checkox Values into multiple Columns:

To accomplish this I have built and attached a Service Item to show you what I did.  This Service Item contains two Checkbox questions.  The first is called NHL Teams and has each of the 32 teams.  The second question is called NFC North and has each of the 4 teams.  The NFC North Question was added in order to show you how this function will handle Questions with less Checkbox values.

There is one Event which runs on the Page Load and calls a custom function:

The Custom Code Syntax is below:

columnizeCheckboxes('NHL Teams');

columnizeCheckboxes('NFC North');

This syntax is calling the columnizeCheckboxes function which is defined in the CustomHeaderContent.  This function only requires the Menu Label of the Question.  In this situation I am calling the function and passing it the NHL Teams question and then calling it again passing it the NFC North question.

The columnizeCheckboxes function has been written to automatically determine the number of Columns and Rows based on your specific question.  Actually it reviews the Checkbox values to determine the maximum length of your values, the width of the total space available to the Question, and then calculates the number of Columns and Rows.  The syntax is below:

<script type='text/javascript'>
// Assemble multiple checkboxes in an answer evenly in columns.
// Requires jQuery to be loaded
function columnizeCheckboxes(labelName) {
    //loop through the input element of the question to find the largest one.
    var widthArray = [];
    $(".questionAnswer[label='"+labelName+"'] .answerCheckbox").each(function( index ) {
      //get the width
      widthArray.push($(this).width());
      //Append css to the elements while we are looping over them
      $(this).css('float', 'left')
        .css('width', '100%');
    });
    //Sort the array to order by size, then get first element (largest) in the array
    var maxInputWidth = widthArray.sort(function(a,b){return b - a})[0];
    
    //Get the width of total space available to the input elements
    var questionAnswerWidth = $(".questionAnswer[label='"+labelName+"']").width();
    
    //determine the number of columns to create, width of columns and checkboxes per column
    var numOfColumns = Math.floor(questionAnswerWidth / maxInputWidth);
    if (numOfColumns>widthArray.length){
        numOfColumns = widthArray.length;
    }
    var percentWidth = 100/numOfColumns+"%";
    var checkboxesPerColumn = Math.ceil(widthArray.length / numOfColumns);

    // Create a <div> string to contain the checkboxes.
    var wrapperDiv = $('<div/>').css('width',percentWidth).css('float','left')
    
    //Iterate throught the inputs in chunks and wrap the chunks in the div created above
    var beginSlice = 0;
    var endSlice = checkboxesPerColumn;
    for (var i = 0; i < numOfColumns; i++) {
        $(".questionAnswer[label='"+labelName+"'] .answerCheckbox").slice(beginSlice,endSlice).wrapAll(wrapperDiv);
        beginSlice = endSlice;
        endSlice += checkboxesPerColumn;
    }    
}
</script>

By using this code the Question will display as shown below:

One final note is that this Service Item is currently configured to use the the following Display Page (JSP):

/themes/kd_klean/packages/base/display.jsp

If your Display Page (JSP) is not configured to use jQuery then this solution will not work in your environment.  If you are using one of our Bundles then your environment is configured to use jQuery and life is GOOD!

 

Dependencies

  • jQuery