Question

I have jqgrid on my page and the data is loaded correctly but the style looks really ugly. I am loading these files:

<link href="@Url.Content("~/Content/css/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/ui.multiselect.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery.validate.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.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Content/ui/minified/jquery.ui.core.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Content/ui/minified/jquery.ui.widget.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Content/ui/minified/jquery.ui.mouse.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Content/ui/minified/jquery.ui.tabs.min.js")" type="text/javascript"></script>

I’ve checked in Firebug and they all load correctly so there isn’t any path problem for any of the scripts.

This is my actual jqgrid code:

  $('#brands').jqGrid({
            url: '/GasolineBrands/GasolineBrands/',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['Logo', 'Name', 'No of Stations'],
            colModel: [
                { name: 'Logo', index: 'Logo', width: 150, align: 'left' },
                { name: 'Name', index: 'Name', width: 150, align: 'center' },
                { name: 'No of Stations', index: 'No of Stations', width: 150, align: 'center' },
            ],
            shrinkToFit: false,
            rownumbers: true,
            loadonce: false,
            pager: jQuery('#brandsPager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'Name',
            sortorder: "desc",
            viewrecords: true,
            imgpath: '',
            caption: 'Gasoline Brands',
            width: '100%',
            height: "100%"
        });

This is my html:

<table id="brands">
                </table>
                <div id="brandsPager">
                </div>

Can anybody spot the problem?

Thanks in advance 🙂

Answer 1

I found that I had to include <link href="@Url.Content("~/Content/themes/dark-hive/jquery-ui-1.8.16.custom.css")" rel=”stylesheet” type=”text/css” />. I did that and everything worked smoothly.