v 1.1.3


Use this element to present information in a tabular structure. Unlike the modo.List element, data is separated into single columns in the grid element. You can specify renderers or presentor elements for every column separately. The Modo Grid supports arrays and Backbone.Collection as datasources.



The following list of parameters can be used in the params object, passed to the constructor. Parameters in [brackets] are optional.



Either a array of JavaScript objects, or a Backbone Collection.


Pass an array of objects here, specifying information about how each colum should be handled. For Example:

        key: 'some_key',            //The key to use from the datasource.
        title: 'The column header', //HTML possible
        render: function(d){
            //HTML, or a Modo Element is expected to be returned.
            //Will be wrapped into a additional DIV (the cell).
            return d.toString();
        itemEvents: {
            'click': function(event, index, cellData, rowData, columnKey){
                //Do something
        required: false             //Decide if this column can be
                                    //user-selected or must be shown.


The prepare function is called before each row is being rendered.
You can make up own columns out of data which is generated dynamically upon table creation.

prepare: function(rowObject){
    rowObject.formattedTime = (new Date(d.time)).toLocaleString(); 
    return rowObject;


Array of keys of the columns that should be displayed. Default = null (all)


The HTML tag where rows are rendered with. Default: DIV


The HTML tag where cells are rendere width. Default: DIV


A function, which filters the dataset of the list, before rendering. This is applied if the "data" parameter contains a Backbone Collection. The function gets the lists data collection as a parameter. The default collector function is:

    return collection.filter(function(){return true;})


An array of event names - fired by a Backbone Collection - on which the list should be re-rendered. Default: ['add', 'change', 'remove', 'sort']


A string with custom CSS classes to apply to the generated DOM element


A object with attributes to assign to the generated DOM element. Omit the "data-" part. So for example {count: 1} becomes data-count="1" on the DOM element.


The jQuery enhanced DOM element to be generated. If nothing is set, a standard DIV container will be created. If you want to use a different DOM element, pass a jQuery generated DOM element to this parameter.


The default show effect for the element. See associated property description. Default: null


The default hide effect for the element. See associated property description. Default: null


Inherited Properties from modo.Element


Contains the jQuery enhanced DOM Node of this modoJS element.


Contains a internally given, numeric ID for this element.


Will be set by .show() and .hide(). Access this property to check the current visibility of the element.


Set a default show effect (like the options you can pass to the show() / hide() methods.


element.showEffect = {
    effect: 'slideDown',
    effectArgs: ['fast']


Define a default hide effect instead of a simple, instant hide.



Re-Draws the table.


Set up new column data for the grid.

set(data, [options])this

Re-Setting the grid data. Pass a object {silent:true} to prevent a change event from being fired.

Inherited Methods from modo.Element


Pass either true or false to this value to make the element stretch inside a modo.FlexContainer element.


Make the connected DOM object visible and trigger the Backbone Event "show".

You can control the way the element is shown by passing an object of options.


    effect: 'slideDown',
    effectArgs: ['fast']


Make the connected DOM object invisible and trigger the Backbone Event "hide".

You can control the hide effect the same way as with the show() method.

addClass(classname, doPrefix)this

Will add another class name to the DOM element. The class name will be automatically prefixed (i.e. with mdo-) if doPrefix = true (default).

removeClass(classname, doPrefix)this

Will remove a class name from the DOM element. The class name will be automatically prefixed.

addClassTemporary(classname, timeout, doPrefix)this

Helps with adding a classname temporarily to the object. Just call this method and after the specified amount of time, the added class(es) will be removed.

Note: All modoJS Objects are extended with all methods of the Backbone.Events class.



Triggered when the table has been re-drawn.

Inherited Events from modo.Element


Triggered, when the object has been displayed through show()


Triggered, when the object has been hidden through hide()

CSS Classes


Applied to the modo element.


Applied to the header container, inside the element.


Applied to each row container inside the element.


Applied to each cell container inside the element.


Applied to each column with its unique key.

Inherited CSS Classes from modo.Element


Basic class that will be applied to every element that extends modo.Element.


Will be applied to every modo element where setFlexible(true) has been called upon.

comments powered by Disqus