Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
285
IgTree Template Issue
posted

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',

                bindings: {

                    textKey: 'Name',

                    valueKey: 'ID',

                    primaryKey: 'ID',

                    childDataProperty: 'Supplier',

                    bindings: {

                        textKey: 'Name',

                        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

Parents
No Data
Reply
  • 285
    posted

    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,

    Anirban

Children