dynamic expand undesirable/unwanted behaviour. about angular-tree-grid HOT 6 CLOSED

@tarangsachdev92 by chaning this.data will not reflect on the grid. You need to assign a new array to this.data . You can add a row using inbuilt add feature. Right now there is no option to add a row dynamically. I will see if I can add this feature over the weekend.

from angular-tree-grid.

this.data = [
              ...this.data,
              {
                id: 16,
                name: "Mayur",
                age: 20,
                weight: 20,
                gender: 1,
                phone: 7930343463,
                parent: 10
              }
            ];
            for (const da of this.data) {
              if (da.expanded) {
                this.ref.detectChanges();
                this.expandRow(da.id);
                this.ref.detectChanges();
              }
            }

I am able to push that row in this.data
by above code I am able to add new row dynamically,

may be you got me wrong.my concern is little bit different.

I looped through this.data and if (row) is alredy expanded before, then I want that row expanded after adding.

this.expandRow(da.id); with this code I am expecting the row expand but it expand me all the child row of first row.

from angular-tree-grid.

Okay. I see you are assigning new array to this.data and that will add new row. So basically what it thinks, it got a new Array so it tries to refresh the grid. I think maybe before updating this.data, you can track which rows are expanded then after few seconds(setTimeout?) you can try to expand those rows via expandRow. setTimeout is not Ideal here but you can try. I will see if I can fire some events when grid is ready to be updated.

from angular-tree-grid.

you can again check provided stackblitz and Screen Recording for better understanding.

with my code I can able to expand row (which I had tracked on click of expand button and collapse button).

// in this code I have add expanded property with boolean value)
onCollapse(e) {
    const rowData = e.data;
    this.data.map(elem => {
      if (elem.id === rowData.id || elem.parent === rowData.id) {
        elem.expanded = false;
      }
      return elem;
    });
  }

  onExpand(e) {
    const rowData = e.data;
    this.data.map(elem => {
      elem.expanded = elem.expanded || elem.id === rowData.id;
      return elem;
    });
  }

and as in previous reply I looped thorugh and identify which row is epanded and I called

    this.angularGrid.expandRow(id);

this is working good in some condition but this is not working as expected for the steps which are descirbed in a question.

this code expand the row but it's child also gets expanded(before add it(child) was not expanded).

from angular-tree-grid.

@tarangsachdev92 I have pushed a fix. Try latest version and let me know if this works.

from angular-tree-grid.

ok.that's cool and aworking as expected for my requirement.Thank you 👍

from angular-tree-grid.