|
1 | | -<!-- default badges list --> |
2 | | - |
3 | | -[](https://supportcenter.devexpress.com/ticket/details/E1332) |
4 | | -[](https://docs.devexpress.com/GeneralInformation/403183) |
5 | | -<!-- default badges end --> |
6 | | -<!-- default file list --> |
7 | | -*Files to look at*: |
8 | | - |
9 | | -* [Default.aspx](./CS/WebSite/Default.aspx) (VB: [Default.aspx](./VB/WebSite/Default.aspx)) |
10 | | -* [Default.aspx.cs](./CS/WebSite/Default.aspx.cs) (VB: [Default.aspx.vb](./VB/WebSite/Default.aspx.vb)) |
11 | | -<!-- default file list end --> |
12 | | -# How to add items to a multi-column ASPxComboBox on the client side |
| 1 | +# Combo Box for ASP.NET Web Forms - How to add items to an editor on the client in multi-column mode |
13 | 2 | <!-- run online --> |
14 | 3 | **[[Run Online]](https://codecentral.devexpress.com/e1332/)** |
15 | 4 | <!-- run online end --> |
16 | 5 |
|
| 6 | +This example demonstrates how to create a multi-column combo box editor and populate it with items on the client. |
| 7 | + |
| 8 | + |
| 9 | + |
| 10 | +## Overview |
| 11 | + |
| 12 | +Create a [combo box](https://docs.devexpress.com/AspNet/DevExpress.Web.ASPxComboBox#multi-column-mode) editor and populate it with columns. |
17 | 13 |
|
18 | | -<p>This example demonstrates how ASPxComboBox items can be manipulated on the client side. The <strong>AddItem</strong> method is used to add a new item, which contains the <i>First Name</i> and <i>Last Name</i> text editor's information, to the end of the ASPxComboBox items collection. The client-side <a href="http://documentation.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientComboBox_ClearItemstopic"><u>ClearItems</u></a> method is used to delete all items from the ASPxComboBox items collection.</p> |
| 14 | +```aspx |
| 15 | +<dx:ASPxComboBox ID="ASPxComboBox1" runat="server" |
| 16 | + ClientInstanceName="comboBox" ValueType="System.String" Width="350px" TextFormatString="{0} {1}"> |
| 17 | + <Columns> |
| 18 | + <dx:ListBoxColumn Caption="First Name" Name="First Name" ToolTip="First Name" /> |
| 19 | + <dx:ListBoxColumn Caption="Last Name" Name="Last Name" ToolTip="Last Name" /> |
| 20 | + </Columns> |
| 21 | +</dx:ASPxComboBox> |
| 22 | +``` |
19 | 23 |
|
20 | | -<br/> |
| 24 | +Add a text editor and a button to the page. In the button's client-side `Click` event handler, call the combo box editor's [AddItems](https://docs.devexpress.com/AspNet/js-ASPxClientComboBox.AddItem(text)) method to add an item to the editor's item collection based on the text editor's value. To remove all items from the collection, call the editor's [ClearItems](https://docs.devexpress.com/AspNet/js-ASPxClientComboBox.ClearItems) method. |
| 25 | + |
| 26 | +```aspx |
| 27 | +<dx:ASPxTextBox ID="ASPxTextBox1" runat="server" ClientInstanceName="firstName" Width="170px" /> |
| 28 | +<dx:ASPxTextBox ID="ASPxTextBox2" runat="server" ClientInstanceName="lastName" Width="170px" /> |
| 29 | +<dx:ASPxButton ID="ASPxButton2" runat="server" Text="Add " AutoPostBack="False"> |
| 30 | + <ClientSideEvents Click="function(s, e) { |
| 31 | + var fName=firstName.GetValue(); |
| 32 | + var lName=lastName.GetValue(); |
| 33 | + firstName.SetText(''); |
| 34 | + lastName.SetText(''); |
| 35 | + var FullName = new Array(fName,lName); |
| 36 | + comboBox.AddItem(FullName); |
| 37 | + }" /> |
| 38 | +</dx:ASPxButton> |
| 39 | +<dx:ASPxButton ID="ASPxButton1" runat="server" Text="Clear Items" AutoPostBack="False"> |
| 40 | + <ClientSideEvents Click="function(s, e) { |
| 41 | + comboBox.ClearItems(); |
| 42 | + }" /> |
| 43 | +</dx:ASPxButton> |
| 44 | +``` |
| 45 | + |
| 46 | +## Files to Review |
| 47 | + |
| 48 | +* [Default.aspx](./CS/WebSite/Default.aspx) (VB: [Default.aspx](./VB/WebSite/Default.aspx)) |
21 | 49 |
|
| 50 | +## Documentation |
22 | 51 |
|
| 52 | +* [Multi-Column Mode](https://docs.devexpress.com/AspNet/DevExpress.Web.ASPxComboBox#multi-column-mode) |
0 commit comments