I recently came across this flexigrid and liked it. I wanted to try it myself. In an attempt, I am unable to load the json data from my controller into view. The chrome developer console is not showing any errors at all. Not sure if bootstrap that comes with the default MVC template is causing error. Any help would be appreciated.
my view:
@{
ViewBag.Title = "Index";
}
<head>
<title>some</title>
</head>
<h2>Index</h2>
<br />
<table id="jobListing" style="display: none"></table>
<script src="@Url.Content("~/Content/flexigrid/js/flexigrid.js")" type="text/javascript">
$(document).ready(function () {
$(function () {
$('#jobListing').flexigrid({
url: '@Url.Action("List", "Jobs")',
dataType: 'json',
colModel: [
{ display: 'Role', name: 'Role', width: 180, sortable: true, align: 'left' },
{ display: 'Description', name: 'Description', width: 180, sortable: true, align: 'left' },
{ display: 'Job Type', name: 'JobType', width: 130, sortable: true, align: 'left' },
{ display: 'Location', name: 'Location', width: 120, sortable: true, align: 'left' }
],
buttons: [
{ name: 'Add', bclass: 'add' },
{ name: 'Edit', bclass: 'edit' },
{ name: 'Delete', bclass: 'delete' },
{ separator: true }
],
searchitems: [
{ display: 'Role', name: 'Role' },
{ display: 'Location', name: 'Location', isdefault: true }
],
sortname: "Role",
sortorder: "asc",
usepager: true,
title: 'Job Listing',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
height: 200
});
});
});
</script>
my Controller:
public ActionResult Index()
{
return View();
}
public ActionResult List(int page, int rp, string sortname, string sortorder, string qtype, string query)
{
var jobs = this.jobRepository.GetAll().AsQueryable();
int total = jobs.Count();
if (!string.IsNullOrEmpty(qtype) && !string.IsNullOrEmpty(query))
{
jobs = jobs.Where(qtype, query);
}
if (!string.IsNullOrEmpty(sortname) && !string.IsNullOrEmpty(sortorder))
{
jobs = jobs.OrderBy(sortname, sortorder == "asc");
}
jobs = jobs.Skip((page - 1) * rp).Take(rp);
return CreateFlexiJson(jobs.ToList(), page, total);
}
private JsonResult CreateFlexiJson(IEnumerable<JobListing> items, int page, int total)
{
return Json(new { page, total,
rows = items.Select(x => new { id = x.Id,
cell = new object[] { x.Role, x.Description, x.JobType, x.Location }
})}, JsonRequestBehavior.AllowGet);
}
I placed the references to flexigrid.js and .css file in the layout page like below:
![<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="@Url.Content("~/Content/flexigrid/css/flexigrid.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Content/flexigrid/js/flexigrid.js")" type="text/javascript"></script>
@RenderSection("styles", required: false)
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>][1]
