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:



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



Step 2: Open Visual Studio and add New Project:





Step 3: Configuring Entity Data Model

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







Step 4: Add new controller

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



HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace JQXGridMVC.Controllers
{
    public class HomeController : Controller
    {
        // DbContext
        DbPersonnesEntities db = new DbPersonnesEntities();

        //
        // GET: /Home/

        public ActionResult DisplayData()
        {
            return View();
        }

        public JsonResult GetCustomers()
        {
            // Retrieve all data customers from database (DbPersonnes)
            var result = db.Customers.ToList();

            return Json(result, JsonRequestBehavior.AllowGet);
        }

    }
}

DisplayData.cshtml

@model  IEnumerable<JQXGridMVC.Customers>

@{
    ViewBag.Title = "Data Customers";
}

<h2> Data Customers</h2>

<div id="gridCustomers" style="margin:20px auto;"></div>

@section scripts {


<script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>

<link rel="stylesheet" type="text/css" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" />

<script type="text/javascript">
    $(document).ready(function () {
        // In this part, you need to prepare your data
        var source =
            {
                datatype: "json",

                // Here you will declare all fields that must be used in the grid
                datafields: [

               { name: 'CustomerID', type: 'number' },
               { name: 'CustomerName', type: 'string' },
                       { name: 'CustomerEmail', type: 'string' },
                       { name: 'CustomerZipCode', type: 'number' },
                       { name: 'CustomerCountry', type: 'string' },
              { name: 'CustomerCity', type: 'string' }

                ],
                // call the action which retrieve data customers in json format
                url: 'Home/GetCustomers'
            };

        var dataAdapter = new $.jqx.dataAdapter(source);

        // displaying data in the grid with jqxGrid
        $("#gridCustomers").jqxGrid(
            {
                width: 800,
                source: dataAdapter,
                pageable: true,
                sortable: true,

                columns: [

                    { text: "Customer ID", datafield: "CustomerID" },
                    { text: "Customer Name", datafield: "CustomerName" },
                    { text: "Customer Email", datafield: "CustomerEmail" },
                    { text: "Customer ZipCode", datafield: "CustomerZipCode" },
                    { text: "Customer Country", datafield: "CustomerCountry" },
                    { text: "Customer City", datafield: "CustomerCity" }

                ]
            });
    });
</script>
}

Step 5: Run Application