Using jqGrid with ASP.NET MVC 5 Visual Basic.NET

[KGComputers]

This is a simple demo of loading records to a jqGrid. No CRUD or inline editing involved.

Steps:

1. Create a Visual Basic ASP.NET MVC Project. I'm using VS 2013 for now.
2. In your Models folder add an ADO.NET Entity Data Model which will reference Employees table
of Northwind database.
3. Install Dynamic LINQ Library (1.1.14) into your MVC project through NuGet. This will allow developers to
create LINQ statements using string expressions or values aside from lambda expressions.

4. Install also JqGrid 4.6.0 through NuGet.
5. In your HomeController class, reference System.Linq.Dynamic namespace and declare a context
variable of type NorthWindEntities. Then add a function called DynamicGridData() that returns
a JsonResult object which is the datasource of the jqGrid.

    Imports System.Linq.Dynamic

    Public Class HomeController
        Inherits System.Web.Mvc.Controller

        Dim _context As NorthwindEntities
        Public Sub New()
            _context = New NorthwindEntities()
        End Sub
        
          Function Index() As ActionResult
            Return View()
        End Function
        
        <HttpPost> _
        Public Function DynamicGridData(sidx As String, sord As String, page As Integer, rows As Integer) As JsonResult
            Dim pageIndex As Integer = Convert.ToInt32(page) - 1
            Dim pageSize As Integer = rows
            Dim totalRecords As Integer = _context.Employees.Count()
            Dim totalPages As Integer = CInt(Math.Ceiling(CSng(totalRecords) / CSng(pageSize)))

            Dim employees = _context.Employees.ToList()
            If sord.Trim().ToUpper().Equals("DESC") Then
                employees = _context.Employees.OrderBy(sidx & Convert.ToString(" DESC")).Skip(pageIndex * pageSize).Take(pageSize).ToList()
            Else
                employees = _context.Employees.OrderBy(sidx).Skip(pageIndex * pageSize).Take(pageSize).ToList()
            End If

            Dim jsonData = New With { _
                Key .total = totalPages, _
                Key .page = page, _
                Key .records = totalRecords, _
                Key .rows = (From emp In employees Select New With { _
                    Key .id = emp.EmployeeID, _
                    Key .cell = New String() {emp.EmployeeID.ToString(), emp.TitleOfCourtesy.ToString(), emp.FirstName.ToString(), _
                                              emp.LastName.ToString(), emp.Address.ToString(), emp.City.ToString(), emp.Country.ToString()} _
                }).ToArray() _
            }

            Return Json(jsonData, JsonRequestBehavior.AllowGet)

        End Function
    End Class

Note: The jsonData .cell property are the jqGrid columns.

6. In your Index view, add a table element which is the grid itself and a
div element for paging. Then reference the necessary .css and .js files used by the jqGrid.
Make sure that the referenced files are in the correct location.

   @Code
    ViewData("Title") = "Home Page"
    End Code

    <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />

    <div id="grid_container" class="container">
        <h2>Northwind Employees</h2>
        <table id="employees" class="scroll" cellpadding="0" cellspacing="0"></table>
        <div id="pager" class="scroll" style="text-align:center;"></div>
    </div>

    @section scripts
        <script type="text/javascript" src="/Scripts/i18n/grid.locale-en.js"></script>
        <script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#employees").jqGrid({
                    url: '/Home/DynamicGridData/',
                    datatype: 'json',
                    mtype: 'POST',
                    colNames: ['Employee #', 'Title', 'FirstName', 'LastName', 'Address', 'City', 'Country'],
                    colModel: [
                      { name: 'EmployeeID', index: 'EmployeeID', width: 100, hidden: true, align: 'left' },
                      { name: 'TitleOfCourtesy', index: 'TitleOfCourtesy', width: 60, align: 'left' },
                      { name: 'FirstName', index: 'FirstName', width: 100, align: 'left' },
                      { name: 'LastName', index: 'LastName', width: 100, align: 'left' },
                      { name: 'Address', index: 'Address', width: 200, align: 'left', cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }},
                      { name: 'City', index: 'City', width: 100, align: 'left' },
                      { name: 'Country', index: 'Country', width: 100, align: 'left' }],
                    pager: jQuery('#pager'),
                    rowNum: 5,
                    rowList: [5, 10, 20, 50],
                    sortname: 'EmployeeID',
                    sortorder: "desc",
                    viewrecords: true,
                    caption: 'Employee Details',
                    autowidth: true,
                    emptyrecords: 'No records to display',
                    height: '100%',
                    multiselect: false
                });
            });
        </script>
      End Section

7. Run your application.



For further customization of the grid, I suggest to go through the documentation itself.
Reference: using-jquery-grid-with-asp.net-mvc