How to apply custom filter for a RadGrid column

2 posts, 0 answers
  1. Randall
    Randall avatar
    54 posts
    Member since:
    Jun 2008

    Posted 02 Aug 2010 Link to this post


    I am using Telerik RadControls for ASP.NET AJAX 2009.01.0527.20.

    I have a RadGrid that contains a column called Status.  I am replacing the text ("1", "2", or "3") in the RadGrid1_ItemDataBound() event with a blank ("") and setting the CssClass to have the appropriate background image (i.e., background: url('images/1_green_light.gif') no-repeat center;)).  This is working fine and I have the proper image (green, yellow, or red) for the status.  I was replacing the text with "<a href="..."><img src="green.gif"...></a>" but this worked fine in IE but not always in Firefox.  Sometimes the image would show and sometimes not.  So I opted for the background image technique I described above which works fine in both browsers.
    Now I want to create a custom filter for this column.  I have a RadComboBox with 3 checkboxes and the three images in the dropdown and I can check or uncheck the status(es) I want to filter on.  I have the RadComboBox setup visually just fine using a custom filter template.

    The problem is that I don't know how to apply the filter in the code-behind.  What event should I hook into and how do I apply the filter?

    Here is the code for my RadGrid:

    <telerik:RadGrid runat="server" ID="RadGrid1"
        AllowFilteringByColumn="true" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
        Height="100%" Width="100%" PageSize="10"
        <ClientSettings EnableRowHoverStyle="true">
            <Resizing AllowColumnResize="true" ClipCellContentOnResize="true" EnableRealTimeResize="true" />
            <Selecting AllowRowSelect="true" />
            <Scrolling AllowScroll="true" UseStaticHeaders="true" />
        <MasterTableView AllowPaging="true" TableLayout="Fixed">
                <telerik:GridBoundColumn DataField="Status" AllowFiltering="true" FilterControlWidth="32px"
                    HeaderText="Status" SortExpression="Status" UniqueName="Status">
                    <HeaderStyle Width="56px" />
                    <ItemStyle HorizontalAlign="Center" />
                        <telerik:RadComboBox runat="server" ID="RadComboBox1" HighlightTemplatedItems="true" Width="32">
                                <telerik:RadComboBoxItem Text="" Count="1" Info="All needed updates installed"            Image="images/1_green_light.gif" />
                                <telerik:RadComboBoxItem Text="" Count="2" Info="Some updates pending install or unknown" Image="images/2_yellow_light.gif" />
                                <telerik:RadComboBoxItem Text="" Count="3" Info="Some updates failed"                     Image="images/3_red_light.gif" />
                                <div onclick="StopPropagation(event)" class="combo-item-template">
                                    <asp:CheckBox runat="server" ID="chk1" Checked="true" onclick="onCheckBoxClick(this)"/>
                                    <asp:Label runat="server" ID="Label1" AssociatedControlID="chk1">
                                        <span class="NoWrap">
                                            <img id="img<%# DataBinder.Eval(Container, "Attributes['Count']") %>"
                                                    src="<%# DataBinder.Eval(Container, "Attributes['Image']") %>"
                                                    alt="<%# DataBinder.Eval(Container, "Attributes['Info']") %>" />
                                            <%# DataBinder.Eval(Container, "Attributes['Info']")%></span></asp:Label>
                        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                            <script type="text/javascript" language="javascript">
                                function onCheckBoxClick(chk)
                                    var combo  = $find('<%# ((GridItem)Container).FindControl("RadComboBox1").ClientID  %>');
                                    var text   = "";
                                    var values = "";
                                    // Get the collection of all items.
                                    var items = combo.get_items();
                                    // Enumerate all items.
                                    for (var i = 0; i < items.get_count(); i++)
                                        // Get the checkbox element of the current item.
                                        var chk1 = $get(combo.get_id() + "_i" + i + "_chk1");
                                        if (chk1.checked)
                                            var item = items.getItem(i);
                                            var info = item.get_attributes().getAttribute("Info");
                                            text   += info + ",";
                                            values += item.get_value() + ",";
                                    // Remove the last comma from the string.
                                    text   = removeLastComma(text);
                                    values = removeLastComma(values);
                                    $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Status," + text );
                                // This method removes the ending comma from a string.
                                function removeLastComma(str)
                                    return str.replace(/, $/, "");
                                function StopPropagation(e)
                                    // Cancel bubbling.
                                    e.cancelBubble = true;
                                    if (e.stopPropagation)
                <telerik:GridBoundColumn DataField="DNSName" AllowFiltering="true" FilterControlWidth="150px"
                    HeaderText="Computer Name" Resizable="true" SortExpression="DNSName" UniqueName="DNSName">
                    <HeaderStyle Width="190px" />
                <telerik:GridBoundColumn DataField="IPAddress" AllowFiltering="true" FilterControlWidth="60px"
                    HeaderText="IP Address" SortExpression="IPAddressNumeric" UniqueName="IPAddress">
                    <HeaderStyle Width="88px" />
                <telerik:GridBoundColumn DataField="CountInstalled" AllowFiltering="true" FilterControlWidth="34px"
                    HeaderText="Installed" SortExpression="CountInstalled" UniqueName="CountInstalled">
                    <HeaderStyle HorizontalAlign="Center" Width="66px" />
                    <ItemStyle HorizontalAlign="Center" />
                <telerik:GridBoundColumn DataField="CountNeeded" AllowFiltering="true" FilterControlWidth="34px"
                    HeaderText="Needed" SortExpression="CountNeeded" UniqueName="CountNeeded">
                    <HeaderStyle HorizontalAlign="Center" Width="63px" />
                    <ItemStyle HorizontalAlign="Center" />
                <telerik:GridBoundColumn DataField="CountNotNeeded" AllowFiltering="true" FilterControlWidth="34px"
                    HeaderText="Not Needed" SortExpression="CountNotNeeded" UniqueName="CountNotNeeded"
                    <HeaderStyle HorizontalAlign="Center" Width="70px" />
                    <ItemStyle HorizontalAlign="Center" />
                <telerik:GridBoundColumn DataField="CountFailed" AllowFiltering="true" FilterControlWidth="34px"
                    HeaderText="Failed" SortExpression="CountFailed" UniqueName="CountFailed">
                    <HeaderStyle HorizontalAlign="Center" Width="56px" />
                    <ItemStyle HorizontalAlign="Center" />
                <telerik:GridBoundColumn DataField="CountUnknown" AllowFiltering="true" FilterControlWidth="34"
                    HeaderText="Unknown" SortExpression="CountUnknown" UniqueName="CountUnknown">
                    <HeaderStyle HorizontalAlign="Center" Width="72px" />
                    <ItemStyle HorizontalAlign="Center" />
                <telerik:GridBoundColumn DataField="DaysAgo" AllowFiltering="true" FilterControlWidth="70px"
                    HeaderText="Last Contact" SortExpression="DaysAgoNumeric" UniqueName="DaysAgo">
                    <HeaderStyle HorizontalAlign="Center" Width="90px" />
                    <ItemStyle HorizontalAlign="Center" />
                <telerik:GridBoundColumn DataField="ResponsiblePerson" AllowFiltering="true" FilterControlWidth="50px"
                    HeaderText="PID" SortExpression="ResponsiblePerson" UniqueName="ResponsiblePerson">
                    <HeaderStyle Width="70px" />
                <telerik:GridBoundColumn DataField="IsActive" AllowFiltering="true" FilterControlWidth="50px"
                    HeaderText="State" SortExpression="IsActive" UniqueName="IsActive">
                    <HeaderStyle HorizontalAlign="Center" Width="75px" />
                    <ItemStyle HorizontalAlign="Center" />
                <telerik:GridButtonColumn ButtonType="PushButton" ButtonCssClass="TimeoutButton" CommandName="Timeout"
                    HeaderText="Timeout" SortExpression="StatusButtonText" Text="Timeout" UniqueName="Timeout">
                    <HeaderStyle Width="70px" />
                    <ItemStyle Font-Names="Tahoma, Verdana, Sans_Serif;" Font-Size="X-Small" HorizontalAlign="Center" />
                <telerik:GridBoundColumn DataField="SUSClientId" UniqueName="SUSClientId" Visible="false"
        <PagerStyle Mode="NextPrevAndNumeric" />

    Thanks in advance for any help you can provide.

    Randall Price

  2. Radoslav
    Radoslav avatar
    1564 posts

    Posted 05 Aug 2010 Link to this post

    Hello Randall,

    Please check out the following online resources:

    I hope this helps.

    Kind regards,
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft R3 2016 release webinar banner
Back to Top