@memberjunction/ng-join-grid

A checkbox-based grid component for managing many-to-many entity relationships in MemberJunction applications. Supports both junction entity record creation/deletion and direct field editing modes.

Installation

npm install @memberjunction/ng-join-grid

Overview

The Join Grid displays rows from one entity against columns from another, with checkboxes at each intersection. Checking a box creates a record in the junction entity; unchecking deletes it. An alternative Fields mode allows editing field values directly in related records. All changes are batched in transaction groups for atomic saves.

flowchart LR
    subgraph Rows["Row Entity"]
        R1["User A"]
        R2["User B"]
        R3["User C"]
    end
    subgraph Grid["Join Grid"]
        G["Checkbox Matrix"]
    end
    subgraph Cols["Column Entity"]
        C1["Role 1"]
        C2["Role 2"]
    end
    subgraph Junction["Junction Entity"]
        J["UserRoles records"]
    end

    R1 --> G
    R2 --> G
    R3 --> G
    C1 --> G
    C2 --> G
    G -->|create/delete| J

    style Rows fill:#2d6a9f,stroke:#1a4971,color:#fff
    style Grid fill:#7c5295,stroke:#563a6b,color:#fff
    style Cols fill:#2d8659,stroke:#1a5c3a,color:#fff
    style Junction fill:#b8762f,stroke:#8a5722,color:#fff

Usage

Module Import

import { JoinGridModule } from '@memberjunction/ng-join-grid';

@NgModule({
  imports: [JoinGridModule]
})
export class YourModule {}

Entity Mode (Many-to-Many)

<mj-join-grid
  [RowsEntityName]="'Users'"
  [RowsEntityDisplayField]="'UserName'"
  [ColumnsEntityName]="'Roles'"
  [ColumnsEntityDisplayField]="'RoleName'"
  [JoinEntityName]="'UserRoles'"
  [JoinEntityRowForeignKey]="'UserID'"
  [JoinEntityColumnForeignKey]="'RoleID'"
  [CheckBoxValueMode]="'RecordExists'"
  [ShowSaveButton]="true"
  [ShowCancelButton]="true">
</mj-join-grid>

Fields Mode (Direct Editing)

<mj-join-grid
  [RowsEntityName]="'Users'"
  [RowsEntityDisplayField]="'UserName'"
  [ColumnsMode]="'Fields'"
  [JoinEntityName]="'UserPreferences'"
  [JoinEntityRowForeignKey]="'UserID'"
  [JoinEntityDisplayColumns]="['PreferenceType', 'PreferenceValue']"
  [ShowSaveButton]="true">
</mj-join-grid>

Operation Modes

| Mode | CheckBoxValueMode | Behavior | |------|---------------------|----------| | Entity + RecordExists | 'RecordExists' | Checkbox creates/deletes junction records | | Entity + ColumnValue | 'ColumnValue' | Checkbox toggles a boolean field on existing records | | Fields | N/A | Displays and edits field values in the join entity |

Key Inputs

Row Configuration

| Input | Type | Default | Description | |-------|------|---------|-------------| | RowsEntityName | string | -- | Entity for rows (required) | | RowsEntityDisplayField | string | -- | Field to display in first column (required) | | RowsEntityDataSource | 'FullEntity' \| 'ViewName' \| 'Array' | 'FullEntity' | Data source type | | RowsExtraFilter | string | -- | SQL filter for rows | | RowsOrderBy | string | -- | SQL order by for rows |

Column Configuration

| Input | Type | Default | Description | |-------|------|---------|-------------| | ColumnsMode | 'Entity' \| 'Fields' | 'Entity' | Column generation mode | | ColumnsEntityName | string | -- | Entity for columns (Entity mode) | | ColumnsEntityDisplayField | string | -- | Field for column headers |

Join Entity Configuration

| Input | Type | Default | Description | |-------|------|---------|-------------| | JoinEntityName | string | -- | Junction entity name (required) | | JoinEntityRowForeignKey | string | -- | FK linking to row entity (required) | | JoinEntityColumnForeignKey | string | -- | FK linking to column entity (required) | | CheckBoxValueMode | 'RecordExists' \| 'ColumnValue' | 'RecordExists' | How checkbox state is determined | | EditMode | 'None' \| 'Save' \| 'Queue' | 'None' | Editing mode for form integration |

Public Methods

| Method | Returns | Description | |--------|---------|-------------| | Refresh() | Promise<void> | Reload all grid data | | Save() | Promise<boolean> | Save all pending changes | | CancelEdit() | void | Cancel pending changes |

Exported Classes

• JoinGridCell -- Represents a single cell in the grid
• JoinGridRow -- Represents a row with column data

Dependencies

• @memberjunction/core -- Metadata, RunView, BaseEntity
• @memberjunction/ng-shared -- Shared Angular utilities
• @progress/kendo-angular-grid -- Grid rendering