What's New?

TreeGrid cell Tooltips

  1. #1
    Oct 29, 2010, 10:17 AM

    TreeGrid cell Tooltips

    Hi Guys,
    I am trying to show tooltip on TreeGrid cell.
    I am following an example from, http://forums.ext.net/showthread.php...ltip+grid+cell
    This works for GridPanel.
    How can I do this functionality with TreeGrid?
    Thanks in advance.
  2. #2
    Oct 29, 2010, 8:46 PM
    Hi,

    It's possible.

    Just set respective ToolTip's Target and Delegate.

    Please see
    http://dev.sencha.com/deploy/dev/doc...&member=target
    http://dev.sencha.com/deploy/dev/doc...ember=Delegate
  3. #3
    Nov 01, 2010, 6:04 AM
    Thanks Daniil.
    I tried but still it's not working.Actuaaly I am lost here.
    A running example will do a lot for me.If possible please provide.
    Last edited by rajputamit; Nov 01, 2010 at 7:38 AM.
  4. #4
    Nov 01, 2010, 1:44 PM
    What I am doing is,

     <ext:ToolTip ID="RowTip" runat="server" Target="={#TreeGrid1.getView().mainBody}"
        Delegate=".x-grid3-cell" TrackMouse="true">
        <Listeners>
            <Show Fn="showTip" />
        </Listeners>
    </ext:ToolTip>

<script type="text/javascript">
var showTip = function () {
        
          var rowIndex = TreeGrid1.view.findRowIndex(this.triggerElement),
                cellIndex = TreeGrid1.view.findCellIndex(this.triggerElement),
                record = 1,
                fieldName = TreeGrid1.getColumnModel().getDataIndex(cellIndex),
                data = record.get(fieldName);
         
            this.body.dom.innerHTML = data;
        }
    </script>
    What is going wrong.As I don't have the store attached to TreeGrid.
    record = Store1.getAt(rowIndex), so I chage it to record = 1.
    What needs to be change?
  5. #5
    Nov 04, 2010, 10:29 PM
    Hi,

    Please note that TreeGrid inherits from TreePanel, not GridPanel. It just has GridPanel's view.

    Respectively it has TreePanel's API.

    Please look at the following example.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
    
    <script type="text/javascript">
        var showTip = function() {
            var nodeId = Ext.fly(this.triggerElement).parent('.x-tree-node-el').getAttribute('ext:tree-node-id'),
                node = TreeGrid1.getNodeById(nodeId),
                task = node.attributes['task'],
                user = node.attributes['user'];
            this.body.dom.innerHTML = 'Task: ' + task + '<br />' + 'User: ' + user;
        }
    
    </script>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:TreeGrid ID="TreeGrid1" runat="server" Width="310">
        <Columns>
            <ext:TreeGridColumn Header="task" DataIndex="task" Width="200" />
            <ext:TreeGridColumn Header="Assigned To" DataIndex="user" Width="100" />
        </Columns>
        <Root>
            <ext:TreeNode Text="Tasks">
                <Nodes>
                    <ext:TreeNode Icon="Folder" Expanded="true">
                        <CustomAttributes>
                            <ext:ConfigItem Name="task" Value="Project: Shopping" Mode="Value" />
                            <ext:ConfigItem Name="user" Value="1" Mode="Value" />
                        </CustomAttributes>
                        <Nodes>
                            <ext:TreeNode Icon="Folder" Expanded="true">
                                <CustomAttributes>
                                    <ext:ConfigItem Name="task" Value="Housewares" Mode="Value" />
                                    <ext:ConfigItem Name="user" Value="2" Mode="Value" />
                                </CustomAttributes>
                                <Nodes>
                                    <ext:TreeNode Leaf="true">
                                        <CustomAttributes>
                                            <ext:ConfigItem Name="task" Value="B" Mode="Value" />
                                            <ext:ConfigItem Name="user" Value="3" Mode="Value" />
                                        </CustomAttributes>
                                    </ext:TreeNode>
                                    <ext:TreeNode Leaf="true">
                                        <CustomAttributes>
                                            <ext:ConfigItem Name="task" Value="A" Mode="Value" />
                                            <ext:ConfigItem Name="user" Value="4" Mode="Value" />
                                        </CustomAttributes>
                                    </ext:TreeNode>
                                </Nodes>
                            </ext:TreeNode>
                        </Nodes>
                    </ext:TreeNode>
                </Nodes>
            </ext:TreeNode>
        </Root>
    </ext:TreeGrid>
    <ext:ToolTip 
            ID="CellTip" 
            runat="server" 
            Target="={TreeGrid1.body}"
            Delegate=".x-treegrid-col"
            TrackMouse="true">
            <Listeners>
                <Show Fn="showTip" /> 
            </Listeners>
        </ext:ToolTip>
    </form>
</body>
</html>
  6. #6
    Mar 19, 2012, 5:41 AM
    Hi Danill,
    Thanks for the above example..

    I tested above example with master page. its working fine. but
    If i put the above example in the panel the tooltip is not working.

    here is my code

    <ext:Panel ID="Panel1" runat="server" Border="false">
                            <Items>
                                <ext:TreeGrid ID="TreeGrid1" runat="server" Width="310" ContextMenuID="ctxMnuId">
                                    <Columns>
                                        <ext:TreeGridColumn Header="task" DataIndex="task" Width="200" />
                                        <ext:TreeGridColumn Header="Assigned To" DataIndex="user" Width="100" />
                                    </Columns>
                                    <Root>
                                        <ext:TreeNode Text="Tasks">
                                            <Nodes>
                                                <ext:TreeNode Icon="Folder" Expanded="true">
                                                    <CustomAttributes>
                                                        <ext:ConfigItem Name="task" Value="Project: Shopping" Mode="Value" />
                                                        <ext:ConfigItem Name="user" Value="1" Mode="Value" />
                                                    </CustomAttributes>
                                                    <Nodes>
                                                        <ext:TreeNode Icon="Folder" Expanded="true">
                                                            <CustomAttributes>
                                                                <ext:ConfigItem Name="task" Value="Housewares" Mode="Value" />
                                                                <ext:ConfigItem Name="user" Value="2" Mode="Value" />
                                                            </CustomAttributes>
                                                            <Nodes>
                                                                <ext:TreeNode Leaf="true">
                                                                    <CustomAttributes>
                                                                        <ext:ConfigItem Name="task" Value="B" Mode="Value" />
                                                                        <ext:ConfigItem Name="user" Value="3" Mode="Value" />
                                                                    </CustomAttributes>
                                                                </ext:TreeNode>
                                                                <ext:TreeNode Leaf="true">
                                                                    <CustomAttributes>
                                                                        <ext:ConfigItem Name="task" Value="A" Mode="Value" />
                                                                        <ext:ConfigItem Name="user" Value="4" Mode="Value" />
                                                                    </CustomAttributes>
                                                                </ext:TreeNode>
                                                            </Nodes>
                                                        </ext:TreeNode>
                                                    </Nodes>
                                                </ext:TreeNode>
                                            </Nodes>
                                        </ext:TreeNode>
                                    </Root>
                                </ext:TreeGrid>
                                <ext:ToolTip ID="CellTip" runat="server" Target="={#{TreeGrid1}.body}" Delegate=".x-treegrid-col"
                                    TrackMouse="true">
                                    <Listeners>
                                        <Show Fn="showTip" />
                                    </Listeners>
                                </ext:ToolTip>
                                <ext:Menu runat="server" ID="ctxMnuId">
                                    <Items>
                                        <ext:MenuItem Text="TEst1" ID="menu1">
                                        </ext:MenuItem>
                                        <ext:MenuItem Text="TEst2" ID="menu2">
                                        </ext:MenuItem>
                                    </Items>
                                </ext:Menu>
                            </Items>
                        </ext:Panel>
    This page using a master page. If i comment the panel this example working fine. But with panel not working..


    Can you help me what is the problem? why it is not working.
    Last edited by Mr.Techno; Mar 19, 2012 at 5:47 AM.
  7. #7
    Mar 19, 2012, 6:28 AM
    Hi,

    A ToolTip should not be placed into Panel Items.

    I can recommend to place the ToolTip into Panel Bin and set up the following AfterRender listener for the Panel.
    <AfterRender Handler="this.bin[0].render(Ext.getBody());" />
    A Menu should not be placed into Panel Items as well.
  8. #8
    Mar 19, 2012, 10:16 AM
    Thanks to the reply danill,

    But i have to use panel because in my page i am using border layout. In the border layout central region i am using a panel and in that panel i am using this treegrid.

    That is where i got into this problem. (Your solution solved my problem)

    But my context menu is working even if i place it in panel items.

    As per your suggestion, can i put this context menu and tooltip after border layout region? ( i generally define all stores at the start of the page.)
    Is it good way to do it?

    What is the difference between Bin and Items?


    Thank you.
  9. #9
    Mar 19, 2012, 11:13 AM
    Quote Originally Posted by Mr.Techno View Post
    But my context menu is working even if i place it in panel items.
    Well, anyways, I would suggest to move it out from Items. Sometimes the things can work even if they are not configured correctly. Then it might be broken in some case and it might be hard to determine where the problem is.

    Quote Originally Posted by Mr.Techno View Post
    As per your suggestion, can i put this context menu and tooltip after border layout region? ( i generally define all stores at the start of the page.)
    Is it good way to do it?
    Yes, this is normal and should work ok.

    Quote Originally Posted by Mr.Techno View Post
    What is the difference between Bin and Items?
    Please see:
    http://forums.ext.net/showthread.php...ll=1#post57259
  10. #10
    Mar 19, 2012, 11:27 AM
    Thanks Danill,

    Your suggestions helped me..

Similar Threads

  1. [CLOSED] [1.0] GridPanel cell and Tooltips
    By state in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 06, 2013, 5:33 AM
  2. [CLOSED] Gridpanel with cell tooltips
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 02, 2011, 7:53 AM
  3. [CLOSED] GridPanel Cell Tooltips doesn't work in user control
    By skisly in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 09, 2011, 1:57 PM
  4. TreeGrid cell edit
    By Roman in forum 1.x Help
    Replies: 2
    Last Post: Mar 22, 2011, 4:01 PM
  5. [CLOSED] Hide TreeGrid cell depending on condition
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jul 21, 2010, 7:31 AM

Tags for this Thread

Posting Permissions