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

Thanks,

Anirban

Thanks Nadia for your help. 

I have 2 questions in this regard : 

1) I am using the Infragistics servicce as of now. The actual service will return JSON and not ODATA. In that case will  LoadOnDemand work ?

2) The mouseover does not open up a popup. Could you please take a look on the dummy files that I have attached in my previous post.  Cant upload the entire solution because the file size exceeds 200KB . 

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!

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!