Use jQuery Grid Plugin in ASP .NET MVC

This article presents a simple example on how to use the jqxGrid plugin in ASP .NET MVC. The Grid uses “Ajax” calls to obtain the data from the server to display. In this example, the server code is implemented in an ASP.NET “MVC” controller.

1. Open Visual Studio and create a new ASP .NET MVC Web Application. 2. Open the Solution Explorer and create a new EmployeeRepository class. The “EmployeeRepository.cs” in the “Models” folder is the application’s data model. It maintains the data for the grid to display. We can use the “GetEmployees” method to access the employees list.

public class EmployeesRepository
    public static List<Employee> GetEmployees()
        List<Employee> employees = new List<Employee>();

        string[] firstNames = new string[] { "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene" };
        string[] lastNames = new string[] { "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier" };
        string[] productNames = new string[] { "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist" };
        string[] priceValues = new string[] { "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0" };
        Random random = new Random();

        for (var i = 0; i < 100; i++)
            Employee employee = new Employee();

            int productindex = random.Next(productNames.Length);
            float price = float.Parse(priceValues[productindex]);
            int quantity = 1 + random.Next(10);
            employee.FirstName = firstNames[random.Next(firstNames.Length)];
            employee.LastName = firstNames[random.Next(lastNames.Length)];
            employee.Price = price;
            employee.Quantity = quantity;
            employee.Product = productNames[productindex];
        return employees;

3. Create a new Employee class. The “Employee” class defines some basic information for an employee.

public class Employee
	public int ID { get; set; }
	public string FirstName { get; set; }
	public string LastName { get; set; }
	public string Product { get; set; }
	public double Price { get; set; }
	public int Quantity { get; set; }
	public double Total
			return this.Price * this.Quantity;

4. Put all the JavaScript files in the “Scripts” folder and all the CSS style sheets in the “Content” folder.
5. The MVC controller “HomeController.cs” in the “Controllers” folder implements the server code to serve the “Ajax” calls.

public class HomeController : Controller
	public ActionResult Index()
		ViewData["Message"] = "Welcome to ASP.NET MVC!";

		return View();

	public ActionResult DataHandler()
		List<Employee> employees = EmployeesRepository.GetEmployees();

		return Json(new

	public ActionResult About()
		return View();

6. Add references to the JavaScript and CSS StyleSheet files. In the example, we have added them in the Site.Master.

<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../../Content/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxcore.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxdata.js"></script> 
    <script type="text/javascript" src="../../Scripts/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxmenu.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxgrid.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxgrid.selection.js"></script> 
7. Open the Index.aspx file in the Views/Home folder and create the jqxGrid. Initialize the source object and set its 'datatype' property to 'json' and 'url' property to the "DataHandler". The "Ajax" call to the server will be automatically initiated by the jqxGrid and it will be populated with the Employees list. The last step is to select the "jqxgrid" div tag and call the jqxGrid constructor. Add the names of the columns in the grid initialization.
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <script type="text/javascript">
      $(document).ready(function () {
          var source =
                url: "Home/DataHandler",
                datatype: "json",
                datafields: [{ name: "FirstName" }, { name: "LastName" }, { name: "Product" }, { name: "Price", type: "float" }, { name: "Quantity", type: "int" }, { name: "Total", type: "float"}]

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

                source: dataAdapter,
                columns: [
                  { text: 'First Name', dataField: 'FirstName', width: 100 },
                  { text: 'Last Name', dataField: 'LastName', width: 100 },
                  { text: 'Product', dataField: 'Product', width: 180 },
                  { text: 'Quantity', dataField: 'Quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'Price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', dataField: 'Total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
    <div id="jqxgrid"></div>

jquery grid in asp .net mvc application

About admin

This entry was posted in JavaScript, JavaScript Plugins, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxGrid and tagged , , , , , , , , . Bookmark the permalink.

2 Responses to Use jQuery Grid Plugin in ASP .NET MVC

  1. swapna says:

    I would like to know how to update database using MVC and JqxGrid? Could you please guide me?

Leave a Reply