Home/ Questions/Q 8005935
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T17:21:07+00:00

in asp-mvc, i have a partial view which contains this: <table id=grid> </table> <div

  • 0

in asp-mvc, i have a partial view which contains this: 

<table id="grid">
</table>
<div id="pager1">
</div>

<script language="javascript" type="text/javascript">
$('#grid').jqGrid({
    url: '/Employee/JsonEmployee',
    datatype: 'json',
    mtype: 'GET',
    colNames: ['NUMBER', 'NAME', 'ROLE', 'OPERATIONS'],
    colModel: [
{ name: 'NUMBER', index: 'number', width: 200, sortable: false, align: 'center' },
{ name: 'NAME', index: 'name', width: 300, sortable: false, align: 'center' },
{ name: 'ROLE', index: 'role', width: 200, sortable: false, search: false, align: 'center' },
{ name: 'OPERATIONS', index: 'operation', width: 200, sortable: false, search: false, align: 'center'}],
    rowNum: 10,
    rowList: [10, 20, 30],
    pager: '#pager1',
    sortname: 'number',
    viewrecords: true,
    sortorder: "desc",
    height: "100%",
    caption: "EMPLOYEES"
});
jQuery("#grid").jqGrid('navGrid', '#pager1', { del: false, add: false, edit: false }, {}, {}, {}, { width: 600 });

</script>

it is working fine but then, i decided to remove the script at the bottom of my view and put it in a javascript(.js) file in the Scripts folder: Local.js

function () {
$('#grid').jqGrid({
    url: '/Employee/JsonEmployee',
    datatype: 'json',
    mtype: 'GET',
    colNames: ['NUMBER', 'NAME', 'ROLE', 'OPERATIONS'],
    colModel: [
{ name: 'NUMBER', index: 'number', width: 200, sortable: false, align: 'center' },
{ name: 'NAME', index: 'name', width: 300, sortable: false, align: 'center' },
{ name: 'ROLE', index: 'role', width: 200, sortable: false, search: false, align: 'center' },
{ name: 'OPERATIONS', index: 'operation', width: 200, sortable: false, search: false, align: 'center'}],
    rowNum: 10,
    rowList: [10, 20, 30],
    pager: '#pager1',
    sortname: 'number',
    viewrecords: true,
    sortorder: "desc",
    height: "100%",
    caption: "EMPLOYEES"
});
jQuery("#grid").jqGrid('navGrid', '#pager1', { del: false, add: false, edit: false }, {}, {}, {}, { width: 600 });

  };

i called the script file in my _Layout.cshtml:

 <head>
    <meta charset="utf-8" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
    <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/themes/base/css")" rel="stylesheet" type="text/css" />
    <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>

    <script src="@Url.Content("~/Scripts/i18n/grid.locale-en.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>
   <script src="@Url.Content("~/Scripts/Local.js")" type="text/javascript"></script>
    <meta name="viewport" content="width=device-width" />
</head>

when i run my web app, it’s not working good anymore… the jqGrid is not displayed anymore… where could be the problem?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your code in Local.js is never executed, you can call it when the dom is ready with $(document).ready()

    $(document).ready(function () {
    $('#grid').jqGrid({
        url: '/Employee/JsonEmployee',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['NUMBER', 'NAME', 'ROLE', 'OPERATIONS'],
        colModel: [
    { name: 'NUMBER', index: 'number', width: 200, sortable: false, align: 'center' },
    { name: 'NAME', index: 'name', width: 300, sortable: false, align: 'center' },
    { name: 'ROLE', index: 'role', width: 200, sortable: false, search: false, align: 'center' },
    { name: 'OPERATIONS', index: 'operation', width: 200, sortable: false, search: false, align: 'center'}],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#pager1',
        sortname: 'number',
        viewrecords: true,
        sortorder: "desc",
        height: "100%",
        caption: "EMPLOYEES"
    });
    jQuery("#grid").jqGrid('navGrid', '#pager1', { del: false, add: false, edit: false }, {}, {}, {}, { width: 600 });
});
    • 0