You can download a working sample which i created to write this post here. You can customize the tree look and feel by changing the css or playing with the options of jsTree. Now let's see how it works when you run the project. We are calling the Childrens partial view recursively to render the child's for each node. So i created a partial view called Children.cshtml under the same view folder and have markup like this After printing the Name property value of the first node, We are calling a partial view called Children and passing our Model to that. Our view is strongly typed to Employee class, which will be representing the president / top node of the hierarchy. I updated the css file to show a user icon instead of showing the default directory icon. Since we are using jsTree, We need to include jsTree library to the page. Now let's update our view to have the sufficient markup to render the tree. Recursively calling the SetChildren function will set the child Employees for all the employees and at the end of that we will be getting a single Employee object with Children property properly filled.Īnd if you expand the Employees property further you can see the employees works under this employee. We are doing recursion to set the children because we do not know how many layers of employees will be there in the hierarchy. Setting the child objects.Īfter getting the president node, We are going to call SetChildren method which accepts an Employee Model and the List of Total Users/Employees and then finding out the children / Employees reports to this employee. We are getting the user object which has a null value for the ManagerID column as the president. ![]() You can see that we are getting a list of Employee objects using our data access method and then getting the president of the company who does not have any manager so that we can show him as the first /top node of the organization tree.(Assuming that we will have only one president). So Let's do some tricky code here to change the sequential list to hierarchical structure. that means, All the employees belongs to Joe, should be listed in his Employees property. Now we need to convert this list of objects (which is a sequential list) to hierarchical form. So GetAllUsers method with give us a list of User class objects You need to add a using statement to import this namespace to your data access class. Since my demo program stores table in SQL Server compact edition database, i am using SqlCeConnection class and SqlCeCommand class to talk to it and get data.These two classes belongs to namespace. Now we need a data access method to read data from our SQLServer compact database and return a list of UserViewModel object. Now, Let's create a model to represent the employee. I set the First employee's ManagerID value as NULL, because he is the President of the company and he do not have any manager. To render the tree, we are using jsTree plugin which converts our ul-li elements to a tree structure.Įach Employee record has a ManagerID which tells who is the manager of that employee. ![]() I used SQL Server Compact Edition database in this project to store our data. We will have a table which stores the employee information along with who their manager is like below. We will be creating an organizational tree which shows a hierarchical representation of who works for whom in an organization. Here we are going to create an ASP.NET MVC3 Tree View with jsTree plugin. Even in all those webforms controls, it is generating some HTML which renders a tree or a menu. In ASP.NET MVC, There is no server controls like what we have in Web forms to render TreeView/ Menu, We need to write our own markup to do so.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |