(I am relatively new to web programming so it may be an easily overlooked issue)
I am using ASP.NET MVC4 to build an application which contains a razor view displaying a jqGrid. It is dynamically getting the column meta data using ajax, and the data all seems to return fine. When I run the app and the view is displayed, the data is shown but both the headers and body of the grid over flow the grid (see image).
I did notice that there appears to be a warning beneath the data stating “Please, select row”. My suspicion is the issue is either CSS or related to the warning. I have tried changing various properties in the ui.jqgrid.css, site.css, etc to no avail.
Here is the rendered html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Feed List Preview</title>
<link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.selectable.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.accordion.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.tabs.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<link href="/Content/site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/modernizr-2.0.6-development-only.js" type="text/javascript"></script>
<script src="/Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script src="/Content/themes/redmond/jquery-ui-1.9.0.custom.min.css" type="text/javascript"></script>
<script src="/Content/jquery.jqGrid/ui.jqgrid.css" type="text/javascript"></script>
<script src="/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.src.js" type="text/javascript"></script>
<script type="text/javascript">
var jqDataUrl = "LoadData";
var jqMetaUrl = "GetColumnData";
$(document).ready(function () {
$.ajax(
{
type: "POST",
url: jqMetaUrl,
data: "",
dataType: "json",
success: function (result) {
col_names = result.colNames;
col_model = result.colModel;
$("#jqTable").jqGrid({
url: jqDataUrl,
datatype: "json",
mtype: "POST",
//Specify the column names
colNames: col_names,
//Configure the columns
colModel: col_model,
//Grid total width and height
width: 800,
shrinkToFit:false,
height: 400,
//Paging
toppager: true,
pager: $('#jqTablePager'),
rowNum: 25,
rowList: [25, 50, 100],
viewrecords: true, //Specify if total number of records is displayed
//Formatting
altRows: true
//Default Sorting (ignored)
//Grid Caption
//caption: "Feed List Preview"
}).navGrid("#jqTablePager",
{ refresh: true, add: false, edit: false, del: false },
{}, //settings for edit
{}, //settings for add
{}, //settings for delete
{ sopt: ["cn"] } //search options, Some options can be set on column level
)
},
error: function (x, e) {
alert("ReadyState: " + x.readyState + "; Status:" + x.status + "; Message:" + e.msg + ";");
}
});
});
</script>
</head>
<body>
<div id="header">
<h1>
Header
</h1>
</div>
<h2>Feed List Preview</h2>
<div>
<table id="jqTable" class="scroll"></table>
<div id="jqTablePager" />
</div>
<script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
</body>
</html>
Ok, with the help of a colleague, we identified the ui.jqgrid.css and the jquery-ui*.css (theme) were not loading when the page was rendered. This was seen on the developer tools in IE.
The cause of this issue appears to be the Razor view not processing the java script correctly. After moving the content and scripts into a plain HTML page, everything rendered properly.
So there is still a question as to why the javascript didn’t get rendered, but I now have a sufficient workaround.