{% extends "admin/base_site.html" %} {% load i18n %}{% load url from future %} {% block bodyclass %}grp-doc{% endblock %} {% block content-class %}{% endblock %} {% block title %}Grappelli Documentation » Groups{% endblock %} {% block extrahead %} {% endblock %} {% block breadcrumbs %}
A .grp-group encloses modules which belong together or should appear in a more associated way.
Usually a group starts with a heading but you might as well use it without one.
Just be aware of the fact that groups without headings do not appear in document outlines.
There are two different types of groups: Stacked Groups and Tabular Groups.
Row
Row
Row
Row
{% filter force_escape %}
Group
Module
Row
Row
Module
Row
Row
{% endfilter %}
A .grp-group with the additional class .grp-stacked carries modules with the default layout (whereas modules in a tabular group appear in a table-like layout).
Row
Row
{% filter force_escape %}
Stacked Group
Module
Row
Row
{% endfilter %}
Just in case you want to apply some actions to the modules (e.g. sorting them) you might wrap them with a .grp-items.
{% filter force_escape %}
Stacked Group
{% endfilter %}
A .grp-group with the additional class .grp-tabular carries modules with a table-like layout (whereas modules in a stacked group appear in the default way).
To accomplish that table-like structure we have to do a specific nesting the following elements:
Each div.grp-module.grp-tbody may not contain a heading - if there is one you have to hide it!
{% filter force_escape %}
Tabular Group
Table-Head 1
Table-Head 2
Table-Desk 1
Table-Desk 2
{% endfilter %}
In case you need tools for the div.grp-module.grp-tbody you have to put them in a div.grp-td with the additional class .grp-tools-container.
And of course you have to add an empty div.grp-th to the div.grp-module.grp-thead to preserve the table-like structure.
Both types of groups can also easily be supplied with a collapsible mechanism.
To do so just add .grp-collapse to the .grp-group you want to be collapsible.
With adding .grp-open or .grp-closed you define whether the collapsible group is opened or closed initially.
Now you have to define a .grp-collapse-handler. Usually that's the heading of the collapsible group but you may assign it to other elements as well.
Finally you have to use some javascript code (e.g. with the source code below).
Feel free to combine collapsible groups with collapsible modules, non-collapsible modules and collapsible ones with groups, collapsible or not.
Row
Row
Row
Row
{% filter force_escape %}
Group
Module
Row
Row
Module
Row
Row
{% endfilter %}
{% filter force_escape %}
(function($) {
$(document).ready(function() {
$("#grp-content-container .grp-group").grp_collapsible_group();
$("#grp-content-container .grp-collapse").grp_collapsible();
});
})(grp.jQuery);
{% endfilter %}