RadTextBox Filter issue

[Paulo]

Hi. I have a radGrid with several columns. Some of them are comboboxes and two are RadTextBox. When user type something and press enter it processes the filter and when user clear the TextBox and press enter it clear the filter.
I am using the fuction below which was provided by Telerik.
function TitleKey(event, sender) {
     if (event.keyCode == 13) {
              var filterValue = "";
              var filterFunction = "NoFilter";
              var s = sender.value;
              if (s != "") {
                  filterValue = s;
                  var filterFunction = "Contains";
              }
     var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
     tableView.filter("title", filterValue, filterFunction);
     }
}
However everytime I clear the filter and press enter two steps occur. First it brings the grid as first loaded without any filter, than it brings the right grid with the right result if one or more filter are on.
I have tried to debug it and I cannot find why it is bringing a full grid as first Step.
The other thing is the AjaxPanal does not work properly for this textbox filter compared with the combobox. In the combobox the loading icon is on all post back process. With txtbox you rarely notice it on but when it is gone the application is still processing the grid.

[Princy]

Hi Paulo,

I was not able to replicate such an issue at my end. Please have a look at the below sample code snippet.

ASPX:

<telerik:RadAjaxPanel ID="RadAjaxPanel" runat="server">
    <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" AllowFilteringByColumn="true" EnableLinqExpressions="false" AllowPaging="true" OnNeedDataSource="RadGrid1_NeedDataSource">
        <MasterTableView DataKeyNames="OrderID" CommandItemDisplay="Top">
            <Columns>
                <telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="ShipCity" UniqueName="ShipCity" HeaderText="ShipCity"
                    AutoPostBackOnFilter="true">
                    <FilterTemplate>
                        <telerik:RadComboBox ID="RC1" runat="server" DataValueField="ShipCity" AppendDataBoundItems="true"AllowCustomText="true" DataTextField="ShipCity" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("ShipCity").CurrentFilterValue %>' OnClientSelectedIndexChanged="categoryIndexChanged" DataSourceID="SqlDataSource2" Width="310">
                            <Items>
                                <telerik:RadComboBoxItem Text="All" />
                            </Items>
                        </telerik:RadComboBox>
                        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                            <script type="text/javascript">
                                function categoryIndexChanged(sender, args) {
                                    var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                    tableView.filter("ShipCity", args.get_item().get_value(), "Contains");
                                }
                            </script>
                        </telerik:RadScriptBlock>
                    </FilterTemplate>
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn UniqueName="ShipCountry" DataField="ShipCountry" SortExpression="ShipCountry" HeaderText="ShipCountry" ShowFilterIcon="false" AutoPostBackOnFilter="true" AllowFiltering="true">
                    <ItemTemplate>
                        <asp:Label ID="lblInclude" runat="server" Text='<%#Eval("ShipCountry")%>' />
                    </ItemTemplate>
                    <FilterTemplate>
                        <telerik:RadTextBox ID="txtIncludeFileFilter" Text='<%# Container.OwnerTableView.GetColumn("ShipCountry").CurrentFilterValue %>' Width="100%" runat="server" AutoPostBack="false" onkeydown="key(event,this);">
                        </telerik:RadTextBox>
                        <telerik:RadScriptBlock ID="RadScriptBlock4" runat="server">
                            <script type="text/javascript">
                                function key(event, sender) {
                                    if (event.keyCode == 13) {
                                        var filterValue = "";
                                        var filterFunction = "NoFilter";
                                        var s = sender.value;
                                        if (s != "") {
                                            filterValue = s;
                                            var filterFunction = "Contains";
                                        }
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        tableView.filter("ShipCountry", filterValue, filterFunction);
                                    }
                                }
                            </script>
                        </telerik:RadScriptBlock>
                    </FilterTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings AllowKeyboardNavigation="true">
            <KeyboardNavigationSettings AllowSubmitOnEnter="true" />
        </ClientSettings>
    </telerik:RadGrid>
</telerik:RadAjaxPanel>

Thanks,
Princy

[Paulo]

Princy

yesterday I decided to remove the code for that column and compare with the standard gridboundcolum with the button for filter options and I notice that this issue didn't occur. So I set the filter value to contain, set the allowpostbackonfilter to true and hidded the button. So now when I filter it works properly. I haven't tried to run it on IE 8 yet. I will compare this code with mine and see what is missing.
Thank you

[Viktor Tachev]

Hello Paulo,

If I understand your requirement correctly you would like to have only TextBox for filtering and a filter should be applied when the user presses the Enter key.

This functionality for RadGrid is available out of the box. You would need to set the AutoPostBackOnFilter property for the column to true and ShowFilterIcon to false. The default filter function for a GridBoundColumn is "Contains". You could modify it with the CurrentFilterFunction property. The markup for a column would look similar to the one below:

<telerik:GridBoundColumn DataField="Description" HeaderText="Description" UniqueName="Description" AutoPostBackOnFilter="true" ShowFilterIcon="false">
</telerik:GridBoundColumn>

Similar approach could be used also for a GridTemplateColumn:

<telerik:GridTemplateColumn DataField="Description" HeaderText="Description" AutoPostBackOnFilter="true" ShowFilterIcon="false">
    <ItemTemplate>
        <asp:Label Text='<%# Eval("Description") %>' runat="server" />
    </ItemTemplate>
</telerik:GridTemplateColumn>

Regards,
Viktor Tachev
Telerik