This is a migrated thread and some comments may be shown as answers.

height and widthproblem for tooltip load from client side

3 Answers 172 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
CH
Top achievements
Rank 1
CH asked on 01 Aug 2011, 08:02 AM
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);
        }

3 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 01 Aug 2011, 04:15 PM
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.

0
CH
Top achievements
Rank 1
answered on 02 Aug 2011, 02:17 AM
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?
0
Marin Bratanov
Telerik team
answered on 03 Aug 2011, 01:45 PM
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.

Tags
ToolTip
Asked by
CH
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
CH
Top achievements
Rank 1
Share this question
or