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.
npm install @memberjunction/ng-record-selector
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
import { RecordSelectorModule } from '@memberjunction/ng-record-selector';
@NgModule({
imports: [RecordSelectorModule]
})
export class YourModule {}
<mj-record-selector
[EntityName]="'Users'"
[DisplayField]="'UserName'"
[SelectedRecords]="preSelectedUsers"
(OnRecordListChanged)="onSelectionChanged($event)">
</mj-record-selector>
<mj-record-selector
[EntityName]="'Products'"
[DisplayField]="'Name'"
[DisplayIconField]="'IconClass'"
[AvailableRecords]="filteredProducts"
[UnselectedRecords]="unselectedProducts"
[SelectedRecords]="selectedProducts"
[ToolbarSettings]="toolbarConfig"
(OnRecordListChanged)="handleChange($event)">
</mj-record-selector>
mj-record-selector
| 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 |
| Event | Type | Description |
|---|---|---|
OnRecordListChanged |
EventEmitter<RecordListChangedEvent> |
Emitted when records move between lists |
@progress/kendo-angular-listbox -- Dual listbox rendering@progress/kendo-angular-buttons -- Toolbar buttons