binding a dropdown/combobox in in-cell edit

[Ron]

To date I've made several modifications to the in-cell editing example to get it to work in my Angular reactive forms. The following is how I typically built my cellClickHandler and cellCloseHandler:

 

  public cellClickHandler({ sender, rowIndex, columnIndex, dataItem, isEdited }) {

    if (!isEdited) {
      sender.editCell(rowIndex, columnIndex, this.createFormGroup(dataItem));
    }
  }


  public cellCloseHandler(args: any) {
    const { formGroup, dataItem } = args;

    if (!formGroup.valid) {

      args.preventDefault();
    } else if (formGroup.dirty) {

      this.editService.assignValues(dataItem, formGroup.value);
      this.editService.update(dataItem);

      let iFeasibilityFlag: IFeasibilityFlag = {
        'id': dataItem.id,
        'flagSeq': dataItem.flagSeq,
        'location': dataItem.location,
        'warning': dataItem.warning,
        'description': dataItem.description,
        'stop': dataItem.stop
      }

      this.feasibilityFlagService.save(iFeasibilityFlag, false);
    }
  }

  public createFormGroup(dataItem: any): FormGroup {
    return this.formBuilder.group({
      'id': dataItem.id,
      'flagSeq': dataItem.flagSeq,
      'location': dataItem.location,
      'warning': dataItem.warning,
      'description': dataItem.description,
      'stop': dataItem.stop
    });
  }

 

This works fine if I have data I'm keying in by hand but I've noticed that this pattern doesn't give me a formgroup name that I can latch onto such as if I need to declare in kendoGridEditTemplate: let-formGroup="namedFormGroup" or in kendo-dropdownlist: [formControl] ="namedFormGroup.get('property')"

 

The attached pictures show how I'm trying to contend with this at present. Unfortunately while I've tried this several ways the following tends to show up often and I'm not sure how to read this error:

TypeError: control.setParent is not a function

 

Take a look at the attached images and let me know if there's something you can think of that I need to add to these or if you see something I'm doing breaking the typescript let me know what I'd need in order to map it correctly.

 

Thank you!

 

[Dimiter Topalov]

Hello Ron,

The form group, created when a certain Grid row (or a cell) is opened for editing, is available in the Grid EditTemplate via let-formGroup="formGroup". This is the same formGroup, created from the data item, or the one passed to the grid.editRow(...) or editCell() method (like in the discussed case). The name of the variable that will be used within the template can be arbitrary, e.g. - let-myFormGroupName="formGroup". However the value of the assignment, coming from the template (template context field) is "formGroup":

https://www.telerik.com/kendo-angular-ui/components/grid/api/EditTemplateDirective/

You can then bind the custom editor accordingly like in the following custom editing in reactive forms example:

https://www.telerik.com/kendo-angular-ui/components/grid/editing/custom-reactive-editing/

Here is an example, demonstrating this approach in the context of Incell editing:

https://next.plnkr.co/edit/3LhKlcPFesY5xouV (ProductName column)

Here is the same example where the form group is named with a custom name with the template:

https://next.plnkr.co/edit/zeamAK3fA5HPl9Sb

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Ron]

Dimiter - thank you. I swapped in formGroup and that seemed to do the trick.