Problem setting text from javascript

[Mickael]

We are having a problem with setting the text of a SearchBox when not using PostBack.

Following the sample xml and javascript below, the user type something into 'CmbBx_Search1', and when he/she press enter, we want to set the value in 'RdSrchBx_RdWndw_A' by default, then set the focus on 'RdSrchBx_RdWndw_B'.

The problem is that after setting the text of 'RdSrchBx_RdWndw_A' it appears grayed out like it has not been set yet. (like a default value)
And if I click on it, the value I set is removed.
You can check the attached screenshot.

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.

It looks like this is working when using the PostBack event, but I cannot do that, I have to set the value from javascript as a result of the user selection in 'CmbBx_Search1'

 

<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";
}

 

[Peter Milchev]

Hello Mickael,

You will encounter this behavior when you have an EmptyMessage set. The reason is that the EmptyMessage is just a normal text styled with the CSS class rsbEmptyMessage. There is an event which is fired when an input with rsbEmptyMessage is focused that clears the message. The solution is to remove that CSS class when you set the value. Here is how should the ProcessInterfaceResult function look like in order to achieve the desired functionality:

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 {
        $telerik.$(nameSearchBoxInput).removeClass("rsbEmptyMessage");
        nameSearchBoxInput.value = result.name;

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

Regards,
Peter Milchev
Telerik

[Mickael]

Thank you, that worked.

But that raised another problem, the focus is always set to 'RdSrchBx_RdWndw_A' instead of 'RdSrchBx_RdWndw_B' even with the focus() on 'RdSrchBx_RdWndw_B' inputElement.

Any idea ?

[Mickael]

nvm, I fixed a problem with the problem I was handling the references to the Telerik controls I used and now the focus is set properly.