This widget provides Mendix with the ability to have drag and drop multi-column grid. The widget is based on the Gridster project at http://gridster.net/ and https://github.com/ducksboard/gridster.js.
For more information on contributing to this repository visit Contributing to a GitHub repository!
Use a standard Mendix Table container for a nice design-time experience, and at run-time, this widget will transform that Mendix Table container into a Gridster-enabled control. The widget will also automatically set the relative cell size (data-sizex) of the cell based on the table column percentages. Fixed width is not supported.
To use the widget, do the following:
- Add GridsterJS widget to a page.
- Create a Mendix Table container.
- On the table, add the class "gridstertable", or as is customized in the GridsterJS widget.
When placing the widget, it is supported for use in the following contexts with exactly one matching table.
- Entire page
- Data View
- Template grid on each template
- List View on each list item
- Tab page
The control limits the scope of the search for the table to the parent container, so that you can have multiple widgets on a page.
To support additional options not directly configured in the Widget Properties, you can set these options using the Extra Options property, in JSON format. For specific properties that are supported, see www.gridster.net.
An example of the value that might be contained in the extra options,
{ extra_cols: 1, max_cols: 10 }You will likely want to customize the styles of the grids. Some common overrides to have in your custom css are below.
###Drop Zone Style
.wgt-GridsterJS .preview-holder {
border: none;
background: grey;
}