 getAllPrograms() {
    this.proposalService.getProgramList().subscribe(
      res => {
        this.programList = res;
        this.programNames = this.programList.data.map(item => ({ text: item.title}));
        this.programNameParams = this.createDropdownParams('programName', { dataSource: this.programNames, placeholderText: 'Select a program name', fields: { text: 'programName', value: 'programName' } });
      },
      err => {
        this.loader = false;
        console.log("err in get program data ", err);
      }
    );
  }
  
    createDropdownParams(ref: string, config: DropdownConfig) {
    const elem = document.createElement('input');
    elem.id = ref;  // Set an ID for easier debugging and referencing
    document.body.appendChild(elem);  // Optionally append to body or another specific element

    return {
      create: () => elem,
      read: () => (this[ref + 'Obj'] as DropDownList).text,
      destroy: () => (this[ref + 'Obj'] as DropDownList).destroy(),
      write: () => {
        this[ref + 'Obj'] = new DropDownList({
          dataSource: new DataManager(config.dataSource),
          fields: { value: 'text', text: 'text' },
          placeholder: config.placeholderText,
          floatLabelType: 'Never'
        });
        this[ref + 'Obj'].appendTo(elem);
      }
    };
  }
  
  
  actionComplete(args: SaveEventArgs): void {
    switch (args.requestType) {
      case 'beginEdit':
        const editProgramName = args.rowData['programName'];
        console.log('program name:', JSON.stringify(args.rowData['programName']));
        this.programNameParams = this.createDropdownParams('programName', { dataSource: this.programNames, placeholderText: editProgramName,fields: { text: 'ProgramName', value: editProgramName } });
        break;
      case 'delete':
        break;
      case 'save':
        const startDateString = args.data['startDate']?.toLocaleDateString();
        const endDateString =args.data['endDate']?.toLocaleDateString();
        const rowData: IProposal = <IProposal> args.data;
        rowData.startDate = startDateString;
        rowData.endDate = endDateString;
        rowData.solicitationId = this.findSolicitationIdByTitle(rowData.opportunityNumber);
        if (rowData.idProposal) {
          this.proposalService.updateProposal(rowData).subscribe(r=> {
            this.toasterService.success("Proposal " + rowData.proposalNumber + " has been updated.");
          });
        } else {
          this.updateNewProposalList(rowData);
        }
        break;
      case 'searching':
          args.cancel= true;
          this.searchParam = args['searchString'].toLowerCase();
          console.log('key: '+this.searchParam);
          if(this.searchParam !== undefined){
            this.start = 0;
            this.getProposals(this.start, this.pageSize, this.searchParam);
          }
        break;
      default:
        break;
    }
  }
  
  
  
  
  <e-columns>
      <e-column *ngFor="let column of columns" field='{{column.columnName}}' [allowEditing]="column?.allowEditing" [validationRules]="column?.validationRules"
                headerText='{{column.title}}' minWidth='50' [visible]="column?.visibility" [editType]="column.editType"
                [width]="column.columnWidth" [format]="column?.format" clipMode='EllipsisWithTooltip'
                [defaultValue]="column.defaultValue">
      </e-column>
      <e-column field='programName' headerText='Program Name' width='200' editType='dropdownedit' [edit]='programNameParams' defaultValue=""></e-column>
      <e-column field='opportunityNumber' headerText='Solicitation Number' width='200' editType='dropdownedit' [edit]='opportunityNameParams' defaultValue=""></e-column>
      <e-column field='proposalType' headerText='Proposal Type' width='150' editType='dropdownedit' [edit]='proposalTypeParams' defaultValue=""></e-column>
      <e-column headerText='Actions' width=120 [commands]='commands'></e-column>
    </e-columns>