How to hide particular row in flex grid

How to hide particular row in flex grid

Posted by: nilesh_nichal on 6 May 2024, 6:36 pm EST

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 6 May 2024, 6:36 pm EST - Updated 6 May 2024, 6:41 pm EST

  Hi Team,

  We want to hide particular row in flex grid, but not able to do it in angular 16 version.
  
  Below is the code we have used

      <wj-flex-grid-column [binding]="'name'"
                           [header]="'Name'"
                           [isReadOnly]=true
                           [allowDragging]="true"
                           [allowResizing]="true"
                           [width]="160">
        <ng-template wjFlexGridCellTemplate
                     cellType="Cell"
                     let-item="item"
                    >
          <div [wjTooltip]="item.name"
               *ngIf="item.visible"
               class="text-ellipsis-single-line">{{ item.name }}</div>
        </ng-template>
      </wj-flex-grid-column>

  Below is the link which we have referred -https://developer.mescius.com/wijmo/api/classes/Wijmo_Angular2_Grid_Multirow.Wjmultirowcelltemplate.html
  
  Please find the attached screenshot for the reference.
  
  We want hide row/cell please resolve the above issue in angular.
  
  

  

  1024×466 11.7 KB

  

  1027×467 7.85 KB

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 7 May 2024, 5:02 pm EST

  Hi Nilesh,

  Based on the image you shared, it appears that you want to hide rows based on the value of the visible property in the data item. To accomplish this, you’ll need to set the visible property of the rows you want to hide.

  You can achieve this by utilizing either the initialized or loadedRows event of the FlexGrid. The initialized event is triggered only once during the initialization of the control, while the loadedRows event is triggered whenever the bound rows change (e.g., due to sorting, filtering, etc.).

  Below is a sample link demonstrating how to achieve this using the loadedRows event handler:
  
  https://stackblitz.com/edit/angular-ivy-gv66u2?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

  Regards