How to add a class to a flexGrid cell to force a fixed size and center checkbox

How to add a class to a flexGrid cell to force a fixed size and center checkbox

Posted by: ssmith on 11 October 2018, 6:19 am EST

• 

  ssmith

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 October 2018, 6:19 am EST

  I have an Angular 6 project, in which I use FlexGrid’s with a left hand column of checkboxes used to select rows in the grid.

  The column is set to 80px wide, and the checkboxes usually center in the column, however if the screen zoom is changed, or sometimes seemingly at random, the column stays 80px, but the actual cell with the checkbox renders much wider, and the centered checkbox renders invisibly outside the bounds of the 80px column/cell, which means to the user - the checkbox has effectively disappeared.

  Making the cell wider by dragging the column divider reveals the checkbox, but I want to be able to set a hard width on all the elements - the column, cell, and checkbox to ensure they are always visible.

  The column template looks like this:

  <wj-flex-grid-column [header]="'Select'" [binding]="'selected'" align="center" [width]="80" >
      <ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" let-cell="cell">
          <span (click)="selectAll()">Select</span>	
      </ng-template>
      <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-row="row" let-item="item" style="width: 80px;" >
          <input type="checkbox" name="selected"  [(ngModel)]="item.selected">
      </ng-template>
  </wj-flex-grid-column>
  

  I would have expected to be able to add a class to the

  wjFlexGridCellTemplate [cellType]="'Cell'"

  , something like ```
  
  wjFlexGridCellTemplate [cellType]=“‘Cell’” class=“checkbox-column”

  
  Am I missing something here?
  
  This is with Angular 6.1.10 and Wijmo 5.20182.524

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 11 October 2018, 8:06 pm EST

  The column is set to 80px wide, and the checkboxes usually center in the column, however, if the screen zoom is changed, or sometimes seemingly at random, the column stays 80px
  
  <<<<<<<<<<<<<
  
  We are unable to replicate the issue at our end. Can you please have a look at the following sample and let us know if we are missing something to replicate the issue:
  
  https://stackblitz.com/edit/angular-hqrs5s?file=src%2Fapp%2Fapp.component.html

  however that doesn’t seem to be applied, and I can’t see my class included in the applied classes in the browser.
  
  <<<<<<<<<<<<
  
  This is because ng-templates do not support attributes such as class or style.
  
  However, if you are trying to select the root element of ng-template then you may set cssClass property on the column and then use CSS selector to select cell-element as:

  
  /* select-column is the class name set using cssClass property*/
  .wj-cell.select-column :first-child{ 
    background-color: pink;
  }
  

  You may also refer to the above sample.

  ~Sharad

• 

  ssmith

  • Post Options:
  • Link
    Copy

  Posted 12 October 2018, 3:06 am EST

  Thanks - the cssClass and :first-child configuration should let me target what I need!