Search code examples
jqueryhtmlcssasp.net-corejqgrid

jQuery Grid css not loading in .net core 2

My JqGrid Css styles are not loading properly. I am using .net core 2.0 and jqgrid 4.4.3. Can you please help me what I am doing wrong. I tried manual css class to the table. But still that doesn't help. 

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript">
    jQuery.browser = {};
    (function () {
        jQuery.browser.msie = false;
        jQuery.browser.version = 0;
        if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
            jQuery.browser.msie = true;
            jQuery.browser.version = RegExp.$1;
        }
    })();
</script>
<script src="~/js/grid.locale-en.js"></script>
<script src="~/js/jquery.jqGrid.min.js"></script>
<link href="~/css/ui.jqgrid.css" rel="stylesheet" />


<table id="list-student"></table>
<div id="pager"></div>
<script>
    $('#list-student').jqGrid({
        url: '/Home/GetProductsList',
        datatype: 'json',
        colNames: ['proID', 'ID', 'name', 'SKU', 'Price', 'vendorname', 'Active'],
        colModel: [
            { name: 'proID', index: 'proID', editable: false, width: 100, align: 'center' },
            { name: 'ID', index: 'ID', editable: true, width: 240 },
            { name: 'name', index: 'name', editable: true, width: 240 },
            { name: 'SKU', index: 'SKU', editable: true, width: 240 },
            { name: 'Price', index: 'Price', editable: true, width: 240 },
            { name: 'vendorname', index: 'vendorname', editable: true, width: 240 },
            { name: 'Active', index: 'Active', editable: true, width: 240 }

        ],

        rowNum: 1,
        rowList: [1, 2, 3],
        pager: '#pager',
        sortname: 'id',
        viewrecords: true,
        height: 'auto',
        width: 'auto',
        sortorder: 'asc',
        loadonce: true,
        caption: 'List Students',
        jsonReader:
            {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: false,
                Id: "0"
            },
        autowidth: true,
    }).navGrid('#pager',
        {
            edit: true,
            add: true,
            del: true,
            search: true,
            refresh: true,
            closeAfterSearch: true
        });

</script>

This is my cshtml page and my controller is like this.

[HttpGet]
public virtual ActionResult GetProductsList()
{
    List<ResponseMessage> respmsg = new List<ResponseMessage>();
    respmsg.Add(new ResponseMessage { proID = 1, ID = 5, name = "Product1", SKU = "sku1", Price = 100, vendorname = "Nike", Active = true });
    respmsg.Add(new ResponseMessage { proID = 2, ID = 6, name = "Product2", SKU = "sku2", Price = 100, vendorname = "Addidas", Active = false });

    var result = new
    {
        total = respmsg.Count,
        page = 1,
        records = 2,
        rows = respmsg
    };
    //return Content(Newtonsoft.Json.JsonConvert.SerializeObject(result), "application/json");
    return Json(result);
}

This is how my page looks like

MyJqgrid

All of my functionalities like edit save create are working fine. Except the css style.

Solution

  • You missed to load the jQuery UI CSS file jquery-ui.css, something like this

    ...
<link rel="stylesheet" type="text/css" media="screen" href="~/css/jquery-ui.css" />

    Be a sure you point to a correct jquery-ui css