Skip to content

Commit 68e4e6e

Browse files
authored
update readme (#1)
* update description * Update Readme.md
1 parent 04cae77 commit 68e4e6e

File tree

2 files changed

+44
-14
lines changed

2 files changed

+44
-14
lines changed

Readme.md

Lines changed: 44 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,52 @@
1-
<!-- default badges list -->
2-
![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/128537651/13.1.4%2B)
3-
[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/E1332)
4-
[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](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
132
<!-- run online -->
143
**[[Run Online]](https://codecentral.devexpress.com/e1332/)**
154
<!-- run online end -->
165

6+
This example demonstrates how to create a multi-column combo box editor and populate it with items on the client.
7+
8+
![Add Item to Combo Box](addItems.gif)
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.
1713

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+
```
1923

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))
2149

50+
## Documentation
2251

52+
* [Multi-Column Mode](https://docs.devexpress.com/AspNet/DevExpress.Web.ASPxComboBox#multi-column-mode)

addItems.gif

42 KB
Loading

0 commit comments

Comments
 (0)