I guess this was not added to the CSOM. Anyone had any luck implementing something that can tell when the mouse is hovering over a node? I need to trigger a javascript function when a user hovers on a node.
Hi.
I required the same functionality and was able to successfully wire up the event.
1. Copy the ig_webtree.js file from the scripts directory where you installed infragistics into your project folder. (located maybe in C:\Program Files\Infragistics\NetADVantageversionX\ASP.NET\Scripts)
2. Set the JavascriptFilename property on the tree to the file you've copied.
3.Modify the copied Javascript file.
- Look for the following functions within:
function igtree_mouseover(evnt,tn) which in my version was on line 1089. At the end of the function there is an if statement if(igtxt!=null && igtxt.length>0) { ... somewhere inside that if statement, write a call to a new function. e.g. MyMouseOverFunction(tn,eNode.id) and then create this function in your own javascript files.
then you've got your event!
If you also want the Mouse Out event. The next function in the ig_webtree should be called function igtree_mouseout(evnt,tn). look for the if statement near the end of the function like: if(src.hoverSet) { and put your function in there MyMouseOutFunction(tn,eNode.id)
hopefully this was helpful!
I started work moding their js file and so far I have added my function call in the place you suggested and see what's happening. I think I need to do something like the following in my function:
First I added :
this.NodeHover=events[25]; to
function igtree_events(events)
function MyMouseOverFunction(tn, id)
{
var tree=igtree_treeState[tn];
var node=igtree_getNodeById(id);
if(node == null || !node.getEnabled())
return;
var oEvent = igtree_fireEvent1(tree,tree.Events.NodeHover,node,ig_dataTransfer,evnt);
}
I have tree, and I've added the event to the event collection(NodeHover), I have the node retrieved by the id sent into my function. What I don't have is ig_dataTransefer and evnt. Am I on the right track? Any suggestions about the missing objects?
Thanks,
Patrick
I have created a new folder App_JavaScriptFiles and have placed WebTreeModified.js inside of this folder. I select the webtree and change the JavaScriptFileName to point to the "~/App_JavaScriptFiles/WebTreeModified.js" file but the control is still using the default javascript file. I have tried every naming convention possible Patrick and am wondering if I am doing something incredibly stupid with the naming of the JavaScriptFileName.
I would try removing the '~/' from the front of the file path. Then try putting a simple alert("got to function"); line in the modified js file in the appropriate if statement to see if the file is being used.
The '~/' returns me to my root directory in my project and then grabs the corresponding item from that name. I have tried it with App_JavaScriptFiles/myjscriptfilename.js and still it does not work. I have put alert's in my mouseover and mouseout functions but still nothing shows up.
Here's my code for my mouseover and mouseout events
// private - Handles the mouse over event for the tree.
if(!src)
var eNode = igtree_getNodeElement(src);
if(eNode.id == "T_" + tn)
if(eNode.id.indexOf("M_") == 0)
if(eNode == igtree_selectedNode(tn))
var className=igtree_getResolvedHoverClass(tree,eNode);
node.hover();
if(src.tagName != "SPAN")
if(igtree_IE && tree.Element.clientWidth > 0 && eNode.offsetWidth > tree.Element.clientWidth)
src.title=src.innerText;
var igtxt = src.getAttribute("igtxt");
src.HovClass = src.className;
//Added this code to bring out custom hover js function
MyMouseOverFunction(tn,eNode.id);
src.className += " " + className;
else
src.className = className;
// private - Handles the mouse out event for the tree
src.title="";
var node=igtree_getNodeById(eNode.id);
node.unHover();
if(src.tagName!="SPAN")
if(igtxt==null || igtxt.length==0) {
if(src.hoverSet) {
MyMouseOutFunction(tn,eNode.id);
prevClass = src.HovClass;
src.className = prevClass;
Is this code from the modified js file?
Nevermind I found a post that showed how to initialize the menu from the sever code behind and then create the client side function that gets the menuid for you if your context menu is in a user control.
Hey Patrick you seem pretty knowledgable of the CSOM. Is there any reason why the CSOM only allows you to grab infragistics controls on the client side if you have your script in the <Head> tag of the .aspx page? It doesn't seem scalable to me if you would like to give some client side functionality to your .ascx (user controls). This is bad for me considering my companies architecture is based on dynamic controls being loaded into one aspx page. Their architecture is based off of the MVC/MVP design pattern.
I have context menu's that could be used in the ascx but I'll end up having to break our architecture and place the context menu itself in the apsx side and just make sure to pass the click events back to our Controller.
Your welcome. The popup menu on right click is nice. I have that working in the same project that I have the onNodeHover implemented in. I have been trying to think of a reason that the onnodehover 'hack' would work in one project but not the other and I am still comming up blank. At least you found a work around. o well, back to GUID's for me.
Yes I implemented them the exact same way and one will work and the other doesn't. The one that doesn't work is my actual project which is great.
All I need to do is add a hovermenu but now I have been informed I can add one on the right click which you can implement a context menu with the clientside code example from their documentation. So in the end I guess it worked out for me.
Appreciate your attempt at helping me.
bizarre. In the broken project, can you see the modified javascript file and its containing directory in the solution explorer?