Hello,
I am using dhtmlx grid with Angular, and i need to create a select all header for a checkbox column. This is my grid component code:
@Component({
selector: ‘mant-producto-grid’,
template: ‘<div #widget class=“dhx-container–grid”></div>’,
styleUrls: [’./grid.component.scss’],
})
export class GridComponent implements OnDestroy {
@ViewChild(‘widget’, { static: true })
container: ElementRef;
grid: any;
wait: Promise;
ngOnInit() {
const dataset = [ {“codigo”: “FP1”, “descripcion”: “ESTIERCOL”, “observaciones”: “”},
{“codigo”: “H”, “descripcion”: “HUECO”, “observaciones”: “”},
{“codigo”: “001000”, “descripcion”: “TRIGO”, “observaciones”: “”} ];
this.grid = new dhx.Grid(this.container.nativeElement, {
columns: [
{ id: ‘operaciones’, header: [{ text: ‘Operaciones’, align: “center” }, { text: “<input (click)=‘selectAll(checked)’ type=‘checkbox’ dhx_id=‘cell_editor’ class=‘dhx_checkbox__input’ style=‘user-select: none;’>”, align: “center” }], type: “boolean” },
{ id: ‘codigo’, header: [{ text: ‘Código’, align: “center” }, { content: “inputFilter” }] },
{ id: ‘descripcion’, header: [{ text: ‘Descripción’, align: “center” }, { content: “inputFilter” }] },
{ id: ‘observaciones’, header: [{ text: ‘Observaciones’, align: “center” }, { content: “inputFilter” }] },
],
autoWidth: true,
editable: true,
data: dataset,
});
}
ngOnDestroy() {
if (this.grid) {
this.grid.destructor();
}
}
selectAll(checked: boolean) {
this.grid.data.forEach((row: any, index: any, array: any) => {
this.grid.data.update(row.id, { “operaciones”: checked })
});
}
}
It does not work because “selectAll is not defined”. Is there any way to do this in a grid Angular component?
Thanks and regards.