Is there a way to show an attractive "empty state" message using Flexigrid?

StackOverflow https://stackoverflow.com/questions/19547599

  •  01-07-2022
  •  | 
  •  

Frage

As a designer, I am a big fan of the notion of a beautiful "empty-state" message when there is no data to dislplay, which encourages the user to take action. (In fact, there is a whole tumblr blog dedicated to this: http://emptystat.es/)

As a happy and devoted user of Flexigrid, I'd love to be able to substitute an empty-state message when the system I'm building doesn't have any search results to display in the grid (e.g. "You have no pending requests! Click New to start."). Ideally, such an empty-state message would be graphic and larger than an individual row and would replace the entire contents of the grid. Can anyone provide some advice on how I might go about replacing the content of the flexigrid with a graphic empty-state message when there are no rows returned?

Thanks!

War es hilfreich?

Lösung 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Flexigrid</title>
    <link rel="stylesheet" type="text/css" href="../css/flexigrid.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="../js/flexigrid.js"></script>
    </head>
    <body>
    <p>This is a sample implementation attached to a form, to add additional parameters.</p>

    <form id="sform">
        <p>
        The values you entered will be place in name column for demo's sake.<br />
        Value 1 : <input type="text" name="val1" value="" autocomplete="off" /><br />
         Value 2 : Is a hidden input with value 3<input type="hidden" name="val2" value="3" /><br />
         Value 3 : 
         <select name="val3">
            <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
              <option value="4">Four</option>
              <option value="5">Five</option>
         </select><br />
         Value 4 : <input type="checkbox" name="val4" id="val4" value="4" /><label for="val4">This will pass a value 4 if checked</label>
         </p>
         <p>
             <input type="submit" value="Submit" />
         </p>
    </form>
    <button onclick=hide()>HIDE</button>
    <button onclick=show()>SHOW</button>
    <table id="empty1" style="display:none">
    <tr><td><b>Please</b> <u>fill some</u> data</td></tr>
    </table>
    <table id="flex1" style="display:block">
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    </table>
    <script type="text/javascript">
    var old = undefined
    function hide() {
        if (old == undefined) {
            old = flex1.innerHTML
            flex1.innerHTML = empty1.innerHTML
        }
    }
    function show() {
        if (old != undefined) {
            flex1.innerHTML = old
            old = undefined
        }
    }
    $("#flex1").flexigrid({
        url: 'post2.php',
        dataType: 'json',
        colModel : [
            {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
            {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
            {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
            {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
            {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
            ],
        searchitems : [
            {display: 'ISO', name : 'iso'},
            {display: 'Name', name : 'name', isdefault: true}
            ],
        sortname: "iso",
        sortorder: "asc",
        usepager: true,
        title: 'Countries',
        useRp: true,
        rp: 15,
        showTableToggleBtn: true,
        width: 700,
        onSubmit: addFormData,
        height: 200
    });

    //This function adds paramaters to the post of flexigrid. You can add a verification as well by return to false if you don't want flexigrid to submit           
    function addFormData(){
        //passing a form object to serializeArray will get the valid data from all the objects, but, if the you pass a non-form object, you have to specify the input elements that the data will come from
        var dt = $('#sform').serializeArray();
        $("#flex1").flexOptions({params: dt});
        return true;
    }

    $('#sform').submit(function (){
        $('#flex1').flexOptions({newp: 1}).flexReload();
        return false;
    });
    </script>
    </body>
    </html>

Andere Tipps

I solved this using dojo, as we were already using this framework in our site. I'm sure there are similar solutions in different libraries. Essentially I created a new class which, after creating the flexigrid, notices if there is no data in the flexigrid and puts in a background-image to the table if one is specified:

dojo.provide("app.components.EmptyStateFlexigrid");
dojo.require("dijit._Widget");

// Provides a custom Flexigrid with an empty-state
dojo.declare("app.components.EmptyStateFlexigrid", [dijit._Widget], {
    emptyStateUrl: null,
    id: null,
    url: null,
    colModel: null,
    buttons: null,
    sortField: null,
    sortOrder: null,
    height: null,
    usePager: null,
    resizable: null,

    // Create the flexigrid object
    makeGrid: function() {
        var gridObj = $('#' + this.id + "_flexigrid");
        gridObj.flexigrid({
            url: this.url,
            dataType : 'json',
            colModel : this.colModel,
            buttons : this.buttons,
            sortname : this.sortField,
            sortorder : this.sortOrder,
            height: this.height,
            usepager : this.usePager,
            resizable: this.resizable,
            onSuccess: this.checkEmptyState,
            useRp : true,
            rpOptions: [2, 10, 15, 20, 30, 50],
            rp : 15,
            showTableToggleBtn : false
        });
    }
},

// EMPTY-STATE: make a nice graphic here if there is no data
// Note that "this" is a flexigrid object
checkEmptyState: function() {
    var self = dijit.byId(this.id);
    var gridObj = $('#' + this.id + "_flexigrid");
    if (gridObj[0].id === this.id + '_flexigrid') {
        var gridChildren = gridObj.children();
        if (gridChildren.length === 0) {
            var gblocks = $(".gBlock");
            for (var i = 0; i < gblocks.length; i++) {
                var styleObj = gblocks[i].style;
                // The only way I could find to identify "our" flexigrid (if there is
                // more than one on the page) is to test to see if the height is the
                // same as our height. Kind of a lousy hack, but the best I could figure
                // out. -pbanka
                if (styleObj.height == self.height + 'px') {
                    styleObj.backgroundSize = "450px";
                    styleObj.backgroundRepeat = "no-repeat";
                    styleObj.backgroundImage = "url('" + self.emptyStateUrl + "')";
                }
            }
        }
    }
},
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top