1

I am creating a grid using ag-grid. Here I want to create custom dynamic cell editors. Which show different edit fields based on the value inside the cell. I got the idea from here.

This question is a design-oriented question. I want to have multiple editors which all have their own getValue() and isPopup() return values. These methods are the ones used by the library through ICellEditorComponent. Here is a basic overview of the design. Now am I wondering, do I use inheritance? And if so, do I inherit prop-editor into the specific designs even though isn't abstract? Or do I instead create a separate abstract class which basically contains these methods used in all the editors? Is there a different/better approach?

Here is some code to give you an idea of what I am stumbling on. prop-editor.component.ts.

@Component({
  selector: "editor-cell",
  template: `
    <div #container tabindex="0">
      <span *ngIf="array">
        <app-prop-array-editor [params]="params.value"></app-prop-array-editor>
      </span>
    </div>
  `,
  styles: []
})
export class PropEditorComponent
  implements ICellEditorAngularComp, AfterViewInit {
  private array: boolean = true;

  private params: any;
  private isPopupValue: boolean;
  public stringValue: string;

  @ViewChild("container", { read: ViewContainerRef, static: true })
  public container;

  constructor() {}

  ngAfterViewInit() {
    this.container.element.nativeElement.focus();
  }

  // This will decide what component is displayed
  // by setting a value which will be used in *ngIf
  agInit(params: any): void {
    this.params = params;
    if (params.value is array) {

    } else {

    }
  }

  // return value from one of the editors
  getValue(): any {
    return this.stringValue;
  }

  // return value from one of the editors
  isPopup(): boolean {
    return true;
  }
}

And prop-array-editor.component.ts. It is currently not finished yet but the question is about the overlaying design.

@Component({
  selector: "editor-cell",
  template: `
    <form [formGroup]="arrayForm">
      <removed because unnecessary for question>
    </form>
  `,
  styles: []
})
export class PropArrayEditorComponent {
  arrayForm: FormGroup;
  public stringValue: string;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
  }

  getValue(): any {
    return this.stringValue;
  }

  isPopup(): boolean {
    return true;
  }
}

As you can see it uses isPopup() and getValue() which should give the right value up to prop-editor. Which, in turn, will give it back to the grid when asked. This will be the same for each implementation of the editor.

Would love to hear what the recommended design approach is.

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.