formatItem

formatItem

Posted by: hoang-nguyen on 14 September 2017, 12:02 pm EST

• 

  hoang-nguyen

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 12:02 pm EST

  Please give me an example of how to use formatItem with Wijmo Flexgrid in Ionic. Currently I use <template> to set conditonal format to cell but it is very slow because I have a large json file. Below is what I am using:

  <wj-flex-grid #flex
  
  [itemsSource]=“dataCollection”
  
  [autoSizeMode]=“1”
  
  [headersVisibility]=“1”
  
  [isReadOnly]=“true”>

      <wj-flex-grid-filter></wj-flex-grid-filter>
  
      <wj-flex-grid-column *ngFor="let col of columns" [header]="col" [binding]="col">
          <template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell"  style="padding:0 !important;" >
              <div>{{setCellFormat(cell,flex,cell.item.Level)}}</div>
          </template>
      </wj-flex-grid-column>
  
  </wj-flex-grid>
  

  Thank you very much.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:02 pm EST

  Hello Hoang,
  
  Please use the following code snippet for the same:

  <wj-flex-grid #flex [itemsSource]="data" (formatItem)="formatItem(flex,$event)></wj-flex-grid>
  
  Class AppCmp{
    formatItem(s:wjGrid.FlexGrid,e:wjGrid.FormatItemEventArgs){
      if(e.panel.cellType==wjGrid.CellType.Cell && e.col==1){
          e.cell.style.backgroundColor='lightgreen';
      }
    }
  }

  Hope it helps !

  Thanks,
  
  Manish Kumar Gupta

• 

  hoang-nguyen

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:02 pm EST

  Thank you sir very much.

  e.col give me the column index. If I want to compare with column header instead of column index, which property/attribute can I use. I have tried e.col.header and e.col.name but they do not work. I want to retrieve the cell value. I have tried e.data but it does not work either. I have used:

  e.panel.columns[e.col].name to retrieve column header. This is not very convenience because I have to specify the column index. Is there another method?
  
  e.panel.getCellData(e.row, e.col, false) to retrieve the cell value. Is there another way such as e.data or e.value?

  Thank you sir again very much.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:02 pm EST

  Hello Hoang,
  
  For column header, we recommend to use header property instead of name. Since, if columns do not generate automatically, name property will be undefined.

  Regarding cell value, you have to use

  panel.grid.getCellData(e.row,e.col,false)

  .

  However, the simplest way to get cell/header value is to get innerText of cell. For this please use following code snippet:

  formatItem: function (s, e) {
                      if (wijmo.grid.CellType.ColumnHeader == e.panel.cellType) {
                          console.log(e.cell.innerText);
                      }
                  }

  PS: If cell text gets changed, condition based on it will be treated false.
  
  Hope it helps !

  Thanks,
  
  Manish Kumar Gupta

• 

  hoang-nguyen

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:02 pm EST

  Thank you sir very much.