Radgrid filter with textbox and custom button

[Rob]

Hi, I am trying to make a filter template with RadTextBox and custom filter button, but it's not working. Please, help.
Here is my code:

<telerik:GridBoundColumn UniqueName="ItemNumber" DataField="ItemNumber" HeaderText="Item Number" HeaderStyle-Width="150px" AutoPostBackOnFilter="true" AllowFiltering="true">
    <FilterTemplate>
        <telerik:RadTextBox ID="txtItemNumber" runat="server" Width="75px" AutoCompleteType="None">
        </telerik:RadTextBox>
       <asp:ImageButton ID="btnFilterItemNumber" runat="server" Width="24px" Height="24px" ImageUrl="~/Images/filter.png" OnClientClick="FilterItemNumber()" />

        <telerik:RadScriptBlock ID="RadScriptBlockItemNumber" runat="server">
             <script type="text/javascript">
              function FilterItemNumber(sender, args)
              {
                   var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                   var item = document.getElementById("<%# txtItemNumber.ClientID %>").value;
                   tableView.filter("ItemNumber", item, "Contains");
               }
               </script>
           </telerik:RadScriptBlock>
       </FilterTemplate>
   </telerik:GridBoundColumn>

[Eyup]

Hi Rob,

You can use the following configuration to achieve auto-filter functionality:

Copy Code

<telerik:GridBoundColumn DataField="ShipName" FilterControlAltText="Filter ShipName column"

    HeaderText="ShipName" SortExpression="ShipName" UniqueName="ShipName"

    ShowFilterIcon="false" CurrentFilterFunction="Contains"                   
      AutoPostBackOnFilter="true" FilterDelay="2000">

</telerik:GridBoundColumn>

Hope this helps. If you have different requirements or further instructions, please send us sample screenshots or video demonstrating the desired behavior. Thus, we will be able to figure out your exact requirement and provide a proper approach.

Regards,
Eyup
Telerik

[Rob]

Hi, Eyup,

Thank you for the reply.
I need a filter with text box and a button. My requirement is to be able to use text box auto complete:

<telerik:RadTextBox ID="txtItemNumber" runat="server" AutoCompleteType="None">
        </telerik:RadTextBox>

Also I need a custom button that user can click to start filtering.

Thank you.

[Eyup]

Hello Rob,

Please try the snippet below and let me know if works for you:

<FilterTemplate>
    <telerik:RadTextBox ID="RadTextBox1" runat="server"
        Text='<%# Container.OwnerTableView.GetColumn("ItemNumber").CurrentFilterValue %>'>
    </telerik:RadTextBox>
    <asp:ImageButton ID="ImageButton1" runat="server" AlternateText="Search" BackColor="LightBlue"
        OnClientClick="fireGridFilter(this); return false;" />
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            //Put your JavaScript code here.
            function fireGridFilter(imageButton) {
                var tableView = $find("<%# Container.OwnerTableView.ClientID %>");
                var textBox = $telerik.findControl($(imageButton).parents()[0], "RadTextBox1");
                tableView.filter("ItemNumber", textBox.get_value(), "Contains");
            }
        </script>
    </telerik:RadScriptBlock>
</FilterTemplate>

Regards,
Eyup
Telerik

[Rob]

Hi, Eyup,

Code works great, but I have another issue. Since it's done on the client side, AutoComplete feature doesn't save a list of values entered in a text box. Can the same filtering be done on server side instead?

Thank you for your help.

[Eyup]

Hi Rob,

Generally, you can also fire filter command from the server:
http://www.telerik.com/help/aspnet-ajax/grid-fire-command-event-from-code.html

If you need further assistance, please create a very basic sample runnable web site demonstrating the desired functionality and send it to us. Thus, we will be able to figure out your exact requirement and suggest a proper approach.

Regards,
Eyup
Telerik

[Rob]

Hi, Eyup,

I figured it out.
Thanks for all your help!

[Wendi]

Hi there, If i attempt to use this in two columns, the second one doesn't work.  I can successfully use on or the other, but not both.  Any ideas?

 

<telerik:GridBoundColumn DataField="ChargeName" HeaderText="Name" UniqueName="ChargeName" HeaderStyle-Width="200px">
                                    <FilterTemplate>
                                        <telerik:RadTextBox ID="RadTextBox1" runat="server"
                                            Text='<%# Container.OwnerTableView.GetColumn("ChargeName").CurrentFilterValue %>'>
                                        </telerik:RadTextBox>
                                        <asp:ImageButton ID="ImageButton1" runat="server" AlternateText="Search" BackColor="LightBlue"
                                            OnClientClick="fireGridFilter(this); return false;" />
                                        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                                            <script type="text/javascript">
                                                //Put your JavaScript code here.
                                                function fireGridFilter(imageButton) {
                                                    var tableView = $find("<%# Container.OwnerTableView.ClientID %>");
                                                    var textBox = $telerik.findControl($(imageButton).parents()[0], "RadTextBox1");
                                                    tableView.filter("ChargeName", textBox.get_value(), "Contains");
                                                }
                                            </script>
                                        </telerik:RadScriptBlock>
                                    </FilterTemplate>
                                </telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="PartNumber" HeaderText="Part Number" UniqueName="PartNumber" HeaderStyle-Width="200px">
                                    <FilterTemplate>
                                        <telerik:RadTextBox ID="RadTextBox2" runat="server"
                                            Text='<%# Container.OwnerTableView.GetColumn("PartNumber").CurrentFilterValue %>'>
                                        </telerik:RadTextBox>
                                        <asp:ImageButton ID="ImageButton2" runat="server" AlternateText="Search" BackColor="LightBlue"
                                            OnClientClick="fireGridFilter2(this); return false;" />
                                        <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
                                            <script type="text/javascript">
                                                //Put your JavaScript code here.
                                                function fireGridFilter2(imageButton) {
                                                    var tableView = $find("<%# Container.OwnerTableView.ClientID %>");
                                                    var textBox = $telerik.findControl($(imageButton).parents()[0], "RadTextBox2");
                                                    tableView.filter("PartNumber", textBox.get_value(), "Contains");
                                                }
                                            </script>
                                        </telerik:RadScriptBlock>
                                    </FilterTemplate>
                                </telerik:GridBoundColumn>