FlexGrid grouped row cell padding

Posted by: scott.chinn on 11 February 2020, 5:45 am EST

  • Posted 11 February 2020, 5:45 am EST

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


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


    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
  • Marked as Answer

    Replied 11 February 2020, 5:21 pm 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
  • Replied 12 February 2020, 6:51 am EST

    That worked. Thanks!
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels