CODEWITHSUNDEEP
javascriptjquerypluginsjqgrid
Billyhole
Billyhole

Reputation: 1688

How can I hide the jqgrid completely when no data returned?

I'm having a heck of a time trying to only display my jqGrid when records are returned from my webservice. I don't want it to be collapsed to where you only see the caption bar either, but if that's the best I can do, I suppose that I could put a meaningful message into the caption. Still, I'd much rather just hide the grid and show a "No Records Found" message div block.

I also guess that if worst came to worst, I could do the solution on this question How to display information in jqGrid that there are not any data? (link included as alternate possible solution for others).

I've tried doing a .hide() inside of both the function used when loading the data from a function and the GRIDCOMPLETE event, and neither accomplished hiding the grid. I'm pretty new to JQuery, not to mention pretty new to using jqGrid.

$(document).ready(function() {
    $("#list").jqGrid({
        url: 'Service/JQGridTest.asmx/AssetSearchXml',
        datatype: 'xml',
        mtype: 'GET',
        colNames: ['Inv No', 'Date', 'Amount'],
        colModel: [
            { name: 'invid', index: 'invid', width: 55 },
            { name: 'invdate', index: 'invdate', width: 90 },
            { name: 'amount', index: 'amount', width: 80, align: 'right' }],
        pager: jQuery('#pager'),
        postData: { "testvar": "whatever" },
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: 'id',
        sortorder: "desc",
        viewrecords: true,
        imgpath: 'themes/sand/images',
        caption: 'My first grid',
        gridComplete: function() {
            var recs = $("#list").getGridParam("records");
            if (recs == 0) {
                $("#list").hide();
            }
            else {
                alert('records > 0');
            }
        }
    });

    ...

    <table id="list" class="scroll"></table> 
    <div id="pager" class="scroll" style="text-align:center;"></div>

And tried this too:

$(document).ready(function() {
    $("#list").jqGrid({
        datatype: function(postdata) {
            jQuery.ajax({
                url: 'Service/JQGridTest.asmx/AssetSearchXml',
                data: postdata,
                dataType: "xml",
                complete: function(xmldata, stat) {
                    if (stat == "success") {
                        var thegrid = $("#list")[0];
                        thegrid.addXmlData(xmldata.responseXML);
                        var recs = $("#list").getGridParam("records");

                        if (recs == 0) {
                            $("#list").hide();
                            alert('No rows - grid hidden');
                        }
                        else {
                            alert(recs);
                        }
                    }
                    else {
                        alert('FAIL');
                    }
                }
            });
        },
        mtype: 'GET',
        colNames: ['Inv No', 'Date', 'Amount'],
        colModel: [
            { name: 'invid', index: 'invid', width: 55 },
            { name: 'invdate', index: 'invdate', width: 90 },
            { name: 'amount', index: 'amount', width: 80, align: 'right' }],
        pager: jQuery('#pager'),
        postData: { "testvar": "whatever" },
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: 'id',
        sortorder: "desc",
        viewrecords: true,
        imgpath: 'themes/sand/images',
        caption: 'My first grid'
    });

    ...

    <table id="list" class="scroll"></table> 
    <div id="pager" class="scroll" style="text-align:center;"></div>

Thanks for any help you can provide.

Upvotes: 24

Views: 47871

Answers (11)

Sandeep Jain
Sandeep Jain

Reputation: 1261

Fixed the above issue .

Row has been created on jsgrid for row data..
<tr class="jsgrid-nodata-row"><td class="jsgrid-cell" colspan="16" style="width: 60.3958px;">Not found</td></tr>

When row data taking time to display by a API call , we are showing spinner on the grid, but user has been shown as no data found .. so which is not a best user experience . 

For solving this we can use hide and show the css element on modifying the CSS class

For Hiding : 
$('.jsgrid-nodata-row').hide();
$('.jsgrid-cell').hide();

For Showing : 
$('.jsgrid-nodata-row').show();
$('.jsgrid-cell').show();

Upvotes: 0

murtaza sanjeliwala
murtaza sanjeliwala

Reputation: 205

Just set opacity:0 for jqgrid element. it will work also.

Upvotes: 0

MS Wani
MS Wani

Reputation: 31

Try this (Keep JqGrid inside a div). Also create a label to display a meesage.
                        <label style="font-weight:bold;color:red;font-size:11px;" id="lblValMessage"></label>

  <div align="center" class='content' id="divForImageResult">
                                <div style="padding-left:50px;">
                                </div>
                                <table id="EmpTable"></table>
                                <div id="EmpPager">
                                </div>
                            </div>
And then write this after ajax call
   gridComplete: function () {
                                var recs = parseInt($("#EmpTable").getGridParam("records"), 10);
                                if (isNaN(recs) || recs == 0) {
                                    document.getElementById("lblValMessage").innerHTML = "No data found.";

                                    $("#divForImageResult").hide();

                                }
                                else {
                                    $('#divForImageResult').show();

                                }
                            }

                        });

Upvotes: 0

Robert Smith
Robert Smith

Reputation: 779

Folks, no need to create divs or use CSS. It is natively available using setGridState:

gridComplete: function ()
  {
    var recs = $('#myGrid').jqGrid('getGridParam', 'reccount');

    if (isNaN(recs) || recs == 0)
    {
      $("#myGrid").jqGrid('setGridState', 'hidden');
    }
    else
    {
      $("#myGrid").jqGrid('setGridState', 'visible');
    }
  }

Upvotes: 0

user7082304
user7082304

Reputation: 1

It is enough to not include the "caption" option in the definition of the grid. Tested with version 5.0.1

Upvotes: 0

Ankit Adlakha
Ankit Adlakha

Reputation: 1486

Suppose you have below tag in which you will be creating jqgrid:

<div id=jqgridcontent>
<table id="jqgridtab"></table>
</div>

Now in your js script in jqgrid code you can modify loadcomplete option as:

loadComplete: function () {

if(jQuery("#jqgridtab").getDataIDs().length==0){
            noDataError();
        }
    }

Defination of noDataError will as:

function noDataError(){
       document.getElementById("jqgridcontent").style.visibility="hidden";
       document.getElementById("jqgridcontent").style.display="none"; 
}

Upvotes: 0

Roman M
Roman M

Reputation: 77

Try using this method to hide jqGrid:

$("#someGridTableName").jqGrid("GridUnload");

Be sure to include:
jquery.jqGrid-x.x.x/src/grid.custom.js file.

See this post that talks more about the above method. Or jqGrid wiki where it talks about this method in the Add on Grid Methods section.

Another point to consider:
Avoid using wrapper (see post) <div> tags on jqGrid to hide it because it's overflow: auto; attribute will not work if you try to make grid columns manually wider and exceed wrapper div's width.
Another words, jqGrid is already equipped with logic to create horizontal scrollbar without help of external divs.

Note: Tested on IE8 & 9

Upvotes: 1

seth
seth

Reputation: 37277

jqGrid wraps your table with it's special sauce and divs so you should be able to do what you want by wrapping that table with your own div that you can hide:

 <div id="gridWrapper">
    <table id="list" class="scroll"></table> 
 </div>

Then in your gridComplete:

   gridComplete: function() {
        var recs = parseInt($("#list").getGridParam("records"),10);
        if (isNaN(recs) || recs == 0) {
            $("#gridWrapper").hide();
        }
        else {
            $('#gridWrapper').show();
            alert('records > 0');
        }
    }

Hope this helps.

Upvotes: 36

Trilok Giri
Trilok Giri

Reputation: 11

<!-- table for Pagination START -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <div id="pager" class="scroll" style="text-align: right;" />
        </td>
    </tr>
</table> 
<!-- table for Pagination END -->
<table id="tblCompany" class="scroll" width="100%" cellpadding="0" cellspacing="0">
</table>
<div id="NoRecord" class="NoRecord">
    <%: CommonText.NoRecords %>
</div>

JqGrid No Records Check

gridComplete: function () {
    var recs = $("#").getGridParam("records");
    if (recs == 0 || recs == null) {
        $(tableContacts).setGridHeight(100);
        $("#NoRecordContact").show();
    }
}

Upvotes: 1

woodchucky
woodchucky

Reputation: 211

just a little twist on seth's solution:

  1. you can use in place of var recs = $('#list').jqGrid('getGridParam','records');

    var recs = $('#list').jqGrid('getGridParam','reccount');

    jqGrid grid option 'records' default value = 'None'

    jqGrid grid option 'reccount' defaults to 0 and will always return a number even when there are no records (returns 0)

    see wiki:options @ jqGrid Wiki

  2. If you don't want to use a wrapping div you can hide the whole jqGrid using $('.ui-jqgrid').hide() or $('.ui-jqgrid').show().

    The ui-jqgrid class is only used for the jqGrid parent.

Upvotes: 6

Max
Max

Reputation: 51

I'm finding that this:

parseInt($("#grid").getGridParam("records"),10);

is returning a "NaN." The "records" property is set to null if there are no records in the grid. So you can't cast it to a number and check to see if it equals zero.

Upvotes: 5

Related Questions