jQuery Grid Plugin - jqGrid

<button id="createGridBtn">Create grid</button>
<div id="grids">
</div>

var createGrid = function () {

          $grid = jQuery('<table id="grid"></table>');
          $grid.appendTo(jQuery('#grids'));

          $grid.jqGrid({
              data: [],
              datatype: 'local',
              width: 700,
              height: 'auto',
              colNames: [
                  'Id',
                  'Type',
                  'Description',
                  'Notes',
                  'Main'
              ],
              colModel: [
                  {
                      name: 'contactDataId',
                      index: 'contactDataId',
                      width: 0,
                      sorttype: "int",
                      hidden: true
                  },
                  {
                      name: 'typeName',
                      index: 'typeName',
                      width: 4
                  },
                  {
                      name: 'description',
                      index: 'description',
                      width: 5
                  },
                  {
                      name: 'notes',
                      index: 'notes',
                      width: 2
                  },
                  {
                      name: 'isMain',
                      index: 'isMain',
                      width: 2,
                      align: "center"
                  }
              ],
              multiselect: true,
              caption: 'Contact data'
          });

      };

      var _destroyAndCreateGridHandler = function (event) {
          jQuery('#grid').jqGrid('GridDestroy');
          createGrid();
      };

      $(document).ready(function() {

          createGrid();
          jQuery('#createGridBtn').on('click', _destroyAndCreateGridHandler);

      });