title: Jqgrid not rendering and on Debugging it shows Undefined is not a function error
body: <p>I am trying to add a JQgrid in my project, When i am trying to do a demo with the simple HTML page it shows the grid but when i added the same code to MVC application in a partial view the grid is not rendered. when i was debugging it shows the jqGrid() as undefined. 
  Here is my Code ...</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
  
     &lt;link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/redmond/jquery-ui.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css" /&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"&gt;&lt;/script&gt;
           &lt;script type="text/javascript"&gt;
               $.jgrid.no_legacy_api = true;
               $.jgrid.useJSON = true;
      &lt;/script&gt;
      &lt;script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript"&gt;
              $(document).ready(function () {
                  $("#reportList").jqGrid(
      {
          url: '',
          datatype: "json",
          mtype: 'GET',
          colNames: ['Id', 'First Name', 'Last Name', 'Last 4 SSN', 'Department', 'Age', 'Salary', "Address", 'Marital Status'],
          colModel: [
          { name: 'EmloyeeId', index: 'EmloyeeId', width: 20, stype: 'text' },
          { name: 'FName', index: 'FName', width: 150 },
          { name: 'LName', index: 'LName', width: 150 }, { name: 'SSN4', index: 'SSN4', width: 100 },
          { name: 'Department', index: 'Department', width: 80, align: "right" },
          { name: 'Age', index: 'Age', width: 80, align: "right" },
          { name: 'Salary', index: 'Salary', width: 80, align: "right" },
          { name: 'Address', index: 'Address', width: 150, sortable: false },
          { name: 'MaritalStatus', index: 'MaritalStatus', width: 100, sortable: false }], rowNum: 10,
          sortname: 'EmloyeeId',
          viewrecords: true,
          sortorder: "desc",
          caption: "List Employee Details",
          scrollOffset: 0
      });
              });
              //jQuery("#reportList").jqGrid({
              //    dattatype: "json",
              //    colNames: ["Name", "Public", "DataMart", "Category", "Created By", "Created Time", "Status", "Default Format"],
              //    colModel: [
              //        { name: "ReportName", index: "ReportName", width: 50 },
              //        { name: "Public", index: "Public", width: 20 },
              //        { name: "Datamart", index: "Datamart", width: 50 },
              //        { name: "Category", index: "Category", width: 50 },
              //        { name: "CreatedBy", index: "CraetedBy", width: 50 },
              //        { name: "CreatedTime", index: "CreatedTime", width: 50 },
              //        { name: "Status", index: "status", width: 50 },
              //        { name :"DefaultFormat",index:"DefaultFormat",width:50}
              //    ],
              //    rowNum: 10,
              //    rowList: [10, 20, 30],
              //    multiSelect: true,
              //    recordPos: "left",
              //    sortName: "ReportName",
              //    viewRecords: true,
              //    caption: "Report List",
              //    pager:"#reportListPager"
              //});
              //$("#reportList").jqGrid("navGrid", "#reportListPager", { add: false, del: false, edit: false, position: 'right' });
          &lt;/script&gt;
          &lt;style type="text/css"&gt;
              .header{ height: 3em; width:inherit; }
              .profileinfo{ font-size: 20px;
  font-family: 'Segoe UI';
  font-weight: 600;
  float:left;
  vertical-align: -webkit-baseline-middle;
  margin: .5em;
  }
              .navbutton{  
  height: 3em;
  width: 6em;
  margin-top: .5em;
  margin-right: 1em; 
  float:right;
              }
  
              .ReportgridPanel
              {
                   border: 1px solid #aaaaaa;
                   height: 26em;
              }
              .searchButton{width: 100px; height: 30px; border-radius: 8px; float: right; margin-right: 70px; cursor:pointer; font-size:15px; font-family:'Segoe UI'; font-weight:500;}
  
              .searchcontrol
              {width: 23em;
  margin-top: 1em;
  float: right;
  margin-right: 1em;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="ManinContent" style="border: 1px solid #aaaaaa;"&gt;
              &lt;div id="Header" class="header"&gt;
                  &lt;label id="lb_ProfileInfo" class="profileinfo"&gt; Welcome Admin...&lt;/label&gt;
                  &lt;div class="navbutton"&gt;
                      &lt;span&gt;
                          &lt;img src="~/Content/images/Datasource.png" title="Data Source" /&gt;
                      &lt;/span&gt;
                      &lt;span&gt;
                         &lt;img src="~/Content/images/list.png" title="Report Category" /&gt;
                      &lt;/span&gt;
                      &lt;span&gt;
                          &lt;img src="~/Content/images/security.png" title="Security" /&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="gridPanel" class="ReportgridPanel"&gt;
                  &lt;div style="width:inherit;"&gt;
                  &lt;div class="searchcontrol"&gt;
                      &lt;input type="text" title="search"  /&gt;
                      &lt;button title="Search" class="searchButton"&gt;Search&lt;/button&gt;
                  &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;table id="reportList"&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>