ASP.NET 3.5 and above only

ASP.NET TreeView - Additional Data

Select the employee in the TreeView to view the details in the right panel.

  • Charles Madigen
    • Ralph Brogan
      • Bhushan Sambhus
      • Betsy Rosenbaum
      • Francine Bergeron
      • Amanda Jones
      • Fa Bai
      • Chase Godwin
    • Tammy Plant
      • Rhonda Gorman
      • Grigori Ognev
      • Susan Garfield
      • Christine Dufour
      • Izabella Chernyak
      • Benny Jacobs
      • Gary Stein
      • Kai Lee
      • Ai Hong
      • Jeet Mistry
      • Tian Xian
      • Carol Paul
      • Jean Bergeron
      • Kurt Cruise
    • Carol Finley
      • Whitney Rogers
      • Carmen Fetterman
      • Jacob Doucet
      • Janice Rierdan
      • Grant Rosenbaum
      • Greg Wells
      • Anna Andrews
      • Andy Cavelle
      • Andre Robillard
      • Vijaya Merchant
    • Gene Porter
      • Olivier Doucet
      • Cheryl Pearson
      • Priya Sambhus
    • Rogine Leger
      • Jacques Desautels
      • Kay Monroe
      • Francine Dugas
      • Jacques Leblanc
      • Ren Xian
      • Olivier Hebert
    • Abigail Lippman
      • Christian Jeansonne
      • Jeremy Malone
      • Danielle Mayer
      • Jack Chartrand
      • Jake Epting
      • Kate Giusti
      • Ai Ma
      • Raj Sambhus
      • Gabby Gold
      • Josh Foss
      • Sandra Newton
      • Kurt Mendelson
    • John Garrison
      • Anna Galetti
      • Glenda Stockton
      • Rong Xu
      • Galina Ugarova
      • Brenda Cox
      • Alexia Badger
      • Pat Freel
      • Cameron Miller
      • Lori Newton
      • Wendy Cox
      • Vijaya Gupta
      • Greg Morgan
      • Francis Freiberg
    • Rui Shu
      • Priya Sehgal
      • Craig Frampton
      • Isaac Galvin
      • Ren Hong
      • Kaushik Shroff
      • Cassandra Weisman
      • Floyd Galvin
      • Nancy Ferguson
      • Maxim Sinitsyn
      • Abigail Meyler
    • Kirill Amirov
      • Christine Werner
      • Fran Piper
      • Jean Theriot
      • Alex Parker
      • Dylan Beck
      • Chris Heiman
      • Gabe Alpert
      • Janet Cruise
      • Priya Sambhus
      • Jackie London
      • Fa Xian
      • Ben Finley
      • Jenna Cox
      • Joel Godard
      • Abe Freel
    • Joan Little
      • Jignesh Merchant
      • She Xia
      • Garret Monroe
      • Dana Giusti
      • Lori Fox
      • Kelly Fetterman
      • Gene Meltzer
      • Ren Guo
      • Chelsea Kirst
      • Jacques Bergeron
      • Shelly Fewell
    • Tamara Kane
      • Kai Kong
      • Felicia Piper
      • Darcy Feeney
EmployeeId
Name
Job
Phone
Email
OrgUnit
Salary
Gender
MaritalStatus
EmployeeType
EmployeeStatus
[ASPX]

<obout:Tree ID="ObClassicTree" ClientObjectID="obTreeClientObj" DataSourceID="XmlDataSource1"
    EnableViewState="false" CssClass="vista" OnNodeSelect="clientOnNodeSelect" runat="server" Width="200px">
    <DataBindings>
        <obout:NodeBinding DataMember="employee" ValueField="value" TextField="name"
            ImageUrl="~/obout.ajax.ui/treeview/examples/img/engineer-icon.png" />
    </DataBindings>
</obout:Tree>
            
[Javascript]

        //This event will get fired when a node is selected.
        function clientOnNodeSelect(sender, args) {
            //'getNodeValue' function returns the value stored for the node.
            fillData(sender.getNodeValue(args.node), sender.getNodeText(args.node));
        }
        //Helper function to fill the data in the table
        function fillData(data, name) {
            var arr_data = data.split(';');
            arr_data.splice(1, 0, name);

            var rows = document.getElementById("detailTable").getElementsByTagName("TR");

            for (var i = 0; i < arr_data.length - 1; i++) {
                (rows<i].getElementsByTagName("TD"))<1].innerHTML = arr_data<i];
            }

        }
       function pageLoad(sender,args) {
            var obTreeClientObj=$find("<%=ObClassicTree.ClientID %>");
            //Get the first node
            var firstNode = obTreeClientObj.getNodeByIndex("0");
            //Make the node as selected
            obTreeClientObj.setSelected(firstNode);
        }
            

"I have to say, you guys are too cool. Not only do you put out these cool things, but you got back to me so fast it is unbelievable!!"

Christian Loepp

Random testimonial   All testimonials