dev:eg-grid
Table of Contents
Angular eg-grid component
Setting up a new grid
- Defining the persistKey and adding the workstation setting SQL for saving grid settings
- Choosing the data source and setting up
GridDataSource.getRows()- Fleshing linked fields
- Handling linked fields using CStore when PCRUD is not available (i.e. org unit settings)
- Joining tables via PCRUD ops
- Prepending data (see Acquisitions line item search)
- Filtering
- Sorting
Grid columns
- Automatic columns from IDL fields
- Renaming columns
- Hiding IDL columns
- Defining grid cell templates and text generators for columns
Grid cells
-
- Note that
(click)actions in grid cells' child buttons should call$event.preventDefault()and$event.stopPropagationto prevent the row selection event from firing
- Grid cell text generator – setting up print templates for custom grid cell templates that contain links and buttons
Grid toolbar buttons, actions, and context menus
- Filters button (always leftmost)
- Button colors and (TK) button style directive
- Template areas before and after each button (primarily for input groups)
- Grouping actions
- Note that toolbar buttons could be grouped into dropdowns in AngularJS, but this has never been implemented in Angular
- Right-click context menus
- Double-click row actions
$eventandcontext.getSelectedRows()- Special instructions for file download buttons
Grid filtered view links
- (new in 3.14) See
.eg-grid-filter-linksinstaff/share/buckets/record-bucket.component.htmlandgetViewKeys()instaff/share/buckets/record-bucket.component.ts - Constructing URLs to filtered grid views
AngularJS grids
TODO: explanation of flexbox in AngularJS vs. tables in Angular; see Bug #1615781
dev/eg-grid.txt · Last modified: 2025/03/04 12:42 by sleary