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.

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.

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.

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.

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.

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.

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>

Table with Highlighted Contents

You may need to highlight the contents of a table. For example, you may need to make a row displayed as bold, such as for a row with total values on an inquiry form. To highlight the contents of the table, you implement a method that modifies the CSS for the row and assigns the handleEvent decorator to it. In the parameters of the decorator, you specify the event type that the method handles and the view or the view and column for which the event is handled.

The following example makes the row of the Transactions view bold.

@handleEvent(CustomEventType.GetRowCss, { view: 'Transactions' })
getTransactionsRowCss(args: RowCssHandlerArgs) {
    if (args?.selector?.rowIndex === 1) {
        // see static/custom.css
        return 'bold-row';
    }
    return undefined;
}

The following examples makes the CuryLineAmt cell of the Transactions view colored red if its value is greater than 1000.

@handleEvent(CustomEventType.GetCellCss, 
  { view: 'Transactions', column: 'CuryLineAmt' })
getTransactionsCellCss(args: CellCssHandlerArgs): string | undefined {
    if (args?.selector?.rowIndex === 0 &&
        args?.selector?.cellValue > 1000) {
        // see static/custom.css
        return 'red-cell';
    }
    return undefined;
}