Serentiy Using Grid as an EditorType

Suppose we have 3 tables in DB.
1) Bill (Bill_id, Bill_Number)
2) Item (Item_id, Item_Name)
3) Bill_items (bill_items_id, bill_id,item_id, item_quantity )

and bill_id and item_id are foreign keys in table Bill_items

Generate Code using Sergen for every table in same module i.e. "Store".

Create a file named Modules/Store/BillItems/BillItemsEditor.ts with contents below

/// <reference path="../../Common/Helpers/GridEditorBase.ts" />

  namespace ERP.Store {
   @Serenity.Decorators.registerEditor()
   export class BillItemsEditor 
      extends Common.GridEditorBase<BillItemsRow> {
    protected getColumnsKey() { return "Store.BillItems"; }
    protected getDialogType() { return BillItemsEditDialog; } //We are linking our custom dialog here
    protected getLocalTextPrefix() { return BillItemsRow.localTextPrefix; }
    constructor(container: JQuery) {
     super(container);
    }
    
    protected getAddButtonCaption() {
     return "Add"; // this will rename the "New billItems" button
    }
   }
  }

Note. We cannot bind SERGEN generated dialogs otherwise we will have issues in saving forms etc.

Create a file named Modules/Store/BillItems/BillItemsEditDialog.ts with contents below


/// <reference path="../../Common/Helpers/GridEditorDialog.ts" />

  namespace ERP.Store {
   @Serenity.Decorators.registerClass()
   export class BillItemsEditDialog extends 
      Common.GridEditorDialog<BillItemsRow> {
    protected getFormKey() { return BillItemsForm.formKey; }
    //protected getNameProperty() { return BillItemsRow.nameProperty; }
    protected getLocalTextPrefix() { return BillItemsRow.localTextPrefix; }
    protected form: BillItemsForm;
    constructor() {
     super();
     this.form = new BillItemsForm(this.idPrefix);
    }
   }
  }

Add the following field in BillForm.cs file.

  [BillItemsEditor, IgnoreName]
  public List<Entities.BillItemsRow> ItemList { get; set; }
 

Also the following in BillRow.cs in class BillRow

        [NotMapped]        
        public System.Collections.Generic.List<Entities.BillItemsRow> ItemList {
            get { return Fields.ItemList[this]; }
            set { Fields.ItemList[this] = value; }
        }

Also the following in BillRow.cs in class RowFields
public ListField<Entities.BillItemsRow> ItemList;

After the above mentioned steps, we will be able to see Grid in Bill Form or dialog.


Remove unnecessay Field i.e. billId from BillItemsForm.cs file. This field will be automatically taken from BillForm.

Remove unnecessay column i.e. BillItemsId,BillNumber from BillItemsColumns.cs file. These fields will not be shown in grid. 

Add the below code in file BillItemsEditor.ts to get values of colmuns 

protected validateEntity(row: BillItemsRow, id: number) {
if (!super.validateEntity(row, id))
return false;


row.ItemName = ItemRow.getLookup()  //edit this 
.itemById[row.ItemId].Name;


return true;
}

Add this attribute in BillRow.cs to ItemList field for save, retrive, update and deleting of records.
[MasterDetailRelation(foreignKey: "BillId", IncludeColumns = "ItemName")]

here the foreignKey, IncludeColumns values must be in billItemsRow.cs file.

We can include multiple columns as below from billItemsRow


[MasterDetailRelation(foreignKey: "BillId", IncludeColumns = "ItemName1,ItemName2")]