Set Search Text from server side

[Peter]

hi

is there any way of pre - populating the search text from server side , ive looked through the parameters and i cant find anything refering to text or search text.

ive seen a way to do it from client side , but is there any way to set it on server side , i.e after a postback or page refresh ?

Peter.

[Dimitar Terziev]

Hi Peter,

RadSearchBox does not support such functionality since it relays on a user interaction to trigger search operation. As you have mentioned, there is a way to trigger such operation client-side using the public query method of the client-side object of the control. If you need to trigger this operation based on some action made on the server you could register a client script from the server which triggers the search operation.

Regards,
Dimitar Terziev
the Telerik team

[Peter]

hi

you mis understand i dont want to trigger the search , i simply want to put text into the searchbox.

basically when the user enters text and triggers the search , the page is refreshed and the text they have searched is lost so i want to be able to put it back in so that they can ammend their search.

[Dimitar Terziev]

Hi Peter,

Thank you for clarifying what is the use case where setting the text is necessary. We shall consider retaining the entered the text of the SearchBox after postback. What could be applied as a workaround at the moment is to store the text from the SearchBox in a hidden field and then upon client page load to apply it to the input element of the control. I sample page implementing such approach is attached for reference.

All the best,
Dimitar Terziev
the Telerik team

[Peter]

hi thanks for this , based on your example i have made a workaround , but for your information this workaround doesnt work if you are setting the empty text of the search box as well.

[Bozhidar]

Hi Peter,

Good catch. Here's the modified javascript code:

function pageLoad() {
    var hiddenfield = document.getElementById("HiddenField1"),
        searchBox = $find("RadSearchBox1"),
        inputElement = $telerik.$(searchBox.get_inputElement());

    if (hiddenfield.value !== "") {
        inputElement.removeClass("rsbEmptyMessage");
        inputElement.val(hiddenfield.value);
    }
}

 
All the best,
Bozhidar
the Telerik team

[Mickael]

[quote]Dimitar Terziev said:Hi Peter,

RadSearchBox does not support such functionality since it relays on a user interaction to trigger search operation. As you have mentioned, there is a way to trigger such operation client-side using the public query method of the client-side object of the control. If you need to trigger this operation based on some action made on the server you could register a client script from the server which triggers the search operation.

Regards,
Dimitar Terziev
the Telerik team

 

 

[/quote]

 Hi, I am interested in triggering the search from the client side, but I cannot find anything information about it, could you show me how to ?

[Bozhidar]

Hi,

In order to trigger the autocomplete with some text you have to use the query method, which is defined in the following help article:
http://docs.telerik.com/devtools/aspnet-ajax/controls/searchbox/client-side-programming/radsearchbox-object

Sample use for the method might look like this:

$find("RadSearchBox1").query("s", true)

Regards,
Bozhidar
Telerik

[Frank McGuire]

Bozhidar, Thanks for the query method example.   We just used it to trigger the search from the client side. We are using the autocomplete list to select an item that contains a Value (ID) that we can use client side  to link to an URL. The client side  query method solved an issue we were experiencing where when pressing enter in the Searchbox input text, the autocomplete list closes/clears leaving the user with no selection(s) to choose from.  Triggering the search again when there is no Value in the client side onSearch event seems to resolve this. 

 

   function onSearch(sender, args) {
                if (args.get_value() != null) {
                    var url;
                    url = "myurl.aspx?id=" + args.get_value();
                    $(location).attr('href', url);
                }
                else {
                    //Handle user hitting enter on the search text box  which results in no item selected from the list and no value
                    // and also clears/closes the autocomple list.Trigger the search and autocomplete list again
                    sender.query(args.get_text(), true);
                }
          }

[Mickael]

Is there a way to do this without jquery?

I tried

$find("RdSrchBx").query("s", true)

and I got the following exception:

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'query'

 

 

 

[Mickael]

This is how I declared my control:

<telerik:RadSearchBox
    ID="RdSrchBx"
    runat="server"
    EmptyMessage="Name"
    OnClientSearch="AddSimpleName"
    OnClientDataRequesting="AddSimpleName"
    ShowSearchButton="true">
    <DropDownSettings Height="400" Width="550" />
    <WebServiceSettings Path="Main.aspx" Method="GetResults" />
</telerik:RadSearchBox>

[Bozhidar]

Hi,

The specified line doesn't contain any jQuery. It is invoking a method of the ClientAPI of the SearchBox client object. Please make sure you are using the latest version of the controls, as the query method was not included in the earlier versions of the SearchBox control.

Regards,
Bozhidar
Telerik

[Mickael]

I am using version 2015.3.1111, Nov. 11, 2015

And I still cannot find the query function.

[Bozhidar]

Hello,

Could you open a support ticket and send us a runnable sample page that demonstrates your use case, so that we can take a closer look?

Regards,
Bozhidar
Telerik

[Mickael]

Actually, could you give me a sample where you use this function?

So I can try it on my own, maybe I am doing something wrong that I do not see.

[Bozhidar]

Hi,

A sample would not contain any code that's different than the one already posted her - declaring a simple RadSearchBox and calling the query() method once the page is loaded.

Regards,
Bozhidar
Telerik

[Mickael]

Got it to work with the following code:

var nameSearchBox = $find("<%= RdSrchBx_A.ClientID %>");
nameSearchBox = nameSearchBox.get_inputElement();
if (isEmpty(result.name) == true) {
    nameSearchBox.focus();
}
else {
    window.setTimeout(function () {
        nameSearchBox.value = result.name;

        var typeSearchBox = $find("<%= RdSrchBx_B.ClientID %>");
        typeSearchBox = typeSearchBox.get_inputElement();
        typeSearchBox.focus();
    }, 1);
}

The problem I have now is in the case I set the text for nameSearchBox and then focus on the next searchBox, nameSearchBox appears grayed out like it has not been set yet.

And if I click on it, the value I set is removed.

You can check the attached screenshot.

The top searchbox is nameSearchBox, the bottom one is typeSearchBox.

For info: I do not use postback. The user types something in a top Searchbox, its OnClientSearch javascript function calls an aspx C# function and the return of that function is the javascript I posted above.

[Mickael]

What I would like is that once I set the text of nameSearchBox, it appears as normal text. As if the user had typed it directly in the box.

So no grayed out, no reset on focus.

[Bozhidar]

Hi,

In order to directly manipulate the input element's value, you have to disable the Empty message of the SearchBox (in other words don't set the empty message).

Regards,
Bozhidar
Telerik

[Mickael]

So if I remove the emptyMessage when I set the input value it would work? And put it back is the user empty the serachbox.

Or should the emptyMessage be always empty for this to work?

[Bozhidar]

Hi,

You can try both approaches and see which one works best for you.

Regards,
Bozhidar
Telerik

[Mickael]

I removed the emptyMessage, and this is still not working.

The text still appears as grayed out, and disappear when I click on it.

I paste the sample here. 'RdSrchBxType' is a second searchbox I want to focus on after automatically setting the RdSrchBx text.

<telerik:RadSearchBox
    ID="RdSrchBx"
    runat="server"
    OnClientSearch="AddSimple"
    OnClientDataRequesting="AddSimple"
    ShowSearchButton="true">
    <DropDownSettings Height="400" Width="550" />
    <WebServiceSettings Path="Main.aspx" Method="GetResults" />
</telerik:RadSearchBox>

var nameSearchBox = $find("<%= RdSrchBx.ClientID %>");

nameSearchBox = nameSearchBox.get_inputElement();

window.setTimeout(function () {
    nameSearchBox.value = result.name;

    var typeSearchBox = $find("<%= RdSrchBxType.ClientID %>");
    typeSearchBox = typeSearchBox.get_inputElement();
    typeSearchBox.focus();
}, 1);

[Bozhidar]

Hi,

I tested the sample code and the SearchBox works fine on my end. Here's a video capture of the behavior I got:
http://screencast.com/t/2qRXoCZ6PJ

Regards,
Bozhidar
Telerik

[Mickael]

The one difference between your code and mine, is that you set the value on the pageLoad, whereas I set it from javascript later on.

I might have not explained myself right (or forgot to write some part) so I will try again.

We have 3 RadSearchBox.

<telerik:RadSearchBox
    ID="CmbBx_Search1"
    runat="server"
    Width="550px"
    EmptyMessage="Add or Search..."
    OnClientSearch="PerformSearch"
    ShowSearchButton="true">
    <DropDownSettings Height="400" Width="550" />
    <WebServiceSettings Path="Main.aspx" Method="GetResults" />
</telerik:RadSearchBox>

<telerik:RadSearchBox
    ID="RdSrchBx_RdWndw_A"
    runat="server"
    OnClientSearch="AddSimpleName"
    OnClientDataRequesting="AddSimpleName"
    ShowSearchButton="true">
    <DropDownSettings Height="400" Width="550" />
    <WebServiceSettings Path="Main.aspx" Method="GetResults" />
</telerik:RadSearchBox>

<telerik:RadSearchBox
    ID="RdSrchBx_RdWndw_B"
    runat="server"
    OnClientSearch="AddSimpleType"
    OnClientDataRequesting="AddSimpleType"
    ShowSearchButton="true">
    <DropDownSettings Height="400" Width="550" />
    <WebServiceSettings Path="Main.aspx" Method="GetTypeResults" />
</telerik:RadSearchBox>

function PerformSearch(sender, args) {
    PageMethods.PrepareForSearchResult(args.get_text(), false, ProcessInterfaceResult);
}

function ProcessInterfaceResult(pResult) {
    var result = JSON.parse(pResult);
    ClearSearchBox($find("<%= RdSrchBx_RdWndw_A.ClientID %>"), false);
    ClearSearchBox($find("<%= RdSrchBx_RdWndw_B.ClientID %>"), false);

    var nameSearchBox = $find("<%= RdSrchBx_RdWndw_A.ClientID %>");
    var nameSearchBoxInput = nameSearchBox.get_inputElement();
    if (isEmpty(result.name) == true) {
        nameSearchBoxInput.focus();
    }
    else {
        nameSearchBoxInput.value = result.name;

        var typeSearchBox = $find("<%= RdSrchBx_RdWndw_B.ClientID %>");
        typeSearchBox = typeSearchBox.get_inputElement();
        typeSearchBox.focus();
    }
}

function ClearSearchBox(pSearchBox, pIsMobile) {
    pSearchBox.clear();
    var emptyMessage = pSearchBox.get_emptyMessage();
    pSearchBox = pSearchBox.get_inputElement();
    if (pIsMobile == true) {
        pSearchBox.innerHTML = emptyMessage;
    }
    else {
        pSearchBox.innerText = emptyMessage;
    }
    pSearchBox.className = "rsbInput radPreventDecorate rsbEmptyMessage";
}

That's the whole code for it.

[Bozhidar]

Hello,

Since this thread has become very specific to your custom implementation, I would suggest that you open a support ticket and attach a runnable sample project, that we can inspect in order to see what the issue might be. That way we can prevent further clutter in the public forum.

Regards,
Bozhidar
Telerik

[Mickael]

As requested, I opened a new thread related to our problem.