ANGLUAR EJS-GRID DROP DOWN VALUE NOT GETTING RETAINED ON EDIT

Hi,

Thanks for your response. I tried but I am still facing the same issue. It is not retaining the value.

This is the complete code:

I have attached the zip file. Adding the code here as well, in case that does not open.

 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>

Hi Mohammed Rahman,

Thank you for providing the details. Upon reviewing the shared code example, we have observed that you are using a custom dataSource for the DropDownList component, which is rendered as a cell-edit-template in the Syncfusion Grid component. You are encountering an issue with retaining the value in the dropdown. We have already discussed this topic in our documentation. Please refer to the below documentation link for more information.

Documentation Link: Provide-custom-data-source-for-dropdownlist-component

Additionally, from the shared code example, we have noticed that you have initialized the parameters in the actionComplete event of the Grid. It appears you are attempting to pass the rowData value to edit params by initializing the parameters in the actionComplete event. This approach will not allow the DropDownList component to render correctly. We have updated your code example where we initialized this property in the ngOnInit event and set the default value of the DropDownList component in the write method. Please note that if the rowData is not present in the dataSource bound to the DropDownList component, it will not display the default value. For more detailed information, please refer to the updated code example, sample, and video demonstration provided below.

Sample: Emgcaw (forked) - StackBlitz

Video Demonstration: Please find in the attachment.

If you still experience any issues, kindly provide a simple example to replicate the problem, or attempt to reproduce it using the provided sample. Additionally, please share a video demonstrating the issue replication.

Regards

Aishwarya R