How to hide and show custom buttons in jqGrid by using "reccount"

Question

I'm trying to implement a custom button on a jqGrid with hide and show functionalities. I basically want to show the button if the grid is empty otherwise show.

I have implemented it with the "reccount" method from jqGrid to test if the grid is empty. However i'm not sure if i'm doing it right.

to the end of the code is where i declared the reccount. see "var count".

Thanks in advance.

$("#sessioninfoGrid"+row_id).jqGrid({
    url:'/starburst/sessioninfoes/jsonlistbylectureoutline/'+row_id,
    datatype: "json",
    colNames: ['Session No.','Date','Start Time','End Time','Duration/Hours','Session Type','Topic','Room'],
    colModel: [
        {name:'sessionNumber',index:'SessionNumber', width:40, formoptions:{elmprefix:'(*) '}, editrules:{required:true}, editable:true, edittype: 'text'},
        {name:'sessionDate',index:'sessionDate', width:100, formoptions:{elmprefix:'(*) '}, editrules:{required:true}, editable:true, edittype: 'text',               
            editoptions: {
                dataInit: function(element) {
                    $(element).datepicker({dateFormat: 'DD, MM dd, yy'})
                }
            } 
        },
        {name:'starttime',index:'starttime', width:50, formoptions:{elmprefix:'(*) '}, editrules:{required:true}, editable:true, edittype: 'text'

        },
        {name:'endtime',index:'endtime', width:50, formoptions:{elmprefix:'(*) '}, editrules:{required:true}, editable:true, edittype: 'text'

        },
        {name:'durationPerSession',index:'durationPerSession', width:50, formoptions:{elmprefix:'(*) '}, editrules:{required:true}, editable:true, edittype: 'text'
        },
        {name:'sessionType',index:'sessionType', width:50, formoptions:{elmprefix:'(*) '}, editable:true, editrules:{required:true}, edittype: 'select',
            editoptions:{value:{}}
        },
        {name:'topic',index:'topic', width:200, formoptions:{elmprefix:'(*) '}, editable:true, editrules:{required:true}, edittype: 'text',
            editoptions: {
                dataInit: function(element) {
                    $(element).width(300)
                }
            }
        },
        {name:'room',index:'room', width:35}
    ],
    rowNum:10,
    autowidth: true,
    pager: sessioninfoPager_id,
    sortname: 'id', 
    viewrecords: true, 
    sortorder: "desc",
    editurl: '<c:url value="/sessioninfoes/update"/>',
    caption:"Session Info",
    emptyrecords: "Empty Records"                           

});
$("#sessioninfoGrid"+row_id).jqGrid('navGrid',"#"+sessioninfoPager_id,{edit:false,add:false,del:false,search:true},{ },{ },{ },
{ 
    sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
    closeOnEscape: true, 
    multipleSearch: true, 
    closeAfterSearch: true 
}
);
$("#sessioninfoGrid"+row_id).navButtonAdd("#"+sessioninfoPager_id,
{   
    caption:"Add", 
    buttonicon:"ui-icon-plus", 
    onClickButton: addSessionInfoRow,
    position: "last", 
    title:"Add New Session Info", 
    cursor: "pointer"
} 
); 

$("#sessioninfoGrid"+row_id).navButtonAdd("#"+sessioninfoPager_id,
{   
    caption:"Edit", 
    buttonicon:"ui-icon-pencil", 
    onClickButton: editSessionInfoRow,
    position: "last", 
    title:"Edit Session Info", 
    cursor: "pointer"
} 
);

var count= $("#sessioninfoGrid"+row_id).jqGrid('getGridParam','reccount');
if (count == 0){
    $("#sessioninfoGrid"+row_id).navButtonAdd("#"+sessioninfoPager_id,
        {   
            caption:"Load Sessions",
            buttonicon:"ui-icon-plusthick", 
            onClickButton: function(){                                   
                $.post('<c:url value="/sessioninfoes/autocreate/"/>'+row_id,function(data){
                    $("#sessioninfoGrid"+row_id).trigger("reloadGrid");
                });                                  
            },
            position: "last", 
            title:"Load Session Infos", 
            cursor: "pointer"
        } 
    );
}

Progesterone

Answer 1

The problem with your code is that the grid is loaded asynchronously, which means your call to reccount can happen before the grid is populated, so it returns 0 even though the grid is filled with data a moment later.

One solution is to dynamically hide your button based on whether any data was populated by a server request. For example:

$("#sessioninfoGrid"+row_id).jqGrid({
    ...
    loadComplete: function() {
      var count = jQuery("#sessioninfoGrid"+row_id)
                      .jqGrid('getGridParam','reccount');
      if (count === 0){
          jQuery('button[title="Load Session Infos"]').hide();
      } else {
          jQuery('button[title="Load Session Infos"]').show();
      }
    },
    ...

Parsimonious

No problem, glad it helped you out. Feel free to update the answer if there's anything wrong with my code... – Parsimonious