jQuery Grid Plugin - jqGrid

Hello,

I have issue on GridUnload function.

Here's the scenario. 

On the UI i have the following:

- Search InputBox 

- Search Button

- JQGrid

- Add new record  button

Upon load of the page. When I input a value on the inputbox then hit search button, it calls the below function (initGrids(material)).

The page was able to display successfully the grid with the corresponding records.

And also able to add new row when i click on the Add new record button with an ID "addRow".

When i try to input different value in the inputbox then hit search. the Grid successfully refresh and display the different records.

But the problem is when try to click on the new record button is shows an error exception which the

Uncaught TypeError: Property 'formatter' of object #<HTMLTableElement> is not a function

(anonymous function)jquery.jqGrid.src.js:3211

 st.extend.eachjquery-1.9.0.min.js:1

st.fn.st.eachjquery-1.9.0.min.js:1

$.jgrid.extend.addRowDatajquery.jqGrid.src.js:3162

$.fn.jqGridjquery.jqGrid.src.js:747

(anonymous function)ibr.js:859

st.event.dispatchjquery-1.9.0.min.js:2

y.handle

My assumption is the error cause by GridUnload function. Dut that when i'm using the refresh or "reloadgrid" function it works fine and able to add new record.

Any Idea on the error and i can resolve it?

function initGrids(material) {

$("#grid1").GridUnload();

JQuery("#grid1").jqGrid({

url:'getJqGridPage.json',

postData:{material:material, grid:'grid1'},

datatype: "json",

colNames:['','column1', 'column2', 'column3', 'column4', 'column5'],

colModel:[{name: 'mGear', index: 'mGear', formatter: imageFormat},

{name: 'column1', index: 'column1'},

{name: 'column2', index: 'column2', editable: true, edittype:'text'},

{name: 'column3', index: 'column3'},

{name: 'column4', index: 'column4'},

{name: 'column5', index: 'column5', editable: true, edittype:'text'}],

mtype: 'GET',

jsonReader : {

root: "rows",

page: "page",

total: "total",

records: "records",

repeatitems: false,

reload: true,

cell: "cell",

id: "id"

},

sortname: 'id',

pager: '#grid1pager',

multiselect: false,

sortorder: 'desc',

viewrecords: true,

caption: 'Sample Grid',

loadComplete: function(){

$('#addRow').click( function(){

var newRowData = {column1:"1", column2:"", column3:"", column4:"", column5:""},

      newRowId = $.jgrid.randId(),

      myGrid = $(this);

myGrid.jqGrid('addRowData', newRowId, newRowData);

myGrid.jqGrid('setSelection', newRowId);  // select new row

myGrid.jqGrid('editRow', newRowId, true); // editing the row

  }

  }

  });

}

I really appreciate your help.

Thanks and Regards,

Mars1112