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=""> (1)
  <field name="fullName" /> (2)
  <field name="email" />
  <field name="phone" />
  <field name="dateOfBirth" />
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 bind to model fields.

The grid view has the following attributes:

Attribute Description


name of the view, duplicate name is considered as overriding


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


the grid title


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


whether the grid is inline editable


comma-separated list of field names to sort the records


comma-separated list of field names to group the records


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


whether advanced custom search is enabled


specify the free-search mode: 'all' (default), 'none', or comma-separated list of field names


whether to allow creating new records


whether to allow editing records


whether to allow deleting records


whether to allow saving records


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


whether to allow archiving/unarchiving records


name of the widget to be used in the grid: expandable


whether to fetch initial records


specify the row selection control: checkbox (default) to show checkbox selection, none to disable it.

With canMove, sequencing is done on field specified by orderBy, and it must be only one integer field. If not specified, not sequencing is done. On top-level grid, orderBy is required with canMove.
See Expandable for usage and available widget attributes. It’s the only widget supported on top-level grid.

The grid view has the 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:


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 the following attributes:

Attribute Description


name of the field


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.


The <button> item can be used to put buttons at any row.

Attribute Description


name of the button


title text for the button


name of the icon to show


text to show if confirmation is required when button is clicked


the name of the action to execute when button is clicked


custom CSS class to apply


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

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

In the case of grid view displayed as child of a form view or as a dashlet, first three buttons will be displayed.

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

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

In the case of grid view displayed as child of a form view or as a dashlet, first menu will be displayed.


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


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

The attributes are:

Attribute Description


boolean expression


name of the text color style


name of the background color style


whether to show text in bold fonts

The following color & background styles are defined:

Style Description


do not highlight


highlight style to show some importance


highlight style to show warning


highlight style to indicate success


highlight style to show criticality


highlight style to indicate information

Besides those styles, these colors are also available:

  • red

  • pink

  • purple

  • deeppurple

  • indigo

  • blue

  • lightblue

  • cyan

  • teal

  • green

  • lightgreen

  • lime

  • yellow

  • amber

  • orange

  • deeporange

  • brown

  • grey

  • bluegrey

  • black

  • white

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

The advanced 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="">
  <!-- change title -->
  <field name="name" title="Order Ref." />

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

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

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

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


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

The <filter> element can have a name attribute to be used in the list of names for the default-search-filters view-param.

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


Here is a more complete example:

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