How to apply custom filter for a RadGrid column

[Randall]

Hello,

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"
    OnDataBound="RadGrid1_DataBound"
    OnItemDataBound="RadGrid1_ItemDataBound"
    OnNeedDataSource="RadGrid1_NeedDataSource"
    OnPreRender="RadGrid1_PreRender"
    OnItemCommand="RadGrid1_ItemCommand"
    >
    <ClientSettings EnableRowHoverStyle="true">
        <Resizing AllowColumnResize="true" ClipCellContentOnResize="true" EnableRealTimeResize="true" />
        <Selecting AllowRowSelect="true" />
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
    </ClientSettings>

    <MasterTableView AllowPaging="true" TableLayout="Fixed">
        <Columns>
            <telerik:GridBoundColumn DataField="Status" AllowFiltering="true" FilterControlWidth="32px"
                HeaderText="Status" SortExpression="Status" UniqueName="Status">
                <HeaderStyle Width="56px" />
                <ItemStyle HorizontalAlign="Center" />
                <FilterTemplate>
                    <telerik:RadComboBox runat="server" ID="RadComboBox1" HighlightTemplatedItems="true" Width="32">
                        <Items>
                            <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" />
                        </Items>
                        <ItemTemplate>
                            <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>
                            </div>
                        </ItemTemplate>
                    </telerik:RadComboBox>
                    <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)
                                {
                                    e.stopPropagation();
                                }
                            }
                        </script>
                    </telerik:RadScriptBlock>
                </FilterTemplate>
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="DNSName" AllowFiltering="true" FilterControlWidth="150px"
                HeaderText="Computer Name" Resizable="true" SortExpression="DNSName" UniqueName="DNSName">
                <HeaderStyle Width="190px" />
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="IPAddress" AllowFiltering="true" FilterControlWidth="60px"
                HeaderText="IP Address" SortExpression="IPAddressNumeric" UniqueName="IPAddress">
                <HeaderStyle Width="88px" />
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="CountInstalled" AllowFiltering="true" FilterControlWidth="34px"
                HeaderText="Installed" SortExpression="CountInstalled" UniqueName="CountInstalled">
                <HeaderStyle HorizontalAlign="Center" Width="66px" />
                <ItemStyle HorizontalAlign="Center" />
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="CountNeeded" AllowFiltering="true" FilterControlWidth="34px"
                HeaderText="Needed" SortExpression="CountNeeded" UniqueName="CountNeeded">
                <HeaderStyle HorizontalAlign="Center" Width="63px" />
                <ItemStyle HorizontalAlign="Center" />
            </telerik:GridBoundColumn>

            <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>

            <telerik:GridBoundColumn DataField="CountFailed" AllowFiltering="true" FilterControlWidth="34px"
                HeaderText="Failed" SortExpression="CountFailed" UniqueName="CountFailed">
                <HeaderStyle HorizontalAlign="Center" Width="56px" />
                <ItemStyle HorizontalAlign="Center" />
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="CountUnknown" AllowFiltering="true" FilterControlWidth="34"
                HeaderText="Unknown" SortExpression="CountUnknown" UniqueName="CountUnknown">
                <HeaderStyle HorizontalAlign="Center" Width="72px" />
                <ItemStyle HorizontalAlign="Center" />
            </telerik:GridBoundColumn>

            <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>

            <telerik:GridBoundColumn DataField="ResponsiblePerson" AllowFiltering="true" FilterControlWidth="50px"
                HeaderText="PID" SortExpression="ResponsiblePerson" UniqueName="ResponsiblePerson">
                <HeaderStyle Width="70px" />
            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="IsActive" AllowFiltering="true" FilterControlWidth="50px"
                HeaderText="State" SortExpression="IsActive" UniqueName="IsActive">
                <HeaderStyle HorizontalAlign="Center" Width="75px" />
                <ItemStyle HorizontalAlign="Center" />
            </telerik:GridBoundColumn>

            <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:GridButtonColumn>

            <telerik:GridBoundColumn DataField="SUSClientId" UniqueName="SUSClientId" Visible="false"
                />
        </Columns>
    </MasterTableView>

    <PagerStyle Mode="NextPrevAndNumeric" />
</telerik:RadGrid>

Thanks in advance for any help you can provide.

Randall Price
 

[Radoslav]

Hello Randall,

Please check out the following online resources:
http://www.telerik.com/community/code-library/aspnet-ajax/grid/multi-selection-radcombobox-for-filtering-grid.aspx
http://www.telerik.com/help/aspnet-ajax/grdfilteringwithdropdownlist.html
http://www.telerik.com/help/aspnet-ajax/grdoperatewithfilterexpression.html
http://demos.telerik.com/aspnet-ajax/grid/examples/programming/filteringtemplatecolumns/defaultcs.aspx

I hope this helps.

Kind regards,
Radoslav
the Telerik team