Clientside Get Filter Value

3 posts, 0 answers
  1. Steven
    Steven avatar
    14 posts
    Member since:
    Oct 2012

    Posted 06 Dec 2019 Link to this post

    I've got one page with four grids, wrapped in a user control.  The client side filtering has been tough because the javascript methods I had were stepping on each other.  The rest of it works, I just can't get the filter value typed in the textbox when they click on the filter icon.  In the code below I've got the code to target the correct grid, I just need to get the filter value.  tableView.get_filterExpressions(); is coming up dry.

    Telerik.Web.UI.dll = 2017.3.913.45

     

    <telerik:GridBoundColumn DataField="COMPM_ADDRESS" FilterControlAltText="Filter Name column" AutoPostBackOnFilter="true"
        HeaderText="ADDRESS" SortExpression="COMPM_ADDRESS " UniqueName="COMPM_ADDRESS" AllowFiltering="true">
        <ItemStyle HorizontalAlign="Left" Width="130px" />
        <HeaderStyle HorizontalAlign="Left" Width="130px" />
     
        <FilterTemplate>
            <telerik:RadTextBox ID="txtFilterCompAddress" runat="server" Width="100px" onkeyup="CompAddressOnKeyUp(this, event)"
                Text='<%# Container.OwnerTableView.GetColumn("COMPM_ADDRESS").CurrentFilterValue %>'>
                <ClientEvents OnKeyPress="CompAddressKeyPress" />
            </telerik:RadTextBox>
     
            <asp:ImageButton ImageUrl="/images/filter2.png" runat="server" ID="ImageButton1"
                Value="<%#((GridItem)Container).OwnerTableView.ClientID%>" OnClientClick="ApplyFilterIcon(this); return false;" />
     
            <telerik:RadScriptBlock ID="radScriptAddress" runat="server">
                <script type="text/javascript">
     
                    var _columnNameAddress = "COMPM_ADDRESS";
     
                    // filter icon clicked
                    function ApplyFilterIcon(sender)
                    {
                        var masterTableId = $(sender).attr('Value');
                        var tableView = $find(masterTableId);
     
                        debugger;
                        var filters = tableView.get_filterExpressions();  // EMPTY
     
                        var filterValue = "553";  // <<<  I NEED THIS VALUE, WHAT THEY TYPED IN TEXTBOX
                                                         //BELOW WORKS
                        tableView.filter(_columnNameAddress, filterValue, Telerik.Web.UI.GridFilterFunction.Contains, true);
                    }
     
                    // just checks for an empty filter textbox on backspace and return to clear the filter
                    function CompAddressOnKeyUp(sender, evt)
                    {
                        onKeyUpFilterGridClear(sender, evt, "<%#((GridItem)Container).OwnerTableView.ClientID%>", _columnNameAddress);
                    }
                    // on a keypress; check for return to fire the filter
                    function CompAddressKeyPress(sender, evt)
                    {
                        onKeyPressReturnTrigger(sender, evt, "<%#((GridItem)Container).OwnerTableView.ClientID%>", _columnNameAddress);
                    }
                </script>
            </telerik:RadScriptBlock>
     
        </FilterTemplate>
    </telerik:GridBoundColumn>
  2. Attila Antal
    Admin
    Attila Antal avatar
    520 posts

    Posted 11 Dec 2019 Link to this post

    Hi Steven,

    filterExpressions do not contain the user input. For that value, you will need to access the TextBox control and its value.

    Here is an example that you can try. It has been optimized to have no hard-coded column name and also accessing of other elements is done a little differently. jQuery closest() is a powerful method that I would recommend for most of the times when trying to traverse up on the DOM tree.

    <telerik:GridTemplateColumn DataField="ShipCountry"
        FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
        SortExpression="ShipCountry" UniqueName="ShipCountry">
        <FilterTemplate>
            <telerik:RadTextBox ID="txtFilterCompAddress" runat="server" Width="100px" onkeyup="CompAddressOnKeyUp(this, event)"
                Text='<%# Container.OwnerTableView.GetColumn("ShipCountry").CurrentFilterValue %>'>
                <ClientEvents OnKeyPress="CompAddressKeyPress" />
            </telerik:RadTextBox>
    
            <asp:ImageButton ImageUrl="/images/filter2.png" runat="server" ID="ImageButton1" OnClientClick="ApplyFilterIcon(this); return false;" />
    
            <telerik:RadScriptBlock ID="radScriptAddress" runat="server">
                <script type="text/javascript">
    
                    // filter icon clicked
                    function ApplyFilterIcon(sender) {
                                           
                        var tableID = $(sender).closest('.rgMasterTable').attr('id');
                        var currentRowElement = $(sender).closest('tr')[0];
                        var tableView = $find(tableID);
                        var columnIndex = $(sender).closest('td').index();
                        var currentColumn = tableView.get_columns()[columnIndex];
                        var columnName = currentColumn.get_uniqueName();
                        // find TextBox by ID in the current Row element
                        var filterTextBox = $telerik.findControl(currentRowElement, "txtFilterCompAddress");
    
                        // find textbox element relative to the Button, search for siblings that contain the .RadInput class
                        var textbox = $(sender).siblings('.RadInput').find('.riTextBox')[0];
                        // if element exists and it has a property control
                        if (textbox && textbox.control) {
                            // cast the element to RadTextBox object
                            filterTextBox = textbox.control;
                        }
    
                        var filterValue = filterTextBox.get_value();  // <<<  I NEED THIS VALUE, WHAT THEY TYPED IN TEXTBOX
                        //BELOW WORKS
    
                        tableView.filter(columnName, filterValue, Telerik.Web.UI.GridFilterFunction.Contains, true);
                    }
    
                    // just checks for an empty filter textbox on backspace and return to clear the filter
                    function CompAddressOnKeyUp(sender, evt) {
                        onKeyUpFilterGridClear(sender, evt, "<%#((GridItem)Container).OwnerTableView.ClientID%>", _columnNameAddress);
                    }
                    // on a keypress; check for return to fire the filter
                    function CompAddressKeyPress(sender, evt) {
                        onKeyPressReturnTrigger(sender, evt, "<%#((GridItem)Container).OwnerTableView.ClientID%>", _columnNameAddress);
                    }
                    // Add the following event handlers
                    function onKeyUpFilterGridClear(e) {
    
                    }
    
                    function onKeyPressReturnTrigger(e) {
    
                    }
                </script>
            </telerik:RadScriptBlock>
        </FilterTemplate>
        <ItemTemplate>
            <%# Eval("ShipCountry") %>
        </ItemTemplate>
    </telerik:GridTemplateColumn>

    Kind regards,
    Attila Antal
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Steven
    Steven avatar
    14 posts
    Member since:
    Oct 2012

    Posted 12 Dec 2019 in reply to Attila Antal Link to this post

    Good information, thank you.
Back to Top