This example demonstrates how to use ASPxComboBox placed in the ASPxRoundPanel control to filter ASPxGridView data. The grid is bound to SqlDataSource. The ControlParameter is passed to the SqlDataSource from the ASPxComboBox control.
Implementation Details
In this example, ASPxRoundPanel contains ASPxComboBox. When a user selects a value in the combobox, the value is applied to the datasource as a control parameter.
You can specify the ControlParameter's ControlID property in markup and at runtime.
Specify ControlID property in markup
Use the following syntax to access ASPxComboBox inside ASPxRoundPanel: $.
ASPx<dx:ASPxRoundPanel ID="ASPxRoundPanel1" runat="server" ... >
<PanelCollection>
<dx:PanelContent ID="PanelContent1" runat="server">
<dx:ASPxComboBox ID="ASPxComboBoxCategoriesInContent" runat="server" ... />
...
</dx:ASPxRoundPanel>
<asp:SqlDataSource ID="SqlDataSourceProducts1" runat="server" ... >
<SelectParameters>
<asp:ControlParameter ControlID="ASPxRoundPanel1$ASPxComboBoxCategoriesInContent" Name="CategoryID" PropertyName="Value" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
If ASPxComboBox is placed inside a TemplateControl, the ControlID property should contain additional markers.
ASPx<dx:ASPxRoundPanel ID="ASPxRoundPanel2" runat="server" ...>
<HeaderTemplate>
<dx:ASPxComboBox ID="ASPxComboBoxCategoriesInHeader" runat="server" ... />
...
</dx:ASPxRoundPanel>
<asp:SqlDataSource ID="SqlDataSourceProducts2" runat="server" ... >
<SelectParameters>
<asp:ControlParameter ControlID="ASPxRoundPanel2$HTC$TC$ASPxComboBoxCategoriesInHeader" Name="CategoryID" PropertyName="Value" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
Specify ControlID property at runtime
When ASPxComboBox is inside a TemplateControl it can be difficult to correctly specify the ControlID property manually. In this case, you can determine the ControlID property value at runtime. The ControlParameter's ControlID property equals the UniqueID property of an external ASPxComboBox.
C#protected void ASPxComboBoxCategoriesInHeader_Init(object sender, EventArgs e) {
var cb = (ASPxComboBox)sender;
ControlParameter controlParameter = (ControlParameter)SqlDataSourceProducts3.SelectParameters[0];
controlParameter.ControlID = cb.UniqueID;
}
ASPx<dx:ASPxRoundPanel ID="ASPxRoundPanel3" runat="server" ... >
<HeaderTemplate>
<dx:ASPxComboBox ID="ASPxComboBoxCategoriesInHeader2" runat="server" OnInit="ASPxComboBoxCategoriesInHeader_Init" ... />
...
</dx:ASPxRoundPanel>
<asp:SqlDataSource ID="SqlDataSourceProducts3" runat="server" ... >
<SelectParameters>
<asp:ControlParameter Name="CategoryID" PropertyName="Value" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
Files to Review
- Default.aspx (VB: Default.aspx)
- Default.aspx.cs (VB: Default.aspx.vb)
Example Code
WebSite/Default.aspx
ASPx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="DevExpress.Web.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="mainForm" runat="server">
<div>
<table>
<tr>
<td>
<dx:ASPxRoundPanel ID="ASPxRoundPanel1" runat="server" Width="300px" HeaderText="Naming Container">
<PanelCollection>
<dx:PanelContent ID="PanelContent1" runat="server">
<dx:ASPxLabel ID="ASPxLabelCaption1" runat="server" Text="Select Category" />
<dx:ASPxComboBox ID="ASPxComboBoxCategoriesInContent" runat="server" ValueField="CategoryID" TextField="CategoryName"
ValueType="System.Int32" DataSourceID="SqlDataSourceCategories" AutoPostBack="True">
</dx:ASPxComboBox>
<dx:ASPxGridView ID="ASPxGridView1" runat="server" DataSourceID="SqlDataSourceProducts1" />
</dx:PanelContent>
</PanelCollection>
</dx:ASPxRoundPanel>
</td>
<td>
<dx:ASPxRoundPanel ID="ASPxRoundPanel2" runat="server" Width="300px" HeaderText="Naming Container">
<HeaderTemplate>
<dx:ASPxLabel ID="ASPxLabelCaption2" runat="server" Text="Select Category" />
<dx:ASPxComboBox ID="ASPxComboBoxCategoriesInHeader" runat="server" ValueField="CategoryID" TextField="CategoryName"
ValueType="System.Int32" DataSourceID="SqlDataSourceCategories" AutoPostBack="True">
</dx:ASPxComboBox>
</HeaderTemplate>
<PanelCollection>
<dx:PanelContent ID="PanelContent2" runat="server">
<dx:ASPxGridView ID="ASPxGridView2" runat="server" DataSourceID="SqlDataSourceProducts2" />
</dx:PanelContent>
</PanelCollection>
</dx:ASPxRoundPanel>
</td>
<td>
<dx:ASPxRoundPanel ID="ASPxRoundPanel3" runat="server" Width="300px" HeaderText="Naming Container">
<HeaderTemplate>
<dx:ASPxLabel ID="ASPxLabelCaption3" runat="server" Text="Select Category" />
<dx:ASPxComboBox ID="ASPxComboBoxCategoriesInHeader2" runat="server" ValueField="CategoryID"
TextField="CategoryName" ValueType="System.Int32" DataSourceID="SqlDataSourceCategories"
AutoPostBack="True" OnInit="ASPxComboBoxCategoriesInHeader_Init">
</dx:ASPxComboBox>
</HeaderTemplate>
<PanelCollection>
<dx:PanelContent ID="MainPanelContent" runat="server">
<dx:ASPxGridView ID="ASPxGridViewProducts" runat="server" DataSourceID="SqlDataSourceProducts3" />
</dx:PanelContent>
</PanelCollection>
</dx:ASPxRoundPanel>
</td>
</tr>
</table>
</div>
<asp:SqlDataSource ID="SqlDataSourceCategories" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSourceProducts1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [ProductID], [ProductName], [CategoryID], [UnitPrice], [Discontinued] FROM [Products] WHERE ([CategoryID] = @CategoryID)">
<SelectParameters>
<asp:ControlParameter ControlID="ASPxRoundPanel1$ASPxComboBoxCategoriesInContent"
Name="CategoryID" PropertyName="Value" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSourceProducts2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [ProductID], [ProductName], [CategoryID], [UnitPrice], [Discontinued] FROM [Products] WHERE ([CategoryID] = @CategoryID)">
<SelectParameters>
<asp:ControlParameter ControlID="ASPxRoundPanel2$HTC$TC$ASPxComboBoxCategoriesInHeader"
Name="CategoryID" PropertyName="Value" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSourceProducts3" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [ProductID], [ProductName], [CategoryID], [UnitPrice], [Discontinued] FROM [Products] WHERE ([CategoryID] = @CategoryID)">
<SelectParameters>
<asp:ControlParameter Name="CategoryID" PropertyName="Value" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</form>
</body>
</html>
WebSite/Default.aspx.cs(vb)
C#using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DevExpress.Web;
public partial class _Default : System.Web.UI.Page {
protected void ASPxComboBoxCategoriesInHeader_Init(object sender, EventArgs e) {
var cb = (ASPxComboBox)sender;
ControlParameter controlParameter = (ControlParameter)SqlDataSourceProducts3.SelectParameters[0];
controlParameter.ControlID = cb.UniqueID;
}
}