Question

I was copying over my mvc 3 code to an mvc 4 application and i noticed my jqgrid section of code was no longer being rendered properly. As you can tell in the image, the pager is missing, and the column names are far too large than the default jqgrid settings. Any idea as to how to fix this problem?

Image

Code

<link href="@Url.Content("~/Content/jqgrid/ui.jqgrid.css")" rel="stylesheet" typpe="text/css" /> 

<script src="@Url.Content("~/Scripts/jquery-1.8.3.min.js")" type="text/javascript"></script>     
<script src="@Url.Content("~/Scripts/jquery-ui-1.9.2.cupertino.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/grid.locale-en.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>

<script type="text/javascript">
    jQuery(document).ready(function () {
        var id = 0;
        jQuery("#tblUsers").jqGrid({
            url: '/Configuration/GetUsers/',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['User Name', 'Role'],
            colModel: [
                { name: 'User Name', index: 'User Name', width: 90, align: 'left' },
                { name: 'Role', index: 'Role', width: 80, align: 'left' }],
            //pager: jQuery('#pager'),
            width: 700,
            height: 200,
            rowNum: 20,
            rowList: [5, 10, 20, 50],
            sortname: 'User Name',
            sortorder: "desc",
            viewrecords: true,
            imgpath: '',
            caption: 'Users'
        });

        jQuery("#tblUsers").jqGrid('navGrid', '#pager',
        {
            editfunc: function (rowid) {
                //$('#dialogEdit').data('id', rowid);
                //$('#dialogEdit').dialog('open');
            },
            addfunc: function () {
                //$('#dialog').dialog('open');
            },
            delfunc: function (rowid) {
                //$('#dialogDelete').data('id', rowid);
                //$('#dialogDelete').dialog('open');
            }
        }, //options
        {}, // edit options 
        {}, // add options 
        {}, // del options
        {} // search options
        );
    });
</script>

<table id="tblUsers" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

Answer 1

You are likely missing a CSS file that is required for this to work. A few things to check.

• Did you copy the theme & other associated css files over?
• ASP.NET MVC 4 uses a different bundling process if you were bundling things together in 3.