 <p>For others who are in the same requirement, you may consider my columnchooser implementation. My Dialog Form Declaration. (Dialog box which will be shown when columnchooser button is clicked.</p> All required fields will not be allowed to remove.</p> <p>Creating the ColumnChooser Button for my Grid.</p> <pre><code>jq("#grid").jqGrid('navButtonAdd','#pager',{ caption: "Columns", title: "Customize Columns", onClickButton : function (){ /*jq("#grid").jqGrid('columnChooser',{ height:columnChooserHt });*/ createDialogDiv(); jq( "#dialog-form" ).dialog('open'); } }); </code></pre> <p>Adding Save(OK) and Cancel Buttons to my Div.</p> <pre><code>jq(function(){ jq( "#dialog-form" ).dialog({ autoOpen: false, height: 300, width: 350, modal: true, buttons: { "OK": function() { changeColView(); jq( "#dialog-form" ).dialog('close'); }, Cancel: function() { jq( "#dialog-form" ).dialog('close'); } }, close: function() { } }); }); </code></pre> <p>Function which inserts the column names with the select boxes which needed to be displayed on the ColumnChooser Dialog Box.</p> <pre><code>function createDialogDiv(){ var colModelDiv = jq("#grid").jqGrid('getGridParam','colModel'); var colNamesDiv = jq("#grid").jqGrid('getGridParam','colNames'); //alert(JSON.stringify(colModelDiv)); //alert(JSON.stringify(colNameDiv)); var container = document.getElementById('dialog-form'); //alert(colNamesDiv.length); var chckBox=""; for(i=0;i&lt;colNamesDiv.length;i++){ if(colModelDiv[i].hidden &amp;&amp; colModelDiv[i].hidden == true ){ chckBox+="&lt;input type='checkbox' id='"+colNamesDiv[i]+"' name='"+colNamesDiv[i]+"' value='"+colModelDiv[i].name+"'&gt;"+colNamesDiv[i]+"&lt;/input&gt;&lt;br/&gt;"; }else{ if(colModelDiv[i].editrules &amp;&amp; colModelDiv[i].editrules.required){ chckBox+="&lt;input type='checkbox' id='"+colNamesDiv[i]+"' name='"+colNamesDiv[i]+"' value='"+colModelDiv[i].name+"' disabled&gt;"+colNamesDiv[i]+"&lt;/input&gt;&lt;br/&gt;"; } else chckBox+="&lt;input type='checkbox' id='"+colNamesDiv[i]+"' name='"+colNamesDiv[i]+"' value='"+colModelDiv[i].name+"' checked&gt;"+colNamesDiv[i]+"&lt;/input&gt;&lt;br/&gt;"; } } container.innerHTML=chckBox; } </code></pre> <p>Finally the actual method which changes the Columns chosen from Columnchooser.</p> <pre><code>function changeColView(){ var colModelDiv = jq("#grid").jqGrid('getGridParam','colModel'); var colNamesDiv = jq("#grid").jqGrid('getGridParam','colNames'); for(i=0;i&lt;colNamesDiv.length;i++){ var chckBox=document.getElementById(colNamesDiv[i]); if(chckBox &amp;&amp; chckBox.value &amp;&amp; (!(chckBox.checked || chckBox.disabled))){ jq("#grid").jqGrid('hideCol',chckBox.value); } if(chckBox &amp;&amp; chckBox.checked){ jq("#grid").jqGrid('showCol',chckBox.value); } } jq("#grid").trigger('reloadGrid'); } </code></pre> <p>Plz let me know your thoughts on this one.</p>