New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

RadGrid Filtering with RadFilter

You can use RadFilter to filter RadGrid control. For the purpose few steps must be taken:

  • RadFilter FilterContainerID property must point to RadGrid instance.

  • AllowFilteringByColumn must be set to true to enable RadGrid filtering

  • [optional] IsFilterItemExpanded set to false to hide RadGrid filtering item

When bound RadGrid will supply information for all filterable columns to RadFilter that can be used to build filter expression via RadFilter control. If there are columns with AllowFiltering set to false they will be excluded from the list of the columns that RadFilter will offer to filter. The filter expressions generated by the RadFilter control will depend on the data type of the source grid fields, thus making them protected from type conflicts and syntax errors.

Note that the filter expressions produced by the built-in filtering mechanism of RadGrid and those created by RadFilter are independent from each other. Hence each of these two filter generators will clear the previous filter patterns applied to RadGrid for ASP.NET AJAX.

Here it is also demonstrated how to hide the default Apply button of the RadFilter control and trigger command for building expressions from an external button handler.

<telerik:RadFilter RenderMode="Lightweight" runat="server" ID="RadFilter1" FilterContainerID="RadGrid1" ShowApplyButton="false" />
<telerik:RadGrid RenderMode="Lightweight" runat="server" ID="RadGrid1" AutoGenerateColumns="false" DataSourceID="SqlDataSource1"
    Skin="Vista" AllowPaging="true" AllowSorting="true" AllowFilteringByColumn="true"
    OnItemCommand="RadGrid1_ItemCommand">
    <MasterTableView IsFilterItemExpanded="false" CommandItemDisplay="Top">
        <CommandItemTemplate>
            <telerik:RadToolBar RenderMode="Lightweight" runat="server" ID="RadToolBar1">
                <Items>
                    <telerik:RadToolBarButton Text="Apply filter" CommandName="FilterRadGrid" ImageUrl="<%# GetFilterIcon() %>"
                        ImagePosition="Right" />
                </Items>
            </telerik:RadToolBar>
        </CommandItemTemplate>
        <Columns>
            <telerik:GridNumericColumn DataField="OrderID" HeaderText="OrderID" DataType="System.Int32" />
            <telerik:GridDateTimeColumn DataField="OrderDate" HeaderText="OrderDate" />
            <telerik:GridNumericColumn DataField="ShipVia" HeaderText="ShipVia" DataType="System.Int32" />
            <telerik:GridBoundColumn DataField="ShipName" HeaderText="ShipName" />
            <telerik:GridBoundColumn DataField="ShipAddress" HeaderText="ShipAddress" />
            <telerik:GridNumericColumn DataField="Freight" HeaderText="Freight" DataType="System.Decimal" />
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    SelectCommand="Select OrderID, OrderDate, ShipVia, ShipName, ShipAddress, Freight FROM Orders" />
protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
{
    if (e.CommandName == "FilterRadGrid")
    {
        RadFilter1.FireApplyCommand();
    }
}

protected string GetFilterIcon()
{
    return RadAjaxLoadingPanel.GetWebResourceUrl(Page, string.Format("Telerik.Web.UI.Skins.{0}.Grid.Filter.gif", RadGrid1.Skin));
}
Protected Sub RadGrid1_ItemCommand(ByVal source As Object, ByVal e As GridCommandEventArgs)
    If e.CommandName = "FilterRadGrid" Then
        RadFilter1.FireApplyCommand()
    End If
End Sub

Protected Function GetFilterIcon() As String
    Return RadAjaxLoadingPanel.GetWebResourceUrl(Page, String.Format("Telerik.Web.UI.Skins.{0}.Grid.Filter.gif", RadGrid1.Skin))
End Function    

Find a live demo illustrating the integration of RadFilter with RadGrid here.

In this article