Exporting single level WijTree structure to XML

DESCRIPTION

When working with the WijTree widget, we have the flexibility to perform customization as we would like to do. We already have couple of blogs which demonstrates different customizations for WijTree widget. However in this blog, our objective is to extend the functionality offered by WijTree. We would explore, how we can add the exporting functionality to WijTree and generate an XML output for the WijTree structure. This is how it will look like:

IMPLEMENTATION

As we know, WijTree structure is a collection of ul and li tags. So keeping this in mind, we will start our implementation. In this example, we are taking a single level WijTree structure. However you can modify your code to handle multiple level structures. Basically we would loop through all the li elements and get the text for each node. In addition to this, we will perform a check to identify whether the node is a parent or a child node and accordingly append it to the xml string. Here is the code which we need:

   $(document).ready(function () {  
       $("#tree").wijtree();  
       $("#btnXML").click(function () {  
           var xml = "";  
           $("#tree li").each(function (e, args) {  
               var nodes = $("li", this);  
               if (nodes.length > 0) {  
                  xml += "\\n";  
                  for (var i = 0; i < nodes.length; ++i) {  
                      xml += "\\t" + nodes.eq(i).text() + "\\n";  
                  }  
                  xml += "\\n";  
               }  
           });  
           window.alert(xml);  
       });  
   });

So we are all set now. A sample application demonstrating this implementation can be downloaded using the link provided below. Download Sample