DevExpress' ASPxCombobox

Mastering DevExpress ASPxComboBox: A Comprehensive Guide

Explore the powerful features of DevExpress ASPxComboBox, from basic setup to advanced data binding, filtering, and client-side scripting for enhanced user experience.

The DevExpress ASPxComboBox is a versatile and feature-rich control for ASP.NET Web Forms applications, offering a highly customizable dropdown list with advanced capabilities like data binding, filtering, and client-side interaction. This article will guide you through its core functionalities, demonstrating how to effectively integrate and configure it to meet various application requirements.

Basic Setup and Data Binding

The most fundamental use of ASPxComboBox involves populating it with data. This can be done directly through its Items collection or by binding it to a data source. Data binding is particularly useful for dynamic content or large datasets. You can bind to various data sources such as SqlDataSource, ObjectDataSource, or even a simple List<T> in your code-behind.

<dx:ASPxComboBox ID="cmbProducts" runat="server"
    ValueField="ProductID" TextField="ProductName"
    DataSourceID="SqlDataSource1" EnableCallbackMode="true">
</dx:ASPxComboBox>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
    ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    SelectCommand="SELECT ProductID, ProductName FROM Products">
</asp:SqlDataSource>

ASPxComboBox bound to a SqlDataSource

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        List<Product> products = GetProductsFromDatabase(); // Custom method to fetch data
        cmbProducts.DataSource = products;
        cmbProducts.ValueField = "ProductID";
        cmbProducts.TextField = "ProductName";
        cmbProducts.DataBind();
    }
}

public class Product
{
    public int ProductID { get; set; }
    public string ProductName { get; set; }
}

Binding ASPxComboBox to a List in code-behind

Filtering and Callback Mode

ASPxComboBox offers powerful filtering capabilities, allowing users to quickly find items within large lists. The IncrementalFilteringMode property controls how filtering behaves (e.g., StartsWith, Contains). For optimal performance with large datasets, EnableCallbackMode should be set to true. This ensures that only relevant data is fetched from the server as the user types, preventing unnecessary postbacks and improving responsiveness.

flowchart TD
    A[User Types in ComboBox] --> B{IncrementalFilteringMode?}
    B -->|None| C[No Filtering]
    B -->|StartsWith or Contains| D{EnableCallbackMode?}
    D -->|True| E[Send Callback to Server]
    E --> F[Server Filters Data]
    F --> G[Update ComboBox Items]
    D -->|False| H[Full Postback (if AutoPostBack=true)]
    H --> F

ASPxComboBox Filtering and Callback Mode Workflow

<dx:ASPxComboBox ID="cmbFilteredProducts" runat="server"
    ValueField="ProductID" TextField="ProductName"
    DataSourceID="SqlDataSource2"
    EnableCallbackMode="true"
    CallbackPageSize="10"  
    IncrementalFilteringMode="Contains"
    DropDownStyle="DropDown">
</dx:ASPxComboBox>

<asp:SqlDataSource ID="SqlDataSource2" runat="server"
    ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    SelectCommand="SELECT ProductID, ProductName FROM Products WHERE ProductName LIKE '%' + @filter + '%'">
    <SelectParameters>
        <asp:ControlParameter Name="filter" ControlID="cmbFilteredProducts" PropertyName="Text" Type="String" />
    </SelectParameters>
</asp:SqlDataSource>

ASPxComboBox with incremental filtering and callback mode

Client-Side Functionality and Events

ASPxComboBox provides a rich client-side API, allowing you to interact with the control using JavaScript without full page postbacks. This is crucial for creating dynamic and responsive user interfaces. Key client-side events include SelectedIndexChanged, GotFocus, LostFocus, and BeginCallback/EndCallback for managing asynchronous operations.

<dx:ASPxComboBox ID="cmbClientSide" runat="server"
    ValueField="ID" TextField="Name">
    <ClientSideEvents
        SelectedIndexChanged="OnClientSelectedIndexChanged"
        GotFocus="OnClientGotFocus" />
</dx:ASPxComboBox>

Attaching client-side event handlers

function OnClientSelectedIndexChanged(s, e) {
    var selectedValue = s.GetValue();
    var selectedText = s.GetText();
    alert('Selected Value: ' + selectedValue + ', Text: ' + selectedText);
    // Perform other client-side actions based on selection
}

function OnClientGotFocus(s, e) {
    console.log('ComboBox ' + s.name + ' received focus.');
}

JavaScript functions for client-side events

1. Add ASPxComboBox to your page

Drag and drop the ASPxComboBox control from the DevExpress toolbox onto your ASP.NET Web Forms page or manually add its markup.

2. Configure Data Source

Set the DataSourceID property to an existing data source control (e.g., SqlDataSource) or bind it programmatically in your code-behind using DataSource, ValueField, and TextField.

3. Enable Callback Mode (Optional but Recommended)

For better performance with large datasets, set EnableCallbackMode="true" and CallbackPageSize to a reasonable number. Configure your data source's SelectCommand to accept filtering parameters.

4. Implement Client-Side Logic (Optional)

Utilize the <ClientSideEvents> tag to attach JavaScript functions to events like SelectedIndexChanged for dynamic client-side interactions.