treegrid add problem after restore data

[lorryl]

Hi,

When I first add a category and add a child record, the child record is in the below of the category, it is correct.

But when I click restore, add category and child again, the child record is up of the category, it is wrong.

How to fix it?

https://stackblitz.com/edit/angular-bhgbcz-jwk5qw?file=src%2Fapp.component.ts

[Shek Mohammed Asiq Abdul Jabbar]

Hi Lorryl,

Greetings from Syncfusion support.

We have analyzed the sample that you have provided for reference. We suspect that the reported problem occurs when we perform another action without closing the editForm . To overcome the reported issue, we suggest to use endEdit method to close the form or else update the added record by using Update Toolbar icon before clicking restore button. Please refer to the following code snippet.

onRestore() {

    this.treegrid.endEdit();

    setTimeout(() => {

      this.data = [];

    }, 50);

  }

}

 

Sample : https://stackblitz.com/edit/angular-bhgbcz-bftmoe?file=src%2Fapp.component.ts

If the above solution doesn’t meet your requirement, share more details to proceed further.

Regards,

Shek Mohammed Asiq

[lorryl]

What's the function that grid's cancel button call?

I want to cancel it first before restoring.

[Shek Mohammed Asiq Abdul Jabbar]

Hi Lorryl,

We are validating the issue on our end and let you further details by 1^st September 2023. Meanwhile, can we know the purpose of cancel the Edit action on Restore button click? Even though, upon using endEdit method, the row will save and restore to null.

[Farveen Sulthana Thameeztheen Basha]

Lorryl,

We appreciate your patience.

To overcome this problem, we suggest to use newRowPosition of editSettings property as “Bottom” by default and remove it from onAddCategory from button click.

Refer to the code below:-

Your code

 

   async onAddCategory()

    {

        await this.onEndEdit();

 

        if (this.treegrid.getSelectedRecords().length > 0)

        {

            let row: any = this.treegrid.getSelectedRecords()[0];

            let isChild: boolean = row['parentID'] != null;

 

            if (isChild)

            {

                this.treegrid.editSettings.newRowPosition = 'Below';

            }

            else

            {

                this.treegrid.editSettings.newRowPosition = 'Below';

            }

        }

        else

        {

            this.treegrid.editSettings.newRowPosition = 'Bottom';

        }

    }

 

Modified code

 

  ngOnInit(): void {

    this.data = [];

    this.editSettings = {

      allowEditing: true,

      allowAdding: true,

      allowDeleting: true,

      mode: 'Row',

      newRowPosition: 'Bottom',

    };

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

  }

 

   async onAddCategory()

    {

        await this.onEndEdit();

 

        if (this.treegrid.getSelectedRecords().length > 0)

        {

            let row: any = this.treegrid.getSelectedRecords()[0];

            let isChild: boolean = row['parentID'] != null;

 

            if (isChild)

            {

                this.treegrid.editSettings.newRowPosition = 'Below';

            }

            else

            {

                this.treegrid.editSettings.newRowPosition = 'Below';

            }

        }

        else

        {

           // this.treegrid.editSettings.newRowPosition = 'Bottom';      //remove this code from here    

        }

 

       …  .   .   .

    }

 

Modified sample link:-

https://stackblitz.com/edit/angular-bhgbcz-8kudqc?file=src%2Fapp.component.ts,src%2Fapp.component.css

Please get back to us if you need any further assistance.

Regards,
Farveen sulthana T