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
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.
I am uploading the only the files which are required for this requirement.
Hi Anirban,
When you are setting nodeContentTemplate it is appled for a current level and you don't need the "if" in the nodeContentTemplate.
Also you can try to cahnge image src from "../../Content/images/folder.png" to "/Content/images/folder.png", if the image src is not correct this image won't be previewed in the node
You can try with this:
$(".desc_hover").live('mouseenter', function (evt) {
var par = $(this).parent();
// if text is Tokyo Traders add image after node
if ($(this).text() == "Tokyo Traders")
// if there is alredy added image do not add image again
if (par.find(">img").length < 2)
par.append("<img class='favsport' src='images/book.png' title='Folder' style='border:none;width=20px;height=20px'></img>");
$(".desc_hover").live('mouseleave', function (evt, ui) {
alert("Mouse Leave");
//and properly configured bindings ><img class='favsport' src='../../Content/images/folder.png' alt='football' style='display: none;'></img>
nodeContentTemplate: "<img class='favsport' src='/Content/images/folder.png' title='Folder' style='border:none;width=20px;height=20px'></img><label>${Name}</label>",
nodeContentTemplate: "<img class='favsport' src='/Content/images/folder.png' alt='football' style='border:none;width=20px;height=20px'></img><label>${Name}</label>",
nodeContentTemplate: "<span data-tag><img class='favsport' src='/Content/images/folder.png'alt='football' style='border:none;width=20px;height=20px'></img><label class='desc_hover'>${Name}</label></span>"
Hello Anirban,
Thank you for posting in our forums and using jQuery components.
I read carefully and noticed that Nadia and Konstantin have answered all your question regarding the usage of igTree.
If you have licenced key I recommend you registering your product
http://devcenter.infragistics.com/Protected/ProductRegistration.aspx
After that you can create a support ticket regarding the issues that you experience with IG components.
http://forums.infragistics.com/blogs/developer_support/archive/2012/01/16/how-to-more-effectively-get-answers-to-your-questions.aspx
About implementation of custom scenarios which is not related with the IG controls
http://ko.infragistics.com/support/policies.aspx#SupportPolicies
you should contact our Consulting Team
http://ko.infragistics.com/DhtmlPanelFrame.aspx?id=768#Overview
Please let us know if you have further questions regarding the functionality of igTree
Any updates on this ? We are using a licensed version- so any ways to expedite this ?
I can provide you the license key if required.
Okay, thanks for the update. The issue in context is not resolved yet. Will be great if someone from the dev team an help me out.
Hi again.
I just wanted to let you know that a developer support case has been created for you and the developer support will assist you further. Please excuse me for the delayed reply!
Yes I know that, but I believe there is some issue on the code that I am writing.
Firstly, I need to call the mouseleave on the live() of the child node and show the tooltip. Then as soon as the mouse points over the image I need to hide the tooltip and show the menus on the image. Now on the menu hover, they should be on the DOM and now get hidden, since I have a mouseout event that is clearing the custom template. I tried very similar to this: http://jsfiddle.net/8Mqk7/5/ but not getting the exact solution.
It will be good if you could provide me with the exact solution.