The GridLookup editor combines the functionality of the DevExpress DropDownEdit and GridView extensions for ASP.NET MVC to allow end-users to easily select records from a drop-down grid containing lookup items. The GridView extension is seamlessly embedded into the editor's drop-down window, providing the editor with a powerful customizable data-processing and data-representation functionality. The GridLookup emulates a combo box that allows end-users to select multiple items within its drop-down list in the demo.
One of the major data-processing features adopted from the GridView is the capability to allow end-users to select multiple list items within the drop-down grid. The selection behavior is controlled by the editor's Properties.SelectionMode property, which can be set to Single (only one item can be selected within the editor) or Multiple (multiple items can be selected within the editor). This demo illustrates how multi-item selection can be implemented easily within GridLookup using the functionality of the built-in grid.
In this demo, the Properties.SelectionMode property is set to Multiple. End-users can select items by clicking check boxes within the drop-down grid, or by entering tag names separated with a comma into the editor's edit box.
To display check boxes within a drop-down grid, a specific command column is created and its CommandColumn.ShowSelectCheckbox property is set to true. In addition, end-users are allowed to filter items within the drop-down grid. This feature is enabled by setting the editor's GridViewProperties.Settings.ShowFilterRow property to true.
Tag names can be entered into the editor's edit box directly. This functionality is controlled by the Properties.TextFormatString property, which defines the column ("TagName") whose values should be entered and represented within the edit box. By default, a semicolon character (;) is used as the value separator. List items (grid rows) that correspond to the tag names entered are automatically selected after the value is submitted (for instance, by pressing the ENTER key).
When used together, all of these features provide end-users with easy-to-use features for searching and selecting the required data.
See Also:
Local Copy of this Demo To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Component Installer. |
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher).
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxGridViewDemos |