This Component provides Data Grid functionality, to display and interact with a list of records from a 4D Database.

The component is based on a KendoUI Grid widget, and displays contents of FourDModel instances, from a FourDCollection.

The component is defined in the JS44DModule, which must be imported and declared on your own application's NgModule. Example:

...
import { JS44DModule } from 'js44d';
...

@NgModule({
    imports: [
        ...
        JS44DModule,
        ...
    ],
    declarations: [
    ...

The component's selector is <datagrid>, and it has the following inputs:

• model: the FourDModel class representing the 4D Database records displayed on the Grid
• columns: the Grid's column configuration, which defines the kendo-ui Grid columns
• selectionMode: defines how grid selection should work (defaults to single, row)
• filterable: flag to indicate if grid is filterable, individual columns can have their own setting (defaults to true)
• sortable: flag to indicate if grid is sortable, individual columns can have their own setting (defaults to true)
• columnMenu: flag to indicate if the column menu should be active for all columns on the grid (defaults to true)
• height: the Grid height on the page, can take any of the valid css height values, including calculated height
• excelFilename: Filename to use when exporting grid contents to Excel
• useLazyLoading: option to use lazyloading, leaving paging to be done on server side (defaults to true)
• optimizeGridLoading: if using a FourDModel, this flag will optimize the loading of data, by bringing only the columns used on the grid, instead of retrieving complete records
• pageable: indicates if the paging bar should be enabled or not (default true, enabled)
• pageSize: if using lazyloading, defines the max # of records to retrieve from 4D when paging
• pageableRefresh: enable refresh button on the paging bar (default true)
• pageableSizes: to display page sizes drop down on the paging toolbar (default true)
• pageableButtonCount: defines max number of buttons to display on the paging toolbar (default 5)
• pageableMessage: defines message pattern to display on the paging toolbar, the default is '{0} - {1} of {2} items'

The Datagrid Component dispatches the following events:

• initialized: emitted right after the Kendo UI grid has been initialized
• loadDataComplete: emitted when grid data has been completely loaded; event's payload is the # of records received
• rowSelected: emitted when a record, grid row, is clicked; event's payload is the selected record instance
• recordSelected: emitted when a record, grid row, is double-clicked; event's payload is the selected record instance

Datagrid instances have the following properties:

• dataProvider: the Grid's FourDCollection instance
• gridObject: the Grid's Kendo UI grid instance
• recordCount: total record count on the current selection
• currentRecord: currently selected record instance
• queryString: previous query string used in the last query sent to 4D
• filterQuery: default filter to apply to all queries sent to 4D; this is a Query String that gets applied to a query's result, further reducing the returned record set
• orderBy: default record sort order

The Datagrid class provides the following functions:

This function populates the grid with the result of a 4D query

The function takes 3 arguments:

• query: the Query String setting the criteria for the record set to be retrieved from 4D
• filter: an additional Query String, to further reduce the resulting record selection; optional, if set, the resulting record selection will have to meet both the query and the filter criteria
• orderby: optional Order By clause to retrieve records in a desired sort order.
  • >table.field : to sort records by table.field in ascending order
  • <table.field : to sort records by table.field in descending order

When the record set has been received from 4D, this function will emit the loadDataComplete event.

Changes and sets new kendo-ui options.

Selects the indicated row. The ** rowNumber** argument is the row number to select (it starts at 1). The autoScroll flag indicates if the grid should auto scroll to the selected row number, the default is true.

Refresh DataGrid data. Resends the query to 4D and refreshes displayed data.

Refresh DataGrid data. Resends the query to 4D and refreshes displayed data.

Returns currently selected grid row. Method returns the FourDModel for the currently selected row.

Method will update the currently selected row data, and refresh the row's displayed data.

This method returns currently selected rows indices, if multiple selection enabled.

Exports grid data to Excel.

Here is a sample Datagrid usage, for the image at the top.

The HTML portion call's up the Datagrid selector and indicates its input values:

           <datagrid [height]="'calc(100% - 150px)'"
                [model]="modelDef"
                [columns]="columnDefs"
                [useLazyLoading]="true"
                [optimizeGridLoading]="true"
                [pageSize]="50"
                [excelFilename]="'Lista de Clientes.xlsx'"
                >
            </datagrid>

The model and columns inputs bind to variables on the .ts side, and indicates de FourDModel class that represents the records on the grid, and the columns to display:

    //
    // Declare Datagrid input properties
    //
    public modelDef = Licensee; // the record datamodel to use 

    // the columns for the datagrid
    public columnDefs = [
        { title: 'ID', field: 'RecordID', width: 50 },
        { title: 'Clínica', field: 'ClinicName', width: 450 },
        { title: 'Cidade', field: 'City', width: 150 },
        { title: 'Tipo', field: 'LicenseType', width: 50, filterable: { multi: true }  },
        { title: 'Status', field: 'LicenseStatus', width: 80, filterable: { multi: true }  },
        { title: 'Fee', field: 'MonthlyFee', format: '{0:c}', template:function (dataItem){return '<span style="float:right">'+kendo.format('{0:c}',dataItem.MonthlyFee)+'</span>'}, width: 80 },
        { title: 'Phone Home', field: 'LastPhoneHome', template:function (dataItem){return (isNaN(dataItem.LastPhoneHome))?'':kendo.format('{0:d}',dataItem.LastPhoneHome)}, width: 80 },
        { title: 'ID Best', field: 'IDBest', width: 80 },
        { title: 'Contrato Best', field: 'ContratoBest', width: 80 }
    ];

In this example we use some kendo-ui options to apply date or currency formatting to columns. And indicate columns that have a limited number of values and can use a dropdown list for the column filter.