The Record List Component provides UI and functionality for querying, displaying and acting upon a list of records from a 4D Database. It uses a QueryBand widget to query 4D and a DataGrid widget to display the query results.

The component accepts two content children, a QueryBand component and a DataGrid component, and here is an example use of the Record List Component, which corresponds to the sample image above:

<record-list [editWindow]="editWindow" [dialogInstance]="dialog">
   <query-band [enableSort]="true" [enableQBE]="true" [enableButtonBar]="true" [enableAddRecord]="true [enableDeleteRecord]="true">
      <queryband class="form-group">
          <features-queryband #customQueryBand class="form-group"></features-queryband>
      </queryband>
      <custombuttonbar>
          <button class="regularButton" style="width:120px;" (click)="checkFeature()">Analyze</button>
      </custombuttonbar>
   </query-band>
   <datagrid
        [model]="model"
        [columns]="columnDefs"
        [useLazyLoading]="true"
        [optimizeGridLoading]="true"
        [pageSize]="50"
        [excelFilename]="'FeatureList.xlsx'"
        >
   </datagrid>
</record-list>

The Record List Component's selector is <record-list>, and it has the following Input variables:

• editWindow: this is the associated record edit dialog class; if set, dbl-cliking a row or hitting the Add/Edit buttons will open it in a Modal dialog; the Edit Window must be an extension to the RecordEditWindow Component
• dialogInstance: if the Record List runs inside a Dialog window, then that must be set to host's ModalDialogInstance, to allow automatic handling of Dialog window resizing

A RecordList instance includes the following properties:

• queryBand: the Query Band widget inside the Record List component
• theGrid: the DataGrid widget inside the Record List component

The Component API includes the following functions:

This will clear cached query and the query form

Will rerun previous query and refresh the data displayed on the Grid