PDA

View Full Version : [CLOSED] How to show a tooltip when hovering over a cell on a TreeGrid



leonardm
Feb 11, 2015, 3:55 PM
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

fabricio.murta
Feb 12, 2015, 3:32 AM
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 (http://examples2.ext.net/#/Miscellaneous/ToolTips/GridPanel_Cell_Tooltip/)

I hope this helps.

RCN
Feb 12, 2015, 4:50 PM
<!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.trigge rElement)),
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() };
}
}
}

leonardm
Feb 12, 2015, 5:51 PM
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:

21142

RCN
Feb 12, 2015, 6:25 PM
Please post a complete (but simplified) code sample demonstrating how to reproduce the issue.

leonardm
Feb 12, 2015, 6:38 PM
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

RCN
Feb 12, 2015, 6:45 PM
What is the value of gboTreepanel?

geoffrey.mcgill
Feb 12, 2015, 7:12 PM
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?10205-More-Information-Required

http://forums.ext.net/showthread.php?3440-Forum-Guidelines-For-Posting-New-Topics

leonardm
Feb 12, 2015, 7:42 PM
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.

geoffrey.mcgill
Feb 12, 2015, 7:56 PM
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.

leonardm
Feb 12, 2015, 8:31 PM
And you proved what a great customer service you provide for paying premium customers...

Bravo!

geoffrey.mcgill
Feb 12, 2015, 8:48 PM
And you proved what a great customer service you provide for paying premium customers...

Alright, fair point. Shows over, lets move on.

If you get a chance to post a simplified code sample demonstrating as much of the scenario as possible, we'll be happy to assist. It seems like the code sample provided by Raphael is close. If you modify that sample and post a combined update, then we'll all be on the same page and we'll be able to reproduce the error.

Is the error client or server-side?

Daniil
Feb 17, 2015, 11:44 AM
Hello @leonardm,

Please clarify were you able to get it working?

leonardm
Feb 18, 2015, 3:48 PM
I'm in the process of putting something together (in Ext.NET MVC) so you can use.

Leo