$Find and .clear() Not Working

[James]

Hi,

I do like this new RadSearchBox control, but I am having a few small problems.

First, I am having difficulty accessing the control client side.  I've used several variations of $find to no avail.  Would someone please suggest some alternative syntaxes.

Second, once I find this control, I would like to .clear() it of its previous search text/value.  I've tried to do this on the OnClientSearch event (using sender.clear()), but no luck with that either. 

Any suggestions?

Jim

[Shinu]

Hi,

Please have a look into the following code i tried to access the RadSearchBox from client side and clear the content on a RadButton client click.

ASPX:

<telerik:RadSearchBox ID="RadSearchBox1" runat="server" DataSourceID="SqlDataSource1"
    DataTextField="ShipCity">
</telerik:RadSearchBox>
<telerik:RadButton ID="RadButton1" runat="server" Text="Click" OnClientClicked="OnClientClicked">
</telerik:RadButton>

JavaScript:

<script type="text/javascript">
    function OnClientClicked() {
        var searchBox = $find("<%= RadSearchBox1.ClientID %>");
        searchBox.clear();
    }
</script>

Thanks,
Shinu.

[RRE]

I try it,

on debugging seems all working, without problems (also appears the method of control).

But the search box still have the last search :(

 

Renato

[Rumen]

Two ideas to try:

1. Clear the value of the textbox input with searchBox.get_inputElement().value = ""
2. Set a small timeout prior to calling the clear() method and the get_inputElement().value = "" setting, e.g.
   
   
   

   var searchBox = $find("<%= RadSearchBox1.ClientID %>");
   
   setTimeout(function(){
       searchBox.clear()
       searchBox.get_inputElement().value = ""
   }, 100);

 

 

[RRE]

No ;(

I'm honestly thinking of switching to the RadComboBox controller.
It seems to me a much more mature and developed product.

thanks anyway

Renato

[Rumen]

I am sorry to hear that Renato! 

My experiment in the Overview demo was successful as shown in the Youtube video I recorded for you.

I cleared the input value with $0.control.get_inputElement().value = ""; where the $0.control return reference to the combobox client-side object.

[RRE]

Dear Rumen,

thank for your interesting video!

Firs of all: I'm not able at all to find directly the $0.control  !! on my chrome, also on Telerik page demo, I don't wind nothing.

How are you able? do you use some plugin ? is very usefull.

Thaks

Renato

 

 

[RRE]

Dear Rumen,

I arrived to clean it as you suggest, but there is another problem: look at telerik demo

https://demos.telerik.com/aspnet-ajax/searchbox/examples/applicationscenarios/gridfilteredbysearchbox/defaultcs.aspx

if you manually clean the search, the grid still selected.

On your example I have the same result: the associated Grid still selected with the old value.

Greetings

Renato

[Rumen]

Hi Renato,

It is actually not a plugin, but a built-in feature of the DevTools console -> $0 references the last element selected in the Elements panel. You can find more information in our blog post Access Selected Elements and Executed Expressions Easily. 

As for the  $0.control.get_inputElement().value = "";  or $find("<%=RadSearchBox1.ClientID%>").get_inputElement().value = ""; method - it just clears the text input of the SearchBox but does not trigger postback or event to update the grid.

You still need to type something in the input area after you clear it and choose from the dropdown findings to filter the grid. 

[RRE]

Dear Rumen,

thank for link, I will study it.

To rebuild the grid by client I found the .rebind() method. But without success.

My searchBox query is on "Surname" field.

This is my code, clean the field of searchBox but not the associated grid. Can you help me what I'm making wrong?

    <script type="text/javascript">
        function CleanSearch() {
            var searchBox = $find("<%= RadSearchBox1.ClientID %>");

//          searchBox.clear();            // does not works

            searchBox.get_inputElement().value = "";

//try to reset associated grid
            var grid = $find('<%= RadGrid1.ClientID %>');
            var tableView = grid.get_masterTableView();
            tableView.getColumnByUniqueName("Surname").set_filterFunction(0);
            tableView.get_filterExpressions().clear();

            tableView.rebind();
        }
    </script>

Thank

Renato

 

 

 

[RRE]

I found a solution, very simple, just add also an event to server on the 'clean' button

<asp:Button runat="server" IdButton="BtnClear" Text="CLEAR" OnClientClick="ResetSearch()" OnClick="ResetSearch_Click"  />

 

and on server side something like

Grid1.SelectParameters.Clear();
Grid1.SelectCommand = "SELECT [IDPaziente], [Cognome], [Nome], [DataModifica], [DataNascita] FROM [AnagraficaPazienti] ORDER BY [Cognome];";

 your starting query,

 

Hope will be usefull.

Renato

[James]

Shinu,

Thanks so much.  I'm not sure why I was having trouble with this before, but it is working now.

Thanks,

Jim

[Evgeniy Ovcharenko]

Hello,

I have the same issue. Here is my control definition:
<telerik:RadSearchBox ID="RadSearchBox1" runat="server" OnClientSearch="myFilesSearch" EnableAutoComplete="False">
                 </telerik:RadSearchBox>

and my javascript:

function myFilesSearch(sender, args) {
            var searchBox = $find("<%= RadSearchBox1.ClientID %>");
            searchBox.clear();
        }

$find works well, but clear() does nothing.

Can somebody help me?

[Plamen]

Hello,

 
You have to set the value of the input element as in the code below:

sender.get_inputElement().value = "";

Hope this will be helpful.
Regards,
Plamen
Telerik

[Evgeniy Ovcharenko]

It works!
Thank you