This demo illustrates the key features of the DevExpress MVC ComboBox - combining the functionality of a single-line text editor, button editor and dropdown list editor. Users can change the editor's value by selecting an item from the dropdown list or by entering new values into the editor's text box (Properties.DropDownStyle).
The MVC Combo Box can be populated manually (using Properties.Items) or generated dynamically via data binding (using BindList). To determine the selected item, you can use the editor's SelectedIndex property. The Properties.DisplayFormatString property can be used to specify the pattern used to format edit box display values when not focused.
The MVC Combo Box allows end-users to filter list items dynamically based upon text entered into the editor's text box on the client side (autocomplete filtering). Three filter modes are available - Contains, StartsWith and None (Properties.IncrementalFilteringMode).
MVC Combo Box items can be loaded from the server on demand (via callbacks) when the editor's callback routing logic is defined using the CallbackRouteValues property. For instance, list items that are not currently displayed within the editor's dropdown window can be dynamically loaded if an end-user scrolls the list. In this mode, the Properties.CallBackPageSize property defines the number of items to be obtained from the server each time it's required. This mode ensures that the first page loads faster - only a few items need to be loaded initially.
The MVC ComboBox Editor allows list data to be represented across multiple columns. Multi-column mode is available for editors that obtain items from a data source. An editor's column collection can be defined and customized through Properties.Columns. Each column within this collection must be bound to a data source field via the FieldName property. You can also define a column's header caption, width, visibility state and other settings via column properties. All advanced features of the Combo Box Editor, such as incremental filtering and loading items on demand via callbacks are fully supported in multi-column mode. The selected item is represented within the Combo Box Editor's edit box, using a value whose format is based upon Properties.TextFormatString.
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).
The source code files for this demo are installed (by default) in the following directory:
Open CS Solution
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxDataEditorsDemos