FlexGrid grouped row cell padding

FlexGrid grouped row cell padding

Posted by: scott.chinn on 11 February 2020, 2:45 pm EST

• 

  scott.chinn

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 February 2020, 2:45 pm EST - Updated 3 October 2022, 5:37 pm EST

  Hello, we implemented a checkbox cell in the 1st column so users can select rows. It all works and looks fine:
  
  

  

  793×492 27.9 KB

  However, when the user adds a group, then the 1st column checkboxes get 20px extra left padding added and it’s not centered anymore:
  
  

  

  637×571 31.3 KB

  Is there a way to prevent the 1st column from getting indented? It doesn’t look like simple classes can be overridden since the 20px left padding is added to the cell directly in code, it seems.

  Thanks,
  
  Scott

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 12 February 2020, 2:21 am EST

  Hi Scott,

  You may add a cssClass to the first column (in which you have added the checkboxes) and use that class to remove the padding from the input element.

  In app.component.html:

  <wj-flex-grid-column [width]="40" cssClass="align-center" [isReadOnly]="true" align="center">
      <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
        <input type="checkbox" [(ngModel)]="cell.row.isSelected" [checked]="cell.row.isSelected" />
      </ng-template>
    </wj-flex-grid-column>
  

  In styles.css:

  .align-center.wj-cell:not(.wj-group) {
    padding-left: 6px !important;
  }
  

  You may refer to the sample below:

  https://stackblitz.com/edit/angular-vtvwdy

  Regards,
  
  Ashwin

• 

  scott.chinn

  • Post Options:
  • Link
    Copy

  Posted 12 February 2020, 3:51 pm EST

  That worked. Thanks!