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

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.

  • 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. (Available only in Pims365-based Appframe installations).
  • 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-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".
ID Name Genre Established