RadTextBox Filter issue

4 posts, 0 answers
  1. Paulo
    Paulo avatar
    30 posts
    Member since:
    Mar 2013

    Posted 13 Mar 2014 Link to this post

    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.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 14 Mar 2014 in reply to Paulo Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Paulo
    Paulo avatar
    30 posts
    Member since:
    Mar 2013

    Posted 14 Mar 2014 in reply to Princy Link to this post

    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
  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 18 Mar 2014 Link to this post

    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
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
Back to Top