[DevExpress]ASP.NET控件ASPxComboBox组合框小结(二)

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

6.绑定数据源

除了使用Items我们还可以绑定数据源方式设置List，不过这样的话，Items属性会被忽略。

 1         <dx:ASPxComboBox ID="cboTypeOfServ" runat="server" AutoPostBack="True" 
 2             OnSelectedIndexChanged="cboTypeOfServ_SelectedIndexChanged" 
 3             DataSourceID="ChartTypeData" ImageUrlField="icon" TextField="description" ValueField="name">
 4             <Items>
 5                 <dx:ListEditItem Text="大饼图" Value="Pie" ImageUrl="~/Images/pie.png"  />
 6                 <dx:ListEditItem Text="线性图" Value="Line" ImageUrl="~/Images/line.png" />
 7             </Items>                    
 8 
 9         </dx:ASPxComboBox>
10         
11         <asp:SqlDataSource ID="ChartTypeData" runat="server" 
12             ConnectionString="Data Source=115SERVER;Initial Catalog=SubMain;Persist Security Info=True;User ID=sa;Password=*****" 
13             ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Chart_Type]">
14         </asp:SqlDataSource>

数据库：

标签那里的<items>可以把它去掉。

通过ImageUrlField="icon" TextField="description" ValueField="name"分别设置了图片路径的字段，文本字段和值字段。

下拉列表可以显示多列，通过Columns属性设置：

可以隐藏某些列：

对于多列，默认选择时显示编辑框内容格式是;分割，类似:Pie;大饼图这样。

格式可以通过TextFormatString属性修改，如：

 1         <dx:ASPxComboBox ID="cboTypeOfServ" runat="server" AutoPostBack="True" 
 2             OnSelectedIndexChanged="cboTypeOfServ_SelectedIndexChanged" 
 3             DataSourceID="ChartTypeData" TextFormatString="#{2} {1} {{{0}}}">                   
 4             <Columns>
 5                 <dx:ListBoxColumn Caption="图表类型" FieldName="name" />
 6                 <dx:ListBoxColumn Caption="图表描述" FieldName="description" />
 7                 <dx:ListBoxColumn Caption="图标" FieldName="icon" Visible="false" />
 8                 <dx:ListBoxColumn Caption="排序ID" FieldName="order_id" Visible="true" />
 9             </Columns>
10         </dx:ASPxComboBox>
11         
12         <asp:SqlDataSource ID="ChartTypeData" runat="server" 
13             ConnectionString="Data Source=115SERVER;Initial Catalog=SubMain;Persist Security Info=True;User ID=sa;Password=*****" 
14             ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Chart_Type]">
15         </asp:SqlDataSource>

这里通过TextFormatString="#{2} {1} {{{0}}}"设置类似这样的格式：

#1 大饼图 {Pie}

 1         <dx:ASPxComboBox ID="cboTypeOfServ" runat="server" AutoPostBack="True" 
 2             OnSelectedIndexChanged="cboTypeOfServ_SelectedIndexChanged" 
 3             DataSourceID="ChartTypeData" TextFormatString="{1} {{{0}}}" ValueField="order_id" ValueType="System.Int32">                   
 4             <Columns>
 5                 <dx:ListBoxColumn Caption="图表类型" FieldName="name" />
 6                 <dx:ListBoxColumn Caption="图表描述" FieldName="description" />
 7                 <dx:ListBoxColumn Caption="图标" FieldName="icon" Visible="false" />
 8                 <dx:ListBoxColumn Caption="排序ID" FieldName="order_id" Visible="false" />
 9             </Columns>
10         </dx:ASPxComboBox>

可以指定值字段和值类型，默认是System.String.

7.允许输入

可以设置DropDownStyle样式为DropDownStyle.DropDown：

DropDownStyle="DropDown"

默认为DropDownStyle.DropDownList. 不能输入。

比如：

 1         <dx:ASPxComboBox ID="cboTypeOfServ" runat="server" AutoPostBack="True" 
 2             OnSelectedIndexChanged="cboTypeOfServ_SelectedIndexChanged" DropDownStyle="DropDown" 
 3             DataSourceID="ChartTypeData" ValueType="System.String" TextField="name">  
 4                              
 5             <ClientSideEvents KeyPress="function(s,e){
 6                 if(e.htmlEvent.keyCode == 13)
 7                 {
 8                     //回车后加入项目
 9                     s.AddItem(s.GetText());
10                 }
11               }" />
12         </dx:ASPxComboBox>
13         
14         <asp:SqlDataSource ID="ChartTypeData" runat="server" 
15             ConnectionString="Data Source=115SERVER;Initial Catalog=SubMain;Persist Security Info=True;User ID=sa;Password=******" 
16             ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Chart_Type]">
17         </asp:SqlDataSource>