[CLOSED] How to show a tooltip when hovering over a cell on a TreeGrid

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] How to show a tooltip when hovering over a cell on a TreeGrid

    Hi Guys,

    I have another TreeGrid related question and I hope you can help.

    I have a TreeGrid with many rows and I want to show a tooltip when the user hovers over a particular row where the first column cell text value is "Manual". Is this possible? I have seen examples with GridPanel but not with a TreeGrid.

    BTW, I'm using Ext.NET MVC ver. 2.5

    Thanks,
    Leo
    Last edited by Daniil; Feb 25, 2015 at 9:16 AM. Reason: [CLOSED]
  2. #2
    Hello, @leonardm!

    Have you tried to apply the example with GridPanel to your TreeView? It should be the same, once you are dealing with the cells.

    I believe the best sample for you to build your tree would be this: GridPanel Cell Tooltip

    I hope this helps.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <script type="text/javascript">
            var onShow = function (toolTip, grid) {
                var view = grid.getView(),
                    store = grid.getStore(),
                    record = view.getRecord(view.findItemByChild(toolTip.triggerElement)),
                    column = view.getHeaderByCell(toolTip.triggerElement),
                    data = record.get(column.dataIndex);
    
                toolTip.update(data);
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:TreePanel ID="_trp" RootVisible="false" Title="Ext.Net" Border="true" Height="700" Width="500" runat="server">
            <Store>
                <ext:TreeStore runat="server">
                    <Proxy>
                        <ext:AjaxProxy Url="~/Example/LoadTreeFakeChildren">
                            <Reader>
                                <ext:JsonReader Root="data" />
                            </Reader>
                        </ext:AjaxProxy>
                    </Proxy>
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="Name" />
                                <ext:ModelField Name="LastName" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:TreeStore>
            </Store>
            <Root>
                <ext:Node NodeID="0" Text="Root" />
            </Root>
            <ColumnModel>
                <Columns>
                    <ext:TreeColumn Text="Name" DataIndex="Name" Flex="2" runat="server" />
                    <ext:Column Text="LastName" DataIndex="LastName" runat="server" />
                </Columns>
            </ColumnModel>
        </ext:TreePanel>
        <ext:ToolTip
            runat="server"
            Target="={#{_trp}.getView().el}"
            Delegate=".x-grid-cell"
            TrackMouse="true">
            <Listeners>
                <Show Handler="onShow(this, #{_trp});" />
            </Listeners>
        </ext:ToolTip>
    </body>
    </html>
    namespace SandBox.Controllers
    {
        public class ExampleController : System.Web.Mvc.Controller
        {
            public ActionResult Index()
            {
                return View();
            }
            
            public StoreResult LoadTreeFakeChildren()
            {
                NodeCollection nodes = new NodeCollection(false);
    
                for (int index = 1; index < 6; index++)
                {
                    Node no = new Node();
                    no.NodeID = index.ToString() + DateTime.Now.Second;
                    no.CustomAttributes.Add(new ConfigItem { Name = "Name", Value = string.Format("Name - {0}", no.NodeID), Mode = ParameterMode.Value });
                    no.CustomAttributes.Add(new ConfigItem { Name = "LastName", Value = string.Format("Last Name - {0}", no.NodeID), Mode = ParameterMode.Value });
                    nodes.Add(no);
                }
    
                return new StoreResult { Data = nodes.ToJson() };
            }
        }
    }
  4. #4
    Thanks for your reply...

    My Treepanel id is assigned dynamically. I have a variable called gboTreepanel in cshtml that I use to dynamically create the Id.
    The Id is a combination of a name + and Id that is passed in the Model. This makes it guaranteed to be unique.

    So, I modified your code to look like the following.

    But, it throws an error right after the treepanel loads. Any ideas?

    Thanks,
    Leo

    @(
            X.ToolTip()
            .Target("={App." + gboTreepanel + ".getView().el}")
            .Delegate(".x-grid-cell")  
            .BodyStyle("background-color: lightyellow;")
            .Title("Tooltip")
            .TrackMouse(false)
            .Listeners(l =>
                    {
                        l.Show.Handler = "onShow(this, App." + gboTreepanel + ");";
                    }
            )
       )
    This is the error:

    Click image for larger version. 

Name:	2015-02-12_10-50-56.png 
Views:	3 
Size:	12.5 KB 
ID:	21142
  5. #5
    Please post a complete (but simplified) code sample demonstrating how to reproduce the issue.
  6. #6
    That would take a long time for me to try to isolate this where I can send it to you. It's a pretty big program.

    Instead, could you try to change your sample (which you posted here) to use a dynamically generated Id and see if that works?

    And if it does, what changes did you make?

    Thanks,
    Leo
  7. #7
    What is the value of gboTreepanel?
  8. #8
    That would take a long time for me to try to isolate this where I can send it to you. It's a pretty big program.
    Yet for some reason you are expecting us or Raphael to do this for you?

    Instead, could you try to change your sample (which you posted here) to use a dynamically generated Id and see if that works?
    Please spend a few minutes reviewing the Forum Guidelines before posting in the forums again.

    http://forums.ext.net/showthread.php...ation-Required

    http://forums.ext.net/showthread.php...ing-New-Topics
    Last edited by geoffrey.mcgill; Feb 12, 2015 at 7:36 PM.
    Geoffrey McGill
    Founder
  9. #9
    Wow.... Aren't we a little testy today...

    Take it down a couple of notches, OK?

    All I asked is you change the code that you had already posted. It's a one line change for you - for crying out loud.
  10. #10
    Wow.... Aren't we a little testy today...

    Take it down a couple of notches, OK?

    All I asked is you change the code that you had already posted. It's a one line change for you - for crying out loud.
    You just proved my point.
    Geoffrey McGill
    Founder
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 4
    Last Post: Nov 06, 2014, 6:45 PM
  2. [CLOSED] Cell's tooltip
    By canbay in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 04, 2013, 3:21 PM
  3. TreeGrid cell Tooltips
    By rajputamit in forum 1.x Help
    Replies: 9
    Last Post: Mar 19, 2012, 11:27 AM
  4. TreeGrid cell edit
    By Roman in forum 1.x Help
    Replies: 2
    Last Post: Mar 22, 2011, 4:01 PM

Tags for this Thread

Posting Permissions