Jqgrid in jquery ui tabs

Question

I have a custom button for my jqgrid that when pressed takes me to another view. But for some reason when i navigate between the tabs there is an extra added custom button every time a re-visit that tab. Is there a way to say only to add this button once?

This is the markup:

$('#tabs').tabs( {
    show: function (event, ui) {
        if(ui.index == 0) {
           Show some content on this tab.. Not important.
        }

        if(ui.index == 1) {
            $("#functionslist").jqGrid({
                datatype: 'json',
                url: '/Admin/GetFunctionsList',
                colNames: ['Namn'],
                colModel: [
                           { index: 'FunctionName', 
                             name: 'FunctionName', 
                             width: 100, 
                             sortable: false 
                           }
                          ],
                 rowNum: 20,
                 prmNames: { sort: 'SortColumn', order: 'SortOrder', page: 'Page', rows: 'Rows', search: null, nd: null },
                 hidegrid: false,
                 pager: '#functionspager',
                 autowidth: true,
                 shrinkToFit: true,
                 height: '100%',
                 caption: 'Functions',
                 viewrecords: true,
                 onSelectRow: function (id) {
                        window.location.href = '/Function/Edit/' + id;
                 }
             }).jqGrid('navGrid', '#functionspager', { edit: false, add: false, del: false, search: false, refresh: false })
             .navButtonAdd('#functionspager', {
                 caption: '',
                 title: 'Create new function',
                 buttonicon: 'ui-icon-plus',
                 onClickButton: function () {
                     window.location = '/Function/Add/';
                 }
             }); .... and so forth....

Everything runs fine and i have the behavior i desire but for some reason when i navigate between the two tabs more and more custom button are added. Any ideas why, have tried to resolve this but with no luck.

/Daniel

score 0 · Answer 1 · answered Jun 26 '11 at 16:23

Why not check to see if the button already exists before adding it?

 if ($('#functionspager :has(".ui-icon-plus")').length == 0) {
     $("#functionslist").jqGrid('navGrid', '#functionspager', { edit: false, add: false, del: false, search: false, refresh: false })
         .navButtonAdd('#functionspager', {
            ...
          });
 }

score 0 · Answer 2 · edited May 23 '17 at 12:04

The call $("#functionslist").jqGrid({/*parameters*/); convert the empty <table> to a grid having columns, capture, pager and so on. You should make the call once and not repeat it on every tab activation.

Exactly in the same way the methods navGrid and navButtonAdd should be called only once.

So you should decide what should be done if the user select the tab having jqGrid. You can for example call

$("#functionslist").trigger('reloadGrid', [{current:true}]);

(see here for details)

Jqgrid in jquery ui tabs

2 Answers2