Added row vanishes on enter if column edit type is set

[Hira Soohail]

Hi,

I have a treegrid component configured in my angular app. If I set a column's edit type dynamically, and then try to add a row, the row vanishes when I press enter to save the row. Please help.

[Farveen Sulthana Thameeztheen Basha]

Hi Hira, 

Thanks for your interest in Syncfusion Components. 

Query#:- If I set a column's edit type dynamically, and then try to add a row, the row vanishes when I press enter to save the row 

We have checked your query and dynamically change the editType property using CellEditTemplate feature. Using this Cell EditTemplate feature we have placed the AutoComplete and based on condition we have change it into dropdown dynamically but we are unable to replicate the problem at our end. 

Refer to the code below:- 

App.Component.html 

<ejs-treegrid #treegrid [dataSource]='data' height='350' childMapping='subtasks' [treeColumnIndex]='1' [editSettings]='editSettings' [toolbar]='toolbar'> 

    <e-columns> 

        <e-column field='taskID' headerText='Task ID' width='70' isPrimaryKey='true' textAlign='Right' [edit]='numericParams' [validationRules]='taskidrules'></e-column> 

        <e-column field='taskName' headerText='Task Name' width='200' [validationRules]='tasknamerules' [edit]='dpParams'></e-column> 

> 

    </e-columns> 

</ejs-treegrid> 

App.Component.ts 

export class AppComponent { 

  public data: Object[] = []; 

   

  public autoCompleteObj: any; 

  @ViewChild('treegrid') 

  public treegrid: TreeGridComponent; 

  ngOnInit(): void { 

    this.data = sampleData; 

    this.editSettings = { 

      allowEditing: true, 

      allowAdding: true, 

      allowDeleting: true, 

      mode: 'Row', 

    }; 

     

    this.dpParams = { 

      create: () => { 

        let elem: HTMLInputElement = document.createElement('input'); 

        elem.id = 'taskname'; 

        return elem; 

      }, 

      read: () => { 

        return this.autoCompleteObj.value; 

      }, 

      destroy: () => { 

        this.autoCompleteObj.destroy(); 

      }, 

      write: (args: { 

        rowData: Object; 

        column: Column; 

        element: HTMLElement; 

      }) => { 

        if ((args.rowData as any).taskName == 'Plan timeline') { 

          this.autoCompleteObj = new AutoComplete({    //render AutoComplete 

 

            dataSource: <{ key: string; value: any }[]>( 

              this.treegrid.grid.dataSource 

            ), 

            fields: { value: 'taskName' }, 

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

          }); 

          this.autoCompleteObj.appendTo(args.element); 

        } else {    

          this.autoCompleteObj = new DropDownList({    //render dropdown 

             dataSource: <{ key: string; value: any }[]>( 

              this.treegrid.grid.dataSource 

            ), 

            fields: { value: 'taskName' }, 

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

          }); 

          this.autoCompleteObj.appendTo(args.element); 

        } 

      }, 

    }; 

  } 

} 

Sample Link:- https://stackblitz.com/edit/angular-wbydr3-luazzc?file=app.component.ts 

Demo link:- https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/edittemplate 

 

If the above solution doesn’t meet your requirement or we misinterpreted your query, share us the following details. 

1. Complete TreeGrid code example.
2. How you have changed the editType dynamically, share that code details.
3. Video demo to replicate the issue.
4. Detailed Explanation of your requirement.
5. If possible replicate it in the above sample and revert us back.

 

Regards, 

Farveen sulthana T 

[Hira Soohail]

Hello, thanks for responding. I solved this issue. I was not setting column.edit to the appropriate edit cell when setting edit type. Works now. Thanks.

[Farveen Sulthana Thameeztheen Basha]

Hi Hira, 

Thanks for your update. Please get back to us if you need any further assistance. We are happy to assist you further. 

Regards, 

Farveen sulthana T