Using Evolugrid with the Javascript standalone library

In this tutorial, we will see how to use Evolugrid in Javascript only (using the evolugrid.js file).

Let's get started with a very simple use case:

HTML Part

<div id="#list"></div>

Javascript part

$(document).ready(function() {
    $("#list").evolugrid({
        url: "/mypath/search",
        limit  : 50
    });
});

As you can see, the model is not passed as an option to the evolugrid plugin. This is because we will pass with the data returned by /mypath/search.

Data returned by the Ajax call (/mypath/search)

The Ajax call will be performed on your server. Evolugrid will add automatically those GET parameters:

• limit: The maximum number of rows that should be returned
• offset: The place in the dataset where we should start
• output: This is either "json", or "csv" (in case the user requested an Excel/CSV export)
• sort_key: The key to sort upon (if a sort has been requested on a column)
• sort_order: The sort order (if a sort has been requested on a column). Can be "ASC" or "DESC"

Note: evolugrid can add additional parameters (see search filters for more information)

{
    'descriptor': {
        'columns': [
            {
                'title': 'Label',
                'display': 'label',
                'sortable': true,
                'escapeHTML': false,
                'cssClass': null
            },
            {
                'title': 'Creation date',
                'display': 'creation_date'
            }
        ]
    },
    'data': [
        {
            'id': 12,
            'label': 'row one',
            'creation_date': '12/12/2012'
        },
        {
            'id': 15,
            'label': 'row two',
            'creation_date': '02/10/2014'
        },
        ...
    ],
    'count': 142
}

As you can notice, the data is passed as a JSON string. It is split in 3 sections:

• descriptor: the descriptor contains additional configuration data for the grid. Almost any parameter that can be passed as an option to the evolugrid plugin can also be passed/overwritten in the Ajax call (hence the name "evolugrid")
• data: this is the actual data that will be displayed in the grid (you only pass what needs to be displayed)
• count: the total number of rows the result set contains

Have a look at the list of available options

Available methods

A few methods are available on your Evolugrid object :

• refresh: This method allows the user to manually refresh the data displayed on the Evolugrid. This method is called as below :

    $("#list").evolugrid('refresh');

• cvsExport: This method gives the opportunity to download the displayed on the evolugrid as a CSV file. This method is called as below :

    $("#list").evolugrid('csvExport');

Available events

• newRow: event triggered when a new row is added to the Evolugrid. Event signature: function(event, tr, data) {...} where tr is the <tr> element and data is the JSON data for the row

Found a typo? Something is wrong in this documentation? Just fork and edit it!