Horizontal CheckBoxList

Jun 30, 2011 at 3:08 AM

Hi Frank,

How would I create a checkboxlist with 4 rows?

Thanks,

Serge

Coordinator
Jun 30, 2011 at 8:52 AM
Edited Jun 30, 2011 at 8:54 AM

If you would like to display your checkboxlist in a complex pattern of columns and rows, instead of using an item template you havce to use a single template for the whole checkboxlist.

This templatemust be typed with the type:  CheckBoxList<IEnumerable<TValue>, TChoiceItem, TValue, TDisplay>

Where TVAlue is the type you use for the "value" of each item (typically an int), TDisplay the type you use for displaying the label of each item, TChoiceItem the overall class that contain both TValue and TDisplay as properties.

Once you are in this template you can use two adequate markup while reading the items from the CheckBoxList. For instance to organize your items in a table where each row has just 2 items, and then further items are inserted in the subsequent row you can write something Like:

 

@Html.CheckBoxListFor(
                    m => m.Roles1,
                    ChoiceListHelper.Create(RegisterModel.AllRoles, 
                        m => m.Code, 
                        m => m.Name),
                        true,
                        template: "RolesTemplate")

 

Where "RolesTemplate" is the overall template. It can be a partial view like this:

 

@model MVCControlsToolkit.Controls.CheckBoxList<IEnumerable<int>, MVCNestedModels.Models.RoleInBlog, int, string>
@using  MVCNestedModels.Models
@using  MVCControlsToolkit.Core;
@using  MVCControlsToolkit.Controls;         


@{int itemsPerRow = 2;}
@{int i = 0; bool newRow = false;}
<table>
@while (i < Model.Items.Length)
{
    <tr>
    @{newRow = true;}
    @while (i < Model.Items.Length && (newRow || i % itemsPerRow != 0))
    {
        <td>@Html.CheckBoxFor(m => m.Items[i].Selected)</td><td>@Model.Items[i].Label</td> 
        i=i+1;
        newRow = false;
    }   
    </tr>
}
</table>

In a similar way you can implemt more complex arrangements.