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

New ASP.NET GridLookup Control (coming in v2010 vol 2)

ASP.NET GridLookup Control

Check out the new ASP.NET GridLookup control that’s coming out in the next major release of DXperience v2010 vol 2. The new control is called the ASPxGridLookup.

The ASPxGridLookup editor combines the functionality of the ASPxDropDownEdit and ASPxGridView controls to allow end-users to easily select values from a dropdown grid containing lookup items.

The ASPxGridView control is seamlessly embedded into the editor's dropdown window, providing the editor with a powerful customizable data-processing and data-representation functionality.

In fact, this control addresses the follow customer suggestions with one excellent new control:

S19281 ASPxCheckComboBox Add a new editor with multi-select
S19816 ASPxComboBox Provide support for using the XpoDataSource, LinqServerModeDataSource working in server mode as the editor's data source
CS62920 ASPxComboBox Ability to customize the dropdown rows using templates
S30288 ASPxListBox/ASPxComboBox    Add the ability to sort data

Background

Several iterations ago, we had already created the ASPxDropDownEdit control. You, our customers, were able to use the ASPxDropDownEdit control to nest the ASPxGridView (or another control) in the ASPxDropDownEdit's drop down template. However, this approach requires a lot of additional code to:

  • synchronize size of the grid and the dropdown area
  • implement interaction between selection in the grid and text in the ASPxDropDownEdit's input

To implement the filtering functionality was a major task and you were left without the functionality that you needed. Which is why the ASPxDropDownEdit could not be used for the suggestions requested above.

New ASP.NET GridLookup Is Versatile

The ASPxGridLookup solves all the suggestions and requirements mentioned above by providing a full new controls that supports the same great ASP.NET features as our other ASP.NET controls: Themes, Cross-Browser compatibility, Client-side events and functionality, and more!

The ASPxGridLookup contains an instance of the ASPxGridView in it's dropdown area. And the ASPxGridLookup gives you all the advantages of the ASPxGridView, like: MultiSelect, ServerMode, Templates, Sorting, Grouping and so on.

Selection modes

One of the major data-processing features adopted from the ASPxGridView is allowing your end-users to select multiple list items within the dropdown grid. The selection behavior is controlled by the editor's SelectionMode property that can be set to Single (only one item can be selected within the editor) or Multiple (multiple items can be selected within the editor) value:

Grid Lookup Multi-Selection
The ASPxGridLookup supports single and multiple selection through the SelectionMode property. Your end-users can select items by clicking check boxes within the dropdown grid or by entering product names separated with a semicolon into the editor's edit box.

The ASPxGridLookup also supports interaction between the text input and the grid's selection. Therefore, when a row is selected, its text goes to the ASPxGridLookup's input automatically.

And in both selection modes the row text creates and applies the TextFormatString to the row values. When SelectionMode=Multiple, the text of many selected rows gets joined in the input using a special separator from the MultiTextSeparator property.

When used together, all these features provide end-users with easy-to-use capabilities of searching and selecting the required data.

Filtering With Server Mode

The ASPxGridLookup supports the grid's server mode functionality allowing the editor to efficiently work with large data sources by loading data in small portions, on demand. To work in server mode, the ASPxGridLookup editor should be bound to a data source of the XpoDataSource or LinqServerModeDataSource type. For example, here the ASPxGridLookup is filtering against a 20,000 record database table:

Grid Lookup ServerMode
In the demo above, the ASPxGridLookup's incremental filtering works in the "StartsWith" mode (due to the IncrementalFilteringMode property setting) and the "FirstName LastName (Phone)" format is used to enter search strings and to represent the selected item's value within the edit box (due to the TextFormatString property setting).

The ASPxGridLookup provides filtering for it’s built-in ASPxGridView rows using the following modes:

  • Contains - to satisfy filtration, the row must contain all the typed words anywhere in its fields (only fields are indicated in the MultiTextSeparator). The order of words does not matter.
  • StartsWith - row satisfies the filtration, only if the row text begins with filter. This mode provides the autocomplete feature.
  • None (this is a default value)

Only the row field that is mentioned in TextFormatString property will participate in the filtering.

Hosting the ASPxGridView internally (inside the dropdown window to display list items), the ASPxGridLookup editor gives you the capability to use a powerful data-processing functionality provided by the grid control.

Templates

The ASPxGridLookup control exposes the embedded ASPxGridView's powerful data representation functionality including support for templates. So, the ASPxGridLookup provides you with the capability to define templates for different elements of the built-in grid (such as data rows, data cells, etc):
Grid Lookup ItemTemplate

The image above shows how the layout of the editor's list items can be modified by creating a template for the dropdown grid's data rows via the Templates.DataRow property.

DropDown Sized Automatically

The ASPxGridLookup automatically adjusts its dropdown size depending on the ASPxGridView size.

Included In DXperience v2010 vol 2

The ASP.NET GridLookup control, ASPxGridLookup, is part of the DXperience v2010 volume 2 release.

The new ASPxGridLookup is a fantastic control that combines the best of several ASP.NET controls to meet your requirements. I’m excited by the demos I’ve seen on this control. If you’re a DXperience Subscription customer, you’ll have access to the DXperience v2010 volume 2 beta in the coming weeks.

Are you looking forward the ASPxGridLookup control? Drop me a line below with your thoughts. Thanks!

DXperience? What's That?

DXperience is the .NET developer's secret weapon. 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. Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

Follow MehulHarry on Twitter

Published Aug 27 2010, 12:15 PM by
Bookmark and Share

Comments

Khalid Hazmi

Very interesting.

Dose it support Right-to-Left mode?

Thank you.

August 27, 2010 7:04 PM

daniel weisel

This is PERFECT!!! Exactly what my customers need!

Question: Will it be possible to implement this "out-of-the-box" with XAF?

Thanks,  :-)

Daniel.

August 28, 2010 1:42 PM

Serge S (DevExpress)

Hi Khalid,

Thank you for your interest in the ASPxGridLookup!

We are going to implement Right-to-Left support in the 10.2 release for all our ASP.NET controls. The ASPxGridLookup is included.

August 30, 2010 7:25 AM

Serge S (DevExpress)

Hi Daniel,

Thank you for your appreciation!

For now, the XAF has implemented the grid lookup's functionality by other controls. We will consider nesting the ASPxGridLookup into the XAF in the future.

August 30, 2010 7:26 AM

Angelo Bevilacqua

This is great !

Any idea when a vertical grid will be available for ASP.NET ?

August 31, 2010 2:18 PM

Serge (DevExpress Support)

Angelo: We have the corresponding item on our wish list (www.devexpress.com/issue=AS14110).  However, it is not scheduled for the near future.

October 26, 2010 2:22 PM

James Birnie

Hi Mehul

This sounds good.  Will you be able to multi-select using the existing header filter option also aka PivotGrid style?

October 27, 2010 8:15 PM

Mehul Harry (DevExpress)

Thanks James,

Yes, you can multi-select the check boxes.

October 27, 2010 11:37 PM

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