@memberjunction/ng-record-selector

A dual-listbox Angular component for selecting entity records in MemberJunction applications. Provides a drag-and-drop or button-based interface for moving records between “available” and “selected” lists.

Installation

npm install @memberjunction/ng-record-selector

Overview

The Record Selector renders two side-by-side Kendo ListBox panels: one for available records and one for selected records. Users can transfer records between lists using toolbar buttons or drag-and-drop. It supports loading data from any MemberJunction entity and emits events when selections change.

flowchart LR
    subgraph Available["Available Records"]
        A["Record 1"]
        B["Record 2"]
        C["Record 3"]
    end
    subgraph Controls["Transfer Controls"]
        D["Move Right >>"]
        E["<< Move Left"]
        F["Move All >>"]
        G["<< Move All"]
    end
    subgraph Selected["Selected Records"]
        H["Record 4"]
        I["Record 5"]
    end

    Available --> Controls
    Controls --> Selected

    style Available fill:#2d6a9f,stroke:#1a4971,color:#fff
    style Controls fill:#7c5295,stroke:#563a6b,color:#fff
    style Selected fill:#2d8659,stroke:#1a5c3a,color:#fff

Usage

Module Import

import { RecordSelectorModule } from '@memberjunction/ng-record-selector';

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

Basic Usage

<mj-record-selector
  [EntityName]="'Users'"
  [DisplayField]="'UserName'"
  [SelectedRecords]="preSelectedUsers"
  (OnRecordListChanged)="onSelectionChanged($event)">
</mj-record-selector>

With Custom Configuration

<mj-record-selector
  [EntityName]="'Products'"
  [DisplayField]="'Name'"
  [DisplayIconField]="'IconClass'"
  [AvailableRecords]="filteredProducts"
  [UnselectedRecords]="unselectedProducts"
  [SelectedRecords]="selectedProducts"
  [ToolbarSettings]="toolbarConfig"
  (OnRecordListChanged)="handleChange($event)">
</mj-record-selector>

API Reference

Selector

mj-record-selector

Inputs

Property	Type	Default	Description
EntityName	string	''	MemberJunction entity to load records from
DisplayField	string	''	Field name to display as the label in each list item
DisplayIconField	string	''	Optional field for icon class on list items
AvailableRecords	BaseEntity[]	[]	Full set of available records
SelectedRecords	BaseEntity[]	[]	Records already selected
UnselectedRecords	BaseEntity[]	[]	Records explicitly unselected
ToolbarSettings	ToolbarSettings	default	Kendo ListBox toolbar configuration

Outputs

Event	Type	Description
OnRecordListChanged	EventEmitter<RecordListChangedEvent>	Emitted when records move between lists

Dependencies

• @memberjunction/core — Metadata, BaseEntity
• @progress/kendo-angular-listbox — Dual listbox rendering
• @progress/kendo-angular-buttons — Toolbar buttons

Related Packages

• @memberjunction/ng-find-record — Search-based record selection
• @memberjunction/ng-join-grid — Grid-based many-to-many management