ASP.NET WebForms & MVC: Token Box Control (What's new in 13.2)

03 December 2013

Check out the new DevExpress ASP.NET Token Box control that's part of the DevExpress 13.2 release:

The DevExpress ASP.NET Token Box (ASPxTokenBox) editor provides your end-users the ability to auto-complete values from a predefined list. An end-user can select a value from the dropdown window list or type it manually:

What's a Token?

If you look up the definition of Token on google then you'll see many definitions:

However, in context to the TokenBox control, I prefer to think of a token as a symbol. Therefore, we display the selected item from dropdown with a colored box around it. This box now indicates to the user the choice they've selected from the dropdown. It's become the symbol of the words and numbers that represents the selected item. And the token box also contains an X mark at the right to allow the end-user to easily remove it the selected item. This visual cue is a different way to display selected items but I believe it gives the users a nice user interface when they can easily see their selected items.

You can see examples of the token box style input on popular websites like Gmail's To field:

And Facebook's messages:

And now, you can get this slick functionality and look in your ASP.NET web projects with the DevExpress ASP.NET TokenBox.

ASP.NET MVC & WebForms

This new data editor is available for both the ASP.NET WebForms and MVC platforms. These are both part of the DevExpress 13.2 release.

Features

The new Token Box control gives you many great features and themes, including:

  • DataBinding - You can databind the Token Box editor easily using a datasource on WebForms or Model Binding on ASP.NET MVC.

  • Themes - All the DevExpress themes are fully supported by this control.

  • AllowCustomTokens - allows you to control whether the end-user can create custom tokens or they must choose tokens from the dropdown list.

  • ShowDropDownOnFocus - controls the dropdown window visibility when the editor gets focus.

  • IncrementalFilteringMode - allows your filter the dropdown as items are typed into the window.

Getting Started Video

Watch the short ASP.NET Token Box Getting Started video below to see how easy and powerful this new control is.

ASP.NET WebForms:

ASP.NET MVC:

When only the best will do.

From interactive Desktop applications, to immersive Web and Mobile solutions, development tools built to meet your needs today and ensure your continued success tomorrow.

Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications.

Download a free and fully-functional version now: http://www.devexpress.com/Downloads/NET/

Tags
7 comment(s)
Bradley Uffner_1

I LOVE it!  We actually had to roll our own tag control in winforms to do exactly this.  It will be nice to be able ti replace it with something official.

3 December, 2013
richard morris

I also had to previously create a tagging control from scratch. , however I will gladly swap it for one supported by DX support :).

3 December, 2013
Norbert Kustra

Great feature! Is it also available in WinForms?

4 December, 2013
Hedi Guizani

Nice hope to see it soon in winforms

4 December, 2013
Mehul Harry (DevExpress)

Hi Norbert & Hedi,

I recommend that you track the following suggestion where the DevExpress WinForms is investigating the capability of implementing such a control:

Introduce a multi-line control that shows a list of tags with the AutoComplete feature

www.devexpress.com/.../S171933

Thanks.

4 December, 2013
Mehul Harry (DevExpress)

Norbert & Hedi,

There's a related WinForms example that can be used now: E4542 - How to create a control that shows a list of tags

devexpress.com/issue=E4542

Thanks.

4 December, 2013
Robbert Speet

Very nice and just what I need for a production project!

4 December, 2013

Please login or register to post comments.