MVC4 jqGrid pager not showing icons

Question

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):

Thanks for any kind of help.

Answer 1

To me was a really headache, to solve it, first look for a DEMO working of Jquery for a grid pager like: http://www.trirand.com/blog/phpjqgrid/examples/loading_data/million_sql/default.php

, in firefox I clicked in "inspect element" (in the button), then I search in the url image the file, then I copied the file in to my machine; then in my proyect I clicked in "see background image" (button); and that was the correct name that I was looking for. Rename if is necesary, Put that image in: ..\Styles\images\

And thats was the solution,

"Omar Romero, Mexico City"

Answer 2

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.