Building Expandable Master And Details Table with JQuery Datatable and Ajax in ASP.Net MVC


DataTables is a plug-in for the jQuery Javascript library that is highly flexible.  In this article, I will walk you through how to build a master-details grid using jQuery DataTable plugin, MS SQL Server and ASP.Net MVC.


To follow along with this article, you should have prior knowledge of ASP.Net, HTML, Jquery, and CSS. You should also have the following installed on your machine:

Visual Studio
MS SQL Server

How to create Master-Details Grid

I will be displaying data from two tables, the first table is a product category table, and the second table will be product subcategory table. The main (Master) Datatable  will display the product category while the child (details) table will display the sub-categories.

If you want to code along just copy and run the database script below with sample data.

Building the data access in ASP.Net MVC

Create Product Repository

First, we need to add some composite class that will combine the data that will be coming from the two tables. In the models' folder create two model classes to hold our selected data like so:

Next, create two methods - the first one will be responsible for loading the product categories while the second will be for loading subcategories.

The Interface

The Repository Class

The Controller

We also need two methods in our application's controller - the first method will load product categories and the second one will load the product subcategories.
I won't be giving any explanation on the above code. If you need more information please refer to my previous article on jQuery DataTable Server Side Pagination

The Application View

Replace the index.cshtml file code with the one below: The next thing is to set up the ajax part. Add the following script below your index.cshtml page: All that is happening in the javascript code is fetching data via ajax and also configuring datatable. If we run the application now we should have something like what we have in the image below:


We have successfully loaded the master record, the next thing is to allow a user to click on any of the items to reveal the details.

Displaying the Details 

For this, we are going to make use of datatable row().child API. DataTables has the ability to show child rows for each row. These child rows are attached to each parent row.

In the first colunm of every row in the table I have added a css class named 'details-control', this will be used to control which image user see when they click on the column to view the details.

Whenever this image is clicked, the id of the parent will be sent via Ajax to the controller action which will return the children back to the client in JSON format. The Datatable row() API will now be used to display the row child.

Let's add the required CSS styles that will be needed for the image manipulations:

The Ajax Method

The Ajax methods required two functions, the first one will be a jQuery ajax method and the second one will be for the rendering of the child table. Below are the two functions:

The next thing we need to do is to write the method that will handle the click of the image which triggers the ajax method.

If you run your application now, you should see a fully functional master details grid.


In this article I have explained how you can create expandable master details table using JQuery DataTables plugin, Ajax and ASP.NET MVC.

No comments:

Powered by Blogger.