Change Background color of buttons on cell Template

Change Background color of buttons on cell Template

Posted by: hoang.nguyen on 28 November 2017, 9:10 am EST

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 28 November 2017, 9:10 am EST

  I am looking for a way to reset all buttons on CellTemplate on Flexgrid. Let say I code a ‘Clear’ button that when user clicked it, I will clear all buttons in column 1 on the below flexGrid:

  <wj-flex-grid
                    id="Projects"
                    #flexProjects
                    [autoGenerateColumns]="false"
                    [headersVisibility]="1"
                    [allowSorting]="false"
                    [itemsSource]="projects"
                    [isReadOnly]="true"
                    [selectionMode]="3"
                    (loadedRows)="loadedRows(flexProjects)"
                    (formatItem)="formatItem(flexProjects,$event)"
                    style="height: 650px; max-height: 650px">
  
                    <wj-flex-grid-column
                      [header]="'Color'"
                      [allowSorting]="false"
                      [width]="45">
                      <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
                        <button
                          ion-button small color="light"
                          [style.background-color]="getSelectedColor(item.ProjectID)"
                          (click)="setEventColor($event, item.ProjectID, flexProjects)">
                        </button>
                      </ng-template>
                    </wj-flex-grid-column>
  
                    <wj-flex-grid-column
                      [header]="'Project'"
                      [allowSorting]="true"
                      [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'"
                      [allowSorting]="true"
                      [width]="75">
                    </wj-flex-grid-column>
  
                    <wj-flex-grid-column
                      [header]="'Scheduled'"
                      [binding]="'Scheduled'"
                      [allowSorting]="true"
                      [width]="75">
                    </wj-flex-grid-column>
  
                    <wj-flex-grid-column
                      [header]="'Difference'"
                      [binding]="'Difference'"
                      [allowSorting]="true"
                      [width]="75">
                    </wj-flex-grid-column>
  
                  </wj-flex-grid>
  

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy

  Posted 28 November 2017, 9:11 am EST

  Sorry I meant clear buttons’ background color!

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy

  Posted 28 November 2017, 9:11 am EST

  Thank you very much.

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 28 November 2017, 7:24 pm EST

  Hi,

  You can have a two way binding with buttons style.background property. Changing the model would update all the buttons background.

  Example:

  Template:

  
  ...
  <wj-flex-grid-column
                      [header]="'Color'"
                      [allowSorting]="false"
                      [width]="45">
                      <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
                        <button
                          ion-button small color="light"
                          [(style.background-color)]="buttonColor"
                          (click)="setEventColor($event, item.ProjectID, flexProjects)">
                        </button>
                      </ng-template>
                    </wj-flex-grid-column>
  ...
  
  

  TS:

  
  
  buttonColor: string  = '#fff';
  
  
  

  ~nilay

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy

  Posted 29 November 2017, 2:24 am EST

  Thank you Nilay