Using TreeGrid With ASP.NET MVC 4

Introduction

Today, we have numerous Grid Controls used in MVC applications. Here, in this article, I will share with you a new control named jqxTreeGrid that allow us to create Nested Grid with the data provided from the database.

Create Table

You will find the table used in our application, here.



After creating the table, you can fill it using data, as shown below:



Create your MVC application

First, open Visual Studio. Then, click on file > New > project and name your project, as follows:





Creating ADO.NET Entity Data Model

You need to follow the necessary steps, as described below, for having the same result.

Right click on project name. Then, click Add > Add New Item. In the dialog box displayed, select Data > click on Add button.





Click on next button. You will have the dialog box, as shown below. You need to choose your server name and select your database. Finally, click on OK.





Here, we select the table (in our case, Employees) that we have created and click on finish button.

Finally, we see that the EDMX model will generate Employees class.

As you can see, I am creating GetEmployees() action that should be used to retrieve the data from Employees table, and return output as json format.

Create a strongly typed view

Now, we are going to create a strongly typed view.



When our view has been created, we need to add some references, first, as shown below:
In the source part, we need to prepare 4 things:

• Data type: json - to use the data received from action as json format.
• Data Fields: specify all fields that are involved.
• Hierarchy: is an object that has two members’ keyDataField and parentDataField.
• URL: call your action method (Home/GetEmployees).
  Note: Set the "keyDataField" and "parentDataField" to point to the data fields in the data source that contain information about the parent-child relationships.

Index.cshtml

Output