Grouping Data In jqxDataTable Using ASP.NET MVC 4

Introduction

In this post, I will show you how to display data in a jqxDataTable plugin with ASP.NET MVC 4, using C# and Entity Framework, JSON.

What is a jqxDataTable?

jqxDataTable is a lightweight jQuery Table widget built to easily replace your HTML tables. It can read and display the data from your HTML table, but it can also display data from various data sources, like XML, JSON, Array, CSV or TSV. jqxDataTable comes with easy to use APIs and works across devices and browsers.

Features

• Binding to Local and Remote Data
• Sorting
• Filtering
• Paging
• Row Editing and Validation
• Nested HTML Tables
• Row Details
• Localization
• Columns Resizing
• Columns Hierarchy
• Pinned Columns
• Foreign Columns
• Cells Formatting
• Custom Cells Rendering
• Aggregates

Before starting, we need to download the following libraries from jqwidgets.

SQL Database part

Create Table

You will find the table, given below, used in our application:



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



Create your MVC application

Open Visual Studio. Click on File > New > Project and name your project, as shown below:





Creating ADO.NET Entity Data Model

In this level, we need to create an Entity Data Model which allows us to retrieve the data from the database.

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





After clicking the Next button, the dialog box will be displayed, as below. You need to choose your server name and select your database.



Finally, we see that EDMX model generates OrderDetails class.



Create a controller

Now, we proceed to create a controller. Right click on the controller folder > Add > Controller > Enter Controller name (‘Home Controller’).



HomeController.cs