MVC jquery grid is not working

I was trying to use a plug in for jquery grid (gijgo.com) in my mvc application. I have carefully completed all the steps mentioned on c-sharpcorner and/or codeproject but when I run the application, I got javascript runtime error:

Unhandled exception at line 40, column 9 in http://localhost:36552/Default1/Index

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

Here is my view

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/grid-0.5.2.min.js"></script>

<script type="text/javascript">
    var jqgrid;
    $(document).ready(function () {
        var jqgrid = $("#grid1").grid({
            dataKey: "ID",
            uiLibrary: "bootstrap",
            columns: [
                { field: "ID", width: 50, sortable: true },
                { field: "Name", sortable: true },
                { field: "PlaceOfBirth", title: "Place Of Birth", sortable: true },
                { field: "DateOfBirth", title: "Date Of Birth", sortable: true }
            ],
            pager: { enable: true, limit: 5, sizes: [2, 5, 10, 20] }
        });


    });
</script>
<table id="grid1"></table>

when I click on the ".grid" and press F12, it goes to the corresponding function in grid.0.5.2.js.

Has anybody found a solution for this problem?

Try with the Url.Content method in order to be sure that the path is build correctly. Example:

<script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/grid-0.5.2.min.js")" type="text/javascript"></script>