JQGrid and MVC Full Working Example

Question

I would like to use JQ grid in my current MVC project but I'm running into quite a few problems trying to figure it out. I find the available documentation lacking if not missing and all the problems seem to focus on a single aspect such as getting data into the grid. Well I'm way beyond that point and I would love to see a fully functional example that does fetching data, sorting, paging, add, edit, delete and search all in one with MVC. Is there such an example anywhere on the web?

Furthermore I would like to know if I can use data annotations in conjunction with JQ grid add/edit? From what I read so far it seems that I have to define new validation rules within JQ Grid declaration and that rules that I established on the model are being ignored. Is there a way to use model rules during JQ Grid CRUD operations? I was thinking along the way of making my own jquery dialog popup with appropriate partial view loaded once a row is selected and add/edit button is clicked. however I cannot find JQ grid event which is raised when Add button is clicked. It seems to force you into using their auto generated modal popup form...

I'm not sure if all this makes any sense to any of you but any help would be appreciated. If anyone has a link to all JQ Grid events even that would be a big help... Thanks!

score 3 · Answer 1 · answered Oct 03 '11 at 15:46

I just tested JQGrid and DataAnnotations on my underlying datasource and there does not appear to be any support (yet hopefully) for them.

As for the for the MVC part, are you looking to use the ASP.NET MVC Helpers provided by trirand.net? if so you can find a working example here:

http://www.trirand.net/aspnetmvc/grid/editrowinlineactionicons

-Brandon

score 1 · Answer 2 · answered Apr 30 '13 at 19:40

1

you can try my Jq.Grid already support for data annotation and simple searching

answered Apr 30 '13 at 19:40

Aiska Hendra

145
1
4

score 0 · Answer 3 · edited Aug 28 '17 at 07:54

Razor View: Total CRUD Operation

@{
    ViewBag.Title = "Home Page";
}
<table id="tbl"></table>
<div id="pager"></div>


@section scripts{
<link href="~/Content/Theme/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/Theme/jquery-ui.min.css" rel="stylesheet" />

<script src="~/Scripts/jqGrid/jquery.jqGrid.js"></script>
<script src="~/Scripts/jqGrid/grid.inlinedit.js"></script>
<script src="~/Scripts/jqGrid/grid.locale-en.js"></script>
<script src="~/Scripts/jqGrid/jquery.sortable.js"></script>


    <script>
        $(function () {
            var lastsel;
            $("#tbl").jqGrid({
                url: "/Home/GetData",
                mtype: "Get",
                datatype: "Json",
                colNames: ["ID", "Name", "Address", "Mobile", "Salary"],
                colModel: [
                    { name: 'id', index: 'id', editable: false, align: 'center' },
                    { name: 'name', index: 'name', editable: true },
                    { name: 'address', index: 'address', editable: true },
                    { name: 'mobile', index: 'mobile', editable: true },
                    { name: 'salary', index: 'salary', editable: true }
                ],
                loadonce: true,
                pager: "#pager",
                rowNum: 20,
                height:"100%",                
                onSelectRow: function (id) {
                    if (id && id !== lastsel) {
                        $("#tbl").restoreRow(lastsel);
                        $("#tbl").editRow(id, true);
                        lastsel = id;
                    }
                },
                caption: "jqGrid",
                editurl: "/Home/EditData",
                viewrecords: true,
                sortorder: "desc",
                sortname: "id",
            }).navGrid("#pager", { edit: false, add: false, del: true, refresh: false, search: false },
            {},
            {},
            {
                url: "/Home/DelData",
                mtype: "Post",
                delData: "row_id_s",

            }).inlineNav("#pager", {
                add: true,
                addParams: {
                    addRowParams: {
                        url: "/Home/AddData",
                        mtype: "Post"
                    }
                }
            });
        });

    </script>
    }

MVC Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using jqGrid_Exam2.Models;
using System.Data.Entity;

namespace jqGrid_Exam2.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public ActionResult GetData()
        {
            DBcontext db = new DBcontext();
            var data = db.EmployeeTbls.ToList<EmployeeTbl>();
            return Json(data,JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public void EditData(EmployeeTbl emp)
        {
            DBcontext db = new DBcontext();
            db.Entry(emp).State = EntityState.Modified;
            db.SaveChanges();
        }

        [HttpPost]
        public void AddData(EmployeeTbl emp)
        {
            DBcontext db = new DBcontext();
            db.EmployeeTbls.Add(emp);
            db.SaveChanges();
        }

        [HttpPost]
        public void DelData(string id)
        {
            DBcontext db = new DBcontext();
            EmployeeTbl emp = db.EmployeeTbls.Find(int.Parse(id));
            db.EmployeeTbls.Remove(emp);
            db.SaveChanges();
        }
    }
}

JQGrid and MVC Full Working Example

3 Answers3