@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
Copy

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
Copy

Usage

Module Import

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

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

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>
Copy

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>
Copy

Operation Modes

Key Inputs

Row Configuration

Column Configuration

Join Entity Configuration

Public Methods

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