Blogs

This Blog

Subscribe (RSS, Email)

Mehul Harry's DevExpress Blog

JavaScript, HTML 5, ASP.NET, DevExpress, ASP.NET MVC & WebForms, and News - Mehul Harry's DevExpress blog

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

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/

Published Dec 03 2013, 09:00 AM by
Filed under:
Bookmark and Share

Comments

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.

December 3, 2013 2:03 PM

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 :).

December 3, 2013 8:45 PM

Norbert Kustra

Great feature! Is it also available in WinForms?

December 4, 2013 1:44 AM

Hedi Guizani

Nice hope to see it soon in winforms

December 4, 2013 4:11 AM

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.

December 4, 2013 5:04 AM

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.

December 4, 2013 5:06 AM

Don Wibier

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

December 4, 2013 6:16 AM

About Mehul Harry (DevExpress)

Mehul Harry is an ASP.NET technical evangelist at Developer Express. You can reach him directly at mharry@DevExpress.com. You can also follow him on Twitter: http://twitter.com/mehulharry
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, Silverlight, ASP.NET, WinForms, HTML5 or Windows 8, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2014 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners