I m a fresher in MVC 4 and I m trying to use jqgird in my razor view(content page) in MVC 4 based project. WHen i m using the jqgird in layout razor view it works properly but i m unable to get the desiare output when i m using jqgrid in razor view(content page). The data is coming in view but the design of jqgrid is not visible.
@Scripts.Render("~/bundles/jquery");
this code is creating problem.
view code....
@{
@using System.Web.Optimization;
@Scripts.Render("~/bundles/jquery");
<script src="../Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
@Scripts.Render("~/bundles/jqGrid");
<link href="../Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
}
<script type="text/javascript">
var path = "Login/Index";
jQuery("#jQGridDemo").jqGrid({
url: path,
datatype: "json",
colNames: ['userID', 'FirstName'],
colModel: [
{ name: 'userID', index: 'userID', width: 20, stype: 'text' },
{ name: 'username', index: 'FirstName', width: 150, stype: 'text', sortable: true, editable: true }
],
rowNum: 10,
mtype: 'POST',
loadonce: true,
rowList: [10, 20, 30],
pager: '#jQGridDemoPager',
sortname: '_id',
viewrecords: true,
sortorder: 'desc',
caption: "List Employee Details",
});
$('#jQGridDemo').jqGrid('navGrid', '#jQGridDemoPager',
{
edit: true,
add: true,
del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete"
},
{
closeOnEscape: true,
reloadAfterSubmit: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
return [false, response.responseText]
}
},
editData: {
EmpId: function () {
var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
return value;
}
}
},
{
closeAfterAdd: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')
return [false, response.responseText]
}
}
},
{
closeOnEscape: true,
closeAfterDelete: true,
reloadAfterSubmit: true,
closeOnEscape: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$("#jQGridDemo").trigger("reloadGrid", [{ current: true}]);
return [false, response.responseText]
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')
return [true, response.responseText]
}
},
delData: {
EmpId: function () {
var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
return value;
}
}
},
{
closeOnEscape: true
}
);
</script>
<h2>Index</h2>
<table id='jQGridDemo' >
</table>
app_start/bundleConfig.cs file
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;
namespace MVC_grid_application.App_Start
{
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery-ui.css",
"~/Content/themes/base/jquery.ui.all.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.base.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/Site.css",
"~/Content/themes/base/jquery.ui.spinner.css",
"~/Content/themes/base/jquery.ui.theme.css"
)
);
bundles.GetBundleFor("~/Content/themes/base/css").Orderer = new AppCssOrderer();
var bootstrapOrdering = new BundleFileSetOrdering("bootstrap");
bundles.Add(new ScriptBundle("~/Scripts/js").Include(
"~/Scripts/eXNav.js",
"~/Scripts/jquery-1.8.1-vsdoc.js",
"~/Scripts/jquery-1.8.1.js",
"~/Scripts/jquery-ui-1.8.23.custom.min.js",
"~/Scripts/Labels.js",
"~/Scripts/Dialog.js",
"~/Scripts/SessionTimeOut.js",
"~/Scripts/jquery.qtip.js",
"~/Scripts/json2.js",
"~/Scripts/jquery.watermark.min.js",
"~/Scripts/grid.locale-en.js",
"~/Scripts/jquery.jqGrid.src.js",
"~/Scripts/jquery.jqGrid.fluid.js",
"~/Scripts/jquery.validate.min.js",
"~/Scripts/jquery.validate.unobtrusive.min.js",
"~/Scripts/Computing.js",
"~/Scripts/Controllers/ProjectController.js",
"~/Scripts/Controllers/RequestController.js",
"~/Scripts/Controllers/SystemController.js",
"~/Scripts/Views/ProjectView.js",
"~/Scripts/Views/RequestView.js",
"~/Scripts/Views/SystemView.js"
)
);
bundles.GetBundleFor("~/Scripts/js").Orderer = new AppJsOrderer();
BundleTable.EnableOptimizations = true;
}
public class AppCssOrderer : IBundleOrderer
{
public IEnumerable<System.IO.FileInfo> OrderFiles(BundleContext context,
IEnumerable<System.IO.FileInfo> files)
{
if (context == null)
throw new ArgumentNullException("context");
if (files == null)
throw new ArgumentNullException("files");
return files;
}
public IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
{
throw new NotImplementedException();
}
}
public class AppJsOrderer : IBundleOrderer
{
public IEnumerable<System.IO.FileInfo> OrderFiles(BundleContext context,
IEnumerable<System.IO.FileInfo> files)
{
if (context == null)
throw new ArgumentNullException("context");
if (files == null)
throw new ArgumentNullException("files");
return files;
}
public IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
{
throw new NotImplementedException();
}
}
}
}