jQuery Grid Plugin - jqGrid

Hello from France,

I've set a grid with an extra button to hide/show the grid columns but
I can't figure out how to integrate that button inside navigation bar.
I searched the forum and the web and went through the documentation
but still couldn't make it work.

Regards,

Pierre

Here's my code with the external button :

jQuery(document).ready(function(){
  jQuery(”#list_contacts”).jqGrid({
    url:'affichage.php',
    editurl: 'edition.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['N°', 'Catégorie','Sous-catégorie associations','Commune','Raison sociale','Tél','Fax','Email','Site web','Adresse (rue)','Adresse (CP)','Adresse (commune)','Contact','Fonction','Tél. personnel','Tél. professionnel','Tél. portable','Fax','email','Adresse personnelle','Observations'],
    colModel :[
      {name:'id', index:'id', width:35, hidden:true},
      {name:'categorie', index:'categorie', width:80, align:'left', editable: true,edittype:"select",editoptions:{value:":;Associations:Associations;Bibliothèques:Bibliothèques;Elus:Elus;Enseignement:Enseignement;Institutions:Institutions;Prestataire:Prestataire"}},
      {name:'sous_categorie', index:'sous_categorie', width:120, align:'left', hidden:true, editrules: { edithidden: true, required: false}, editable: true,edittype:"select",editoptions:{value:":;Actions sociales et humanitaires:Actions sociales et humanitaires;Activités culturelles:Activités culturelles;Activités sportives:Activités sportives;Anciens combattants:Anciens combattants;Animations, fêtes:Animations, fêtes;Jeunesse:Jeunesse;Loisirs créatifs:Loisirs créatifs;Musique:Musique;Pêche, chasse:Pêche, chasse;Religion, culte:Religion, culte;Seniors:Seniors;Théâtre:Théâtre;Autres activités:Autres activités"}}, 
      {name:'commune', index:'commune', width:100, align:'left', editable: true, edittype:"select", editoptions:{value:":;Ayguemorte-les-Graves:Ayguemorte-les-Graves;Beautiran:Beautiran;Cabanac-et-Villagrains:Cabanac-et-Villagrains;Cadaujac:Cadaujac;Castres-Gironde:Castres-Gironde;Isle-Saint-Georges:Isle-Saint-Georges;La Brède:La Brède;Léognan:Léognan;Martillac:Martillac;Saint-Médard-d'Eyrans:Saint-Médard-d'Eyrans;Saint-Morillon:Saint-Morillon;Saint-Selve:Saint-Selve;Saucats:Saucats"}},
      {name:'raison_sociale', index:'raison_sociale', width:120, align:'left', editable:true,editoptions:{size:"75",maxlength:"255"}},
      {name:'tel', index:'tel', width:50, align:'left', hidden:false, editable:true,editoptions:{size:"14",maxlength:"14"}},
      {name:'fax', index:'fax', width:50, align:'left', hidden:true, editable:true, editrules: { edithidden: true, required: false},editoptions:{size:"14",maxlength:"14"}},
      {name:'email', index:'email', width:120, align:'left', hidden:true, editable:true, editrules: { edithidden: true, required: false},editoptions:{size:"75",maxlength:"255"}},
      {name:'site_web', index:'site_web', width:80, align:'left', hidden:true, editable:true, editrules: { edithidden: true, required: false},editoptions:{size:"75",maxlength:"255"}},
      {name:'adresse_rue', index:'adresse_rue', width:80, align:'left', hidden:true, editable:true, editrules: { edithidden: true, required: false},editoptions:{size:"75",maxlength:"255"}},
      {name:'adresse_CP', index:'adresse_CP', width:80, align:'left', hidden:true, editable:true, editrules: { edithidden: true, required: false},editoptions:{size:"5",maxlength:"5"}},
      {name:'adresse_commune', index:'adresse_commune', width:80, align:'left', hidden:true, editable:true, editrules: { edithidden: true, required: false},editoptions:{size:"40",maxlength:"255"}},
      {name:'contact', index:'contact', width:80, align:'left', editable:true, editrules: { edithidden: true, required: false},editoptions:{size:"40",maxlength:"255"}},
      {name:'contact_fonction', index:'contact_fonction', width:80, align:'left', editable:true, editrules: { edithidden: true, required: false},editoptions:{size:"40",maxlength:"255"}}, 
      {name:'contact_tel_personnel', index:'contact_tel_personnel', width:50, align:'left', hidden:false,editoptions:{size:"14",maxlength:"14"}},
      {name:'contact_tel_professionnel', index:'contact_tel_professionnel', width:50, align:'left', hidden:true, editable:true, editrules: { edithidden: true, required: false},editoptions:{size:"14",maxlength:"14"}},
      {name:'contact_tel_portable', index:'contact_tel_portable', width:50, align:'left', hidden:true, editable:true, editrules: { edithidden: true, required: false},editoptions:{size:"14",maxlength:"14"}},
      {name:'contact_fax', index:'contact_fax', width:80, align:'left', hidden:true, editable:true, editrules: { edithidden: true, required: false},editoptions:{size:"14",maxlength:"14"}},
      {name:'contact_email', index:'contact_email', width:80, align:'left', hidden:true, editable:true, editrules: { edithidden: true, required: false},editoptions:{size:"75",maxlength:"255"}},
      {name:'contact_adresse_personnelle', index:'contact_adresse_personnelle', width:80, align:'left', hidden:true, editable:true, editrules: { edithidden: true, required: false},editoptions:{size:"75",maxlength:"255"}},
      {name:'observations', index:'observations', width:150, sortable:false, hidden:true, editable: true, editrules: { edithidden: true, required: false},edittype:"textarea", editoptions:{rows:"4",cols:"71"}}
    ],
    pager: jQuery('#pager'),
    rowNum:25,
    rowlist:[25,50,100],
    sortname: 'id',
    sortorder: 'desc',
    viewrecords: true,
    imgpath: 'css/ui-lightness/images',   
    altRows: false,
    hidegrid: true,   
    height: 'auto',
    width: 1000,
    loadtext: 'Chargement…',
    caption: 'Ajout, mise à jour de contacts',
    multiselect: true,
    cellEdit: false,
    })
   
    jQuery(”#mybutton”).click(function() {
        jQuery(”#list_contacts”).setColumns({width:300});
        });

jQuery(”#list_contacts”).navGrid('#pagernav',
        {add: true, edit: true, del: true, search: true}, //options
        {height:600,width:610,reloadAfterSubmit:false,url:'edition.php'}, // edit options
        {height:600,width:610,reloadAfterSubmit:false,url:'edition.php'}, // add options
        {reloadAfterSubmit:false,url:'edition.php'}, // del options
        {width:600,sopt:['cn','bw','ew']} // search options
        );

});

<table id=”list_contacts”></table>
<div id=”pager”></div>
<button type=”button” class=”bouton” id=”mybutton”>Afficher/masquer les colonnes</button>