Table (Grid): Layout Examples

In this topic, you can find examples of various layouts with tables.

Table in a Gray Section

Suppose that you need to place a table in a gray section, as shown in the following screenshot.

Figure 1. A table in a gray section


To define a table in a gray section, you specify class="framed-section" for the qp-grid tag, as shown in the following code.

<qp-grid slot="B" id="gridSerialNumbers" 
  view.bind="MasterSplits" class="framed-section">
</qp-grid>

Table with a Title

Suppose that you need to define a table with a title, as shown in the following screenshot.

Figure 2. A table with a title


To define a table with a title, you specify the caption attribute in the qp-grid tag, as shown in the following code.

<qp-grid id="gridOrders"
  view.bind="BlanketOrderChildrenDisplayList"
  caption="Grid Caption">
</qp-grid>

Table with Elements Above It in a Gray Section

Suppose that for a table in a gray section, you need to place elements, such as boxes, above the table and inside the gray section, as shown in the following screenshot.

Figure 3. A table with boxes in a gray section


To define a table with elements above it in a gray section, you do the following in the HTML code:

  1. Add a qp-fieldset tag.
  2. Specify the caption attribute for the qp-fieldset tag.
  3. Put the following N + 1 field tags in the qp-fieldset tag, where N is the number of elements you need to define above the table:
    • N fields for the elements above the table
    • One field for the table with the replace-content and unbound attributes
  4. Put the qp-grid tag inside the field with replace-content and unbound.
Tip:
You do not need to specify any classes for coloring because the gray section is displayed for the entire fieldset by default.

The following code implements this approach.

<qp-fieldset id="groupID" view.bind="View1" caption="Fieldset Caption">
  <field name="Field1"></field>
  <field name="Field2></field>
  <field name="FakeField" replace-content unbound>
    <qp-grid id="gridSomeGrid" view.bind="View2"></qp-grid>
  </field>
</qp-fieldset>

Table with a Title and Elements Above It in a Gray Section

Suppose that for a table in a gray section, you need to specify a table title; further suppose that you need to add elements above the table inside the gray section, as shown in the following screenshot.

Figure 4. A table with a title and with elements above it in a gray section


To implement this layout, you need to do the following in HTML code:

  1. Add a qp-fieldset tag.
  2. Add the title for the fieldset by specifying the caption attribute for the qp-fieldset tag.
  3. Put the following N + 1 field tags in the qp-fieldset tag, where N is the number of elements you need to define above the table:
    • N fields for the elements above the table
    • One field for the table with the replace-content and unbound attributes
  4. Put the qp-grid tag inside the field with replace-content and unbound.
  5. Add the title for the table by specifying the caption attribute for the qp-grid tag.
Tip:
You do not need to specify any classes for coloring because the gray section is displayed for the entire fieldset by default.

The following code implements this approach.

<qp-fieldset id="groupID" view.bind="View1" caption="Fieldset Caption">
  <field name="Field1"></field>
  <field name="Field2></field>
  <field name="FakeField" replace-content unbound>
    <qp-grid id="gridSomeGrid" view.bind="View2" caption="Grid Caption">
    </qp-grid>
  </field>
</qp-fieldset>

Table with a Fixed Height

By default, the grid is stretched over the whole width of the area. If a grid should not occupy the whole tab or form, you specify class="fixed-height" for it, as shown in the following example.

<qp-grid id="gridSomeGrid" view.bind="GridView" class="fixed-height">
</qp-grid>