Display Data In jqxGrid Using ASP.NET MVC

Here, you will find the steps:

Step 1: Here, you will find the table that I used in the Application:

table

After creating the table, you need to fill it, as shown below:

fill

Step 2: Open Visual Studio and add New Project:

add New Project

add New Project

Step 3: Configuring Entity Data Model

Here, we need to follow the steps, as described below to configure EDM.

Configuring

Configuring

Configuring

Step 4: Add new controller

Right click on the controllers folder > Add > Controller > Enter controller name (‘Home’) > Add.

controller

HomeController.cs

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace JQXGridMVC.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         // DbContext  
  12.         DbPersonnesEntities db = new DbPersonnesEntities();  
  13.   
  14.         //  
  15.         // GET: /Home/  
  16.   
  17.         public ActionResult DisplayData()  
  18.         {  
  19.             return View();  
  20.         }  
  21.   
  22.         public JsonResult GetCustomers()  
  23.         {  
  24.             // Retrieve all data customers from database (DbPersonnes)  
  25.             var result = db.Customers.ToList();  
  26.               
  27.             return Json(result, JsonRequestBehavior.AllowGet);  
  28.         }  
  29.   
  30.     }  
  31. }  
DisplayData.cshtml
  1. @model  IEnumerable<JQXGridMVC.Customers>  
  2.   
  3. @{  
  4.     ViewBag.Title = "Data Customers";  
  5. }  
  6.   
  7. <h2> Data Customers</h2>  
  8.   
  9. <div id="gridCustomers" style="margin:20px auto;"></div>  
  10.   
  11. @section scripts {  
  12.   
  13.     
  14. <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>  
  15.   
  16. <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>  
  17.   
  18. <link rel="stylesheet" type="text/css" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" />      
  19.   
  20. <script type="text/javascript">  
  21.     $(document).ready(function () {  
  22.         // In this part, you need to prepare your data  
  23.         var source =  
  24.             {  
  25.                 datatype: "json",  
  26.   
  27.                 // Here you will declare all fields that must be used in the grid  
  28.                 datafields: [  
  29.                       
  30.                { name: 'CustomerID', type: 'number' },  
  31.                { name: 'CustomerName', type: 'string' },  
  32.                        { name: 'CustomerEmail', type: 'string' },  
  33.                        { name: 'CustomerZipCode', type: 'number' },  
  34.                        { name: 'CustomerCountry', type: 'string' },  
  35.               { name: 'CustomerCity', type: 'string' }  
  36.                       
  37.                 ],  
  38.                 // call the action which retrieve data customers in json format   
  39.                 url: 'Home/GetCustomers'  
  40.             };  
  41.   
  42.         var dataAdapter = new $.jqx.dataAdapter(source);  
  43.   
  44.         // displaying data in the grid with jqxGrid   
  45.         $("#gridCustomers").jqxGrid(  
  46.             {  
  47.                 width: 800,  
  48.                 source: dataAdapter,  
  49.                 pageable: true,  
  50.                 sortable: true,  
  51.   
  52.                 columns: [  
  53.                     
  54.                     { text: "Customer ID", datafield: "CustomerID" },  
  55.                     { text: "Customer Name", datafield: "CustomerName" },  
  56.                     { text: "Customer Email", datafield: "CustomerEmail" },  
  57.                     { text: "Customer ZipCode", datafield: "CustomerZipCode" },  
  58.                     { text: "Customer Country", datafield: "CustomerCountry" },  
  59.                     { text: "Customer City", datafield: "CustomerCity" }  
  60.                      
  61.                 ]  
  62.             });  
  63.     });  
  64. </script>  
Step 5: Run Application

Application