Problem setting text from javascript

4 posts, 0 answers
  1. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 11 May Link to this post

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

     

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    144 posts

    Posted 14 May Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 16 May in reply to Peter Milchev Link to this post

    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 ?

  5. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 16 May in reply to Mickael Link to this post

    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.
Back to Top