Geek Answers Handbook

Full working example of JQGrid and MVC

I would like to use the JQ grid in my current MVC project, but I am having quite a few problems trying to figure this out. I believe that there is no available documentation if it is lacking, and all problems seem to be focused on one aspect, such as retrieving data in a grid. Well, I am much higher than this point, and I would like to see a fully functional example that retrieves data, sorts, swaps, adds, edits, deletes and searches all in one with MVC. Is there such an example on the Internet?

Also, I would like to know if I can use data annotations in combination with adding / editing a JQ grid? From what I have read so far, it seems that I should define new validation rules in the JQ Grid declaration and that the rules that I set on the model are ignored. Is there a way to use model rules during JQ Grid CRUD operations? I was thinking about how to create my own jquery dialog popup window with the corresponding partial view loaded after selecting a line and clicking the add / edit button. however, I cannot find the JQ grid event that occurs when the Add button is clicked. This seems to make you use their automatically generated modal popups ...

I'm not sure if all of this makes 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!

+4
source share
3 answers

I just tested JQGrid and DataAnnotations on my underlying data source, and there seems to be no support for them (but hopefully).

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

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

-Brandon

+3
source

you can try jq.grid already support data annotation and simple search

+1
source

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(); } } }
0
source

More articles:


All Articles