is not a function javascript jquery code example

Example: Uncaught TypeError: jQuery(...).jqGrid is not a function

<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />

<script type="text/javascript">


    $(document).ready(function myfunction() {
       jQuery('#list').jqGrid({
           caption: "Employee Details",
           url: '@Url.Action("GetEmployee")',
           datatype: "json",
           contentType: "application/json; charset-utf-8",
           mtype: 'GET',
           colNames: ['Id' , 'First Name', 'Last Name', 'Email Id'],
           colModel: [
                 { name: 'Id', index: 'Id', width: 150 },
                 { name: 'First Name', index: 'FirstName', width: 150 },
                 { name: 'Last Name', index: 'LastName', width: 150 },
                 { name: 'Email', index: 'EmailId', width: 150 }
           ],
           rowNum: 10,
           loadonce: true

       });

       jQuery("#list").jqGrid('navGrid', '#pager', { edit: true, add: true, del: true });
   });
</script>