MVC4 Cross Browser Treeview

Problem statement : Create a Treeview in mvc4 by reading the data from a nested complex xml file and post back the selected items.

Few days back I had this new requirement poped up, the use case was

  •  Create a Treeview in mvc4, which is usable in all browsers !!!
  •  Read the data from a nested complex xml file

This use case forced me into a contemplating state because of two reasons

  • MVC4 does not have html helper class for Treeview
  • This Treeview view should be usable in as lower end browser as IE7 ..( dont ask me why.. Trade secret you see 😛 )
  • And my current sprint ends in 72 hours !!

Writing an custom HTML helper is totally ruled out cos of time factor and the testing effort needed for the same to validate its use.

Hence I had to look out for any other existing framework which could help me in this herculean task. And Eureka…. I stumbled upon this JavaScript Library, JStree which  displays the data in a hierarchical way with checkbox for the nodes as needed.

So the First Hurdle was crossed all thanks to JsTree library.

Now the next task was to read the complex nested xml file. The XML file structure was


<Activity ID="Activity1" Name= "RootActivity">
    <Group ID="1_a" Name="One">
    </Group>

    <Group ID="1_a" Name="Two">
      <Tool ID="OneTool" Name="Tool2"/>
    </Group>

    <Group ID="1_a" Name="Four">
      <Group ID="1_a" Name="FourA">
        <Tool ID="three" Name="Tool4A"/>
        <Tool ID="three" Name="Tool4B"/>
      </Group>
     <Group ID="1_a" Name="FourB">
       <Tool ID="three" Name="Tool4AA"/>
       <Tool ID="three" Name="Tool4BB"/>
     </Group>
   </Group>
     <Group ID="1_a" Name="Three">
       <Tool ID="three" Name="Tool3"/>
       <Tool ID="three" Name="Tool3a"/>
    </Group>

    <Group ID="1_a" Name="Five">
      <Group ID="1_a" Name="FiveOne">
        <Tool ID="three" Name="a"/>
        <Tool ID="three" Name="b"/>
      </Group>
     <Tool ID="three" Name="Tool3"/>
     <Tool ID="three" Name="Tool3a"/>
    </Group>
</Activity>

The problem here was that the leaf node in xml inturn could have child nodes , so it was sort of a recursive xml file.

To read the xml file several options are available in C# few of  which are

  • XmlReader Class
  • XmlDocument Class
  • XmlElement Class 

But for my need (xml structure) I went with XMLDocument class.

Using this XMLDocument class an iterative function was written in the controller  which would loop through node by node of this xml document and populate the Treeview nodes .

Here the tree view model has two classes

  • JsTreeModel
  • JsTreeAttribute

Where

  • JsTreeModel is the class for the treeview
  • JsTreeAttribute has the attributes for treenodes

Finally  view the is updated with

  • Reference to “jquery.jstree.js” is made in index.cshtml
  • Reference to “index.js” is made in index.cshtml. In this file the contents of the div is converted to a treeview.
  • An HTML form which has an div called “demoTree” is created in Index.cshtml (please note even an ajax form could be used)
  • Resultpage.cshtml is created which displays the selected values, for this we are calling the “get_checked” function of the jstree.js

So now we have the data ready( in controller) , view ready( index.cshtml) and the corresponding scripts ready ( index.js and jquery.jstree.js )

When F5 is hit in Visual studio ,.. Eureka …. the Treeview is ready ..

So this was the complete tutorial for MVC4 cross browser Treeview …

This sample application could be downloaded from the google drive in the below path

https://drive.google.com/folderview?id=0B_bClF34impCd2tGMGJOcGpJdjg&usp=sharing

Download, use and have fun .. Cheers ..

Treeview jstree

tree view using jstree mvc4

Leave a comment