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

[Mohammed Rahman]

This is in response to this article: https://www.syncfusion.com/forums/194763/angluar-ejs-grid-drop-down-value-not-getting-retained-on-edit?reply=zykrib

I am still facing this issue. I have attached the zip file as well as pasted the code here for your reference.

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>

Attachment: programname_1b132fc0.7z

[Aishwarya Rameshbabu]

Hi Mohammed Rahman,

Greetings from Syncfusion support.

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.

App.component.ts

 

 <ejs-grid 

  #normalgrid 

  id='Normalgrid' 

  [dataSource]='gridData' 

  allowPaging='true' 

  [allowSorting]='true' 

  [allowFiltering]='true' 

  [filterSettings]='filterSettings' 

  [pageSettings]='pageSettings' 

  [editSettings]='editSettings' 

  [toolbar]='toolbar' (actionBegin)='actionComplete($event)'>

  <e-columns>

     ……………………………

      <e-column 

          field='ProgramName' 

          headerText='Program Name'

          width='150' 

          editType='dropdownedit' 

          [edit]='programNameParams'

          defaultVlaue =''></e-column> 

  </e-columns>

</ejs-grid>

 

  createDropdownParams(ref: string, config: any) {

    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.programNameObj?.value,

      destroy: () => this.programNameObj?.destroy(),

      write: (args:any) => {  

       this.programNameObj = new DropDownList({

          dataSource: new DataManager(config.dataSource),

          fields: config.field,

          // To set the default value of the dropdownList

          value: args.rowData[args.column.field],

          placeholder: config.placeholderText,  

          floatLabelType: 'Never'

        });

       this.programNameObj.appendTo(elem);   

      }

    };

  }

  ngOnInit(): void {

    this.data = purchaseData;

    this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };

    this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];

    this.pageOptions = { pageSizes: true, pageSize: 8 };

    this.programNameParams = this.createDropdownParams('programName', { dataSource: this.programNames, placeholderText: 'Select a value', fields: { text: 'text', value: 'text' } });  

  }

 

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

Attachment: Video_ec8ee311.zip