FlexGrid with item

FlexGrid with item

Posted by: admin on 6 May 2020, 8:05 am EST

• 

  admin

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 6 May 2020, 8:05 am EST

  Hi,
  
  My question is how can I use a property of the item in that row and make a condition in the [visible].
  
  Example:
  
  [visible]=“item.typeLimit == 3”

  So I’m trying to grid it, but I’m failing. If you could give me some suggestions or if it’s possible.

  
   <wj-flex-grid #limitCovers 
                  [(itemsSource)]="gridLimits"
  let-item="itemCover">
                    <wj-flex-grid-column [binding]="'name'" [header]="'Cobertura'" [isReadOnly]="true" [width]="'*'"></wj-flex-grid-column>
                    <wj-flex-grid-column [binding]="'limitClaim'" [header]="'Límite Por Siniestro'" [format]="'n2'" [width]="'*'"></wj-flex-grid-column>
                    <wj-flex-grid-column [binding]="'limitClaimPeriod'" [header]="'Límite Por Siniestro y Periodo'" [format]="'n2'" [width]="'*'"></wj-flex-grid-column>
                    <wj-flex-grid-column [binding]="'sublimitVictim'" [header]="'Sublímite Por Víctima'" [format]="'n2'" [width]="'*'" [visible]="itemCover.typeLimit == 3"></wj-flex-grid-column>
                    <wj-flex-grid-column [binding]="'valueCover'" [header]="'Valor Cobertura'" [format]="'n2'" [width]="'*'"></wj-flex-grid-column>
                  </wj-flex-grid>
  
  

• 

  admin

  • Post Options:
  • Link
    Copy

  Posted 6 May 2020, 9:26 am EST - Updated 3 October 2022, 4:24 pm EST

  Another question I forgot would be if you can do a CollectionView in a Grid rowDetails

  
   <wj-flex-grid #limitCovers
                  [(itemsSource)]="gridLimits">
                    <wj-flex-grid-column [binding]="'name'" [header]="'Cobertura'" [isReadOnly]="true" [width]="'*'"></wj-flex-grid-column>
                    <wj-flex-grid-column [binding]="'limitClaim'" [header]="'Límite Por Siniestro'" [format]="'n2'" [width]="'*'"></wj-flex-grid-column>
                    <wj-flex-grid-column [binding]="'limitClaimPeriod'" [header]="'Límite Por Siniestro y Periodo'" [format]="'n2'" [width]="'*'"></wj-flex-grid-column>
                    <wj-flex-grid-column [binding]="'sublimitVictim'" [header]="'Sublímite Por Víctima'" [format]="'n2'" [width]="'*'"></wj-flex-grid-column>
                    <wj-flex-grid-column [binding]="'valueCover'" [header]="'Valor Cobertura'" [format]="'n2'" [width]="'*'"></wj-flex-grid-column>
                    <wj-flex-grid-column [binding]="'franchise'" [header]="'Franquicia'" [width]="'*'"></wj-flex-grid-column>
                    <wj-flex-grid-column [binding]="'country'" [header]="'País'" [width]="'*'" *ngIf="formGroup.get('components').get('territorialScope').value == 6"></wj-flex-grid-column>
                    <ng-template wjFlexGridDetail let-item="item"
                      [detailVisibilityMode]="'ExpandSingle'"
                      [rowHasDetail]="rowHasDetailFn">
                      <wj-flex-grid #limitSubcovers
                      [itemsSource]="getSubcovers(item.id)">
                        <wj-flex-grid-column [binding]="'name'" [header]="'Subcobertura'" [isReadOnly]="true" [width]="'*'"></wj-flex-grid-column>
                        <wj-flex-grid-column [binding]="'limitClaim'" [header]="'Límite Por Siniestro'" [format]="'n2'" [width]="'*'"></wj-flex-grid-column>
                        <wj-flex-grid-column [binding]="'limitClaimPeriod'" [header]="'Límite Por Siniestro y Periodo'" [format]="'n2'" [width]="'*'"></wj-flex-grid-column>
                        <wj-flex-grid-column [binding]="'sublimitVictim'" [header]="'Sublímite Por Víctima'" [format]="'n2'" [width]="'*'"></wj-flex-grid-column>
                        <wj-flex-grid-column [binding]="'valueCover'" [header]="'Valor Cobertura'" [format]="'n2'" [width]="'*'"></wj-flex-grid-column>
                        <wj-flex-grid-column [binding]="'franchise'" [header]="'Franquicia'" [width]="'*'"></wj-flex-grid-column>
                        <wj-flex-grid-column [binding]="'country'" [header]="'País'" [width]="'*'" *ngIf="formGroup.get('components').get('territorialScope').value == 6"></wj-flex-grid-column>
                      </wj-flex-grid>
                    </ng-template>
                  </wj-flex-grid>
  
  

  It would be to change the getSubcovers(item.id) for a CollectionView. My question is related to the getError that CollectionView has.

  

  1198×314 18.4 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 7 May 2020, 1:14 am EST

  Hi,

  The visible property of defines the visibility of that particular column but your requirement is to set the visibility of the row. So, this will not work. Also, the let-item context cannot be used with because it is not a template rather it is a component.
  
  To hide the rows based on the condition, you may handle the loadedRows event and iterate over each row and hide it accordingly.

  Also, if you wish to use the getError method with FlexGridDetails, you can use it in the same way as the main FlexGrid. The getSubcovers method will return an instance of the CollectionView with getError enabled.

  Refer to the sample below:

  https://stackblitz.com/edit/angular-g3kesw

  Regards,
  
  Ashwin

• 

  admin

  • Post Options:
  • Link
    Copy

  Posted 7 May 2020, 12:24 pm EST - Updated 3 October 2022, 4:23 pm EST

  Thanks a lot to the FlexGridRow solution, it’s great for me, also thanks for the other solution to hide the rows.
  
  What I really need with the [visible] would be something like this:

  

  I know it’s a little weird, but that’s what they’re asking me

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 8 May 2020, 1:39 am EST

  Hi,

  As per my understanding, your requirement is to hide the data in the cells when the condition is met. You can use the formatItem event for this:

  https://stackblitz.com/edit/angular-jef5fa

  ~regards

• 

  admin

  • Post Options:
  • Link
    Copy

  Posted 8 May 2020, 6:39 am EST

  Thank you very much, for the solutions. I’ll try them out and see if I can get the result I want.