r.a.d.controls = 13 + 5: the math behind (Part III)

Today my meetings ended up earlier than I expected and this freed up some time to go over r.a.d.toolbar and r.a.d.combobox 2.0.

r.a.d.toolbar 1.0
Another great new control that we will be releasing in Q4 is r.a.d.toolbar. Unlike r.a.d.calendar it’s more or less feature-complete and will not undergo much evolution. r.a.d.toolbar will be by far the richest toolbar control for ASP.NET. Integrated with r.a.d.dock it will give you the versatility of the winforms toolbar with all the cool options such as re-ordering, floating toolbars, pinned toolbars, keyboard shortcuts, flexible databinding and a whole lot more.

r.a.d.combobox 2.0
In the last few months we received very valuable feedback from customers and it’s great to see everything they requested is available in v 2.0. I will briefly go over the most important features and include some screenshots to make things a bit more visual.

1. Support for multiple columns
Support for multiple columns. Developers can now define any table structure and it will be applied to all combobox items. The key benefit here compared to competing products is that this is achieved using templates. Table structures can be easily customized and modified on the go, without the need to recompile / code anything. All popular controls with similar functionality use complex API with numerous Cell, Row, Column, Collections, etc classes to achieve the same.

ScreenShot (3 columns – Company Name, City, Title, circled in red)

How is this achieved – just define the template in the <ItemTemplate> template:

<radcb:radcombobox runat="server" id="combo1">
    ...
    <itemtemplate>
        <table style="width:415px">
            <tr>
                <td style="width:125px; text-align: left;">
                    <%# DataBinder.Eval(Container.DataItem, "CompanyName") %>
                </td>
                <td style="width:125px; text-align: left;">
                    <%# DataBinder.Eval(Container.DataItem, "City") %>
                </td>
                <td style="width:125px; text-align: left;">
                    <%# DataBinder.Eval(Container.DataItem, "ContactTitle") %>
                </td>
            </tr>
        </table>
    </itemtemplate> 
    ...   
</radcb:radcombobox>

Multi-column mode supports all advanced AJAX features of the combo – load on demand, auto-complete, etc. Items loaded on demand are automatically formatted using the ItemTemplate as well.

2. Headers

The header is especially useful in multi-column mode (though it can be used in any other combo mode as well). You can use the header to assign column titles for each combo column. The header does not scroll when items go up/down and is always visible – end-users can easily associate column data to its respective column title in the header. Headers are also defined using templates and you can have any content there – even images (the help icon on the right in this particular case)

How this is achieved – just define the template in the <HeaderTemplate> template:

<radcb:radcombobox runat="server" id="combo1">
     ...
     <headertemplate>
        <table style="width:415px">
            <tr>
                <td style="width:125px; font-name: Tahoma; font-weight: bold; font-size: 9pt;">
                    Company Name
                </td>
                <td style="width:125px; font-name: Tahoma; font-weight: bold; font-size: 9pt;">
                    City
                </td>
                <td style="width:125px; font-name: Tahoma; font-weight: bold; font-size: 9pt;">
                    Title
                </td>
                <td style="width:40px;" align="right">     
                    <img src="img/help.gif"/>             </td>
            </tr>
        </table>        
    </headertemplate>
    ...
</radcb:radcombobox>

3. Enhanced end-users restriction policies

As of v 2.0 you will be able to control whether end-users can enter text that is not present in any of the combobox items. This is controlled by the AllowCustomText property – set it to true (default) to allow any text or false to restrict the text only to texts matching combobox items.

In the screenshot below, if AllowCustomText is set to false, end-users can only press “i” (to match “carine”) or “l” (to match “carlos”). The benefit is less UI hassles for the end-users and less validation hassles for the developer.

4. Expand Effects

We introduced some very cool effects that were already available in r.a.d.rotator and r.a.d.dock (Caution: the stuff works only in IE). Users can now choose between 17 different expand effect animations – they will be applied on the combobox dropdown on opening. For the purpose you can use the ExpandEffect property of the combobox (“None” by default). The benefit here - enhanced visual appeal.

Well, that was a really long post but I hope it was worth it and that it has given readers some valuable information what they should expect in the upcoming release.

The next and final post from the series will cover the 3 new products that we had not disclosed yet: r.a.d.input, r.a.d.window and r.a.d.upload.