Hide Column with conditions

Hide Column with conditions

Posted by: germiep.fernandez on 28 January 2022, 12:45 pm EST

• 

  germiep.fernandez

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 28 January 2022, 12:45 pm EST

  What would be the best approach if I want to hide or remove a column of the multirow when a variable changes?

  For example, I have a variables showGroup and showDelete, and I want everytime the value changes to true, it will show the column group for it. Below is the sample I created. I just used ngIf, I want to know how to approach this kind of behavior.

  
  <wj-multi-row #grid
  	[headersVisibility]="'Column'" 
  	[selectionMode]="'None'"
  	[itemsSource]="sampleData"
  >
  	<wj-multi-row-cell-group>
  	  <wj-multi-row-cell [header]="Final"></wj-multi-row-cell>
  	</wj-multi-row-cell-group>
  	<wj-multi-row-cell-group>
  	  <wj-multi-row-cell [header]="Comments"></wj-multi-row-cell>
  	</wj-multi-row-cell-group>
  	<wj-multi-row-cell-group>
  	  <wj-multi-row-cell [header]="Remarks"></wj-multi-row-cell>
  	</wj-multi-row-cell-group>
  	<wj-multi-row-cell-group *ngIf="showGroup">
  	  <wj-multi-row-cell [header]="Group name"></wj-multi-row-cell>
  	  <wj-multi-row-cell [header]="Members"></wj-multi-row-cell>
  	</wj-multi-row-cell-group>
  	<wj-multi-row-cell-group *ngIf="showDept">
  	  <wj-multi-row-cell [header]="Dept name"></wj-multi-row-cell>
  	  <wj-multi-row-cell [header]="Dept location"></wj-multi-row-cell>
  	</wj-multi-row-cell-group>
  </wj-multi-row>
  
  

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 31 January 2022, 8:29 am EST

  Hello,

  The above-shared approach is recommended as using the angular directives to show and hide the angular template from the DOM as it will provide comparatively better performance. If you are facing any issues in the above-shared approach then let us know.

  Regards