RadComboBox for ASP.NET

Why choosing Telerik RadComboBox Send comments on this topic.

Glossary Item Box

Introduction

This white paper compares Telerik RadComboBox v2.6.x to the Microsoft’s ASP dropdownlist.

While the MS ASP dropdownlist is a powerful navigation control it has some limitations such as slow performance (missing Load-On-Demand mode) and poor Client-side API.

Telerik RadComboBox features an extremely rich client and server-side API allowing you to achieve the complex behavior found in desktop applications. Added to this is the skinning support that can nicely blend Telerik RadComboBox into the interface of your web-site.

The product introduces a number of advanced features like asynchronous callbacks, autocomplete, validation, overlaying, skinning, screen boundaries detection, etc.

Telerik RadComboBox is a fully-managed ASP.NET component written in C#. It supports all major browsers: Internet Explorer 5.0+(PC), Netscape 6.0+(PC and Mac), Mozilla 0.6+(PC and Mac), Firefox 0.9+(PC and Mac), Opera 7+(PC, without autocomplete option), Safari 1.2+(Mac).

Client-side API

Telerik RadComboBox provides a flexible client-side API. You can easily interact with the combobox in the browser using the combobox client-side object.

For a complete list of the Client side methods and properties, please, review the “RadComboBox Client-side” section.

Below are listed the client-side events of RadComboBox:

  • OnClientSelectedIndexChanging
  • OnClientSelectedIndexChanged
  • OnclientDropDownClosing
  • OnClientDropDownOpening
  • OnClientItemsRequesting
  • OnClientItemsRequested
  • OnClientKeyPressing
  • OnClientBlur
  • OnClientFocus

Combining the variety of client-side methods and the extended client-side object model (properties and methods) you can achieve even the most complicated task you are up to and avoid unnecessary postbacks.

ASP.NET dropdownlist does not expose any client-side events. It is only developed to be a server control.

RadComboBox also provides an extremely rich and powerful server-side API that allows you to add, remove, edit or load items on demand.

Server-side API

For a complete list of the Server side methods and properties, please, review the “RadComboBox Server-side” section.

Below are listed some of the most powerful features RadComboBox supports.  

Server Events

  • SelectedIndexChanged
  • ItemsRequested
  • ItemDataBound

Load On Demand

One of the most powerful features of Telerik RadComboBox is "Loading Items On Demand".

LoadOnDemand is a very useful feature when you have comboboxes with large number of items. It makes the combobox not to load all items at once, but load only the requested items and thus saving the CPU time.

LoadOnDemand is not actually a built-in feature or a property of Telerik RadComboBox, but rather a model for operating the combobox to support huge number of nodes. 

When loading items on demandm the items are loaded via callback and only on the client side. Therefore, no server-side logic canbe applied to these items.

For more details, please check the Load On Demand article.

The standard ASP.NET dropdownlist does not provide such a feature. 

DataBind

Telerik RadComboBox fully supports binding to:

    • Collections
    • DataTables
    • DataSets

Simply make sure you populate your collection from your data-source and set the DataSource property of Telerik RadComboBox to the instance of the the collection and call the DataBind() method. In addition, you can specify the DataTextField and DataValueField of the data-source using the respective Telerik RadComboBox properties.

In addition, Telerik RadComboBox supports binding to declarative data sources. Data source controls are not rendered, but instead represent a particular back-end data store. ASP.NET 2.0 includes the following server controls out-of-the-box: SqlDataSource, ObjectDataSource, AccessDataSource, SiteMapSource, XmlDataSource.

Currently Telerik RadComboBox supports the following data source controls:

    • AccessDataSource
    • SqlDataSource
    • DataSetDataSource
    • ObjectDataSource

For more details, please check the "Data binding" section.

Visual Appearance

RadComboBox uses an advanced Skinning mechanism to build its look and feel. All skins reside under the RadControls/Combobox/Skins folder. Each Skin uses images and a Style.css class defining all css classes applied to the items.

Another easy way to apply css styles to the items is using the CssClass property of the RadComboBoxItem class. You can also use the following properties of the RadComboBoxItem class:

The properties described below build the font that is applied to the combobox items:

  • Font-Bold
  • Font-Italic
  • Font-Size
  • Font-Names
  • Font-Overline
  • Font-Strikeout
  • FontUnderline
  • ForeColor
  • BackColor
  • BorderColor
  • BorderStyle
  • BorderWidth

The standard ASP.NET dropdownlist does not provide such properties for building and applying css styles to the items.

For complete details, please check the “Controlling the visual appearance” section.

<_o3a_p>Functionality

Templates

Telerik RadComboBox fully supports templates. You can embed any content inside a Telerik RadComboBox template, including HTML markup and ASP.NET server controls, as well as other third party controls (and actually any control from the Telerik RadControls for ASP.NET suite as well).

The syntax is very similar to what you are used to from the default DataGrid control. If you do not specify an ItemTemplate, all Telerik RadComboBox items are rendered using their Text property as plain text. If you specify <ItemTemplate>, then the respective template is used for rendering.

The standard ASP.NET dropdownlist does not support templates.

For more details, please review the "Templates" section.

Custom Attributes

It is not always possible to provide all properties that might be needed for certain type of scenarios. That is why combobox items (RadComboBoxItem) provide a special collection called Attributes. You can store any number of attributes in the collection as name/value pair.

For more details, please check the following article:
Custom Attributes Overview

Screen Boundaries Detection

The drop-down now expands to the opposite direction when the screen boundaries are to be crossed.

Offsetting the drop-down area

The OffsetX and OffsetY properties have been implemented in Telerik RadComboBox v2.5.

They allow you to indicate the horizontal and vertical offset of the dropdown.

The standard ASP.NET dropdownlist does not provide such properties.

KeyBoard Support

Telerik RadComboBox provides support for the two relevant aspects of keyboard support:

    • Access Keys
    • Arrowkey Navigation and Key Commands

For complete details, please check the following article:
KeyBoard Support

ToolTips

Telerik RadComboBox supports item tooltips which enables special accessibility readers like JAWS to pronounce the tooltip of the highlighted item. To set a ToolTip property assign it a string value.

For more details, please check the following article:
Tooltips

Overlay

Telerik RadComboBox can display its drop-down over IE windowed objects, such as HTML select boxes, Flash movies, other 3rd party windows components. This is a built-in feature and it doesn't need to be set explicitly through a property.

For more details, please see live example at:
Overlay

AutoComplete

Telerik RadComboBox supports the functionality to autocomplete the current text of the combobox to the first matching item in the Items collection of the combobox and highlight the difference. What you have to do is set the MarkFirstMatch property of the combo to true.

For more details, please check the following article
Autocmplete

Advanced Autocomplete

Telerik RadComboBox supports autocomplete of multiple items using any delimiter - you can set the AutoCompleteSeparator property to any delimiter character (e.g. ";", ",", etc).

For more details, please check the following article:
Advanced Autocomplete

Right-To-Left Support

Telerik RadComboBox provides support for Right-to-Left languages. Simply make sure you have selected the RTL skin.

RTL support for other skins is also possible by modifying the CSS styles in the Style.css skin file.
For more details, please, view the online example on Right-to-Left Support.

Design-time Support<_o3a_p>

Telerik RadComboBox has a rich design-time support, allowing you to add/remove/edit items and see the changes reflected immediately.    <_o3a_p>

For complete details, you can check the “Design-time Support” section.

Rendering

RadComboBox renders DIVs and thus saves HTML Output.

Example:

ASPX Copy Code
<rad:RadComboBox ID="RadComboBox1" runat="server" SkinsPath="~/RadControls/ComboBox/Skins" Width="150px">
   
<Items>
       
<rad:RadComboBoxItem runat="server" Text="RadComboBoxItem1" />
       
<rad:RadComboBoxItem runat="server" Text="RadComboBoxItem2" />
       
<rad:RadComboBoxItem runat="server" Text="RadComboBoxItem3" />
   
</Items>
</
rad:RadComboBox>

Rendered Output:

  Copy Code
<div id="RadComboBox1_wrapper" style="display:inline">
   
...
</div>

Support and Quarterly updates

Enjoy a full year of free MAJOR product updates and take advantage of the latest and greatest Telerik products.
Telerik has the most aggressive product roadmap and updates 4 times per year, see Product RoadMap

Conclusion

With ASP.NET 2.0, Microsoft includes a dropdownlist control in the box to construct dropdownlists for Web pages. The Telerik RadComboBox control is a more powerful version of this control that brings the full power of desktop comboboxes to your Web applications. In addition to a more flexible set of appearance options, Telerik RadComboBox offers greater power to the user and an advanced client-side and server-side API to avoid unnecessary postbacks and improve application speed.
When you are designing comboboxes, you will find that the Telerik RadComboBox  designer gives you true freedom. You can create a combobox that looks and behaves almost exactly like a standard Windows desktop application combobox.  There is also a client-side API that lets you run code in response to clicks and other combobox events without round trips to the server, as well as support for Atlas and Telerik RadAjax for superior performance.