I am uploading the only the files which are required for this requirement.  

Thanks,

Anirban

Here s what I have done to show the bubble up pop up. Doesn't work though:

@{

    ViewBag.Title = "TreeView";

}

<h2>TreeView</h2>

<script type="text/javascript">

    $(document).ready(function () {

        var offsetX = 20,

                offsetY = 20;

        $(".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) {

                var html = "<img class='favsport' src='../../Content/images/Football.png' title='Folder' style='border:none;width=20px;height=20px' id='imgdiv'></img>";

                par.append(html);

            }

            var o = {

                left: evt.pageX,

                top: evt.pageY

            };

            $("#test").show(2000).offset({left: 400, top: 400 });

        });

        $(".desc_hover").live('mouseleave', function (evt, ui) {

            var par = $(this).parent();

            par.find($('#imgdiv')).remove();

        });

        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  ><img class='favsport' src='../../Content/images/folder.png' alt='football' style='display: none;'></img>

        $("#tree1").igTree({

            dataSource: jsonp,

            dataSourceType: 'jsonp',

            responseDataKey: 'd',

            loadOnDemand: true,

            bindings: {

                textKey: 'Name',

                valueKey: 'ID',

                primaryKey: 'ID',

                nodeContentTemplate: "<img class='favsport' src='../../Content/images/folder.png' title='Folder' style='border:none;width=20px;height=20px'></img><label>${Name}</label>",

                childDataProperty: 'Products',

                bindings: {

                    textKey: 'Name',

                    valueKey: 'ID',

                    primaryKey: 'ID',

                    nodeContentTemplate: "<img class='favsport' src='../../Content/images/folder.png' alt='football' style='border:none;width=20px;height=20px'></img><label>${Name}</label>",

                    childDataProperty: 'Supplier',

                    bindings: {

                        textKey: 'Name',

                        valueKey: 'ID',

                        nodeContentTemplate: "<span  data-tag><img class='favsport' src='../../Content/images/file.png'alt='football' style='border:none;width=20px;height=20px'></img><label class='desc_hover'>${Name}</label></span>"

                    }

                }

            }

        });

    });

    </script>

<div class="content clearfix">

                <!-- side nav begins here -->

                <div id = "test1" class="side-nav">

                    <div id="tree1">

                        <p>Anirban</p>

                        </div>

                </div>

                <!-- side nav ends here -->

                <section class="main-box">

                    <hgroup>

                        <h1>

                            Infragistics TreeView Control</h1>

                        <h2>

                            Load on demand </h2>

                        <p>

                            The other grid will go here</p>

                    </hgroup>

                    <div class="sampleContainer">

                        <!--igTree target element-->

                        <div id="sampleContent">

                        </div>

                    </div>

                </section>

                 <span id="test" style="display:none;">This is a test</span>

            </div>

Hi,

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,

Anirban

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!

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.

Anirban

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. 

Thanks,

Anirban

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.

Thanks,

Anirban

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!