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

Clientside Get Filter Value

2 Answers 192 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 06 Dec 2019, 07:46 PM

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 Answers, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 11 Dec 2019, 02:05 PM

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.
0
Steven
Top achievements
Rank 1
answered on 12 Dec 2019, 04:11 PM
Good information, thank you.
Tags
Grid
Asked by
Steven
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Steven
Top achievements
Rank 1
Share this question
or