utils.grid.js

Sometimes a layout needs a re-arrangement, or a dashboard needs some more important reports to be moved to the top... that's when utils.grid.js comes into play

Responsive image

Common methods used in below examples

Editable Grid

var $grid_wrapper1 = $('#grid-wrapper1'); var items = [ { x:0, y:0, width:3, height:1, content:'report #1' }, { x:3, y:0, width:3, height:1, content:'report #2' }, { x:6, y:0, width:3, height:1, content:'report #3' }, { x:9, y:0, width:3, height:1, content:'report #4' }, { x:0, y:1, width:12, height:1, content:'report #5' }, { x:0, y:2, width:12, height:1, content:'report #6' } ]; items = _.map(items,function(item){ var $item = $('
'); if ('content' in item) $item.html(item.content); //lets add the grid meta data $item.data('grid', { x: item.x, y: item.y, height: item.height, width: item.width, min_width: 3, min_height: 1 }); $item.data('origdata',item); //this can contain any type of additional data return $item; }); var Grid_1 = new UTILS.Grid({ target: $grid_wrapper1, items: items, onEnableEditing: onEnableEditing, onDisableEditing: onDisableEditing }).show();

Locked Grid (presentation mode)

In presentation mode the grid gets converted to a true Bootstrap layout. In other words all elements will be undraggable, will have position:relative, and are re-rendered into simple Bootstrap grid blocks.

var $grid_wrapper2 = $('#grid-wrapper2'); var items = [ { x:0, y:0, width:3, height:1, content:'report #1' }, { x:3, y:0, width:3, height:1, content:'report #2' }, { x:6, y:0, width:3, height:1, content:'report #3' }, { x:9, y:0, width:3, height:1, content:'report #4' }, { x:0, y:1, width:12, height:1, content:'report #5' }, { x:0, y:2, width:12, height:1, content:'report #6' } ]; var Grid_2 = new UTILS.Grid({ target: $grid_wrapper2, presentation: true, items: items, onEnableEditing: onEnableEditing, onDisableEditing: onDisableEditing }).show();

API

Option

Required

Default

Description

target required null DOM elm where the grid will be inserted
items required //items [ { x:0, y:0, width:3, height:1, content:'report #1' }, { x:3, y:0, width:3, height:1, content:'report #2' }, ... ] //each field will have the following structure
/* your content will be inserted here */

Items that will be converted into cells on the grid. You can either pass in a JSON object like shown in the examples above, or you can create your own jQuery object but make sure the most outer wrapper contains the
grid-field class.

width optional 12 Grid width in terms of columns
collapse optional false

Sets collapse mode (only works when presentation mode is enabled)

If enabled, empty rows will be hidden and cells will be moved up

presentation optional false

Sets the presentation mode

If enabled cells will be adjusted based on their true content using Bootstap layout. The items are static and cannot be re-arranged or edited.

Methods

Method

Default

Repeat

Description

onShow null REPEAT Triggers when the grid is shown
onHide null REPEAT Triggers when the grid is hidden
onChange null REPEAT Triggers when any item is moved or resized
onRenderedGridForPresentation null REPEAT Triggers when the grid completed rendering all items
onEnableEditing null REPEAT Triggers when the grid gets enabled for editing (presentation mode off)
onDisableEditing null REPEAT Triggers when the grid gets disabled for editing (presentation mode on)
Loading resources, please wait...