Format cell border

Format cell border

Posted by: grapecity on 3 November 2017, 4:31 am EST

• 

  grapecity

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 3 November 2017, 4:31 am EST

  I have a flexGrid declared in my html file as:

  <wj-flex-grid
  
  #flexProject
  
  [autoGenerateColumns]=“false”
  
  [headersVisibility]=“1”
  
  [allowSorting]=“true”
  
  [itemsSource]=“projectCollection”
  
  [isReadOnly]=“true”
  
  [selectionMode]=“1”
  
  [showMarquee]=“true”
  
  [keyActionTab]=“3”
  
  style=“height: 750px; max-height: 750px”>

                <wj-flex-grid-column
                  [header]="'Color'"
                  [allowSorting]="false"
                  [width]="47">
                  <ng-template
                    wjFlexGridCellTemplate
                    [cellType]="'Cell'"
                    let-item="item">
                    <button
                      ion-button
                      small
                      color="light"
                      [style.background-color]="getSelectedColor(item.ProjectID)"
                      (click)="setEventColor(flexProject, $event, item.ProjectID)">
                    </button>
                  </ng-template>
                </wj-flex-grid-column>
  
                <wj-flex-grid-column
                  [header]="'Project'"
                  [width]="'*'">
                  <ng-template wjFlexGridCellTemplate
                    [cellType]="'Cell'"
                    let-item="item">
                    <div>{{ item.Code || '00' }} - {{ item.ProjectName }}</div>
                    <div style="color: #777777">{{ item.Superintendent }}</div>
                  </ng-template>
                </wj-flex-grid-column>
  
                <wj-flex-grid-column
                  [header]="'Forecast'"
                  [binding]="'ForeCast'"
                  [width]="67">
                </wj-flex-grid-column>
  
                <wj-flex-grid-column
                  [header]="'Scheduled'"
                  [binding]="'Scheduled'"
                  [width]="80">
                </wj-flex-grid-column>
  
                <wj-flex-grid-column
                  [header]="'Difference'"
                  [binding]="'Difference'"
                  [width]="82">
                </wj-flex-grid-column>
              </wj-flex-grid>
  

  How do I change the border color when value of column “Difference” is less than 1, border color = green; when Difference >= 1; border color = red;

  I have tried to do it in formatItem() event and loadRows() event.

  In loadedRows() event, I can detect flex.columns.length but flex.rows.length is always 0. In formatItem() event, it only run on the first row and stop. Is there a way to declare cssClass inside html file or which event should I use to achieve this task? thank you very much.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 5 November 2017, 6:07 pm EST

  Hi Hoang,
  
  Could you please share a sample depicting your issue since we are unable to replicate the issue at our end. We tried the following code and it gets worked correctly.

   <wj-flex-grid #flex
      [itemsSource]="dataCollection"
      [isReadOnly]="false"
      [headersVisibility]="1"
    >
    <wj-flex-grid-column [binding]="'teamMemberID'">
      <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
        <button ion-button [style.background-color]="getSelectedColor(cell.item.teamMemberID)">Click</button>
      </ng-template>
    </wj-flex-grid-column>
    <wj-flex-grid-column [binding]="'businessUnitID'"></wj-flex-grid-column>
    </wj-flex-grid>
  

  LoadedRows should not be returned 0 and formatItem should run for all cells.

  ~Manish

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy

  Posted 13 November 2017, 10:53 am EST

  Thank you Manish. It is working now.