n
nDataTables 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.
n
n
nn
nPrerequisites
nTo 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:
n
nVisual Studio
nMS SQL Server
n
n
nHow to create Master-Details Grid
nI 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.
n
nnn
nn
nIf you want to code along just copy and run the database script below with sample data.
n
nnn
n
nnBuilding the data access in ASP.Net MVC
n
nCreate Product Repository
nFirst, 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:
n
nnnnNext, create two methods – the first one will be responsible for loading the product categories while the second will be for loading subcategories.n
n
nThe Interfacen
nnn
n
nThe Repository Classn
nnn
n
nThe Controllern
nWe 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.
nnnI 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
nnn
nn
n
nThe Application View
nReplace the index.cshtml file code with the one below:nnnnThe next thing is to set up the ajax part. Add the following script below your index.cshtml page:nnnnAll 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:n
n
n
n
n
nWe 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.
n
n
nDisplaying the Details
nFor this, we are going to make use of datatable row().child API. nDataTables has the ability to show child rows for each row. These child rows are attached to each parent row.
n
nIn 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.
n
nWhenever 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().child.show() API will now be used to display the row child.
n
nLet’s add the required CSS styles that will be needed for the image manipulations:
nnn
n
nnThe Ajax Methodn
nThe 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:
n
nnnThe next thing we need to do is to write the method that will handle the click of the image which triggers the ajax method.
n
nnnIf you run your application now, you should see a fully functional master details grid.n
nnn
nn
n
nConclusionn
nIn this article I have explained how you can create expandable master details table using JQuery DataTables plugin, Ajax and ASP.NET MVC.n
n
n
n
n
n