Hi,
I have copy and pasted the code provided by Infragistics to Load data On Demand using Odata in IgTree.
Now, I wanted to modify the template that is been dispalyed. I wanted to add images to the tree nodes based on the category type.
//*********************** Start Code **********************************************
$(document).ready(function () {
var url = 'http://services.odata.org/OData/OData.svc/Categories?$format=json&$callback=?';
//creates new JSONP data source for OData
var jsonp = new $.ig.JSONPDataSource({ dataSource: url, responseDataKey: "d" });
//Load on demand happens automatically using OData, the loadOnDemand option,
//and properly configured bindings
$("#tree1").igTree({
dataSource: jsonp,
dataSourceType: 'jsonp',
responseDataKey: 'd',
loadOnDemand: true,
bindings: {
textKey: 'Name',
valueKey: 'ID',
primaryKey: 'ID',
nodeContentTemplate:
"{{if $data.__metadata.type== 'ODataDemo.Category'}}<div class='category'><img src='../../Content/images/folder.png' style='height:20px;width:20px;border:none;' /><label>${Name}</label></div>" +
"{{/if}}",
childDataProperty: 'Products',
childDataProperty: 'Supplier',
valueKey: 'ID'
}
});
//***************************************End Code ************************
After using the custom template, whenever I hover over the Parent Node an extra image/style is getting displayed . The css styles responsible for this are ui-state-hover, ui-state-focus ...
I am not able to suppress/override these classes. Could you let me know where am I going wrong ? Any help is greatly appreciated.
I have checked that I have jquery.tmpl.min.js, ig.ui.min.js in correct order.
Thanks,
Anirban
Hi once again,
Basically what you want to do is show the custom tooltip and not hide it on mouseout from the tree node. Set a timeout for the custom tooltip and hide it when the timeout expires (http://www.w3schools.com/js/js_timing.asp). Also in order for the custom tooltip to not disappear when your user is hovering it, you would need to clear the timeout on mouseenter for the tooltip and set it off again once mouseout is performed on the tooltip. Do you think this would do the job or are you trying to achieve something slightly different?
Thanks!
Hi Konstantin,
Thanks for your reply. Now I am able to show the image, but the issue that I am facing is :
On Hovering over the last child node [e.g. 'Tokyo Traders'], I need to show a customized tooltip [not using the html title property since we will be have to format the text that we have to show]. Also, when the user hovers the last child node, a image should appear beside it. Now when the user clicks on the image again a customized menu should open up from there. I am able to show the customized menu option when you click the image, but as soon as I try to click on those menu options, it is getting disappeared from the DOM since all these html elements are rendered on the mouseenter event of the child node.
I hope I am able to explain you my scenario.
Many thanks for taking the pain and replying to my queries. Just that I am stuck with this and not able to resolve it yet.
Hi again,
I have attached a modified sample to show you how to achieve this. Currently clicking on the image just alerts, but you can change the logic such that it opens a custom pop-up container. Let me know if this helps!
Thank you for using the Infragistics forums!
Thanks for your response. I am getting there. But my requirement is :
Basically, my requirement is : Whenever the mouse enters into any of the child nodes, a popup should open up displaying some message. Also, if the supplier name is "Tokyo Traders", on mouse hover an image just beside the node needs to be displayed.
Thanks for your reply. We are getting closer to the solution. But my requirement is :
When I hover over the child node text, an image should appear next to it and I should be able to click that image and open another pop-up. On mouseleave, the image should disappear.
Please let me know accordingly.