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 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="#containerID" -if there is no container selector passed, grid will resize to fit a window. Otherwise it takes the passed container size.
  • 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

Multi select in grids

Grid will have multiselect if dsObject will have af_Selected in list.

For selection to work properly when paging and selecting/deslecting all records check following:

  • Data object has PrimKey or identity field in select list. (Identity field can be marked dsObject.getFields("SomeField"). Also, for performance reasons, make sure that view is optimized to return PrimKey or identity field.
  • If there is no way to add PrimKey, then always use sorting on data object.

Otherwise there might be situations when you will not get correct behavior.

Default layouts

Default layout for a grid can be saved by developer. Adjust layout and in console call gridID.saveLayoutAsDefault(). Layout will be saved in database with IsDefault bit. To update layout just call method again. When default layout is presented, Reset column layout will reset layout to default.

Template must have placeholder. This placeholder exposes af.article.defaultLayouts list.

Note: default layout will be named "Default" and be visible only for developer who created it in layout list

Related articles

Placeholder "LocalizeWeb2016" failed