Grid View

The grid view shows data in a list with several columns.

As the grid views fetch many records to display in as list, it’s important to show only important information.

A grid view can be defined like this:

<grid name="contact-grid" title="Contacts"
  model="com.axelor.contact.db.Contact"> (1)
  <field name="fullName" /> (2)
  <field name="email" />
  <field name="phone" />
  <field name="dateOfBirth" />
</grid>
1 define a grid view for the given domain model
2 define a column bound to a field of the domain model

The <field> tags can be used to define columns that binds to model fields.

The grid view has following attributes:

Attribute Description

name

name of the view, duplicate name is considered as overriding

model

the fully qualified name of the domain model this view belongs to

title

the grid title

id

if overriding some existing one, provide an unique id to identify this one

editable

whether the grid is inline editable

orderBy

comma separated list of field names to sort the records

groupBy

comma separated list of field names to group the records

edit-icon

whether to show edit icon in first column (default true)

customSearch

whether advanced custom search is enabled

freeSearch

the free search mode, can be name, all or none

canNew

whether to allow creating new records

canEdit

whether to allow editing records

canDelete

whether to allow deleting records

canSave

whether to allow saving records

canMove

whether to allow re-ordering of rows with drag & drop

The object should have a numeric field named sequence to allow re-ordering with drag & drop.

The grid view following child items:

  • field - define a column bound to the model fields

  • button - define a button to execute an action

  • toolbar - define custom toolbar buttons

  • menubar - define custom menubar

  • hilite - define rules to highlight rows/cells

Let’s see them in details:

Field

The <field> is the most important and required item in a grid view definition. It defines a column that binds to some field of the given domain object.

It has following attributes:

Attribute Description

name

name of the field

title

title to be shown as column header, calculated if not provided

Besides these attributes, fields can also have other attributes supported by form view fields. These attributes are used by the inline editors.

Button

The <button> item can be used to put buttons at the end of each row.

Attribute Description

name

name of the button

title

title text for the button

icon

name of the icon to show (font-awesome icons)

prompt

text to show if confirmation is required when button is clicked

onClick

the name of the action to execute when button is clicked

Toolbar

The <toolbar> item can be used to define custom toolbar buttons. These buttons are shown along with the top toolbar.

<toolbar>
  <button name="btnPrint" icon="fa-print" title="Print" onClick="act1"/>
  <button name="btnExport" icon="fa-rocket" title="Export" onClick="act2"/>
</toolbar>

The <menubar> item can be used to define custom menus. These menus are also shown in the top toolbar.

<menubar>
  <menu title="Actions" icon="img/address-book.png" showTitle="false">
    <item title="Send Greetings" action="act1"/>
    <item title="Home Page" action="act2"/>
    <divider/>
    <item title="Test" action="act3"/>
  </menu>
  ...
</menubar>

Hilite

The <hilite> item should be applied on the grid view to highlight whole rows and on fields to highlight those specific cells.

example:

<grid ...>
  <hilite background="warning" if="$contains(email, 'gmeil.com')"/>
  ...
</grid>

The attributes are:

Attribute Description

if

an angular.js like boolean expression

color

name of the text color style

background

name of the background color style

strong

whether to show text in bold fonts

Following color & background styles are defined:

Style Description

default

do not highlight

primary

highlight style to show some importance

warning

highlight style to show warning

success

highlight style to indicate success

danger

highlight style to show criticality

info

highlight style to indicate information

The <hilite> item if applied on grid view it highlights the rows. The <hilite> item if applied on fields it highlights the cells.

The advance search on grid view can be customized to search on nested fields or on o2m/m2m fields.

<search-filters name="filter-sales" title="Filter Sale Orders" model="com.axelor.sale.db.Order">
  <!-- change title -->
  <field name="name" title="Order Ref." />

  <!-- include nested field -->
  <field name="customer.addresses.city" title="Customer city" />

  <!-- include nested field, but only if the condition is true -->
  <field name="items.product.name" title="Product Name" if="some condition" />

  <!-- hide the field from advance search -->
  <field name="items" hidden="true" />

  <!-- optionally -->
  <filter title="Confirmed">
    <domain>self.confirmed = true</domain>
  </filter>

</search-filters>

The <field> and <filter> elements are optional but at least one element should be present in <search-filters>.

Searching on o2m/m2m fields may result in duplicate records in view. There is no generic optimal way to prevent this.

Example

Here is a more complete example:

<grid name="contact-grid" title="Contacts" model="com.axelor.contact.db.Contact" editable="true">
  <toolbar>
    <button name="btnGreetAll" title="Greet" onClick="action.contact.greet.all"/>
  </toolbar>
  <menubar>
    <menu title="Actions">
      <item title="Action 1" action="action.some" />
      <item title="Action 2" action="action.thing" />
    </menu>
  </menubar>
  <hilite background="warning" if="$contains(email, 'gmeil.com')"/>
  <field name="fullName"/>
  <field name="firstName"/>
  <field name="lastName" onChange="com.axelor.contact.web.HelloController:guessEmail"/>
  <field name="email">
    <hilite strong="true" if="$contains(email, 'gmeil.com')"/>
  </field>
  <field name="phone"/>
  <field name="company"/>
  <field name="dateOfBirth">
    <hilite color="danger" strong="true" if="$moment().diff(dateOfBirth, 'years') &lt; 18"/>
  </field>
  <button name="btnGreet" title="Greet" onClick="action.contact.greet" />
</grid>