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;
  7. namespace JQXGridMVC.Controllers
  8. {
  9. public class HomeController : Controller
  10. {
  11. // DbContext
  12. DbPersonnesEntities db = new DbPersonnesEntities();
  14. //
  15. // GET: /Home/
  17. public ActionResult DisplayData()
  18. {
  19. return View();
  20. }
  22. public JsonResult GetCustomers()
  23. {
  24. // Retrieve all data customers from database (DbPersonnes)
  25. var result = db.Customers.ToList();
  27. return Json(result, JsonRequestBehavior.AllowGet);
  28. }
  30. }
  31. }
DisplayData.cshtml
  1. @model IEnumerable<JQXGridMVC.Customers>
  3. @{
  4. ViewBag.Title = "Data Customers";
  5. }
  7. <h2> Data Customers</h2>
  9. <div id="gridCustomers" style="margin:20px auto;"></div>
  11. @section scripts {
  14. <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
  16. <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
  18. <link rel="stylesheet" type="text/css" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" />
  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",
  27. // Here you will declare all fields that must be used in the grid
  28. datafields: [
  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' }
  37. ],
  38. // call the action which retrieve data customers in json format
  39. url: 'Home/GetCustomers'
  40. };
  42. var dataAdapter = new $.jqx.dataAdapter(source);
  44. // displaying data in the grid with jqxGrid
  45. $("#gridCustomers").jqxGrid(
  46. {
  47. width: 800,
  48. source: dataAdapter,
  49. pageable: true,
  50. sortable: true,
  52. columns: [
  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" }
  61. ]
  62. });
  63. });
  64. </script>
  65. }
Step 5: Run Application

Application