Automatic child data update

[Dinesh D]

I used hirarchical tree structure data table. I that i have button to add the child elements, After adding the child without refreshing it should show the data in table. But i am getting the data after refreshing the grid table. What is the way to update the child data dynamically

+ icon is used to add the child data to the parent OAM.

[Thavasianand Sankaranarayanan]

Hi Dinesh, 

Greetings from Syncfusion support. 

 

Based on your query, we have prepared a sample and achieved your requirement in click event. we suggest you to follow the below way to achieve your requirement. Please refer the below sample and code example for more information. 

<ejs-grid #grid id='Grid' [dataSource]='hierarchygrid' (load)='onLoad($event)' [childGrid]='childGrid'> 

        <e-columns> 

                 <e-column headerText='Button' width='150' textAlign='Center'> 

                <ng-template #template let-data> 

                    <div class="button"> 

                        <button ejs-button (click)="onClick($event)" #button>Buttons</button> 

                    </div> 

                </ng-template> 

            </e-column> 

        </e-columns> 

    </ejs-grid> 

 

onClick(args) { 

    var tr = args.target.closest('tr'); 

    var childId = tr.nextElementSibling.getElementsByTagName('div')[0].getAttribute('id'); 

    var grid = (document.getElementById(childId) as any).ej2_instances[0]; 

    if (tr.firstElementChild.getAttribute("aria-expanded") && grid) { 

      var data = { "id": 1, "Data": "Raja", "Adress": "shdgsjh", "contach": "973763633" }; 

      grid.editModule.addRecord(data, 0); 

    } 

  } 

Sample: https://stackblitz.com/edit/angular-6uvfgt-vbwgph?file=app.component.ts 

Regards, 

Thavasianand S.