height and widthproblem for tooltip load from client side

4 posts, 0 answers
  1. CH
    CH avatar
    28 posts
    Member since:
    Nov 2008

    Posted 01 Aug 2011 Link to this post

    Dear Sir:
        I have a radgrid and there is some tooltips inside the grid. i tried to use the tooltip manager for the tooltip but i found the performance is not satisfy when there are a lot of tooltips needed. Now, i changed to load the tooptip by javascript (sample on below) . Everything seem fine except the width and height, the tooltips seem cannot automatically change the tooltips width and height, i also tried to use the auto scrollbar but the scrollbar didn't show up. how can I pass the tooltip's width and height to the tooltip manager and it will resize/show scrollbar to the tooltip. is there any sample which i can follow?

    i got some hints from other post  with property (OnClientBeforeShow, OnClientShow) to change the size  but i cannot make it work.



    thks

    From CH


    function GetXMLObject()
    {
        var xmlhttp=false;
              
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try 
            {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) 
            {
                xmlhttp = false;
            }
        }  
      
        if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
            try {
                xmlhttp = new XMLHttpRequest();
            } catch (e) {
                xmlhttp=false;
            }
        }
          
        if (!xmlhttp && window.createRequest) {
            try {
                xmlhttp = window.createRequest();
            } catch (e) {
                xmlhttp=false;
            }
        }
          
        if (!xmlhttp)
            return null;
        else
            return xmlhttp;
    }


    function ShowTooltip(sender, manager, url) {
            if (manager != null) {
                var tooltip = manager.getToolTipByElement(sender);
      
                if (!tooltip) {
                    tooltip = manager.createToolTip(sender);
                }
      
                if (xmlRequest != null)
                    xmlRequest.Abort();
      
                xmlRequest = GetXMLObject();
      
                tooltip.show();
                var contentElement = document.createElement('div');
      
                contentElement.innerHTML = "<img src='../../images/loading7.gif' />";
                tooltip.set_contentElement(contentElement);
      
                if (xmlRequest != null) {
                    xmlRequest.open("GET", url, true);
                    xmlRequest.onreadystatechange = function () {
                        if (xmlRequest.readyState == 4) {
                            if (xmlRequest.status == 200) {
                                tooltip.hide();
                                contentElement = document.createElement('div');
                                contentElement.innerHTML = xmlRequest.ResponseText;
                                if (contentElement.outerText.length < 10)
                                    contentElement.style.width = "100px";
      
      
                                tooltip.set_contentElement(contentElement);
                                tooltip.show();
      
                            }
                        }
                    }
                }
                xmlRequest.send(null);
            }
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 01 Aug 2011 Link to this post

    Hello CH,

    You can use the RadToolTip's Client-side API and its set_width() and set_height() functions to change the dimensions of a tooltip dynamically. I also believe that setting some values for the Width and Height properties of the RadToolTipManager will also help, especially in combination with ContentScrolling set to Auto.

      On a side note - if you use a single tooltip you may also use a regular RadToolTip and set its target element via its set_targetControl() function before showing it every time instead of creating many tooltips via the RadToolTipManager.


    Regards,
    Marin
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. CH
    CH avatar
    28 posts
    Member since:
    Nov 2008

    Posted 01 Aug 2011 Link to this post

    i tried to set the widht and height for my tool tip on client event onclientshow, because my contain inside the tooltip is a separate page. how can i get the width and the height of the page contain?
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 03 Aug 2011 Link to this post

    Hi Ch,

      The way you can get the dimensions of your page is not related to the RadControls in any way and it is up to you to determine this size. There are many browser incompatibilities and differences in determining dimensions, yet I can suggest two ways that may aid you in this endeavor:

    1) The best way is to have the container of the page with some exact dimensions that are sufficient for your needs (for example style="width: 400px; height: 400px;"). If you know them you can set them as the tooltip's size easily via it client-side methods.

    2) you can try using the static Telerik function getBounds() to calculate the dimensions of a given DOM element, yet I cannot guarantee that this will work correctly for an entire page loaded inside an absolutely positioned element (the tooltip).

    Generally speaking autosizing and determining dimensions is a task that is the developer's responsibility, since it is the custom content that requires it.


    Greetings,
    Marin
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top