Clientside Get Filter Value

[Steven]

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>

[Attila Antal]

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

[Steven]

Good information, thank you.