There are 2 grid types.
Main difference is that data-grid supports column width in percent's and
data-grid2 only allows column width defined in pixels.
data-grid2 has more functionality available.
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
data-action-cell- will generate action buttons. Delete, cancel, error triangle. Used in
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.
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.
data-field-filter2="FieldName|distinct" to have distinct button.
It will open distinct field values list with counters.
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.
|There is no records to show info visible|
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
theadcolumn 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
theadcolumn section to generate aditonal menu item to update column for all filtered rows. (Available only in Pims365-based Appframe installations).
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.
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.
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|
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:
Otherwise there might be situations when you will not get correct behavior.
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
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
Note: default layout will be named "Default" and be visible only for developer who created it in layout list
Placeholder "LocalizeWeb2016" failed