Form Layout: Grid Presets

To configure the appearance of a grid, you can specify a preset for the grid. A preset is a predefined set of properties, such as mergeToolbarWidth or syncPosition, that define the appearance of the grid.

Presets are an analog of the SkinID property in ASPX. However, not all values of the SkinID property have analogs in the Modern UI. You need to find the appropriate preset in the list of available values.

You should use presets because they unify the appearance of grids in the UI and simplify the process of updating the design.

To specify the preset, use the preset property of the gridConfig decorator, as shown in the following example.

Without Preset With Preset

@gridConfig({
    adjustPageSize: true,
    mergeToolbarWith: 'ScreenToolbar',
    syncPosition: true,
    preserveSortsAndFilters: true,
    allowDelete: false,
    allowInsert: false,
    allowImport: false,
    allowSkipTabs: false,
    actionsConfig: {
        insert: {hidden: true},
        delete: {hidden: true}}
})
export class GLHistoryEnquiryResult extends PXView
@gridConfig({
    preset: GridPreset.PrimaryInquiry
})
export class GLHistoryEnquiryResult extends PXView

Available Presets

The following table lists the values of the preset property and the designs they provide.

Note:
If some of the properties of the preset do not fit your needs, you can override them in the gridConfig decorator.
Value Description
primary


An editable grid. The preset includes the following settings:

  • Grid toolbar: Merged with the form toolbar
  • Filtering and search: Available and saved in the session
  • Grid footer: Displayed

Guidelines:

  • Use this preset for primary lists with an editable grid if there is no entry form for the records, such as Chart of Accounts (GL202500).
  • Do not specify a grid caption.

Respective SkinID in ASPX: Primary

primaryInquiry


A read-only grid. The preset includes the following settings:

  • Grid toolbar: Merged with the form toolbar
  • Filtering and search: Available and saved in the session
  • Grid footer: Displayed
  • The insert and delete operations inside the grid: Forbidden except the column with the unlabeled check box (such as the column for the selection of rows on processing forms)

Guidelines:

  • Use this preset for primary lists with read-only grids, such as Sales Orders (SO3010PL), Invoices (SO3030PL), and Import Bank Transactions (CA3065PL).
  • Use the preset for processing forms.
  • Use the preset for inquiry forms.
  • Do not specify a grid caption.

Respective SkinID in ASPX: PrimaryInquiry

inquiry


A read-only grid. The preset includes the following settings:

  • Grid toolbar: Displayed separately from the form toolbar
  • Filtering and search: Only the Search box is available
  • Grid footer: Displayed
  • The insert and delete operations inside the grid: Forbidden except the column with the unlabeled check box (such as the column for the selection of rows on processing forms)

Guidelines:

  • Use this preset for read-only grids on data entry forms, such as the table on the Shipments tab on Sales Orders (SO301000) form.
  • Do not specify a grid caption.

Respective SkinID in ASPX: Inquiry

details


An editable grid. The preset includes the following settings:

  • Grid toolbar: Displayed separately from the form toolbar
  • Filtering and search: Only the Search box is available
  • Grid footer: Displayed
  • The insert and delete operations inside the grid: Allowed

Guidelines:

  • Use this preset for editable grids on data entry forms.
  • Do not specify a grid caption.

Respective SkinID in ASPX: Details

attributes


A partially editable grid with a predefined set of lines, but the cells can be editable. The preset includes the following settings:

  • Grid toolbar: Not displayed
  • Filtering and search: Unavailable
  • Grid footer: Not displayed
  • The insert and delete operations inside the grid: Forbidden

Guidelines:

  • Use this preset for smaller grids surrounded by other fieldsets, such as the Attributes table on the Attributes tab of the Stock Items (IN202500) form.
  • Specify a grid caption.

Respective SkinID in ASPX: Attributes

shortList


An editable grid. The preset includes the following settings:

  • Grid toolbar: Displayed separately from the form toolbar
  • Filtering and search: Unavailable
  • Grid footer: Not displayed
  • The insert and delete operations inside the grid: Allowed

Guidelines:

  • Use this preset for smaller grids, such as the Sales Categories table on the Attributes tab of the Stock Items form.
  • Do not specify a grid caption.

Respective SkinID in ASPX: ShortList

empty

An empty preset that includes no settings.

Guideline: Use this preset if the preset property becomes mandatory and you need to use a custom set of properties.

The default values of each preset are described in the following table.

Note:
The value from server means that the default value is received from the server. If no value is specified on the server side, then the default value is false. If the true value is specified, the value is defined by the server. If the true value is specified and no value has been received from the server, the value is true.
Property empty primary primaryInquiry inquiry details attributes shortList
graph - - - - - - -
view - - - - - - -
screenId - - - - - - -
dataField - - - - - - -
gridDataUrl - - - - - - -
pagerMode GridPagerMode.NextPrevFirstLast GridPagerMode.NextPrevFirstLast GridPagerMode.NextPrevFirstLast GridPagerMode.NextPrevFirstLast GridPagerMode.NextPrevFirstLast GridPagerMode.NextPrevFirstLast GridPagerMode.NextPrevFirstLast
pageSize 100 100 100 100 100 0 0
adjustPageSize false true true false false false false
parameters - - - - - - -
syncPosition false true true false true false false
suppressNoteFiles false false false false false false false
preserveSortsAndFilters false true true false false false false
autoAdjustColumns false false false false true false true
generateColumns GridColumnGeneration.None GridColumnGeneration.None GridColumnGeneration.None GridColumnGeneration.None GridColumnGeneration.None GridColumnGeneration.None GridColumnGeneration.None
generateColumnsAfterSelect false false false false false false false
generateProcessColumns false false false false false false false
columns - - - - - - -
columnsConfig.type GridColumnType.NotSet GridColumnType.NotSet GridColumnType.NotSet GridColumnType.NotSet GridColumnType.NotSet GridColumnType.NotSet GridColumnType.NotSet
columnsConfig.textAlign TextAlign.NotSet TextAlign.NotSet TextAlign.NotSet TextAlign.NotSet TextAlign.NotSet TextAlign.NotSet TextAlign.NotSet
columnsConfig.allowNull true true true true true true true
columnsConfig.allowUpdate true true true true true true true
columnsConfig.allowFilter true true true true true true true
columnsConfig.allowFocus true true true true true true true
columnsConfig.allowSort true true true true true true true
columnsConfig.allowResize true true true true true true true
columnsConfig.visible true true true true true true true
columnsConfig.allowShowHide GridColumnShowHideMode.True GridColumnShowHideMode.True GridColumnShowHideMode.True GridColumnShowHideMode.True GridColumnShowHideMode.True GridColumnShowHideMode.True GridColumnShowHideMode.True
columnsConfig.displayMode GridColumnDisplayMode.Value GridColumnDisplayMode.Value GridColumnDisplayMode.Value GridColumnDisplayMode.Value GridColumnDisplayMode.Value GridColumnDisplayMode.Value GridColumnDisplayMode.Value
autoSaveLayout true true true true true false false
allowSkipTabs true true false false true true true
allowStoredFilters false false false false false false false
quickFilterFields - - - - - - -
filterView - - - - - - -
filterRowsView - - - - - - -
fastFilterId - - - - - - -
fastFilterByAllFields true true true true true false false
showRowSelectors true true true true true true true
showFilterBar true true true true true true true
showTopBar true true true true true false true
showBottomBar true true true true true false false
topBarItems - - - - - - -
actionsConfig - -
{insert: {hidden: true},delete: {hidden: true}}
{insert: {hidden: true},delete: {hidden: true}}
- -
{adjust: {hidden: true},exportToExcel: {hidden: true}}
mergeToolbarWith - 'ScreenToolbar' 'ScreenToolbar' - - - -
wrapToolbarWith - - - - - - -
wrapToolbar false false false false true false false
statusField - - - - - - -
defaultAction - - - - - - -
exportRowsLimit - - - - - - -
batchUpdate false false false false false false false
initNewRow false false false false false false false
allowUpdate from server from server from server from server from server from server from server
allowDelete from server from server false false from server false from server
allowInsert from server from server false false from server false from server
allowImport from server from server false false from server false false
allowFilter true true true true true false false
allowSort true true true true true false true
autoRepaint - - - - - - -
caption - - - - - - -