Multi column List, combos, and other selectable controls

Well I found one thing I would like to be able to implement, but I do not know how. Something like for instance Mimic of multicolumn Select control in Access.

what do I mean...

I need to be able to display some options in lists, selects, combos or trees

like

OPTION 1 - |text|decstription
OPTION 2 - |text|decstription
OPTION 3 - |text|decstription

I thing it coulg be easily made by

<SPAN>text</SPAN><SPAN>description</SPAN>

But I am not sure how to put it into the ITEM of the control... Can U please give me a little hi(n)t to give me direction how to patch the item template to manage multicolumn controls ?

Thanx

You have to add a span element after 'box/text' and link this span to a new 'description' property.

<style>

#myList .aw-item-text {
    display: -moz-inline-box;
    width: 50px;
}

</style>
<script>

    // new span element
    var span = new AW.HTML.SPAN;
    span.setClass("item", "description");
    span.setContent("html", function(){
        return this.getItemProperty("description");
    });

    // modified template
    var itemTemplate = new AW.Templates.ImageText;
    itemTemplate.setContent("box/description", span);

    // list control
    var obj = new AW.UI.List;
    obj.setId("myList");

    // new 'description' property
    obj.defineItemProperty("description");

    // assign modified item template
    obj.setItemTemplate(itemTemplate);

    // assign data
    obj.setItemText(["Home", "Favorites", "Font size", "Search"]);
    obj.setItemDescription(["Desc 1", "Desc 2", "Desc 3", "Desc 4"]);
    obj.setItemCount(4);

    // write object
    document.write(obj);

</script>
 

Really thanx a lot Alex...

Seems to be nice and work of course :D, but... one more question...

The Span element does not support the Border property, so how vould I make the separator between the columns? Should I implement another span with colored background and width of 1 or 2 pts or is there better way ;-) ?