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

6.绑定数据源

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

        <dx:ASPxComboBox ID="cboTypeOfServ" runat="server" AutoPostBack="True" 
            OnSelectedIndexChanged="cboTypeOfServ_SelectedIndexChanged" 
            DataSourceID="ChartTypeData" ImageUrlField="icon" TextField="description" ValueField="name">
            <Items>
                <dx:ListEditItem Text="大饼图" Value="Pie" ImageUrl="~/Images/pie.png"  />
                <dx:ListEditItem Text="线性图" Value="Line" ImageUrl="~/Images/line.png" />
            </Items>                    

        </dx:ASPxComboBox>
        
        <asp:SqlDataSource ID="ChartTypeData" runat="server" 
            ConnectionString="Data Source=115SERVER;Initial Catalog=SubMain;Persist Security Info=True;User ID=sa;Password=*****" 
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Chart_Type]">
        </asp:SqlDataSource>

数据库：

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

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

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

可以隐藏某些列：

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

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

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

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

#1 大饼图 {Pie}

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

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

7.允许输入

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

DropDownStyle="DropDown" 

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

比如：

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

在输入框输入文字Table回车添加项。