Hi,
You can refer below code in order to resolve the issue that you faced.
This is the template for jq Grid which is written in view
@(Html.Grid("GridName")
.SetRequestType(MvcJqGrid.Enums.RequestType.Post)
.SetJsonReader(new MvcJqGrid.DataReaders.JsonReader { Id = "WId" })
.SetCaption("View Report")
.AddColumn(new Column("Name").SetWidth(100).SetLabel(" Name").SetSearchType(MvcJqGrid.Enums.Searchtype.Text))
.AddColumn(new Column("Description").SetWidth(100).SetLabel("Description").SetSearchType(MvcJqGrid.Enums.Searchtype.Text))
.AddColumn(new Column("Status").SetWidth(100).SetLabel("Status").SetSearchType(MvcJqGrid.Enums.Searchtype.Text))
.AddColumn(new Column("Resource").SetWidth(100).SetLabel("Resource").SetSearchType(MvcJqGrid.Enums.Searchtype.Text))
.SetUrl(Url.Action("ViewName", "ControllerName"))
.SetAutoWidth(true)
.SetRowNum(10)
.SetSortName("WId")
.SetViewRecords(true)
.SetPager("pager")
.SetLoadOnce(true)//for client side sorting and paging enabled
.SetSearchToolbar(true)
.SetAutoWidth(true)
.SetSearchClearButton(true)
.SetSearchToolbar(true)
.SetSearchOnEnter(false)
.SetScroll(false)
.SetPgButtons(true)
.SetSearchClearButton(true)
.SetSearchToggleButton(true)
)
You can use it in controller like below:-
public JsonResult ViewName(GridSettings gridSettings)
{
int totalRecords;
SREntities db = new SREntities();
totalRecords = db.VW_GetData.Count();
var jsonData = new
{
total = totalRecords / gridSettings.PageSize + 1,
page = gridSettings.PageIndex,
records = totalRecords,
rows = db.VW_GetData.ToList()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
You have to add reference of a DLL for JQGrid "MvcJqGrid.dll " and also add jquery file in _Layout.cshtml
<script src="@Url.Content("~/Scripts/i18n/grid.locale-en.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>
Refer this link for furthur help:
mvcjqgrid.skaele.it/
Thats all done !!