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.