0

I need to show an empty grid with no pagination and display a message "You have no records found" if empty results in jqGrid.i'm pretty new to this jqgrid.

Gnanendra
  • 11
  • 1
  • 6

2 Answers2

0

I have added the code as below. Please Find the Oleg Demo1, Demo2

$(function () {
            var $grid = $("#oversight-sample"),
                //mydata = [{actions: "a", url: "http://stackoverflow.com/q/24609566/315935", created: "7/7/2014"}];
                mydata = [];
                emptyMsgDiv = $("<div><span style='color:red;font-size:24px'>You have no records found</span></div>");

            $grid.jqGrid({
                //autowidth: true,
                caption: "Evaluated URLs",
                colNames: ["Actions", "URL", "Fetch Date"],
                colModel: [
                    { name: "actions", align: "center", title: false, width: 60, resizable: false, sortable: false },
                    { name: "url", width: 400 },
                    { name: "created", align: "center", width: 125, sorttype: "date" }
                ],
                data: mydata,
                datatype: "local",
                emptyrecords: "0 records found",
                localReader: {
                    page: function (obj) {
                        return (obj.page === 0 || obj.page === undefined) ? "0" : obj.page;
                    }
                },
                loadComplete: function () {
                    var ts = this;
                    if (ts.p.reccount === 0) {
                        $(this).hide();
                        emptyMsgDiv.show();
                    } else {
                        $(this).show();
                        emptyMsgDiv.hide();
                    }
                },
                height: "auto",
                sortname: "created",
                toppager: true,
                pager: "#url-pager",
                viewrecords: true
            });
            // place div with empty message insde of bdiv
            emptyMsgDiv.insertAfter($grid.parent());
        });



<table id="oversight-sample"><tbody><tr><td></td></tr></tbody></table>
    <div id="url-pager"></div>
Krishnakumar Subbaiyan
  • 751
  • 1
  • 10
  • 32
  • I tried this code pagination is working fine, empty messsage is not showing. – Gnanendra Apr 17 '15 at 13:16
  • 2
    @Gnanendra: you need to set the 'emptyrecords' property. emptyrecords: 'No records found'. See the code and fiddler I have provided above. – Vim Apr 17 '15 at 17:18
  • @Vim : I got it,missed that empty records property .after adding that property its working fine.Thanks for your help. – Gnanendra Apr 18 '15 at 09:47
0

Here is the link to fiddler with the 'No records found' message. I hope it will give you an idea on how to create a basic jqgrid and what library references are required. https://jsfiddle.net/99x50s2s/2/

<table id="sg1"></table>
<div id="psg1"></div>

jQuery("#sg1").jqGrid({
    datatype: "local",
    gridview: true,
    loadonce: true,
    shrinkToFit: false,
    autoencode: true,
    height: 'auto',
    viewrecords: true,
    sortorder: "desc",
    scrollrows: true,
    loadui: 'disable',
    emptyrecords: 'No records found',
    pager: '#psg1',  
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:60, sorttype:"int"},
        {name:'invdate',index:'invdate', width:90, sorttype:"date"},
        {name:'name',index:'name', width:80},
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
        {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},     
        {name:'total',index:'total', width:80,align:"right",sorttype:"float"},      
        {name:'note',index:'note', width:150, sortable:false}       
    ],
    caption: "Test Grid"
});

var mydata = [];//pass empty data

for(var i=0;i<=mydata.length;i++)
    jQuery("#sg1").jqGrid('addRowData',i+1,mydata[i]);
Vim
  • 559
  • 5
  • 16