This is a migrated thread and some comments may be shown as answers.

Radgrid filter with textbox and custom button

7 Answers 541 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rob
Top achievements
Rank 1
Rob asked on 18 Jul 2013, 04:52 PM
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>

7 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 23 Jul 2013, 09:45 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Rob
Top achievements
Rank 1
answered on 23 Jul 2013, 11:02 AM
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.
0
Eyup
Telerik team
answered on 26 Jul 2013, 01:55 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Rob
Top achievements
Rank 1
answered on 29 Jul 2013, 06:39 PM
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.
0
Eyup
Telerik team
answered on 01 Aug 2013, 10:19 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Rob
Top achievements
Rank 1
answered on 01 Aug 2013, 06:55 PM
Hi, Eyup,

I figured it out.
Thanks for all your help!
0
Wendi
Top achievements
Rank 1
answered on 02 Jun 2017, 01:35 PM

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>
Tags
Grid
Asked by
Rob
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Rob
Top achievements
Rank 1
Wendi
Top achievements
Rank 1
Share this question
or