-
jqGrid with asp.net MVC
almost 11 years ago
To bind jqGrid with asp.net MVC please see below steps.
step 1: Download latest jqGrid from
http://olex.openlogic.com/packages/jqgrid/
http://www.trirand.com/blog/?page_id=6
step 2: Add downloaded folder into your project's Script folder.
step 3: Include latest jquery and jqGrid js files in your page.
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.4.1.js")" /> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.6.custom.min.js")" /> <script src="@Url.Content("~/Scripts/jquery3.8.2/src/i18n/grid.locale-en.js") " type="text/javascript"/> <script src="@Url.Content("~/Scripts/jquery3.8.2/src/grid.base.js")" type="text/javascript" /> <script src="@Url.Content("~/Scripts/jquery3.8.2/src/grid.common.js")" type="text/javascript" /> <script src="@Url.Content("~/Scripts/jquery3.8.2/src/grid.formedit.js")" type="text/javascript" /> <script src="@Url.Content("~/Scripts/jquery3.8.2/src/inlineEdit.js")" type="text/javascript" /> <script src="@Url.Content("~/Scripts/jquery3.8.2/src/grid.custom.js")" type="text/javascript" /> <script src="@Url.Content("~/Scripts/jquery3.8.2/src/grid.jquery.fmatter.js")" type="text/javascript" /> <script src="@Url.Content("~/Scripts/jquery3.8.2/src/jqueryUI.js")" type="text/javascript" /> <script src="@Url.Content("~/Scripts/jquery3.8.2/src/grid.setcolumns.js")" type="text/javascript" /> <script src="@Url.Content("~/Scripts/jquery3.8.2/src/jqModal.js")" type="text/javascript" /> <script src="@Url.Content("~/Scripts/jquery3.8.2/src/jqDnR.js")" type="text/javascript" />step 4: Include jqGrid css in you page.
<link href="@Url.Content("~/Scripts/jquery3.8.2/css/ui.jqgrid.css")" rel="stylesheet" type="text/css" />step 5: Include below code in your page to initialize jqGrid component.
$(document).ready(function () { var lastSel = 0; var countryId; var grid = jQuery("#list"); $('#list').jqGrid({ colNames: ['', 'Block', 'State', '', 'District', 'Created Date', 'Modified Date'], colModel: [ { name: 'id', index: 'id', hidden: true, editable: false }, { name: 'Name', index: 'Name', width: 162, align: 'left', editable: true, edittype: 'text', editoptions: { maxlength: 55, size: 33 }, editrules: { required: true, edithidden: true }, formoptions: { elmsuffix: '*' }, sortable: true }, { name: 'StateName', index: 'StateName', align: 'left', width: 90, editable: true, edittype: 'select', editoptions: { dataUrl: _dirpath + 'Admin/StateSelect', dataEvents: [ { type: 'change', fn: function (e) { getDistrict(this, 'DistrictId') } }] }, editrules: { required: true }, formoptions: { elmsuffix: '*' } }, { name: 'StateId', index: 'StateId', align: 'left', editable: true, hidden: true, edittype: 'text', sortable: true }, { name: 'DistrictId', index: 'DistrictId', width: 90, align: 'left', editable: true, edittype: 'select', editoptions: { dataUrl: _dirpath + 'Admin/DistrictSelectByState/00000000-0000-0000-0000-000000000000' }, editrules: { required: true }, formoptions: { elmsuffix: '*'} }, { name: 'Created', index: 'Created', width: 210, align: 'left', datefmt: 'dd/mm/yyyy hh:mm:ss', editable: false, sortable: true }, { name: 'Modified', index: 'Modified', width: 210, align: 'left', datefmt: 'dd/mm/yyyy hh:mm:ss', editable: false, sortable: true } ], pager: jQuery('#pager'), sortname: 'Name', rowNum: 25, rowList: [10, 25, 50, 75, 150], sortorder: "asc", height: '100%', datatype: 'json', caption: 'Block Information', viewrecords: true, mtype: 'GET', jsonReader: { root: "rows", page: "page", total: "total", records: "records", repeatitems: false, userdata: "userdata", loadonce: true }, onSelectRow: function (id) { var row = $('#list').getRowData(id); StateId = row.StateId; var myurl = _dirpath + 'Admin/DistrictSelectByState/' + StateId; $("#list").jqGrid('setColProp', 'DistrictId', { editoptions: { dataUrl: myurl} }); if (id && id != lastSel) { jQuery('#list').restoreRow(lastSel); lastSel = id; } }, url: _dirpath + "Admin/GetAllBlocks" }).navGrid('#pager', { view: false, del: true, add: true, edit: true, search: false }, { url: _dirpath + "Admin/UpdateBlock", closeAfterEdit: true, recreateForm: true }, // default settings for edit {url: _dirpath + "Admin/AddBlock", closeAfterAdd: true, recreateForm: true }, // default settings for add {url: _dirpath + "Admin/DeleteBlock", recreateForm: true }, // delete instead that del:false we need this {closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options {} /* view parameters*/ ); });step 6: Now include below html to your page to render jqGrid. Remember table id should be same as above jqGrid component initialized.
<div> <!-- the grid definition in html is a table tag with class 'scroll' --> <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table> <!-- pager definition. class scroll tels that we want to use the same theme as grid --> <div id="pager" class="scroll" style="text-align: center;"></div> </div>step 7: Create a controller and action. In my case controller is "AdminController" and action is "GetAllBlocks" as you can see in step 5 there is a code snippet as below. "_dirpath" is my dynamic path variable. This code will call your action when your page will be loaded.
url: _dirpath + "Admin/GetAllBlocks"
step 8: The code will be on your controller's action should like below in my case. Please note that column names as in below "row" should be same as in above step 5 jqGrid initialization.
public JsonResult GetAllBlocks(GridSettings grid) { //get data from database to bind with gqGrid var query = objBlockService.GetAllBlocks(); //count var count = query.Count(); //paging var data = query.Skip((grid.PageIndex - 1) * grid.PageSize).Take(grid.PageSize).ToArray(); //converting in grid format var result = new { total = (int)Math.Ceiling((double)count / grid.PageSize), page = grid.PageIndex, records = count, //below name should be same as used in jqGrid coloumn names rows = (from block in data select new { id = block.Id, Name = block.Name, DistrictId = block.District.Name, StateName = block.District.State.Name, StateId = block.District.StateId, Modified = block.Modified.ToString("dd/MM/yyyy hh:mm:ss"), Created = block.Created.ToString("dd/MM/yyyy hh:mm:ss") }).ToArray() }; //convert to JSON and return to client return Json(result, JsonRequestBehavior.AllowGet); }step 9: For Add, Edit and Delete set urls accordingly in my case as in step 5 see below code snippet.
{ url: _dirpath + "Admin/UpdateBlock", closeAfterEdit: true, recreateForm: true }, // default settings for edit {url: _dirpath + "Admin/AddBlock", closeAfterAdd: true, recreateForm: true }, // default settings for add {url: _dirpath + "Admin/DeleteBlock", recreateForm: true }, // delete instead that del:false we need this {closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options {} /* view parameters*/ );wtep 10: Create actions for Add/Edit/Delete in your controller. For my case see below code.
public void AddBlock(Block objBlock) { objBlock.Modified = DateTime.Now; objBlock.Created = DateTime.Now; objBlockService.AddBlock(objBlock); } public void UpdateBlock(Guid Id, Block obj) { objBlockService.UpdateBlock(Id, obj); } public void DeleteBlock(Guid Id) { objBlockService.DeleteBlock(Id); }See output below:
jqGrid View:
jqGrid Add:
jqGrid Edit:
jqGrid Delete;
Enjoy great coding experience..... :)
0 Comment(s)