Mendes Mendes - 1 month ago 25
jQuery Question

MVC4 jqGrid pager not showing icons

I´m using jQGrid in my MVC4 application. All works fine, except that the icons are not being shown on pager. I need help to know what is going wrong.

Here is my code:

<link href="@Url.Content("~/Content/themes/jquery-ui.css")" rel="stylesheet" media="screen">
<link href="@Url.Content("~/Content/jquery.jqGrid/ui.jqgrid.css")" rel="stylesheet" media="screen">
<link href="@Url.Content("~/Content/jquery.jqGrid/ui.multiselect.css")" rel="stylesheet" media="screen">

<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/i18n/grid.locale-pt.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")"></script>
<script src="@Url.Content("~/Scripts/ui.multiselect.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.tablednd.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.contextmenu.js")"></script>

<script type="text/javascript">

jQuery(document).ready(function () {
$('#myGrid').jqGrid({
height: 300,
toolbar: [true, 'bottom'],
multiselect: true,
cellEdit: false,
rowNumbers: true,
datatype: 'json',
rowNum: 50,
rowList: [50, 100, 200],
url: '@Url.Action("GetGridData", "AdminSysLog")',
editurl: '@Url.Action("CRUDGridData", "AdminSysLog")',
contentType: "application/json; charset-utf-8",
caption: 'System Logs',
mtype: 'POST',
shrinkToFit: false,
pager: '#myPager',
sortname: 'DateTime',
sortorder: 'desc',
viewrecords: true,
colNames: ['DATETIME', 'LEVEL', 'TYPE', 'SYSTEM', 'USER', 'MESSAGE'],
colModel: [
{ name: 'DateTime', align: 'center', width: 140, sortable: true, editable: false, searchoptions: { sopt: ['eq', 'ne', 'cn'] } },
{ name: 'Severity', align: 'center', width: 50, sortable: true, editable: false, searchoptions: { sopt: ['eq', 'ne', 'cn'] } },
{ name: 'Type', align: 'center', width: 50, sortable: true, editable: false, searchoptions: { sopt: ['eq', 'ne', 'cn'] } },
{ name: 'Source', align: 'center', width: 100, sortable: true, editable: false, searchoptions: { sopt: ['eq', 'ne', 'cn'] } },
{ name: 'User', align: 'center', width: 100, sortable: true, editable: false, searchoptions: { sopt: ['eq', 'ne', 'cn'] } },
{ name: 'Message', align: 'left', width: 500, sortable: true, editable: false, searchoptions: { sopt: ['eq', 'ne', 'cn'] } },
]
}).navGrid('#myPager', {
edit: false,
add: false,
del: true,
search: true,
deltext: "Apaga",
searchtext: "Busca",
viewrecords: true
}
);
});


</script>


<table id="myGrid"></table>
<div id="myPager"></div>

<br />
<br />


And here is what is being shown (no icons at all):

enter image description here

Thanks for any kind of help.

Answer

I suppose that you added jQuery UI in the wrong way to your project. You should verify that the folder /Content/themes/ (from which you get jquery-ui.css) contains subfolder images with PNG files.

Comments