Filter Grid columns with MultiColumnComboBox
Environment
Product | Telerik WebForms MultiColumnComboBox for ASP.NET AJAX |
Description
How can I implement the MultiColumnComboBox as a filter within a Grid column to enhance the filtering capabilities?
This KB article also answers the following questions:
- How to filter RadGrid records using MultiColumnComboBox?
- How to implement custom filtering in RadGrid with MultiColumnComboBox?
- How to use MultiColumnComboBox columns for RadGrid filtering?
Solution
First, add the RadMultiColumnComboBox as a FilterTemplate to a Grid column. Configure its data source, display fields, and columns as needed.
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" DataSourceID="SqlDataSource1" Width="800px" AllowFilteringByColumn="True">
<MasterTableView DataSourceID="SqlDataSource1" AutoGenerateColumns="false" DataKeyNames="CustomerID">
<Columns>
<telerik:GridBoundColumn UniqueName="CustomerID" HeaderText="Customer ID" DataField="CustomerID" />
<telerik:GridBoundColumn UniqueName="ContactName" HeaderText="ContactName" DataField="ContactName">
<FilterTemplate>
<telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1" DataSourceID="SqlDataSource1"
Filter="contains" FilterFields="ContactName, ContactTitle, CompanyName" Width="400px" Height="300px"
DataTextField="ContactName" DataValueField="CustomerID"
Placeholder="select from the dropdown or type">
<ColumnsCollection>
<telerik:MultiColumnComboBoxColumn Field="ContactName" Title="Name" Width="200px" />
<telerik:MultiColumnComboBoxColumn Field="ContactTitle" Title="Title" Width="200px" />
<telerik:MultiColumnComboBoxColumn Field="CompanyName" Title="Company" Width="200px" />
</ColumnsCollection>
<ClientEvents OnChange="onChange" />
</telerik:RadMultiColumnComboBox>
</FilterTemplate>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="ContactTitle" HeaderText="ContactTitle" DataField="ContactTitle" />
<telerik:GridBoundColumn UniqueName="CompanyName" HeaderText="CompanyName" DataField="CompanyName" />
</Columns>
</MasterTableView>
</telerik:RadGrid>
<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient"
SelectCommand="SELECT [CustomerID], [ContactName], [ContactTitle], [CompanyName] FROM [Customers]"></asp:SqlDataSource>
After that, implement the onChange
JavaScript function to filter the Grid based on the selection from the MultiColumnComboBox.
function onChange(sender, args) {
var grid = $find("<%=RadGrid1.ClientID %>");
var tableView = grid.get_masterTableView();
var filterText = sender.get_dataItem().ContactName; // You can also specify the other fields, depending on the returned data
tableView.filter("ContactName", filterText, "EqualTo");
}
This setup allows you to filter RadGrid records based on the selected item in the MultiColumnComboBox, offering a powerful and user-friendly filtering experience in your ASP.NET AJAX applications.