JQGrid filterToolbar row hidden when grid loads

Question

Found the documentation here

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:toolbar_searching

I want JQgrid filterToolbar blank top row in the grid hidden till the user use Toggle button to show. How do I do that?

myGrid.jqGrid('navGrid', '#pager', { add: false, edit: false, del: false },{}, {}, {}, { multipleSearch: true, overlay: false });
    myGrid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: 'cn' });
    myGrid.jqGrid('navButtonAdd', '#pager',{ caption: "Filter", title: "Toggle Searching Toolbar",buttonicon: 'ui-icon-pin-s',onClickButton: function () { myGrid[0].toggleToolbar(); }});

Answer 1

This can also be achieved through below code snippet.

jQuery("ui-search-toolbar").hide();

Answer 2

It seems to me that you need just add one more line at the end of your code:

myGrid[0].toggleToolbar();

See the demo.