Data grids

There are 2 grid types. data-grid and data-grid2. Main difference is that data-grid supports column width in percent's and data-grid2 only allows column width defined in pixels. Also data-grid2 has more functionality available.

Common options

Both grids can be editable, there needs to be proper inputs added into tds. Editable grid will have keyboard navigation.

  • data-selection-cell - will generate selection cell. Used in tbody first td
  • data-action-cell - will generate action buttons. Delete, cancel, error triangle. Used in tbody last td
  • data-item-info-text="artists" - will replace "row" to defined text in item info control.

Advanced filter row can be added to have more search capabilities. Use data-field-filter2="FieldName" to generate input. It will generate operator’s dropdown and input field. Operators list is dependent on field type. Also for date fields, there will be date popup created. Use data-field-filter2="FieldName|distinct" to have distinct button. It will open distinct field values list with counters.

Data grid

Use data-grid attribute on a table to enable basic grid

  • data-footer - will add footer with pagination, refresh, filter builder, export to excel buttons and filter string when filtering.
ID Name Genre Established
There is no records to show info visible

Data grid2

Use data-grid attribute on a table to enable advanced grid. Table id attribute is required for all functions to work properly. In this grid columns can be resized, reordered and made hidden. Grid will remember user’s last choice on browser local cache. Also, user can create it’s own layouts, save them, reuse. Grid will have it's own scrollbars if it does not fit to container. Grid's thead will be fixed to table top and won't scroll with all table vertically.

To have multi select in R4 system, you should enable DataObjectViewModel and add field af_Selected to your data source

if(af.DataObject.useViewModels){ af.DataObject.useViewModels(); } dsYourDataObject.fields.push({"name":"af_Selected","type":"Boolean","defaultValue": false});

To have functional grid, use data-sort-by in header. If data sort-by will not be used, grid features as export to excel, column move and etc might not work properly, as it is used to get current used fields.

  • data-header="Artists" - will generate grid's header with search bar and counters info inside.
  • data-no-footer - will not generate footer element with pagination and etc...
  • data-resize - grid will resize to fit a window
  • data-layout-version="1" - will define which layout version should be used when generating grid
  • data-excel-import - will enable grid template export and import. By using this function data can be imported from excel to database.
    • data-import-required="col,col2,col3" - by default for export it will use columns visible in data grid only. Sometimes you might want to extend that list.
  • data-hidden - should be used in thead column section to inform that this column is hidden by default. It will still appear in column chooser.
  • data-multiselect - Show multiselect row by default.
  • data-gridcolumn-batchupdate - should be used in thead column section to generate aditonal menu item to update column for all filtered rows. (Available only in Pims365-based Appframe installations).
    For date fields, datepicker will be shown, boolean - checkbox, number - number type input, string - text type input. Lookup is also available:
    • data-bu-lookup - lookup can be added to select values
    • data-bu-display - display value, which will be shown in lookup and input filled after select.
    • data-bu-value-bindings - if not specified, input value will be used.
    • data-bu-columns - like in standard lookup "column:500px,column2:100px".
    • data-bu-lookup-command - like in standard lookup.
ID Name Genre Established


It is possible to attach events on grid object. These events can be used to manipulate (add/remove fields, change data) paste object before inserting data into database.

  • attachEvent("onBeforePaste")- will fire before the data is pasted into the grid. Will return paste object with key/value pairs.
  • attachEvent("onAfterPaste")- will fire after the data is pasted into the grid. Will return paste object and errors if such exists.

Banded grid view

There is an option to define bands in data-grid2. Use data-grid-band="First|Second|Third" markup. Band levels are separated with "|".

Currently column move is disabled when using bands..

Artist ID S name S ID S updated S search column Extension File size File name