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

  • 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