Datagrid DataGrid displays data in a grid layout. Responsive mode is provided to optimize the display for different screen sizes..

Datasource of Datagrid can either be a javascript array or a function to load data from a remote location. In eager mode, datasource is loaded only once and in lazy mode ,invoked everytime whenever the state changes like paging or sorting. To update the datasource use $('#example').puidatatable('option', 'datasource', newdatasource).

$('#grid').puidatagrid({
    datasource: [],
    content: function(data) {}
    ...
});
                                
<div id="grid"></div>
                                
Name Type Default Description
onLabel string yes Label for the on state.
offLabel string no Label for the pff state.
onIcon string null Icon for the on state.
offIcon string null Icon for the off state.
style string null Inline style of the element.
styleClass string null Style class of the element.

No events

No methods

$(function() {
    $('#localgrid').puidatagrid({
        paginator: {
            rows: 9
        },
        header: 'Local Javascript Array',
        datasource: [
            {'brand': 'Volkswagen', 'year': 2012, 'color': 'White', 'vin': 'dsad231ff'},
            {'brand': 'Audi', 'year': 2011, 'color': 'Black', 'vin': 'gwregre345'},
            {'brand': 'Renault', 'year': 2005, 'color': 'Gray', 'vin': 'h354htr'},
            {'brand': 'BMW', 'year': 2003, 'color': 'Blue', 'vin': 'j6w54qgh'},
            {'brand': 'Ford', 'year': 1995, 'color': 'White', 'vin': 'hrtwy34'},
            {'brand': 'Fiat', 'year': 2005, 'color': 'Black', 'vin': 'jejtyj'},
            {'brand': 'Honda', 'year': 2012, 'color': 'Yellow', 'vin': 'g43gr'},
            {'brand': 'Volvo', 'year': 2013, 'color': 'White', 'vin': 'greg34'},
            {'brand': 'Ford', 'year': 2000, 'color': 'Black', 'vin': 'h54hw5'},
            {'brand': 'BMW', 'year': 2013, 'color': 'Red', 'vin': '245t2s'},
            {'brand': 'Jaguar', 'year': 2011, 'color': 'Blue', 'vin': 'few234'},
            {'brand': 'Ford', 'year': 2010, 'color': 'White', 'vin': 'bfnt23'},
            {'brand': 'BMW', 'year': 2011, 'color': 'Green', 'vin': 'aad423'},
            {'brand': 'Mercedes', 'year': 2012, 'color': 'Black', 'vin': 'vx23f2'},
            {'brand': 'Fiat', 'year': 2014, 'color': 'Grey', 'vin': 'vxr23fd'},
            {'brand': 'Renault', 'year': 2015, 'color': 'Blue', 'vin': 'vxc23f'},
            {'brand': 'Volvo', 'year': 2015, 'color': 'Yellow', 'vin': 'vxcff4'},
            {'brand': 'Volvo', 'year': 2015, 'color': 'White', 'vin': 'ht3w1d'},
            {'brand': 'Renault', 'year': 2013, 'color': 'Black', 'vin': 'az12s2'},
            {'brand': 'Fiat', 'year': 2015, 'color': 'Green', 'vin': 'ds12d1'},
            {'brand': 'Volkswagen', 'year': 2001, 'color': 'Grey', 'vin': 'vsd3f2'},
            {'brand': 'Volvo', 'year': 2011, 'color': 'Blue', 'vin': 'dsy4g22'},
            {'brand': 'BMW', 'year': 1996, 'color': 'Black', 'vin': 'h3g254'},
            {'brand': 'Audi', 'year': 2005, 'color': 'Red', 'vin': 'g54gwg'},
            {'brand': 'Ford', 'year': 2011, 'color': 'Blue', 'vin': '14ffqf4'},
            {'brand': 'BMW', 'year': 2015, 'color': 'Black', 'vin': 'h465he6'},
            {'brand': 'Jaguar', 'year': 2010, 'color': 'White', 'vin': 'dsf4frt'},
            {'brand': 'Jaguar', 'year': 2009, 'color': 'Red', 'vin': 'g6hehr'},
        ],
        content: function(car) {
            return $('<div title="'+ car.vin + '"><img src="resources/demo/images/car/' + car.brand + 
                    '.gif" /><div class="car-detail">' + car.year + ' - ' + car.color  +'</div></div>').puipanel();
        }
    });

    $('#remotegrid').puidatagrid({
        header: 'Remote Restful Webservice',
        paginator: {
            rows: 9
        },
        datasource: function(callback) {
            $.ajax({
                type: "GET",
                url: 'rest/cars/list',
                dataType: "json",
                context: this,
                success: function(response) {
                    callback.call(this, response);
                }
            });
        },
        content: function(car) {
            return $('<div title="'+ car.vin + '"><img src="resources/demo/images/car/' + car.brand + 
                    '.gif" /><div class="car-detail">' + car.year + ' - ' + car.color  +'</div></div>').puipanel();
        }
    });

    $('#lazygrid').puidatagrid({
        header: 'Remote Restful Webservice - Lazy',
        lazy: true,
        paginator: {
            rows: 9,
            totalRecords: 200
        },
        datasource: function(callback, ui) {
            var uri = 'rest/cars/lazylist/' + ui.first + '/' + 9;

            $.ajax({
                type: "GET",
                url: uri,
                dataType: "json",
                context: this,
                success: function(response) {
                    callback.call(this, response);
                }
            });
        },
        content: function(car) {
            return $('<div title="'+ car.vin + '"><img src="resources/demo/images/car/' + car.brand + 
                    '.gif" /><div class="car-detail">' + car.year + ' - ' + car.color  +'</div></div>').puipanel();
        }
    });

});
                                
<div id="localgrid"></div>

<div id="remotegrid"></div>

<div id="lazygrid"></div>