Ajax ColumnListBoxExtender

This is the samples and documentation website for the Ajax ColumnListBoxExtender. This website is included in the full download of the control and published at http://ajaxcolumnlistbox.deap.nu

Project homepage

The project homepage can be found at http://ajaxcolumnlistbox.codeplex.com. There you can find the source code, downloads, give your feedback and more.

Samples and documentation

These samples describe how you can configure the ColumnListBoxExtender.

Sample 1

Single selection

Single selection is the default behavior.

<asp:ListBox runat="server" ID="lbSample1">/.../</asp:ListBox>
<cc1:ColumnListBoxExtender ID="colSample1" runat="server" TargetControlID="lbSample1" />

Sample 2

Multiselection

Set the SelectionMode property of the ListBox control to enable multiselecting. This supports selecting with shift and/or ctrl-keys as well as drag selecting.

<asp:ListBox runat="server" ID="lbSample2"
    SelectionMode="Multiple">/.../</asp:ListBox>
<cc1:ColumnListBoxExtender ID="colSample2" runat="server" TargetControlID="lbSample2" />

Sample 3

Setting the height

Set height by setting the Rows property of the ListBox control.

<asp:ListBox runat="server" ID="lbSample3" SelectionMode="Multiple"
    Rows="10">/.../</asp:ListBox>
<cc1:ColumnListBoxExtender ID="colSample3" runat="server" TargetControlID="lbSample3" />

Sample 4

Setting number of columns

Set the number of columns by setting the Columns property of the ColumnListBoxExtender control (2 is default).

<asp:ListBox runat="server" ID="lbSample4" Rows="10">/.../</asp:ListBox>
<cc1:ColumnListBoxExtender ID="colSample4" runat="server" TargetControlID="lbSample4"
    Columns="4" />

Sample 5

The Resizable property

The following two listboxes are placed within a div with a relative width of 60%. The second ColumnListBoxExtender has its Resizable property set to true. Change the width of the browser window to see the effect of this both in the first and second listbox. The downside of setting the Resizable property to true is that there will be a gap between the last column and the scrollbar.

Also, reload the page when the window is narrow, then watch how the non resizable listbox behaves when the window is resized to a wider width.

You should always set the Resizable property to true when the ListBox is placed within a container that has relative width, and never when it's not.


<div style="width:60%;margin:5px auto;">
    <asp:ListBox runat="server" ID="lbSample5a" Rows="10">/.../</asp:ListBox>
    <cc1:ColumnListBoxExtender ID="colSample5a" runat="server" TargetControlID="lbSample5a"
        Columns="4" />    
    <br />
    <asp:ListBox runat="server" ID="lbSample5b" Rows="10">/.../</asp:ListBox>
    <cc1:ColumnListBoxExtender ID="colSample5b" runat="server" TargetControlID="lbSample5b"
        Columns="4"
        Resizable="true" />        
</div>

Sample 6

Custom styling

The ColumnListBoxExtender renders a div structure to display all the options. The outer div is the one with the gray border and the right hand scroll. Let's call this the listboxDiv. Then there is one div per column and inside these there is one div per option, let's call these columnDivs and optionDivs.

The columnDivs has a class value of column and the optionDivs has a class value of option. By setting the CssClass property of the ColumnListBoxExtender you will set the class value of the listboxDiv. If your classname is "myClass" you can then style the columnDivs and optionDivs through the style rules .myClass .column and .myClass .option.

In addition to these class names every other column will also have a class value of column_even and every other option will have a class value of option_even, allowing you to create "alternating styling". Also, all selected options has a class value of option_selected.

If you set the CssClass property you should be aware of the following:

For each kind of div there are some styling properties that are closely related to the behavior and mandatory layout of the listbox. These are set inline and will be impossible for you to override in your own stylesheet:

<asp:ListBox runat="server" ID="lbSample6" Rows="10">/.../</asp:ListBox>
<cc1:ColumnListBoxExtender ID="colSample6" runat="server" TargetControlID="lbSample6"
    Columns="4" 
    CssClass="myClass" />
<style type="text/css">    
    .myClass
    {
        font-family:Trebuchet MS;
    }
    .myClass .option
    {
        border-right:solid 1px Black;
        border-bottom:solid 1px Black;
        padding:5px;
    }        
    .myClass .column_even
    {
        background-color:#CCCCCC;
    }    
    .myClass .option_selected
    {
        background-color:Red;
        color:White;
    }    
</style>

All samples

Test the selections

Click this button to output the selected options in the listboxes above.