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.stopPropagation
to 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
$event
andcontext.getSelectedRows()
- Special instructions for file download buttons
Grid filtered view links
- (new in 3.14) See
.eg-grid-filter-links
instaff/share/buckets/record-bucket.component.html
andgetViewKeys()
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