@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(<mj-list-detail-grid>)"] --> LE["ListEntity\n(List metadata)"]
    LDG --> EDG["EntityDataGridComponent\n(<mj-entity-data-grid>)"]
    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

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

Key Dependencies

| Dependency | Purpose | |---|---| | @memberjunction/core | Metadata, RunView, CompositeKey | | @memberjunction/core-entities | ListEntity | | @memberjunction/ng-entity-viewer | EntityDataGridComponent | | @memberjunction/ng-shared | SharedService, navigation | | @memberjunction/ng-shared-generic | Loading indicator |

Usage

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

Inputs

| Input | Type | Default | Description | |---|---|---|---| | listId | string | Required | The List ID to display records for | | autoNavigate | boolean | false | Navigate to record on row click |

Outputs

| Output | Type | Description | |---|---|---| | rowClicked | EventEmitter<ListGridRowClickedEvent> | Emitted when a row is clicked |

ListGridRowClickedEvent

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

Exported API

| Export | Type | Description | |---|---|---| | ListDetailGridComponent | Component | List-filtered data grid | | ListGridRowClickedEvent | Interface | Row click event type | | ListDetailGridModule | NgModule | Module declaration |

Build

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

License

ISC