User Tools

Site Tools


dev:eg-grid

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

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 and context.getSelectedRows()
  • Special instructions for file download buttons
  • (new in 3.14) See .eg-grid-filter-links in staff/share/buckets/record-bucket.component.html and getViewKeys() in staff/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

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki

© 2008-2022 GPLS and others. Evergreen is open source software, freely licensed under GNU GPLv2 or later.
The Evergreen Project is a U.S. 501(c)3 non-profit organization.