Search code examples
jqueryjquery-uijqgrid

jqgrid guriddo - Cannot read property 'styleUI' of undefined

I set styleUI to default jQueryUI. Everything works fine without actions in navigator. When I try:

$('#grid').navGrid(
      '#pager',
      { edit: true} ,
      {
         editCaption: "The Edit Dialog",
         errorTextFormat: function (data) {
            return 'Error: ' + data.responseText
         }
      }
   );

Javascript crashes with error :

Cannot read property 'styleUI' of undefined.

How can I solve this problem?

I have the newest version and include ui.jqgrid.css and jquery.jqGrid.js. I'm doing something wrong but I don't know what

UPDATE

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" media="screen" href="path_to_ui_css_file/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="base.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="path_to_ui_css_file/ui.jqgrid.css" />
</head>
    <body>
        <div class="wrapper">

           <button id="export">EXPORT</button> 
           <table id="grid"></table>
           <div id="pager"></div>
        <div> 

    <script src="jquery.js" type="text/javascript">
    <script src="jquery-ui.js" type="text/javascript">
    <script src="path_to_js_files/grid.locale-en.js" type="text/javascript"></script>
    <script src="path_to_js_files/jquery.jqGrid.js" type="text/javascript"></script>

     <script type="text/javascript">

           $(function() {
              $( document ).ready(function() {

                 $options = [       //OPTIONS WITHOUT COLMODEL
                                 'mtype' => 'GET',
                                 'url' => '...'
                                 'datatype' => 'json',
                                 'height'=> null,
                                 'width'=> null,
                                 'shrinkToFit' => false,
                                 'gridview'=> true,
                                 'sortable' => true,
                                 'autoencode' => true,
                                 'rowNum'=> -1,
                                 'pager' => '#pager',
                                 'viewrecords' => true,
                                 'rowList' => [10, 50, 100, -1],
                     ];
                 $('#grid').jqGrid(options); 

                 $("#button").on("click", function(){

                    $('#grid').jqGrid('exportToCsv'); //WORK CORRECT
                 });

                 $('#grid').navGrid(   //DOESNT WORK
                   '#pager',
                   { edit: true} ,
                   {
                       editCaption: "The Edit Dialog",
                       errorTextFormat: function (data) {
                           return 'Error: ' + data.responseText
                   }
                 }
               );
              });
           });
        </script>
</body>
</html>

Im trying @license Guriddo jqGrid JS - v5.2.1 - 2017-05-01

Jquery is older jQuery v1.8.2

Solution

  • I found solution and it was my mistake. I called navGrid before initialize jqgrid in element. I simple swaped code from beforeInit function to afterInit and everything works fine.