[DevExpress]ASP.NET控件ASPxComboBox组合框小结(二)
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>
在输入框输入文字Table回车添加项。