1. Home
  2. Forum
  3. Angular - EJ 2
  4. Child Grid EditSettings Template

Child Grid EditSettings Template

Hi,

I am trying to have reactiveform for childgrid edit template. 
Following is an example. I could not post the actual code due to NDA. But the following should give you an idea
Following code does not work. Any ideas -
this.childGrid = {
        dataSource: new DataManager({
          url: `${environment.apiURL}odata/EmployeePhone?`,
          adaptor: new ODataV4Adaptor(),
          crossDomain: true
        }),
        queryString: 'EmployeeId',
        load: function load() {
          this.parentDetails.parentKeyFieldValue = this.parentDetails.parentRowData['EmployeeId']
        },
        allowPaging: true,
        allowResizing: true,
        allowSorting: true,
        toolbar: ['Add', 'Edit', 'Delete'],
        editSettings: {
          allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog', template: `<ng-template #editSettingsTemplate let-data><div [formGroup]="employeePhoneForm">
            <div class="form-group col-sm-12 col-md-12 col-lg-12">
              <ejs-dropdownlist id="PhoneType" formControlName="PhoneType" [dataSource]='phoneTypeLookupDataManager'
              [fields]="{text: 'PhoneType', value: 'PhoneTypeId' }" placeholder="Phone Type" floatLabelType='Always' > </ejs-dropdownlist></div></div></ng-template>`}, 
        columns: [{
          field: 'PhoneType', headerText: 'Phone Type', width: 90
        },
        {
          field: 'Phone Number', headerText: 'Phone Number', width: 90
        }
        ],
        actionBegin(args: SaveEventArgs) {
          if (args.requestType === 'beginEdit' || args.requestType === 'add') {
            //this.submitClicked = false;
            if (args.requestType === "add") {
              args.data["EmployeeId"] = this.parentDetails.parentKeyFieldValue;
              this.employeePhoneForm = new FormGroup({
               EmployeeId = new FormControl((<ITtblEmployeePhone>args.rowData).EmployeeId),
              PhoneType: new FormControl((<ITtblEmployeePhone>args.rowData).PhoneType),
              PhoneNumber: new FormControl((<ITtblEmployeePhone>args.rowData).PhoneType)
              });
            }
            else {
              this.employeePhoneForm = new FormGroup({
               EmployeePhoneId: new FormControl((<ITtblEmployeePhone>args.rowData).EmployeePhoneId),
               EmployeeId = new FormControl((<ITtblEmployeePhone>args.rowData).EmployeeId),
              PhoneType: new FormControl((<ITtblEmployeePhone>args.rowData).PhoneType),
              PhoneNumber: new FormControl((<ITtblEmployeePhone>args.rowData).PhoneType)
              });
            }
            
            
            
          }
          if (args.requestType === 'save') {
            if (this.employeePhoneForm .valid) {
              args.data = this.employeePhoneForm .value;
            } else {
              args.cancel = true;
            }
          }
        },
        actionComplete(args: DialogEditEventArgs) {
          if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
            const dialog = args.dialog;
            if (Browser.isDevice) {
              args.dialog.height = window.innerHeight - 90 + 'px';
              (<Dialog>args.dialog).dataBind();
            }

            dialog.header = args.requestType === 'beginEdit' ? 'Edit Employee Phone' : 'New Employee Phone';
            //dialog.height = "800px";
            dialog.width = "800px";
            // Set initail Focus
          }
        }
      };

Thanks,

Ameet

3 Replies 1 reply marked as answer
TS Thiyagu Subramani Syncfusion Team February 8, 2021 12:27 PM UTC

Hi Ameet, 

Thanks for contacting Syncfusion forum. 

Based on your shared information we would like to inform we do not have support for ng-template in childgrid. Since childGrid will render as a type-script component, it is not feasible to use ng-templates in childgrid.  However, in the mean time you can achieve your requirement by using the below way.  

Please refer the below code example and documentation for more information.  

. . . . . . . . . .  
export class AppComponent implements OnInit, AfterViewInit { 
  public data: Object[]; 
  public initialPage: Object; 
  public orderForm: FormGroup; 
  public columns; 
  public newColumns; 
  public flag = true; 
  @ViewChild("grid") gridObj: GridComponent; 
  @ViewChild("childTemplate", { static: true }) 
  public template: TemplateRef<{}>; 
  public childGrid: any; 

  constructor( 
    @Inject(ViewContainerRef) private viewContainerRef?: ViewContainerRef 
  ) {} 

  ngAfterViewInit() { 
    this.template.elementRef.nativeElement._viewContainerRef = this.viewContainerRef; 
    this.template.elementRef.nativeElement.propName = "template"; 
  } 

  createFormGroup(data: IOrderModel): FormGroup { 
    return new FormGroup({ 
      OrderID: new FormControl(data.OrderID, Validators.required), 
      CustomerID: new FormControl(data.CustomerID, Validators.required) 
    }); 
  } 

  ngOnInit(): void { 
    this.data = employeeData; 
    this.childGrid = { 
      dataSource: orderDatas, 
      editSettings: { 
        allowEditing: true, 
        allowAdding: true, 
        allowDeleting: true, 
        mode: "Dialog", 
        template: this.template 
      }, 
      toolbar: ["Add", "Edit", "Delete"], 
      queryString: "EmployeeID", 
      load() { 
        this.registeredTemplate = {}; // set registertemplate value as empty in load event 
      }, 
      columns: [ 
        { 
          field: "OrderID", 
          headerText: "Order ID", 
          textAlign: "Right", 
          width: 120, 
          isPrimaryKey: true 
        }, 
        . . . . . . . .  
  } 
} 

export interface IOrderModel { 
  OrderID?: number; 
  CustomerID?: string; 
} 

[app.component.html] 

<ng-template #childTemplate let-data> 
    <div [formGroup]="orderForm"> 
. . . . . . . .  
    </div> 
  </ng-template> 







If still facing the issue please share issue below details then only we provide the appropriate solution as soon as possible. 

  1. If possible, share issue reproducing sample (or) reproduce the issue in above sample
 
  1. Video/image representation of your issue

  1. Syncfusion package version.

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S 



Marked as answer
AM Ameet February 11, 2021 07:50 PM UTC

This worked great. Thank you very much.

TS Thiyagu Subramani Syncfusion Team February 12, 2021 05:25 AM UTC

Hi Ameet, 

Thanks for your update. 

We are happy to hear that the provided solution works at your end. 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S 


Loader.
Up arrow icon