How to hide value on when expand

[Ameer Bin Abdul Wahab]

How can I hide the parent value when I expand and show back value when collapse. 

Based on the image given I need to hide value for End Balance when is expand and show Property, Plant & Equipment value. Which will show back End Balance value when collapse is happening.

[Farveen Sulthana Thameeztheen Basha]

Hi  Ameer Bin ,

Query: I need that when the restore button is clicked the column chooser is closed

We achieved your query by using queryCellInfo and expanding event of the treegrid. Using queryCellInfo event you can customize the cell based on condition.

Please refer to the below code example,

 <ejs-treegrid

    #treegrid

    [dataSource]="data"

    childMapping="subtasks"

    height="350"

    [treeColumnIndex]="1"

    [allowPaging]="true"

    expandStateMapping="isExpanded"

    [pageSettings]="pageSettings"

    (expanding)="expanding($event)"

    (queryCellInfo)="querycellinfo($event)"

    (collapsing)="collapsing($event)"

  >

 

 

….

 

export class AppComponent {

  ….

  expanding(args) {

//While expanding to the record...  we hide the cell value

 

 if (args.data.expanded == false && args.data.hasChildRecords == true) {

      var inx = (this.treegrid as any).getColumnIndexByField('duration'); // here get the column index

      args.row.cells[inx].innerHTML = ''; // pass the args.row.cells index as column index

    }

  }

  querycellinfo(args) {

  //Initially  we hide the cell value based on expanded state

 

    if (

      args.data.hasChildRecords == true &&

      args.data.expanded == true &&

      args.column.field == 'duration'

    ) {

      args.cell.innerHTML = '';

    }

  }

 

 

Please refer to the below sample,

https://stackblitz.com/edit/angular-c3jgwj-a15zok?file=app.component.ts

Please refer to the below screenshot,

Initial rendering:

After expanding the taskeId 3:

After collapsing the taskId  2:

Please refer to the below API documentation,

https://ej2.syncfusion.com/angular/documentation/api/treegrid/#querycellinfo

https://ej2.syncfusion.com/angular/documentation/api/treegrid/#expanding

Kindly get back to us for further assistance.

Regards,  

Farveen sulthana T