CODEWITHSUNDEEP
jqgridasp.net-mvc-4
user1933611
user1933611

Reputation: 23

Unable to get jquery.jqgrid 4.4.1 working in ASP.NET MVC

I have been struggling to get jquery.jqgrid 4.4.1 working in my ASP.NET MVC 4 solution. I used NuGet to get jquery.jqgrid 4.4.1 installed into my project. I am attempting to insert a very simple grid into my page, just to make sure that my includes are all setup correctly. Here is what I have in my View file.

@{
ViewBag.Title = "Index";
}
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />

                <script src="~/Scripts/jquery-1.7.2.min.js"></script>
    <script src="~/Scripts/i18n/grid.locale-en.js"></script>
    <script src="~/Scripts/jquery.jqGrid.min.js"></script>


<h2>Index</h2>
<script type="text/javascript">
    $(document).ready(function() {
    $("#myGrid").jqGrid({
        url:'@Url.Action("GetJqGridData")',
        datatype:'json',
        myType:'GET',
        colNames:['Id', 'Name'],
        colModel:[
        { name: 'Id', index: 'Id'},
        { name: 'Name', index: 'Name'}
        ],
        jsonReader: {
            root: 'Data',
        id: 'id',
        repeatitems: false
        },
        pager: $('#myPager'),
        rowNum:5,
        rowList: [2, 5, 10],
        width:600,
        viewrecords:true,
        caption: 'Jqgrid MVC Tutorial'
    });
});
</script>

    <table id="myGrid"></table>
    <div id="myPager"></div>

Here is the Javascript error that I am receiving when running the solution.

Unhandled exception at line 54, column 5 in site/Grid

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'jqGrid'

The View never even gets to the point of calling the controller for the data.

Any help would be greatly appreciated.

Updated Here is the HTML that is sent to the browser for additional detail. Index - My ASP.NET MVC Application 

        <script src="/Scripts/modernizr-2.5.3.js"></script>

    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title"><a href="/">your logo here</a></p>
                </div>
                <div class="float-right">
                    <section id="login">
                            <ul>
        <li><a href="/Account/Register" id="registerLink">Register</a></li>
        <li><a href="/Account/Login" id="loginLink">Log in</a></li>
    </ul>

                    </section>
                    <nav>
                        <ul id="menu">
                            <li><a href="/">Home</a></li>
                            <li><a href="/Home/About">About</a></li>
                            <li><a href="/Grid">Grid Test</a></li>
                            <li><a href="/Home/Contact">Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">

            <section class="content-wrapper main-content clear-fix">

<link href="/Content/Site.css" rel="stylesheet" />
<link href="/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />

<script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>


<h2>Index</h2>
<script type="text/javascript">
$(document).ready(function() {
    $("#myGrid").jqGrid({
        url:'/Grid/GetJqGridData',
        datatype:'json',
        myType:'GET',
        colNames:['Id', 'Name'],
        colModel:[
        { name: 'Id', index: 'Id'},
        { name: 'Name', index: 'Name'}
        ],
        jsonReader: {
        root: 'Data',
        id: 'id',
        repeatitems: false
        },
        pager: $('#myPager'),
        rowNum:5,
        rowList: [2, 5, 10],
        width:600,
        viewrecords:true,
        caption: 'Jqgrid MVC Tutorial'
    });
});
</script>

<table id="myGrid"></table>
<div id="myPager"></div>
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; 2012 - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>

        <script src="/Scripts/jquery-1.7.2.js"></script>


    </body>
</html>

Upvotes: 2

Views: 3772

Answers (1)

Chad Ferguson
Chad Ferguson

Reputation: 3091

I fired up a new project and installed the grid via the nuGet package and it looks to me is that you are causing a conflict with the default resource bundler that is setup with MVC4 projects by default now. You will either need to remove the following line from the Views/Shared/_Layout file:

@Scripts.Render("~/bundles/jquery")

Which will remove the bundled scripts.

Or add your jqGrid script references to the bundle config in the App_Start folder, and then remove the script tags from your view.

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                            "~/Scripts/jquery-{version}.js",
                            "~/Scripts/i18n/grid.locale-en.js",
                            "~/Scripts/jquery.jqGrid.min.js"));

<!----Remove These From your view-------!>
<script src="~/Scripts/jquery-1.7.2.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>

Upvotes: 3

Related Questions