radtooltipmanager+radgrid grouping/sorting

2 posts, 0 answers
  1. lnu
    lnu avatar
    19 posts
    Member since:
    Aug 2012

    Posted 10 Nov 2009 Link to this post

    Hello,

    i'm using an radtooltipmanager with autotooltipfy=true to replace classic browser tooltip by radtooltip. It works fine except on an radgrid with grouping and sorting activated. The sort action is well tooltipified but not the grouping one.

    With the following code for example, the link in the th is "overrided" by the th title.
    <table class="mytable"> 
            <thead> 
                <tr> 
                    <th title="TH TITLE" style="text-align: left; cursor: move;" scope="col" style="height: 30px;"> 
                        <a title="INNER LINK TITLE">test</a><a title="yyy">(2)</a> 
                    </th> 
                </tr> 
            </thead> 
            <tbody> 
                <tr> 
                    <td title="TD TITLE"> 
                        xxx 
                    </td> 
                </tr> 
            </tbody> 
        </table> 

    Do you have a solution for that case?


  3. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 13 Nov 2009 Link to this post

    Hello lnu,

    I built up a test demo based on your explanations and also tested the provided HTML and I can confirm that I reproduced  the behavior you report. However, this is expected behavior since what happens is teh way the things work. When you mouseover (or fire another event) the link, it raises its mouseover event which is bubbled and raises the mouseover event of teh parent element which is the TH. You can easily confirm this by using only standard HTML element and javascript without using RadControls at all. For example, look at the following modification of your sample code:


    <asp:ScriptManager ID="ScriptManager" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript">
        function MouseOverTH()
        {
           alert("MouseOverTH");
        }
      
        function MouseOverA()
        {
           alert("MouseOverA");
        }
          
        </script>
        <table class="mytable">
            <thead>
                <tr>
                    <th title="TH TITLE" style="text-align: left; cursor: move;" scope="col" style="height: 30px;" onmouseover="MouseOverTH();">
                        <a title="INNER LINK TITLE" onmouseover="MouseOverA();">test</a><a title="yyy">(2)</a>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td title="TD TITLE">
                        xxx
                    </td>
                </tr>
            </tbody>
        </table>
         
    </form>

    If you test it, you will see that when you hover the A element, the mouseover event of the parent TH is fired due to teh event bubbling and this is the cause for the problem. You can find more information about event bubbling on the net, e.g below:

    http://www.quirksmode.org/js/events_order.html

    What we suggest is to keep the things the way they are but in case you really need modifications of the functionality if you specify the exact result you want to achieve we can try to develop some workaround for you if this is possible. However, using such a workaround can cause a problem which in my opinion is not worthy to risk since the problem with the tooltipified arrow is not that serious.

    Sincerely yours,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top