@memberjunction/ng-list-detail-grid

Angular grid component for displaying records belonging to a MemberJunction List. Wraps the mj-entity-data-grid component with automatic list-based filtering using subquery SQL filters.

Overview

The ListDetailGridComponent takes a listId and loads the associated ListEntity to determine the target entity and build a SQL subquery filter that fetches only records whose IDs appear in the list's detail records. It supports auto-navigation to records on click, selection events, and dynamic list switching.

graph TD
    LDG["ListDetailGridComponent\n()"] --> LE["ListEntity\n(List metadata)"]
    LDG --> EDG["EntityDataGridComponent\n()"]
    EDG --> KG["Kendo Grid"]
    LE --> SF["SQL Subquery Filter\n(ListDetail records)"]

    style LDG fill:#7c5295,stroke:#563a6b,color:#fff
    style LE fill:#2d6a9f,stroke:#1a4971,color:#fff
    style EDG fill:#2d8659,stroke:#1a5c3a,color:#fff
    style KG fill:#b8762f,stroke:#8a5722,color:#fff
    style SF fill:#b8762f,stroke:#8a5722,color:#fff
Copy

Features

• List-based filtering: Automatically builds SQL subquery filter from ListDetail records
• Auto-navigation: Optionally navigates to entity record on row click
• Row click events: Emits ListGridRowClickedEvent with entity info and composite key
• Dynamic list switching: Reloads when listId input changes
• Toolbar integration: Configurable grid toolbar via GridToolbarConfig
• Selection modes: Supports single and multi-row selection
• Loading state: Shows loading indicator via <mj-loading> while list data loads

Installation

npm install @memberjunction/ng-list-detail-grid
Copy

Key Dependencies

Usage

<mj-list-detail-grid
  [listId]="selectedList.ID"
  [autoNavigate]="true"
  (rowClicked)="onRecordSelected($event)">
</mj-list-detail-grid>
Copy

Inputs

Outputs

ListGridRowClickedEvent

interface ListGridRowClickedEvent {
  entityId: string;
  entityName: string;
  compositeKey: CompositeKey;
  record: BaseEntity;
}
Copy

Exported API

Build

cd packages/Angular/Explorer/list-detail-grid && npm run build
Copy

License

ISC