@memberjunction/ng-join-grid 1.7.0 → 1.8.0

package/dist/lib/join-grid/join-grid.component.d.ts

@@ -1,25 +1,40 @@
-import { AfterViewInit, ChangeDetectorRef } from '@angular/core';
-import { BaseEntity, EntityInfo } from '@memberjunction/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef } from '@angular/core';
+import { BaseEntity, EntityFieldInfo, EntityInfo } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 export declare class JoinGridCell {
     index: number;
     RowForeignKeyValue: any;
-    ColumnForeignKeyValue: any;
-    data: BaseEntity | undefined;
+    ColumnForeignKeyValue?: any;
+    /**
+     * Used when the ColumnsMode is set to Entity. This is the BaseEntity object that represents the data in the JoinEntity that links the Row and Column entities together.
+     */
+    data?: BaseEntity | undefined;
+    /**
+     * Used when the ColumnsMode is set to Fields. This is an array of values from the JoinEntity that are displayed as columns in the grid.
+     */
+    value?: any;
 }
 export declare class JoinGridRow {
     FirstColValue: any;
     JoinExists: boolean;
     RowForeignKeyValue: any;
     ColumnData: JoinGridCell[];
+    GetColumnValue(colIndex: number): any;
+    constructor(data: any);
 }
 export declare class JoinGridComponent implements AfterViewInit {
     private cdr;
+    private elementRef;
     /**
      * Required: the name of the entity that will be used for displaying data for rows. This means that each row in the RowsEntity will be shown as a row in the grid
      * where the RowsEntityDisplayField will be used in the first column of the grid.
      */
     RowsEntityName: string;
+    /**
+     * Optional: if provided, this value will be shown in the top-left corner of the grid instead of the RowsEntityName
+     */
+    RowsEntityDisplayName?: string;
+    get RowsEntityDisplayNameOrName(): string;
     /**
      * Required: the field name in the RowsEntityName that will be shown in the first column in the grid
      */
@@ -99,6 +114,12 @@ export declare class JoinGridComponent implements AfterViewInit {
      */
     JoinEntityDisplayColumns?: string[];
     /**
+     * When specified, this filter is used to further constrain the data in the JoinEntity. This is optional but is generally
+     * most useful when ColumnsMode is set to Fields and you want to filter the data in the JoinEntity based on some criteria.
+     */
+    JoinEntityExtraFilter?: string;
+    /**
+     * ONLY USED WHEN ColumnsMode=Entity
      * When this property is set to JoinRecordExists the grid will operate as follows:
      *  * When a user checks the checkbox in the grid, a record will be created in the JoinEntity with the Row and Column foreign keys.
      *  * When a user unchecks the checkbox in the grid, the record in the JoinEntity will be deleted.
@@ -118,14 +139,27 @@ export declare class JoinGridComponent implements AfterViewInit {
     NewRecordDefaultValues?: {
         [key: string]: any;
     };
-    ngAfterViewInit(): void;
-    constructor(cdr: ChangeDetectorRef);
+    /**
+     * When set to true, the Save button is shown
+     */
+    ShowSaveButton: boolean;
+    /**
+     * When set to true, the Cancel button is shown
+     */
+    ShowCancelButton: boolean;
+    /**
+     * Change the value of this property to true or false when you want to enter or exit edit mode. Only use this when the grid
+     * is embedded in another form and you are not showing the built-in save/cancel buttons
+     */
+    EditMode: 'None' | 'Save' | 'Queue';
+    constructor(cdr: ChangeDetectorRef, elementRef: ElementRef);
     _GridData: JoinGridRow[];
     _IsLoading: boolean;
     protected _rowsEntityInfo: EntityInfo | null;
     protected _columnsEntityInfo: EntityInfo | null;
     protected _columnsEntityData: BaseEntity[] | undefined;
     protected _rowsEntityData: BaseEntity[] | undefined;
+    protected _joinEntityData: BaseEntity[] | undefined;
     /**
      * Saves all of the changes made in the grid. This includes adding new records, updating existing records, and deleting records.
      */
@@ -143,11 +177,37 @@ export declare class JoinGridComponent implements AfterViewInit {
     Refresh(): Promise<void>;
     protected PopulateRowsAndColsData(): Promise<void>;
     protected RunColumnsOrRowsView(dataSource: 'FullEntity' | 'ViewName', entityName: string, viewName?: string, extraFilter?: string, orderBy?: string): Promise<BaseEntity[]>;
-    protected PopulateGridData(joinEntityData: BaseEntity[]): Promise<void>;
+    protected PopulateGridData(): Promise<void>;
     protected _pendingDeletes: BaseEntity[];
     protected _pendingInserts: BaseEntity[];
     _FlipRecord(event: MouseEvent, row: JoinGridRow, cell: JoinGridCell, stopPropagation?: boolean): Promise<void>;
     _IsColumnChecked(cell: JoinGridCell): boolean;
+    UpdateCellValueDirect(row: JoinGridRow, colIndex: number, newValue: string): Promise<void>;
+    UpdateCellValue(row: JoinGridRow, colIndex: number, event: Event): Promise<void>;
+    /**
+     * Only used when ColumnsMode = Fields
+     * @param row
+     */
+    RemoveJoinEntityRecord(row: JoinGridRow): Promise<void>;
+    /**
+     * Only used when ColumnsMode = Fields
+     */
+    AddJoinEntityRecord(row: JoinGridRow): Promise<void>;
+    protected EditingComplete(): Promise<void>;
+    protected RevertPendingChanges(): Promise<void>;
+    ngAfterViewInit(): void;
+    /**
+     * Returns the EntityFieldInfo that matches the specific column name within the JoinEntity
+     * @param colName
+     */
+    GetJoinEntityField(colName: string): EntityFieldInfo;
+    GetJoinEntityFieldValues(colName: string): string[];
+    get EntityFieldTSType(): {
+        readonly String: "string";
+        readonly Number: "number";
+        readonly Date: "Date";
+        readonly Boolean: "boolean";
+    };
     static ɵfac: i0.ɵɵFactoryDeclaration<JoinGridComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<JoinGridComponent, "mj-join-grid", never, { "RowsEntityName": { "alias": "RowsEntityName"; "required": false; }; "RowsEntityDisplayField": { "alias": "RowsEntityDisplayField"; "required": false; }; "RowsEntityDataSource": { "alias": "RowsEntityDataSource"; "required": false; }; "RowsExtraFilter": { "alias": "RowsExtraFilter"; "required": false; }; "RowsOrderBy": { "alias": "RowsOrderBy"; "required": false; }; "RowsEntityViewName": { "alias": "RowsEntityViewName"; "required": false; }; "RowsEntityArray": { "alias": "RowsEntityArray"; "required": false; }; "ColumnsMode": { "alias": "ColumnsMode"; "required": false; }; "ColumnsEntityName": { "alias": "ColumnsEntityName"; "required": false; }; "ColumnsEntityDisplayField": { "alias": "ColumnsEntityDisplayField"; "required": false; }; "ColumnsEntityDataSource": { "alias": "ColumnsEntityDataSource"; "required": false; }; "ColumnsExtraFilter": { "alias": "ColumnsExtraFilter"; "required": false; }; "ColumnsOrderBy": { "alias": "ColumnsOrderBy"; "required": false; }; "ColumnsEntityViewName": { "alias": "ColumnsEntityViewName"; "required": false; }; "ColumnsEntityArray": { "alias": "ColumnsEntityArray"; "required": false; }; "JoinEntityName": { "alias": "JoinEntityName"; "required": false; }; "JoinEntityRowForeignKey": { "alias": "JoinEntityRowForeignKey"; "required": false; }; "JoinEntityColumnForeignKey": { "alias": "JoinEntityColumnForeignKey"; "required": false; }; "JoinEntityDisplayColumns": { "alias": "JoinEntityDisplayColumns"; "required": false; }; "CheckBoxValueMode": { "alias": "CheckBoxValueMode"; "required": false; }; "CheckBoxValueField": { "alias": "CheckBoxValueField"; "required": false; }; "NewRecordDefaultValues": { "alias": "NewRecordDefaultValues"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<JoinGridComponent, "mj-join-grid", never, { "RowsEntityName": { "alias": "RowsEntityName"; "required": false; }; "RowsEntityDisplayName": { "alias": "RowsEntityDisplayName"; "required": false; }; "RowsEntityDisplayField": { "alias": "RowsEntityDisplayField"; "required": false; }; "RowsEntityDataSource": { "alias": "RowsEntityDataSource"; "required": false; }; "RowsExtraFilter": { "alias": "RowsExtraFilter"; "required": false; }; "RowsOrderBy": { "alias": "RowsOrderBy"; "required": false; }; "RowsEntityViewName": { "alias": "RowsEntityViewName"; "required": false; }; "RowsEntityArray": { "alias": "RowsEntityArray"; "required": false; }; "ColumnsMode": { "alias": "ColumnsMode"; "required": false; }; "ColumnsEntityName": { "alias": "ColumnsEntityName"; "required": false; }; "ColumnsEntityDisplayField": { "alias": "ColumnsEntityDisplayField"; "required": false; }; "ColumnsEntityDataSource": { "alias": "ColumnsEntityDataSource"; "required": false; }; "ColumnsExtraFilter": { "alias": "ColumnsExtraFilter"; "required": false; }; "ColumnsOrderBy": { "alias": "ColumnsOrderBy"; "required": false; }; "ColumnsEntityViewName": { "alias": "ColumnsEntityViewName"; "required": false; }; "ColumnsEntityArray": { "alias": "ColumnsEntityArray"; "required": false; }; "JoinEntityName": { "alias": "JoinEntityName"; "required": false; }; "JoinEntityRowForeignKey": { "alias": "JoinEntityRowForeignKey"; "required": false; }; "JoinEntityColumnForeignKey": { "alias": "JoinEntityColumnForeignKey"; "required": false; }; "JoinEntityDisplayColumns": { "alias": "JoinEntityDisplayColumns"; "required": false; }; "JoinEntityExtraFilter": { "alias": "JoinEntityExtraFilter"; "required": false; }; "CheckBoxValueMode": { "alias": "CheckBoxValueMode"; "required": false; }; "CheckBoxValueField": { "alias": "CheckBoxValueField"; "required": false; }; "NewRecordDefaultValues": { "alias": "NewRecordDefaultValues"; "required": false; }; "ShowSaveButton": { "alias": "ShowSaveButton"; "required": false; }; "ShowCancelButton": { "alias": "ShowCancelButton"; "required": false; }; "EditMode": { "alias": "EditMode"; "required": false; }; }, {}, never, never, false, never>;
 }

package/dist/lib/join-grid/join-grid.component.js

@@ -8,107 +8,235 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { Component, Input } from '@angular/core';
-import { Metadata, RunView } from '@memberjunction/core';
+import { EntityFieldTSType, LogError, Metadata, RunView } from '@memberjunction/core';
+import { MJEventType, MJGlobal } from '@memberjunction/global';
+import { SharedService } from '@memberjunction/ng-shared';
+import { BaseFormComponentEventCodes } from '@memberjunction/ng-base-types';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-import * as i2 from "@progress/kendo-angular-buttons";
-import * as i3 from "@progress/kendo-angular-indicators";
-import * as i4 from "@memberjunction/ng-container-directives";
+import * as i2 from "@progress/kendo-angular-inputs";
+import * as i3 from "@progress/kendo-angular-buttons";
+import * as i4 from "@progress/kendo-angular-dropdowns";
+import * as i5 from "@progress/kendo-angular-indicators";
+import * as i6 from "@memberjunction/ng-container-directives";
 function JoinGridComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
     i0.ɵɵelement(1, "kendo-loader");
     i0.ɵɵelementEnd();
 } }
-function JoinGridComponent_Conditional_6_Conditional_5_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "th");
+function JoinGridComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 3);
+    i0.ɵɵlistener("click", function JoinGridComponent_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Save()); });
+    i0.ɵɵtext(1, "Save");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("disabled", ctx_r1.NumDirtyRecords === 0);
+} }
+function JoinGridComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 3);
+    i0.ɵɵlistener("click", function JoinGridComponent_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CancelEdit()); });
+    i0.ɵɵtext(1, "Cancel");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("disabled", ctx_r1.NumDirtyRecords === 0);
+} }
+function JoinGridComponent_Conditional_4_Conditional_5_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th", 5);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const colRecord_r1 = ctx.$implicit;
+    const colRecord_r4 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(colRecord_r1.Get(ctx_r1.ColumnsEntityDisplayField));
+    i0.ɵɵtextInterpolate(colRecord_r4.Get(ctx_r1.ColumnsEntityDisplayField));
 } }
-function JoinGridComponent_Conditional_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, JoinGridComponent_Conditional_6_Conditional_5_For_1_Template, 2, 1, "th", null, i0.ɵɵrepeaterTrackByIdentity);
+function JoinGridComponent_Conditional_4_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, JoinGridComponent_Conditional_4_Conditional_5_For_1_Template, 2, 1, "th", 5, i0.ɵɵrepeaterTrackByIdentity);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵrepeater(ctx_r1._columnsEntityData);
 } }
-function JoinGridComponent_Conditional_6_Conditional_6_For_1_Template(rf, ctx) { if (rf & 1) {
+function JoinGridComponent_Conditional_4_Conditional_6_For_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "th");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const colName_r3 = ctx.$implicit;
+    const colName_r5 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(colName_r3);
+    i0.ɵɵtextInterpolate(colName_r5);
 } }
-function JoinGridComponent_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, JoinGridComponent_Conditional_6_Conditional_6_For_1_Template, 2, 1, "th", null, i0.ɵɵrepeaterTrackByIdentity);
+function JoinGridComponent_Conditional_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, JoinGridComponent_Conditional_4_Conditional_6_For_1_Template, 2, 1, "th", null, i0.ɵɵrepeaterTrackByIdentity);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵrepeater(ctx_r1.JoinEntityDisplayColumns);
 } }
-function JoinGridComponent_Conditional_6_For_9_Conditional_4_td_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "td");
-    i0.ɵɵelement(1, "input", 6);
+function JoinGridComponent_Conditional_4_For_9_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 9);
+    i0.ɵɵlistener("click", function JoinGridComponent_Conditional_4_For_9_Conditional_4_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const row_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.AddJoinEntityRecord(row_r7)); });
+    i0.ɵɵelement(1, "span", 10);
+    i0.ɵɵelementEnd();
+} }
+function JoinGridComponent_Conditional_4_For_9_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 9);
+    i0.ɵɵlistener("click", function JoinGridComponent_Conditional_4_For_9_Conditional_4_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const row_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.RemoveJoinEntityRecord(row_r7)); });
+    i0.ɵɵelement(1, "span", 11);
+    i0.ɵɵelementEnd();
+} }
+function JoinGridComponent_Conditional_4_For_9_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, JoinGridComponent_Conditional_4_For_9_Conditional_4_Conditional_0_Template, 2, 0, "button", 8)(1, JoinGridComponent_Conditional_4_For_9_Conditional_4_Conditional_1_Template, 2, 0, "button", 8);
+} if (rf & 2) {
+    const row_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵconditional(!row_r7.JoinExists ? 0 : 1);
+} }
+function JoinGridComponent_Conditional_4_For_9_Conditional_5_td_0_Conditional_1_Conditional_0_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 16);
+    i0.ɵɵlistener("change", function JoinGridComponent_Conditional_4_For_9_Conditional_5_td_0_Conditional_1_Conditional_0_Conditional_0_Conditional_0_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r9); const i_r10 = i0.ɵɵnextContext(4).index; const row_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.UpdateCellValue(row_r7, i_r10, $event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const i_r10 = i0.ɵɵnextContext(4).index;
+    const row_r7 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("checked", row_r7.GetColumnValue(i_r10));
+} }
+function JoinGridComponent_Conditional_4_For_9_Conditional_5_td_0_Conditional_1_Conditional_0_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-textbox", 17);
+    i0.ɵɵlistener("change", function JoinGridComponent_Conditional_4_For_9_Conditional_5_td_0_Conditional_1_Conditional_0_Conditional_0_Conditional_1_Template_kendo_textbox_change_0_listener($event) { i0.ɵɵrestoreView(_r11); const i_r10 = i0.ɵɵnextContext(4).index; const row_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.UpdateCellValue(row_r7, i_r10, $event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const i_r10 = i0.ɵɵnextContext(4).index;
+    const row_r7 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("value", row_r7.GetColumnValue(i_r10));
+} }
+function JoinGridComponent_Conditional_4_For_9_Conditional_5_td_0_Conditional_1_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, JoinGridComponent_Conditional_4_For_9_Conditional_5_td_0_Conditional_1_Conditional_0_Conditional_0_Conditional_0_Template, 1, 1, "input", 14)(1, JoinGridComponent_Conditional_4_For_9_Conditional_5_td_0_Conditional_1_Conditional_0_Conditional_0_Conditional_1_Template, 1, 1, "kendo-textbox", 15);
+} if (rf & 2) {
+    const colName_r12 = i0.ɵɵnextContext(3).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵconditional(ctx_r1.GetJoinEntityField(colName_r12).TSType === ctx_r1.EntityFieldTSType.Boolean ? 0 : 1);
+} }
+function JoinGridComponent_Conditional_4_For_9_Conditional_5_td_0_Conditional_1_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dropdownlist", 18);
+    i0.ɵɵlistener("selectionChange", function JoinGridComponent_Conditional_4_For_9_Conditional_5_td_0_Conditional_1_Conditional_0_Conditional_1_Template_kendo_dropdownlist_selectionChange_0_listener($event) { i0.ɵɵrestoreView(_r13); const i_r10 = i0.ɵɵnextContext(3).index; const row_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.UpdateCellValueDirect(row_r7, i_r10, $event)); });
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r13 = i0.ɵɵnextContext(3);
+    const colName_r12 = ctx_r13.$implicit;
+    const i_r10 = ctx_r13.index;
+    const row_r7 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("data", ctx_r1.GetJoinEntityFieldValues(colName_r12))("value", row_r7.GetColumnValue(i_r10));
+} }
+function JoinGridComponent_Conditional_4_For_9_Conditional_5_td_0_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, JoinGridComponent_Conditional_4_For_9_Conditional_5_td_0_Conditional_1_Conditional_0_Conditional_0_Template, 2, 1)(1, JoinGridComponent_Conditional_4_For_9_Conditional_5_td_0_Conditional_1_Conditional_0_Conditional_1_Template, 1, 2, "kendo-dropdownlist", 13);
+} if (rf & 2) {
+    const colName_r12 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵconditional(ctx_r1.GetJoinEntityField(colName_r12).ValueListType === "None" ? 0 : 1);
 } }
-function JoinGridComponent_Conditional_6_For_9_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, JoinGridComponent_Conditional_6_For_9_Conditional_4_td_0_Template, 2, 0, "td", 5);
+function JoinGridComponent_Conditional_4_For_9_Conditional_5_td_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, JoinGridComponent_Conditional_4_For_9_Conditional_5_td_0_Conditional_1_Conditional_0_Template, 2, 1);
+} if (rf & 2) {
+    const row_r7 = i0.ɵɵnextContext(3).$implicit;
+    i0.ɵɵconditional(row_r7.JoinExists ? 0 : -1);
+} }
+function JoinGridComponent_Conditional_4_For_9_Conditional_5_td_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const i_r10 = i0.ɵɵnextContext().index;
+    const row_r7 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵtextInterpolate1(" ", row_r7.GetColumnValue(i_r10), " ");
+} }
+function JoinGridComponent_Conditional_4_For_9_Conditional_5_td_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td", 7);
+    i0.ɵɵtemplate(1, JoinGridComponent_Conditional_4_For_9_Conditional_5_td_0_Conditional_1_Template, 1, 1)(2, JoinGridComponent_Conditional_4_For_9_Conditional_5_td_0_Conditional_2_Template, 1, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.EditMode !== "None" ? 1 : 2);
+} }
+function JoinGridComponent_Conditional_4_For_9_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, JoinGridComponent_Conditional_4_For_9_Conditional_5_td_0_Template, 3, 1, "td", 12);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngForOf", ctx_r1.JoinEntityDisplayColumns);
 } }
-function JoinGridComponent_Conditional_6_For_9_Conditional_5_For_1_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td", 7);
-    i0.ɵɵlistener("click", function JoinGridComponent_Conditional_6_For_9_Conditional_5_For_1_Template_td_click_0_listener($event) { const cell_r5 = i0.ɵɵrestoreView(_r4).$implicit; const row_r6 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1._FlipRecord($event, row_r6, cell_r5)); });
-    i0.ɵɵelementStart(1, "input", 8);
-    i0.ɵɵlistener("click", function JoinGridComponent_Conditional_6_For_9_Conditional_5_For_1_Template_input_click_1_listener($event) { const cell_r5 = i0.ɵɵrestoreView(_r4).$implicit; const row_r6 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1._FlipRecord($event, row_r6, cell_r5, true)); });
-    i0.ɵɵelementEnd()();
+function JoinGridComponent_Conditional_4_For_9_Conditional_6_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 22);
+    i0.ɵɵlistener("click", function JoinGridComponent_Conditional_4_For_9_Conditional_6_For_1_Conditional_1_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r17); const cell_r16 = i0.ɵɵnextContext().$implicit; const row_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1._FlipRecord($event, row_r7, cell_r16, true)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const cell_r16 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("checked", ctx_r1._IsColumnChecked(cell_r16));
+} }
+function JoinGridComponent_Conditional_4_For_9_Conditional_6_For_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const cell_r16 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵtextInterpolate1(" ", cell_r16.value ? "\u2713" : "", " ");
+} }
+function JoinGridComponent_Conditional_4_For_9_Conditional_6_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "td", 20);
+    i0.ɵɵlistener("click", function JoinGridComponent_Conditional_4_For_9_Conditional_6_For_1_Template_td_click_0_listener($event) { const cell_r16 = i0.ɵɵrestoreView(_r15).$implicit; const row_r7 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1._FlipRecord($event, row_r7, cell_r16)); });
+    i0.ɵɵtemplate(1, JoinGridComponent_Conditional_4_For_9_Conditional_6_For_1_Conditional_1_Template, 1, 1, "input", 21)(2, JoinGridComponent_Conditional_4_For_9_Conditional_6_For_1_Conditional_2_Template, 1, 1);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cell_r5 = ctx.$implicit;
+    const cell_r16 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("ngClass", ctx_r1.IsCellReallyDirty(cell_r5) ? "dirty-cell" : "");
+    i0.ɵɵproperty("ngClass", ctx_r1.IsCellReallyDirty(cell_r16) ? "dirty-cell" : "");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r1._IsColumnChecked(cell_r5));
+    i0.ɵɵconditional(ctx_r1.EditMode !== "None" ? 1 : 2);
 } }
-function JoinGridComponent_Conditional_6_For_9_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, JoinGridComponent_Conditional_6_For_9_Conditional_5_For_1_Template, 2, 2, "td", 3, i0.ɵɵrepeaterTrackByIdentity);
+function JoinGridComponent_Conditional_4_For_9_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, JoinGridComponent_Conditional_4_For_9_Conditional_6_For_1_Template, 3, 2, "td", 19, i0.ɵɵrepeaterTrackByIdentity);
 } if (rf & 2) {
-    const row_r6 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵrepeater(row_r6.ColumnData);
+    const row_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵrepeater(row_r7.ColumnData);
 } }
-function JoinGridComponent_Conditional_6_For_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr", 3)(1, "td", 4)(2, "span");
+function JoinGridComponent_Conditional_4_For_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr", 4)(1, "td", 6)(2, "span");
     i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(4, JoinGridComponent_Conditional_6_For_9_Conditional_4_Template, 1, 1, "td")(5, JoinGridComponent_Conditional_6_For_9_Conditional_5_Template, 2, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, JoinGridComponent_Conditional_4_For_9_Conditional_4_Template, 2, 1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, JoinGridComponent_Conditional_4_For_9_Conditional_5_Template, 1, 1, "td", 7)(6, JoinGridComponent_Conditional_4_For_9_Conditional_6_Template, 2, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const row_r6 = ctx.$implicit;
+    const row_r7 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.IsRecordReallyDirty(row_r6) ? "dirty-row" : "");
+    i0.ɵɵproperty("ngClass", ctx_r1.IsRecordReallyDirty(row_r7) ? "dirty-row" : "");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(row_r6.FirstColValue);
+    i0.ɵɵtextInterpolate(row_r7.FirstColValue);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.ColumnsMode === "Fields" ? 4 : 5);
+    i0.ɵɵconditional(ctx_r1.EditMode !== "None" ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ColumnsMode === "Fields" ? 5 : 6);
 } }
-function JoinGridComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function JoinGridComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "table", 2)(1, "thead")(2, "tr")(3, "th");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(5, JoinGridComponent_Conditional_6_Conditional_5_Template, 2, 0)(6, JoinGridComponent_Conditional_6_Conditional_6_Template, 2, 0);
+    i0.ɵɵtemplate(5, JoinGridComponent_Conditional_4_Conditional_5_Template, 2, 0)(6, JoinGridComponent_Conditional_4_Conditional_6_Template, 2, 0);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(7, "tbody");
-    i0.ɵɵrepeaterCreate(8, JoinGridComponent_Conditional_6_For_9_Template, 6, 3, "tr", 3, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(8, JoinGridComponent_Conditional_4_For_9_Template, 7, 4, "tr", 4, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.RowsEntityName);
+    i0.ɵɵtextInterpolate(ctx_r1.RowsEntityDisplayNameOrName);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.ColumnsMode === "Entity" ? 5 : 6);
     i0.ɵɵadvance(3);
@@ -117,18 +245,25 @@ function JoinGridComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
 export class JoinGridCell {
 }
 export class JoinGridRow {
-    constructor() {
+    GetColumnValue(colIndex) {
+        return this.ColumnData && this.ColumnData.length > colIndex ? this.ColumnData[colIndex].value : undefined;
+    }
+    constructor(data) {
         this.JoinExists = false;
         this.ColumnData = [];
+        this.FirstColValue = data.FirstColValue;
+        this.JoinExists = data.JoinExists;
+        this.RowForeignKeyValue = data.RowForeignKeyValue;
+        this.ColumnData = data.ColumnData;
     }
 }
 export class JoinGridComponent {
-    ngAfterViewInit() {
-        // load up the grid
-        this.Refresh();
+    get RowsEntityDisplayNameOrName() {
+        return this.RowsEntityDisplayName ? this.RowsEntityDisplayName : this.RowsEntityName;
     }
-    constructor(cdr) {
+    constructor(cdr, elementRef) {
         this.cdr = cdr;
+        this.elementRef = elementRef;
         /**
          * Determines how the row data will be fetched.
          * * When set to FullEntity, all rows in the specified RowEntityName will be used.
@@ -148,6 +283,7 @@ export class JoinGridComponent {
          */
         this.ColumnsEntityDataSource = 'FullEntity';
         /**
+         * ONLY USED WHEN ColumnsMode=Entity
          * When this property is set to JoinRecordExists the grid will operate as follows:
          *  * When a user checks the checkbox in the grid, a record will be created in the JoinEntity with the Row and Column foreign keys.
          *  * When a user unchecks the checkbox in the grid, the record in the JoinEntity will be deleted.
@@ -156,6 +292,19 @@ export class JoinGridComponent {
          *  * When a user unchecks the checkbox in the grid, the value in the JoinEntity will be set to false in the CheckBoxValueField field.
          */
         this.CheckBoxValueMode = 'RecordExists';
+        /**
+         * When set to true, the Save button is shown
+         */
+        this.ShowSaveButton = true;
+        /**
+         * When set to true, the Cancel button is shown
+         */
+        this.ShowCancelButton = true;
+        /**
+         * Change the value of this property to true or false when you want to enter or exit edit mode. Only use this when the grid
+         * is embedded in another form and you are not showing the built-in save/cancel buttons
+         */
+        this.EditMode = 'None';
         /*The below members are public because the Angular template needs access to them, but by naming convention we prefix with an _ so that it is clear they are not to be used outside of the component */
         this._GridData = [];
         this._IsLoading = false;
@@ -164,6 +313,7 @@ export class JoinGridComponent {
         this._columnsEntityInfo = null;
         this._columnsEntityData = undefined;
         this._rowsEntityData = undefined;
+        this._joinEntityData = undefined;
         this._pendingDeletes = [];
         this._pendingInserts = [];
     }
@@ -172,38 +322,70 @@ export class JoinGridComponent {
      */
     Save() {
         return __awaiter(this, void 0, void 0, function* () {
+            var _a;
             // for each pending delete, we need to delete the record
             // for each pending insert, we need to save the record
             // do it all in one transaction
             const md = new Metadata();
             const tg = yield md.CreateTransactionGroup();
-            let validated = true;
-            const valErrors = [];
-            this._pendingDeletes.forEach(obj => {
-                obj.TransactionGroup = tg;
-                obj.Delete();
-            });
-            this._pendingInserts.forEach(obj => {
-                obj.TransactionGroup = tg;
-                const valResult = obj.Validate();
-                validated = validated && valResult.Success;
-                valErrors.push(valResult.Errors);
-                obj.Save();
-            });
-            if (validated) {
-                if (!(yield tg.Submit())) {
-                    alert('Error saving changes');
-                    return false;
+            if (this.ColumnsMode === 'Entity') {
+                let validated = true;
+                const valErrors = [];
+                this._pendingDeletes.forEach(obj => {
+                    obj.TransactionGroup = tg;
+                    obj.Delete();
+                });
+                this._pendingInserts.forEach(obj => {
+                    obj.TransactionGroup = tg;
+                    const valResult = obj.Validate();
+                    validated = validated && valResult.Success;
+                    valErrors.push(valResult.Errors);
+                    obj.Save();
+                });
+                if (validated) {
+                    if (!(yield tg.Submit())) {
+                        alert('Error saving changes');
+                        return false;
+                    }
+                    else {
+                        yield this.Refresh(); // refresh afterwards
+                        return true;
+                    }
                 }
                 else {
-                    yield this.Refresh(); // refresh afterwards
-                    return true;
+                    alert('Error validating changes, details in console');
+                    console.log(valErrors);
+                    return false;
                 }
             }
             else {
-                alert('Error validating changes, details in console');
-                console.log(valErrors);
-                return false;
+                // in fields mode we use the _joinEntityData array to save the changes
+                let validated = true;
+                const valErrors = [];
+                (_a = this._joinEntityData) === null || _a === void 0 ? void 0 : _a.forEach(obj => {
+                    if (obj.Dirty) {
+                        obj.TransactionGroup = tg;
+                        const valResult = obj.Validate();
+                        validated = validated && valResult.Success;
+                        valErrors.push(valResult.Errors);
+                        obj.Save();
+                    }
+                });
+                if (validated) {
+                    if (!(yield tg.Submit())) {
+                        alert('Error saving changes');
+                        return false;
+                    }
+                    else {
+                        yield this.Refresh(); // refresh afterwards
+                        return true;
+                    }
+                }
+                else {
+                    alert('Error validating changes, details in console');
+                    console.log(valErrors);
+                    return false;
+                }
             }
         });
     }
@@ -268,21 +450,27 @@ export class JoinGridComponent {
             this.cdr.detectChanges(); // let angular know we have changes
             this._pendingDeletes = [];
             this._pendingInserts = [];
+            this._joinEntityData = undefined;
             // we are provided an array of Column and Row objects. We need to get the rows from the JoinEntity that link them up.
             const md = new Metadata();
+            if (this.ColumnsMode === 'Entity') {
+                this._columnsEntityInfo = md.EntityByName(this.ColumnsEntityName);
+                if (!this._columnsEntityInfo)
+                    throw new Error('Invalid entity name provided for columns entity.');
+            }
             this._rowsEntityInfo = md.EntityByName(this.RowsEntityName);
-            this._columnsEntityInfo = md.EntityByName(this.ColumnsEntityName);
             if (!this._rowsEntityInfo)
                 throw new Error('Invalid entity name provided for rows entity.');
-            if (!this._columnsEntityInfo)
-                throw new Error('Invalid entity name provided for columns entity.');
             yield this.PopulateRowsAndColsData();
             const rowQuotes = this._rowsEntityInfo.FirstPrimaryKey.NeedsQuotes ? "'" : "";
             let filter = `${this.JoinEntityRowForeignKey} IN (${this._rowsEntityData.map(obj => `${rowQuotes}${obj.Get(this._rowsEntityInfo.FirstPrimaryKey.Name)}${rowQuotes}`).join(',')})`;
-            if (this.ColumnsMode === 'Entity') {
+            if (this.ColumnsMode === 'Entity' && this._columnsEntityInfo) {
                 const colQuotes = this._columnsEntityInfo.FirstPrimaryKey.NeedsQuotes ? "'" : "";
                 filter += ` AND ${this.JoinEntityColumnForeignKey} IN (${this._columnsEntityData.map(obj => `${colQuotes}${obj.Get(this._columnsEntityInfo.FirstPrimaryKey.Name)}${colQuotes}`).join(',')})`;
             }
+            if (this.JoinEntityExtraFilter) {
+                filter = `(${filter}) AND (${this.JoinEntityExtraFilter})`;
+            }
             const rv = new RunView();
             const result = yield rv.RunView({
                 EntityName: this.JoinEntityName,
@@ -291,7 +479,8 @@ export class JoinGridComponent {
             });
             if (result && result.Success) {
                 // we have the data, now we need to build the grid
-                this.PopulateGridData(result.Results);
+                this._joinEntityData = result.Results;
+                this.PopulateGridData();
             }
             this._IsLoading = false; // turn off the loading spinner
             this.cdr.detectChanges(); // let Angular know we have changes
@@ -300,11 +489,14 @@ export class JoinGridComponent {
     PopulateRowsAndColsData() {
         return __awaiter(this, void 0, void 0, function* () {
             const rv = new RunView();
-            if (this.ColumnsEntityDataSource === 'Array') {
-                this._columnsEntityData = this.ColumnsEntityArray;
-            }
-            else {
-                this._columnsEntityData = yield this.RunColumnsOrRowsView(this.ColumnsEntityDataSource, this.ColumnsEntityName, this.ColumnsEntityViewName, this.ColumnsExtraFilter, this.ColumnsOrderBy);
+            if (this.ColumnsMode === 'Entity') {
+                // only populate the columns if we are using the entity mode, otherwise the array from JoinGridDisplayColumns will be used
+                if (this.ColumnsEntityDataSource === 'Array') {
+                    this._columnsEntityData = this.ColumnsEntityArray;
+                }
+                else {
+                    this._columnsEntityData = yield this.RunColumnsOrRowsView(this.ColumnsEntityDataSource, this.ColumnsEntityName, this.ColumnsEntityViewName, this.ColumnsExtraFilter, this.ColumnsOrderBy);
+                }
             }
             if (this.RowsEntityDataSource === 'Array') {
                 this._rowsEntityData = this.RowsEntityArray;
@@ -332,24 +524,27 @@ export class JoinGridComponent {
             }
         });
     }
-    PopulateGridData(joinEntityData) {
+    PopulateGridData() {
         return __awaiter(this, void 0, void 0, function* () {
             // we have the data, now we need to build the grid
             // we need to build the grid data
+            if (!this._joinEntityData)
+                throw new Error('_joinEntityData must be populated before calling PopulateGridData()');
             const gridData = [];
-            this._rowsEntityData.forEach(row => {
-                let rowData = {
+            this._rowsEntityData.forEach((row, rowIndex) => {
+                let rowData = new JoinGridRow({
                     FirstColValue: row.Get(this.RowsEntityDisplayField),
                     JoinExists: false,
                     RowForeignKeyValue: row.Get(this._rowsEntityInfo.FirstPrimaryKey.Name),
                     ColumnData: [] // start off with an empty array
-                };
+                });
                 // for the mode where we are using columns, do the following
                 if (this.ColumnsMode === 'Entity') {
                     for (let i = 0; i < this._columnsEntityData.length; i++) {
                         const column = this._columnsEntityData[i];
-                        const join = joinEntityData.find(j => j.Get(this.JoinEntityRowForeignKey) === row.Get(this._rowsEntityInfo.FirstPrimaryKey.Name) &&
+                        const join = this._joinEntityData.find(j => j.Get(this.JoinEntityRowForeignKey) === row.Get(this._rowsEntityInfo.FirstPrimaryKey.Name) &&
                             j.Get(this.JoinEntityColumnForeignKey) === column.Get(this._columnsEntityInfo.FirstPrimaryKey.Name));
+                        rowData.JoinExists = true;
                         rowData.ColumnData.push({
                             index: i,
                             ColumnForeignKeyValue: column.Get(this._columnsEntityInfo.FirstPrimaryKey.Name),
@@ -359,7 +554,21 @@ export class JoinGridComponent {
                     }
                 }
                 else {
+                    if (!this.JoinEntityDisplayColumns)
+                        throw new Error('JoinEntityDisplayColumns is required when ColumnsMode is set to Fields');
                     // we are display the values from the JoinEntity as columns from the JoinEntityDisplayColumns array
+                    this.JoinEntityDisplayColumns.forEach((col, i) => {
+                        const joinData = this._joinEntityData.find(jed => jed.Get(this.JoinEntityRowForeignKey) === row.FirstPrimaryKey.Value);
+                        // joinData being undefined/null is a valid condition just means no join data for the row specified
+                        if (joinData) {
+                            rowData.JoinExists = true;
+                            rowData.ColumnData.push({
+                                index: i,
+                                RowForeignKeyValue: rowData.RowForeignKeyValue,
+                                value: joinData.Get(col)
+                            });
+                        }
+                    });
                 }
                 gridData.push(rowData);
             });
@@ -407,35 +616,185 @@ export class JoinGridComponent {
     _IsColumnChecked(cell) {
         return (cell === null || cell === void 0 ? void 0 : cell.data) !== undefined;
     }
+    UpdateCellValueDirect(row, colIndex, newValue) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // find the associated baseEntity object and update the value and then refresh the grid state from it
+            if (this.ColumnsMode !== 'Fields')
+                throw new Error("This method should only be called when ColumnsMode=Entity");
+            // we are good now, so now proceed to find the related object that ties to the rowForeignKey in
+            // the join entity data array
+            const joinData = this._joinEntityData.find(jed => jed.Get(this.JoinEntityRowForeignKey) === row.RowForeignKeyValue);
+            if (!joinData)
+                LogError('Could not find join data for rowForeignKey ' + row.RowForeignKeyValue);
+            else {
+                const colName = this.JoinEntityDisplayColumns[colIndex];
+                joinData.Set(colName, newValue);
+                // also update the row's column array
+                row.ColumnData[colIndex].value = joinData.Get(colName);
+            }
+        });
+    }
+    UpdateCellValue(row, colIndex, event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.UpdateCellValueDirect(row, colIndex, event.target.value);
+        });
+    }
+    /**
+     * Only used when ColumnsMode = Fields
+     * @param row
+     */
+    RemoveJoinEntityRecord(row) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            // this method is called when the user wnats to remove a record that maps to the cell for the row specified and the colIndex
+            // only used when Mode = Fields
+            if (this.ColumnsMode !== 'Fields')
+                throw new Error('This method should only be called when ColumnsMode=Entity');
+            const joinData = this._joinEntityData.find(jed => jed.Get(this.JoinEntityRowForeignKey) === row.RowForeignKeyValue);
+            if (!joinData)
+                LogError('Could not find join data for rowForeignKey ' + row.RowForeignKeyValue);
+            else {
+                this._pendingDeletes.push(joinData);
+                (_a = this._joinEntityData) === null || _a === void 0 ? void 0 : _a.splice(this._joinEntityData.indexOf(joinData), 1);
+                this.PopulateGridData(); // refresh the grid's grid data array that is derived from all of the source data
+            }
+        });
+    }
+    /**
+     * Only used when ColumnsMode = Fields
+     */
+    AddJoinEntityRecord(row) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            // this method is called when the user wnats to create a new record that maps to the cell for the row specified and the colIndex
+            // only used when Mode = Fields
+            if (this.ColumnsMode !== 'Fields')
+                throw new Error('This method should only be called when ColumnsMode=Entity');
+            const md = new Metadata();
+            // first check to see if this is in the _pendingDeletes array, if so, we need to remove it from there
+            let newObj = this._pendingDeletes.find(pd => pd.Get(this.JoinEntityRowForeignKey) === row.RowForeignKeyValue);
+            if (newObj) {
+                this._pendingDeletes.splice(this._pendingDeletes.indexOf(newObj), 1);
+            }
+            else {
+                newObj = yield md.GetEntityObject(this.JoinEntityName);
+                newObj.Set(this.JoinEntityRowForeignKey, row.RowForeignKeyValue);
+            }
+            const keys = this.NewRecordDefaultValues ? Object.keys(this.NewRecordDefaultValues) : [];
+            for (const k of keys) {
+                newObj.Set(k, this.NewRecordDefaultValues[k]);
+            }
+            (_a = this._joinEntityData) === null || _a === void 0 ? void 0 : _a.push(newObj); // add to join data array
+            if (this.EditMode === 'Save') {
+                if (yield newObj.Save()) {
+                    // all good
+                }
+                else {
+                    SharedService.Instance.CreateSimpleNotification('Error saving new ' + this.JoinEntityName + ' record', 'error', 2500);
+                }
+            }
+            this.PopulateGridData(); // refresh the grid's grid data array that is derived from all of the source data
+        });
+    }
+    EditingComplete() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // we've been told that editing is done. If we are in queue mode for editing, we do nothing because we've
+            // already submitted our pending changes via events (below) but if we're in save mode we save stuff now
+            if (this.EditMode === 'Save') {
+                yield this.Save();
+            }
+        });
+    }
+    RevertPendingChanges() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // this method means we should revert back to the last saved state
+            // so just call Refresh
+            yield this.Refresh();
+        });
+    }
+    ngAfterViewInit() {
+        this.Refresh();
+        // setup event listener for MJGlobal because we might have a parent component that sends us messages
+        MJGlobal.Instance.GetEventListener(false).subscribe((e) => {
+            var _a;
+            switch (e.event) {
+                case MJEventType.ComponentEvent:
+                    const b = BaseFormComponentEventCodes; // having issues using the const vs the type if we refer to it below directly for comparison so assign the const to a local variable first
+                    if (e.eventCode === b.BASE_CODE) {
+                        // we have an event from a BaseFormComponent, now we need to determine if WE are a descendant of that component
+                        const event = e.args;
+                        if (SharedService.IsDescendant(event.elementRef, this.elementRef)) {
+                            // we are a descendant of the component that sent the event, so we need to handle it
+                            switch (event.subEventCode) {
+                                case b.EDITING_COMPLETE:
+                                    this.EditingComplete();
+                                    break;
+                                case b.REVERT_PENDING_CHANGES:
+                                    this.RevertPendingChanges();
+                                    break;
+                                case b.POPULATE_PENDING_RECORDS:
+                                    // provide all of our pending records back to the caller
+                                    (_a = this._joinEntityData) === null || _a === void 0 ? void 0 : _a.forEach((r) => {
+                                        // for anything that's changed, we need to add it to the pending records
+                                        const editingEvent = event;
+                                        if (r.Dirty) {
+                                            editingEvent.pendingChanges.push({ entityObject: r, action: 'save' });
+                                        }
+                                    });
+                                    this._pendingDeletes.forEach((r) => {
+                                        const editingEvent = event;
+                                        editingEvent.pendingChanges.push({ entityObject: r, action: 'delete' });
+                                    });
+                                    break;
+                            }
+                        }
+                    }
+                    break;
+            }
+        });
+    }
+    /**
+     * Returns the EntityFieldInfo that matches the specific column name within the JoinEntity
+     * @param colName
+     */
+    GetJoinEntityField(colName) {
+        const md = new Metadata();
+        const entity = md.EntityByName(this.JoinEntityName);
+        if (!entity)
+            throw new Error('Invalid entity name provided for JoinEntity');
+        const field = entity.Fields.find(f => f.Name === colName);
+        if (!field)
+            throw new Error('Invalid field name provided for JoinEntity');
+        return field;
+    }
+    GetJoinEntityFieldValues(colName) {
+        return this.GetJoinEntityField(colName).EntityFieldValues.map(efv => efv.Value);
+    }
+    get EntityFieldTSType() {
+        return EntityFieldTSType;
+    }
 }
-JoinGridComponent.ɵfac = function JoinGridComponent_Factory(t) { return new (t || JoinGridComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-JoinGridComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: JoinGridComponent, selectors: [["mj-join-grid"]], inputs: { RowsEntityName: "RowsEntityName", RowsEntityDisplayField: "RowsEntityDisplayField", RowsEntityDataSource: "RowsEntityDataSource", RowsExtraFilter: "RowsExtraFilter", RowsOrderBy: "RowsOrderBy", RowsEntityViewName: "RowsEntityViewName", RowsEntityArray: "RowsEntityArray", ColumnsMode: "ColumnsMode", ColumnsEntityName: "ColumnsEntityName", ColumnsEntityDisplayField: "ColumnsEntityDisplayField", ColumnsEntityDataSource: "ColumnsEntityDataSource", ColumnsExtraFilter: "ColumnsExtraFilter", ColumnsOrderBy: "ColumnsOrderBy", ColumnsEntityViewName: "ColumnsEntityViewName", ColumnsEntityArray: "ColumnsEntityArray", JoinEntityName: "JoinEntityName", JoinEntityRowForeignKey: "JoinEntityRowForeignKey", JoinEntityColumnForeignKey: "JoinEntityColumnForeignKey", JoinEntityDisplayColumns: "JoinEntityDisplayColumns", CheckBoxValueMode: "CheckBoxValueMode", CheckBoxValueField: "CheckBoxValueField", NewRecordDefaultValues: "NewRecordDefaultValues" }, decls: 7, vars: 4, consts: [["mjFillContainer", "", 1, "wrapper"], ["kendoButton", "", 3, "click", "disabled"], [1, "grid"], [3, "ngClass"], [1, "first-column"], [4, "ngFor", "ngForOf"], ["type", "checkbox", "kendoCheckBox", ""], [3, "click", "ngClass"], ["type", "checkbox", "kendoCheckBox", "", 3, "click", "checked"]], template: function JoinGridComponent_Template(rf, ctx) { if (rf & 1) {
+JoinGridComponent.ɵfac = function JoinGridComponent_Factory(t) { return new (t || JoinGridComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+JoinGridComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: JoinGridComponent, selectors: [["mj-join-grid"]], inputs: { RowsEntityName: "RowsEntityName", RowsEntityDisplayName: "RowsEntityDisplayName", RowsEntityDisplayField: "RowsEntityDisplayField", RowsEntityDataSource: "RowsEntityDataSource", RowsExtraFilter: "RowsExtraFilter", RowsOrderBy: "RowsOrderBy", RowsEntityViewName: "RowsEntityViewName", RowsEntityArray: "RowsEntityArray", ColumnsMode: "ColumnsMode", ColumnsEntityName: "ColumnsEntityName", ColumnsEntityDisplayField: "ColumnsEntityDisplayField", ColumnsEntityDataSource: "ColumnsEntityDataSource", ColumnsExtraFilter: "ColumnsExtraFilter", ColumnsOrderBy: "ColumnsOrderBy", ColumnsEntityViewName: "ColumnsEntityViewName", ColumnsEntityArray: "ColumnsEntityArray", JoinEntityName: "JoinEntityName", JoinEntityRowForeignKey: "JoinEntityRowForeignKey", JoinEntityColumnForeignKey: "JoinEntityColumnForeignKey", JoinEntityDisplayColumns: "JoinEntityDisplayColumns", JoinEntityExtraFilter: "JoinEntityExtraFilter", CheckBoxValueMode: "CheckBoxValueMode", CheckBoxValueField: "CheckBoxValueField", NewRecordDefaultValues: "NewRecordDefaultValues", ShowSaveButton: "ShowSaveButton", ShowCancelButton: "ShowCancelButton", EditMode: "EditMode" }, decls: 5, vars: 4, consts: [["mjFillContainer", "", 1, "wrapper"], ["kendoButton", "", 3, "disabled"], [1, "grid"], ["kendoButton", "", 3, "click", "disabled"], [3, "ngClass"], [1, "checkbox-column"], [1, "first-column"], [1, "column-cell"], ["kendoButton", "", 1, "cellButton"], ["kendoButton", "", 1, "cellButton", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-minus"], ["class", "column-cell", 4, "ngFor", "ngForOf"], [3, "data", "value"], ["type", "checkbox", 3, "checked"], [3, "value"], ["type", "checkbox", 3, "change", "checked"], [3, "change", "value"], [3, "selectionChange", "data", "value"], [1, "checkbox-column", 3, "ngClass"], [1, "checkbox-column", 3, "click", "ngClass"], ["type", "checkbox", "kendoCheckBox", "", 3, "checked"], ["type", "checkbox", "kendoCheckBox", "", 3, "click", "checked"]], template: function JoinGridComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0);
-        i0.ɵɵtemplate(1, JoinGridComponent_Conditional_1_Template, 2, 0, "div");
-        i0.ɵɵelementStart(2, "button", 1);
-        i0.ɵɵlistener("click", function JoinGridComponent_Template_button_click_2_listener() { return ctx.Save(); });
-        i0.ɵɵtext(3, "Save");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(4, "button", 1);
-        i0.ɵɵlistener("click", function JoinGridComponent_Template_button_click_4_listener() { return ctx.CancelEdit(); });
-        i0.ɵɵtext(5, "Cancel");
-        i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(6, JoinGridComponent_Conditional_6_Template, 10, 2, "table", 2);
+        i0.ɵɵtemplate(1, JoinGridComponent_Conditional_1_Template, 2, 0, "div")(2, JoinGridComponent_Conditional_2_Template, 2, 1, "button", 1)(3, JoinGridComponent_Conditional_3_Template, 2, 1, "button", 1)(4, JoinGridComponent_Conditional_4_Template, 10, 2, "table", 2);
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵadvance();
         i0.ɵɵconditional(ctx._IsLoading ? 1 : -1);
         i0.ɵɵadvance();
-        i0.ɵɵproperty("disabled", ctx.NumDirtyRecords === 0);
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("disabled", ctx.NumDirtyRecords === 0);
-        i0.ɵɵadvance(2);
-        i0.ɵɵconditional(!ctx._IsLoading ? 6 : -1);
-    } }, dependencies: [i1.NgClass, i1.NgForOf, i2.ButtonComponent, i3.LoaderComponent, i4.FillContainer], styles: [".wrapper[_ngcontent-%COMP%] {\n    overflow: auto;\n}\n\n\n\ntable[_ngcontent-%COMP%] {\n    margin-left: 5px;\n    margin-top: 5px;\n    border-collapse: collapse; \n\n}\n\nbutton[_ngcontent-%COMP%] {\n    margin-left: 5px;\n    margin-top: 5px;\n    width: 125px;\n}\n \ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    background-color: #f2f2f2; \n\n    color: black; \n\n    font-weight: bold; \n\n    cursor: pointer;\n}\n\n.permission-left-col[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n\n\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    border: 1px solid gray; \n\n    height: 36px; \n\n    text-align: center;\n    padding: 0 8px; \n\n}\n\n\n\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:first-child, table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {\n    min-width: 150px; \n\n    text-align: left;\n}\n\n\n\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:not(:first-child), table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:not(:first-child) {\n    width: 100px; \n\n}\n\n\n\ntable[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:nth-child(odd) {\n    background-color: white; \n\n}\n\ntable[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:nth-child(even) {\n    background-color: #e7f4ff; \n\n}\n\ntable[_ngcontent-%COMP%]   tr.dirty-row[_ngcontent-%COMP%] {\n    font-style: italic;\n    background-color: #ffcccc;\n}\n\ntable[_ngcontent-%COMP%]   td.dirty-cell[_ngcontent-%COMP%] {\n    font-style: italic;\n    background-color: #ffcccc;\n}"] });
+        i0.ɵɵconditional(ctx.ShowSaveButton ? 2 : -1);
+        i0.ɵɵadvance();
+        i0.ɵɵconditional(ctx.ShowCancelButton ? 3 : -1);
+        i0.ɵɵadvance();
+        i0.ɵɵconditional(!ctx._IsLoading ? 4 : -1);
+    } }, dependencies: [i1.NgClass, i1.NgForOf, i2.TextBoxComponent, i2.CheckBoxDirective, i3.ButtonComponent, i4.DropDownListComponent, i5.LoaderComponent, i6.FillContainer], styles: [".wrapper[_ngcontent-%COMP%] {\n    overflow: auto;\n}\n\nbutton[_ngcontent-%COMP%] {\n    margin-left: 5px;\n    margin-top: 5px;\n    width: 125px;\n}\n \nbutton.cellButton[_ngcontent-%COMP%] {\n    margin-left: 5px;\n    margin-top: 5px;\n    width: 30px;\n    margin-bottom: 5px;\n    float: right;\n}\n\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    background-color: #f2f2f2; \n\n    color: black; \n\n    font-weight: bold; \n\n}\n\n\n\n\n\n\n\n\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    border: 1px solid gray; \n\n    height: 36px; \n\n    text-align: center;\n    padding: 0 8px; \n\n}\n\ntd.column-cell[_ngcontent-%COMP%] {\n    margin: 0;\n    \n\n    \n\n    text-align: left;\n}\n\n\n\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:first-child, table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {\n    min-width: 150px; \n\n    text-align: left;\n    vertical-align: middle;\n}\n\n.checkbox-column[_ngcontent-%COMP%] {\n    width: 100px; \n\n}\n\n\n\ntable[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:nth-child(odd) {\n    background-color: white; \n\n}\n\ntable[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:nth-child(even) {\n    background-color: #e7f4ff; \n\n}\n\ntable[_ngcontent-%COMP%]   tr.dirty-row[_ngcontent-%COMP%] {\n    font-style: italic;\n    background-color: #ffcccc;\n}\n\ntable[_ngcontent-%COMP%]   td.dirty-cell[_ngcontent-%COMP%] {\n    font-style: italic;\n    background-color: #ffcccc;\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(JoinGridComponent, [{
         type: Component,
-        args: [{ selector: 'mj-join-grid', template: "<div mjFillContainer class=\"wrapper\"> \n    @if (_IsLoading) {\n        <div><kendo-loader></kendo-loader></div>\n    }\n    <button [disabled]=\"NumDirtyRecords === 0\" kendoButton (click)=\"Save()\">Save</button>\n    <button [disabled]=\"NumDirtyRecords === 0\" kendoButton (click)=\"CancelEdit()\">Cancel</button>\n    @if (!_IsLoading) {\n        <table class=\"grid\">\n            <thead>\n                <tr>\n                    <!-- First column is the name of the Rows Entity -->\n                    <th>{{RowsEntityName}}</th>\n                    @if (ColumnsMode === 'Entity') {\n                        @for (colRecord of this._columnsEntityData; track colRecord) {\n                            <th>{{colRecord.Get(this.ColumnsEntityDisplayField)}}</th>\n                        }\n                    }\n                    @else {\n                        <!-- we need one column for each of the fields in the JoinEntityDisplayColumns array -->\n                        @for (colName of JoinEntityDisplayColumns; track colName) {\n                            <th>{{colName}}</th>\n                        }\n                    }\n                </tr>\n            </thead>\n            <tbody>\n                @for (row of _GridData; track row) {\n                    <tr [ngClass]=\"IsRecordReallyDirty(row) ? 'dirty-row' : ''\">\n                        <td class=\"first-column\">\n                            <span>{{row.FirstColValue}}</span>\n                        </td>\n                        @if (ColumnsMode === 'Fields') {\n                            <td *ngFor=\"let colName of JoinEntityDisplayColumns\">\n                                <input type=\"checkbox\" kendoCheckBox>\n                            </td>\n                        }\n                        @else {\n                            @for (cell of row.ColumnData; track cell) {\n                                <!-- loop through all the columns and display a checkbox and check it if we have a match in the current row -->\n                                <td (click)=\"_FlipRecord($event, row, cell)\"\n                                    [ngClass]=\"IsCellReallyDirty(cell) ? 'dirty-cell' : ''\">\n                                    <input   type=\"checkbox\" \n                                             kendoCheckBox \n                                             [checked]=\"_IsColumnChecked(cell)\"  \n                                             (click)=\"_FlipRecord($event, row, cell, true)\">\n                                </td>\n                            }\n                        }\n                    </tr>                \n                } \n            </tbody>\n        </table>\n    }\n</div>", styles: [".wrapper {\n    overflow: auto;\n}\n\n/* Style for the whole table */\ntable {\n    margin-left: 5px;\n    margin-top: 5px;\n    border-collapse: collapse; /* Ensures border collapse for a cleaner look */\n}\n\nbutton {\n    margin-left: 5px;\n    margin-top: 5px;\n    width: 125px;\n}\n \ntable th {\n    background-color: #f2f2f2; /* Light gray background for headers */\n    color: black; /* Black text color for headers */\n    font-weight: bold; /* Bold font weight for headers */\n    cursor: pointer;\n}\n\n.permission-left-col {\n    cursor: pointer;\n}\n\n/* Style for all table cells */\ntable th, table td {\n    border: 1px solid gray; /* Gray border for cells */\n    height: 36px; /* Fixed height for all rows */\n    text-align: center;\n    padding: 0 8px; /* Add some padding inside cells */\n}\n\n/* Specific styles for the first column */\ntable th:first-child, table td:first-child {\n    min-width: 150px; /* Set width for the first column */\n    text-align: left;\n}\n\n/* Specific styles for the \"Can\" columns */\ntable th:not(:first-child), table td:not(:first-child) {\n    width: 100px; /* Set width for \"Can\" columns */\n}\n\n/* Alternating row background colors */\ntable tr:nth-child(odd) {\n    background-color: white; /* Light color for odd rows */\n}\n\ntable tr:nth-child(even) {\n    background-color: #e7f4ff; /* Light blue for even rows */\n}\n\ntable tr.dirty-row {\n    font-style: italic;\n    background-color: #ffcccc;\n}\n\ntable td.dirty-cell {\n    font-style: italic;\n    background-color: #ffcccc;\n}"] }]
-    }], () => [{ type: i0.ChangeDetectorRef }], { RowsEntityName: [{
+        args: [{ selector: 'mj-join-grid', template: "<div mjFillContainer class=\"wrapper\"> \n    @if (_IsLoading) {\n        <div><kendo-loader></kendo-loader></div>\n    }\n    @if (ShowSaveButton) {\n        <button [disabled]=\"NumDirtyRecords === 0\" kendoButton (click)=\"Save()\">Save</button>\n    }\n    @if (ShowCancelButton) {\n        <button [disabled]=\"NumDirtyRecords === 0\" kendoButton (click)=\"CancelEdit()\">Cancel</button>\n    }\n    @if (!_IsLoading) {\n        <table class=\"grid\">\n            <thead>\n                <tr>\n                    <!-- First column is the name of the Rows Entity -->\n                    <th>{{RowsEntityDisplayNameOrName}}</th>\n                    @if (ColumnsMode === 'Entity') {\n                        @for (colRecord of this._columnsEntityData; track colRecord) {\n                            <th class=\"checkbox-column\">{{colRecord.Get(this.ColumnsEntityDisplayField)}}</th>\n                        }\n                    }\n                    @else {\n                        <!-- we need one column for each of the fields in the JoinEntityDisplayColumns array -->\n                        @for (colName of JoinEntityDisplayColumns; track colName) {\n                            <th>{{colName}}</th>\n                        }\n                    }\n                </tr>\n            </thead>\n            <tbody>\n                @for (row of _GridData; track row) {\n                    <tr [ngClass]=\"IsRecordReallyDirty(row) ? 'dirty-row' : ''\">\n                        <td class=\"first-column\">\n                            <span>{{row.FirstColValue}}</span>\n                            @if (EditMode !== 'None'){\n                                @if (!row.JoinExists) {\n                                    <button kendoButton class=\"cellButton\" (click)=\"AddJoinEntityRecord(row)\"><span class=\"fa-solid fa-plus\"></span></button>\n                                }\n                                @else {\n                                    <button kendoButton class=\"cellButton\" (click)=\"RemoveJoinEntityRecord(row)\"><span class=\"fa-solid fa-minus\"></span></button>\n                                }    \n                            }\n                        </td>\n                        @if (ColumnsMode === 'Fields') {\n                            <td class=\"column-cell\" *ngFor=\"let colName of JoinEntityDisplayColumns; let i = index\">\n                                @if (EditMode !== 'None') {\n                                    @if (row.JoinExists) {\n                                        @if (GetJoinEntityField(colName).ValueListType === \"None\") {\n                                            @if (GetJoinEntityField(colName).TSType === EntityFieldTSType.Boolean) {\n                                                <input type=\"checkbox\" [checked]=\"row.GetColumnValue(i)\" (change)=\"UpdateCellValue(row, i, $event)\" />\n                                            }\n                                            @else {\n                                                <kendo-textbox [value]=\"row.GetColumnValue(i)\" (change)=\"UpdateCellValue(row, i, $event)\" /> \n                                            }\n                                        }\n                                        @else {\n                                            <kendo-dropdownlist\n                                                [data]=\"GetJoinEntityFieldValues(colName)\"\n                                                [value]=\"row.GetColumnValue(i)\"\n                                                (selectionChange)=\"UpdateCellValueDirect(row, i, $event)\"\n                                            >\n                                            </kendo-dropdownlist>\n                                        }\n                                    }\n                                }\n                                @else {\n                                    {{row.GetColumnValue(i)}}\n                                }\n                            </td>\n                        }\n                        @else {\n                            @for (cell of row.ColumnData; track cell) {\n                                <!-- loop through all the columns and display a checkbox and check it if we have a match in the current row -->\n                                <td class=\"checkbox-column\" (click)=\"_FlipRecord($event, row, cell)\"\n                                    [ngClass]=\"IsCellReallyDirty(cell) ? 'dirty-cell' : ''\">\n                                    @if (EditMode !== 'None') {\n                                        <input   type=\"checkbox\" \n                                        kendoCheckBox \n                                        [checked]=\"_IsColumnChecked(cell)\"  \n                                        (click)=\"_FlipRecord($event, row, cell, true)\">\n                                    }\n                                    @else {\n                                        {{cell.value ? '\u2713' : ''}}\n                                    }\n                                </td>\n                            }\n                        }\n                    </tr>                \n                } \n            </tbody>\n        </table>\n    }\n</div>", styles: [".wrapper {\n    overflow: auto;\n}\n\nbutton {\n    margin-left: 5px;\n    margin-top: 5px;\n    width: 125px;\n}\n \nbutton.cellButton {\n    margin-left: 5px;\n    margin-top: 5px;\n    width: 30px;\n    margin-bottom: 5px;\n    float: right;\n}\n\ntable th {\n    background-color: #f2f2f2; /* Light gray background for headers */\n    color: black; /* Black text color for headers */\n    font-weight: bold; /* Bold font weight for headers */\n}\n/* \n.permission-left-col {\n    cursor: pointer;\n} */\n\n/* Style for all table cells */\ntable th, table td {\n    border: 1px solid gray; /* Gray border for cells */\n    height: 36px; /* Fixed height for all rows */\n    text-align: center;\n    padding: 0 8px; /* Add some padding inside cells */\n}\n\ntd.column-cell {\n    margin: 0;\n    /* display: flex; */\n    /* align-items: center; */\n    text-align: left;\n}\n\n/* Specific styles for the first column */\ntable th:first-child, table td:first-child {\n    min-width: 150px; /* Set width for the first column */\n    text-align: left;\n    vertical-align: middle;\n}\n\n.checkbox-column {\n    width: 100px; /* Set width for \"Can\" columns */\n}\n\n/* Alternating row background colors */\ntable tr:nth-child(odd) {\n    background-color: white; /* Light color for odd rows */\n}\n\ntable tr:nth-child(even) {\n    background-color: #e7f4ff; /* Light blue for even rows */\n}\n\ntable tr.dirty-row {\n    font-style: italic;\n    background-color: #ffcccc;\n}\n\ntable td.dirty-cell {\n    font-style: italic;\n    background-color: #ffcccc;\n}"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], { RowsEntityName: [{
+            type: Input
+        }], RowsEntityDisplayName: [{
             type: Input
         }], RowsEntityDisplayField: [{
             type: Input
@@ -473,11 +832,19 @@ JoinGridComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: JoinGridC
             type: Input
         }], JoinEntityDisplayColumns: [{
             type: Input
+        }], JoinEntityExtraFilter: [{
+            type: Input
         }], CheckBoxValueMode: [{
             type: Input
         }], CheckBoxValueField: [{
             type: Input
         }], NewRecordDefaultValues: [{
             type: Input
+        }], ShowSaveButton: [{
+            type: Input
+        }], ShowCancelButton: [{
+            type: Input
+        }], EditMode: [{
+            type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(JoinGridComponent, { className: "JoinGridComponent", filePath: "src/lib/join-grid/join-grid.component.ts", lineNumber: 24 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(JoinGridComponent, { className: "JoinGridComponent", filePath: "src/lib/join-grid/join-grid.component.ts", lineNumber: 42 }); })();

package/dist/lib/module.d.ts

@@ -4,12 +4,13 @@ import * as i2 from "@angular/common";
 import * as i3 from "@angular/forms";
 import * as i4 from "@progress/kendo-angular-dialog";
 import * as i5 from "@progress/kendo-angular-grid";
-import * as i6 from "@progress/kendo-angular-buttons";
-import * as i7 from "@progress/kendo-angular-dropdowns";
-import * as i8 from "@progress/kendo-angular-indicators";
-import * as i9 from "@memberjunction/ng-container-directives";
+import * as i6 from "@progress/kendo-angular-inputs";
+import * as i7 from "@progress/kendo-angular-buttons";
+import * as i8 from "@progress/kendo-angular-dropdowns";
+import * as i9 from "@progress/kendo-angular-indicators";
+import * as i10 from "@memberjunction/ng-container-directives";
 export declare class JoinGridModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<JoinGridModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<JoinGridModule, [typeof i1.JoinGridComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.DialogsModule, typeof i5.GridModule, typeof i6.ButtonsModule, typeof i7.DropDownsModule, typeof i4.DialogsModule, typeof i8.IndicatorsModule, typeof i9.ContainerDirectivesModule], [typeof i1.JoinGridComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<JoinGridModule, [typeof i1.JoinGridComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.DialogsModule, typeof i5.GridModule, typeof i6.InputsModule, typeof i7.ButtonsModule, typeof i8.DropDownsModule, typeof i4.DialogsModule, typeof i9.IndicatorsModule, typeof i10.ContainerDirectivesModule], [typeof i1.JoinGridComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<JoinGridModule>;
 }

package/dist/lib/module.js

@@ -6,6 +6,7 @@ import { DialogsModule } from "@progress/kendo-angular-dialog";
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
 import { IndicatorsModule } from '@progress/kendo-angular-indicators';
+import { InputsModule } from '@progress/kendo-angular-inputs';
 // LOCAL
 import { JoinGridComponent } from './join-grid/join-grid.component';
 import { GridModule } from '@progress/kendo-angular-grid';
@@ -19,6 +20,7 @@ JoinGridModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonMod
         FormsModule,
         DialogsModule,
         GridModule,
+        InputsModule,
         ButtonsModule,
         DropDownsModule,
         DialogsModule,
@@ -35,6 +37,7 @@ JoinGridModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonMod
                     FormsModule,
                     DialogsModule,
                     GridModule,
+                    InputsModule,
                     ButtonsModule,
                     DropDownsModule,
                     DialogsModule,
@@ -50,6 +53,7 @@ JoinGridModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonMod
         FormsModule,
         DialogsModule,
         GridModule,
+        InputsModule,
         ButtonsModule,
         DropDownsModule,
         DialogsModule,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-join-grid",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "MemberJunction: Grid component that is able to display/edit the relationship between two entities. For example being able to edit Users + Roles in a single grid.",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",
@@ -25,15 +25,17 @@
     "@angular/router": "18.0.2"
   },
   "dependencies": {
-    "@memberjunction/core-entities": "1.7.0",
-    "@memberjunction/global": "1.7.0",
-    "@memberjunction/core": "1.7.0",
-    "@memberjunction/ng-shared": "1.7.0",
-    "@memberjunction/ng-container-directives": "1.7.0",
+    "@memberjunction/core-entities": "1.8.0",
+    "@memberjunction/global": "1.8.0",
+    "@memberjunction/core": "1.8.0",
+    "@memberjunction/ng-base-types": "1.8.0",
+    "@memberjunction/ng-container-directives": "1.8.0",
+    "@memberjunction/ng-shared": "1.8.0",
     "@progress/kendo-angular-buttons": "16.2.0",
     "@progress/kendo-angular-dialog": "16.2.0",
     "@progress/kendo-angular-layout": "16.2.0",
     "@progress/kendo-angular-grid": "16.2.0",
+    "@progress/kendo-angular-inputs": "16.2.0",
     "@progress/kendo-angular-indicators": "16.2.0",
     "tslib": "^2.3.0"
   },