the checkbox is not visible for selection

[halilpolathalil]

I'm submitting a ... (check one with "x")

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior the checkbox is not visible for selection. it is added but invisible

Expected behavior I need checkbox selection.

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Table version: 11.3.0

• Angular version: angular 5.x

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript 2.9.x| ES6/7 | ES5]

[KingDarBoja]

Hello @halilpolathalil,

Could you provide a stackblitz demo in order to help you with your issue?

Cheers!

[halilpolathalil]

Hello @halilpolathalil,

Could you provide a stackblitz demo in order to help you with your issue?

Cheers!

Hi again, I figure out that there is checkbox in the cell but the borderline and the tick is invisible. when I add borderline manually , it was like in the picture. How can I do it is visible with css. Can I apply custom checkbox css class?

[KingDarBoja]

You can provide custom template cells which implements any kind of checkbox.

For example, I do use the official Angular Material library in order to provide custom checkboxes to my cell template.

<ng-template #columnButton2 let-row="row" let-value="value" let-isSelected="isSelected" let-onCheckboxChangeFn="onCheckboxChangeFn" ngx-datatable-cell-template>
   <mat-checkbox [disabled]="disabledInput" [color]="'accent'" [checked]="checkedInput" (change)="onCheckboxChangeFn.call(undefined, $event)"></mat-checkbox>
</ng-template>

You can check how to pass custom cell templates at the official docs.

Cheers!

[sarora2073]

After upgrading to ng-8.2 / ngx-datatable 15.0.2 i also suddenly found the checkbox was missing, despite that i was using custom template cells as recommended above.

I'm not sure exactly why the following fix helped, but changing the TemplateRef's static option from false to true made my custom template work.

BEFORE @ViewChild('checkboxTpl', { static: false}) checkboxTpl: TemplateRef<any>;

AFTER @ViewChild('checkboxTpl', { static: true }) checkboxTpl: TemplateRef<any>;

[KingDarBoja]

After upgrading to ng-8.2 / ngx-datatable 15.0.2 i also suddenly found the checkbox was missing, despite that i was using custom template cells as recommended above.

I'm not sure exactly why the following fix helped, but changing the TemplateRef's static option from false to true made my custom template work.

BEFORE @ViewChild('checkboxTpl', { static: false}) checkboxTpl: TemplateRef<any>;

AFTER @ViewChild('checkboxTpl', { static: true }) checkboxTpl: TemplateRef<any>;

This is caused by Angular 8 new behaviour of ViewChild and ContentChild decorator, you can chek them out at the official docs.

When static is not provided, uses query results to determine the timing of query resolution. If any query results are inside a nested view (such as *ngIf), the query is resolved after change detection runs. Otherwise, it is resolved before change detection runs.

[sarora2073]

In my case I'm not necesarily using structural directives like ngIf, ngFor in the custom template refs. e.g. my checkbox field is a simple mat-checkbox. I have another field which has a mat-icon with [ngClass]...in both cases i need to set static: true for the templates to work as expected (i.e. without, the checkbox is hidden, or the ngClass doesn't get applied in the mat-icon example).

According to this article :

"{ static: true } needs to be set when you want to access the ViewChild in ngOnInit".

I'm wondering if this explains why the ngx-datatable library to require static: true "in general", and if so, i'm inferring that would mean custom cell templates in ngx-datatable can't use structural directives, which sounds like a big limitation. However, at a quick glance I can't validate this concern -- i did a quick test and got an *ngIf directive to work in a cell template with static: true .. go figure!

I say all this just to leave some context for potential use cases / bugs that may come up... I actually can't make head or tails of why things are working as they do in this area.

[KingDarBoja]

To be honest, the static flag doesn't apply to only structural directives but how Angular handles lifecycle hooks.

I forgot to point out the official notes about this change due to future full Ivy support on Angular 9: https://angular.io/guide/static-query-migration

[halilpolathalil]

You can provide custom template cells which implements any kind of checkbox.

For example, I do use the official Angular Material library in order to provide custom checkboxes to my cell template.

<ng-template #columnButton2 let-row="row" let-value="value" let-isSelected="isSelected" let-onCheckboxChangeFn="onCheckboxChangeFn" ngx-datatable-cell-template>
   <mat-checkbox [disabled]="disabledInput" [color]="'accent'" [checked]="checkedInput" (change)="onCheckboxChangeFn.call(undefined, $event)"></mat-checkbox>
</ng-template>

You can check how to pass custom cell templates at the official docs.

Cheers!

It is not work. My checkbox template can not be applied. The checkbox style of ngx template is applied automatically. I cant Not change the style of checkbox.

[anthony-bt]

I had the same issue. Sometime I need to use "ng-deep::" to be sure to override the CSS style.