On Flexgrid format and ngStyle are not working togethor

On Flexgrid format and ngStyle are not working togethor

Posted by: sbanerjee on 27 March 2018, 2:12 am EST

• 

  sbanerjee

  • Post Options:
  • Link
    Copy

  Posted 27 March 2018, 2:12 am EST

  I am using Flexgrid. On flexgrid, i am using Format and ngStyle together but format is not working when i use ngStyle on template column.

  
  <wj-flex-grid-column [header]="'All in coupon rate'" [binding]="'AllInCouponRate'" align="right" format="p5" [width]="220" [aggregate]="'Sum'">
                                          <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
                                              <div [ngStyle]="{color: cell.item.AllInCouponRate < 0? 'red' : 'darkgreen'}">
                                                  {{cell.item.AllInCouponRate|number : '1.2-5'}}
                                              </div>
                                          </ng-template>
                                      </wj-flex-grid-column>
  
  

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 28 March 2018, 6:28 am EST

  Hi Samrat,

  Templates would always replace any format applied. This is by design. This is what you can do to get formats in templated cells:

  HTML:

  <wj-flex-grid [itemsSource]="data">
    <wj-flex-grid-column [header]="'Revenue'" [binding]="'amount'">
      <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
        <div [ngStyle]="{color: cell.item.AllInCouponRate < 0 ? 'red' : 'darkgreen'}">
          {{GetFormatted(cell.item.amount|number : '1.2-5')}}
        </div>
      </ng-template>
    </wj-flex-grid-column>
  </wj-flex-grid>
  

  TS:

  
  ...
  import * as wjCore from 'wijmo/wijmo';
  ...
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    ...
    GetFormatted (val: string): string {
      return wjCore.Globalize.formatNumber(wjCore.Globalize.parseFloat(val), 'p5');
    }
    ...
  }
  
  

  ~nilay