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

ASP.NET Team Blog
27 August 2010

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

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.