Multilevel Grid in MVC using Jquery

Steps To build Multilevel Grid in MVC

Step1:- Create Empty MVC application in visual studio

Step-2: – Create a MDF file inside App_Data folder.

Step-3:- Now create a table for retrieving the data here i took employees as table name.

CREATE TABLE [dbo].[Employees] (

   [EmployeeID]     INT           NOT NULL,

   [LastName]        NVARCHAR (50) NULL,

   [FirstName]       NVARCHAR (50) NULL,

   [Title]           NVARCHAR (50) NULL,

   [TitleOfCourtesy] NVARCHAR (50) NULL,

   [BirthDate]       DATETIME      NULL,

   [HomePhone]       NVARCHAR (50) NULL,

   [ReportsTo]       INT           NULL,

   CONSTRAINT [PK_Employees] PRIMARY KEY CLUSTERED ([EmployeeID] ASC)

);

 After creating the table insert some data in that table like this

If you observe the above table, we have “ReportsTo” column this column contains EmployeeID values and based on this column we can assign employees to CEO, Project manager and Team Leader.

Step-4:- Create one ADO.Net Entity Model to Employees table. In solution you can see my entity model in below snippet.

 

Step-6:- Right click on controllers folder, create Controller.

public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
List<Employee> list = new List<Employee>();
using (MyDatabaseEntities dc = new MyDatabaseEntities())
{
list = dc.Employees.OrderBy(a => a.EmployeeID).ToList();
}
return View(list);

}
}

MyDatabaseEntities is class which inherited by DbContext. using “dc” we retrieve all employees details and assign to the list.

Employee.cs:-

public string HomePhone { get; set; }

public Nullable<int> ReportsTo { get; set; }

}

Step7:- Now Right click on Index method of HomeController and add view.

 

Index.cshtml:-

 

@model List<MultilevelGrid.Employee>

 

<h2>Display Multilevel Grid</h2>

 

@* Jquery for Collapse/Expend *@

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function () {

$('.icon').on('click', function () {

var $pRow = $(this).parents('tr');

var $nextRow = $pRow.next('tr');

$nextRow.toggle();

$(this).toggleClass('icon-s icon-e');

});

})

</script>

 

@* CSS for dispalay the grid *@

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<style>

.container {

min-width: 500px;

overflow: hidden;

}

.innerTable table {

margin: 0px auto;

border-left-width: 4px;

}

td.innerTable {

padding-left: 20px !important;

}

.icon {

background-repeat: no-repeat;

width: 16px;

height: 16px;

display: inline-block;

float: left;

color: navy;

}

.icon-e {

background-position: -32px -16px;

}

.icon-s {

background-position: -64px -16px;

}

</style>

 

@*Call NetedData.cshtml Page for displaying the grid*@

<div class="container">

@NestedData.GetHtml(Model, 0)

</div>

 

 

       

In above view we add Employee.cs file as model at top of Index.cshtml. End of the coding we call the NestedData.cshtml page.

 

Step8:- Create NestedData.cshtml page for displaying the multilevel grid.

 

@helper GetHtml(List<MultilevelGrid.Employee> employeeList, int parentID)

{

 <table class=”table table-bordered”>

   @{

     int currentID = 0;

     int rowIndex = 0;

     foreach (var i in employeeList.Where(a => a.ReportsTo.Equals(parentID)))

      {

        if (i.EmployeeID == currentID)

         {

           continue;

         }

        else

         {

          if (rowIndex == 0)

            {

              <thead>

                <tr>

                   <th>Employee ID</th>

                   <th>Employee Name</th>

                   <th>Designation</th>

                   <th>Contact Number</th>

                </tr>

               </thead>

             }

        rowIndex++;

        currentID = i.EmployeeID;

         var Sub = employeeList.Where(a =>                                                                                                                                                                                                    a.ReportsTo.Equals(i.EmployeeID)).ToList();

        var newEmployeeList = employeeList.

 Where(a => !a.EmployeeID.Equals(i.EmployeeID)).ToList();

        <tbody>

          <tr>

            <td>

               @if (Sub.Count > 0)

                {

                 <a class=”icon icon-e” style=”float:left; cursor:pointer;”>>></a>

                }

               else

                {

                 <span style=”display:inline-block;width:14px”>&nbsp;</span>

                }

                 @i.EmployeeID

                 </td>

                 <td>@i.TitleOfCourtesy @i.FirstName @i.LastName</td>

                 <td>@i.Title</td>

                 <td>@i.HomePhone</td>

            </tr>

            <tr style=”display:none;”>

                 @if (Sub.Count > 0)

                  {

                    <td colspan=”4″ class=”innerTable”>

                      @NestedData.GetHtml(newEmployeeList, i.EmployeeID)

                    </td>

                   }

                  else

                   {

                     <td colspan=”4″></td>

                   }

              </tr>

         </tbody>

        }

      }

    }

</table>

}

 

In above code we retrieve the two categories of employees based “ReportsTo” column.i.e:

 

1)var Sub = employeeList.Where

(a => a.ReportsTo.Equals(i.EmployeeID)).ToList();

2) var newEmployeeList = employeeList.Where

(a =>!a.EmployeeID.Equals(i.EmployeeID)).ToList();

 

Step9:- Now run the application, by default the application load like this.

If you click on “>>” button, the next row will be expanded like this.

 

The above output indicates, the Project manager and Team Leader are working under CEO. Again if you click on second EmployeeID it will be expanded.

 

 

It’s indicates the Jr.Developer works under Project Manager.

 

This all explains how multilevel grid worked on employees table. Thanks!