Dynamically move/show/hide SearchBox from javascript causes weird display

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

    Posted 12 May Link to this post

    I have a SearchBox with a 'none' display style declared in a holding div.

    After a javascript event (example click on a button, without postback) I am dynamically creating a new div, and move the SearchBox to it.

    I have to do this, because it seems that it is not possible to dynamically create a SearchBox from javascript.

    I based the initial hide/show on the post of Brian Azzi.

    Everything works fine, but the magnifying glass appears  in on the left of the SearchBox instead of the right side. I attached a screenshot of it.

    And that is annoying.

    Any solution for that?

    I am posting a sample of the xml and javascript I am using.

    <div id="telerikHolder">
        <telerik:RadSearchBox
            ID="RdSrchBx"
            runat="server"
            style="display: none;"
            EmptyMessage="Type"
            OnClientSearch="AddSimple"
            OnClientDataRequesting="AddSimple"
            ShowSearchButton="true">
            <DropDownSettings Height="400" Width="550" />
            <WebServiceSettings Path="Main.aspx" Method="GetTypeResults" />
        </telerik:RadSearchBox>
    </div>

    var el_0_1_1_1 = document.createElement('div');
    pParent.appendChild(el_0_1_1_1);
    el_0_1_1_1.className = 'popupCellRight';
     
    this._typeSearchBoxInput = $("#RdSrchBx");
    this._typeSearchBoxInput.show();
    //ClearSearchBox(this._typeSearchBoxInput);
     
    this._typeSearchBox = null;
    var telerikHolder = document.getElementById('telerikHolder');
    var childDivs = telerikHolder.getElementsByTagName('div');
    for (i = 0; i < childDivs.length; i++) {
        var childDiv = childDivs[i];
        if (childDiv.id == "RdSrchBx") {
            this._typeSearchBox = childDiv;
            break;
        }
    }
    telerikHolder.removeChild(this._typeSearchBox);
     
    el_0_1_1_1.appendChild(this._typeSearchBox);
    // this._typeSearchBoxInput = this._typeSearchBoxInput.get_inputElement();

    The other problem I have is that this._typeSearchBoxInput does not seem to be a proper Telerik control.

    Because when I try to use get_inputElement() on it, I get an undefined exception.

     

     

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

    Posted 16 May in reply to Mickael Link to this post

    I narrowed it down to the 'style="display: none;"'
    if I do not have that, then the magnifying glass aligns to the right as expected.
    But I need that part to keep the searchbox hidden until I need it.
    Any idea on a fix for that ?

  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 Mickael Link to this post

    For the second issue with the control not being a proper telerik control, I found that you cannot reference Telerik controls from JavaScript files because aspx does not parse them.

    So I made a class to get those references exposed.
    I am posting it here for future reference if anyone needs it.

    <script  type="text/javascript" language="javascript">
        function TelerikControls() {
            this.__defineGetter__("RdSrchBx_A", function () {
                return $find("<%= RdSrchBx_A.ClientID %>");
            });
        }
        var _telerikControls = new TelerikControls();
        // cALL THIS FROM YOUR EXTERNAL js FILE TO GET THE REFERENCE
        var searchBoxA = _telerikControls.RdSrchBx_A;
    </script>

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    833 posts

    Posted 17 May Link to this post

    Hello Mickael,

    At my end the displacement of the magnifying glass icon is can be avoided if the SearchBox' repaint() client-side method is called after moving it. I attached a sample project, which demonstrates this.

    Regards,
    Ivan Danchev
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  6. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 17 May in reply to Ivan Danchev Link to this post

    Works perfectly.

    Thanks a lot

  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    833 posts

    Posted 19 May Link to this post

    Hello Mickael,

    I am glad it worked out as expected. The repaint() method re-renders the control, thus refreshing its appearance on the client. You can find this and other client-side objects of the RadSearchBox object in the following documentation article.

    Regards,
    Ivan Danchev
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017