B-Tree Hierarchy Structure Using JQuery

In this blog, you will learn about B-Tree Hierarchy Structure, using jQuery.

First, I created a function, which has an input source of XML format ( why XML, because while returing the data from [webMethod] C#, I convert every datatable into XML).

1. Function
   

   var RecursiveTreeModel = function(dataXML, Person, PID) {
       var orgdataXML = dataXML;
       divAppnder += "<li>" + Person;
       divAppnder += "<ul>"
       $.each(dataXML, function(i, v) {
           if ($(this).find('PARENT_PERSONID').text() == PID) {
               RecursiveTreeModel(orgdataXML, $(this).find('NAME').text() + ' - ' + $(this).find('TYPE').text() + ' - ' + $(this).find('EMPID').text(), $(this).find('CHILD_PERSONID').text());
           }
       });
       divAppnder += "</ul></li>";
       return divAppnder;
   }

2. Explaination
   
   function(dataXML, Person, PID)
   dataXML -> this is the xml data
   Person -> this is Name of person,
   PID -> ParentId
   **$(this).find('PARENT_PERSONID').text() -> this is the way to read XMl tags and their values in jQuery.
   
3. (dataXML) XML Format
   You can get XML formatted data from C# in the follwing ways
   
   
1. dataset.GetXml()
2. or create custom method as shown below:-
   

   /*COVERT DATATABLE TO XML*/
   public static string DatatableGetXml(DataTable dTable) {
       var writer = new StringWriter();
       dTable.WriteXml(writer, XmlWriteMode.WriteSchema, false);
       return writer.ToString();
   }

4. C# Call
   Call it using jQuery AJAX,
   

   [WebMethod(EnableSession = true)]
   public static string ParentChildPersonRelationship() {
       // write your code here and return datatable into xml format
   }

5. Output
   I have used Ul > li format to bind the data.