Hi Vaishali,
Thanks for the update.
Query: Implement checkbox in multiple columns inside grid, data not rendring according to datasource.
Based on your query you want to render the checkbox component as per the dataSource values with column template feature in your Grid application. So, we have prepared sample and in that we have used the column template feature to render the checkbox component on based on the dataSource values.
We have also checked and unchecked all other checkboxes if any of the checkbox state is changed in the rows. For your convenience we have attached sample, please refer them for your reference.
Code Example:
|
App.component.html
<div class="control-section">
<ejs-grid #grid [dataSource]="data" [columns]="columns"> </ejs-grid>
<ng-template let-data #template1>
<ejs-checkbox
(change)="onChange($event)"
[checked]="data[data.column.field]"
></ejs-checkbox>
</ng-template>
</div> |
|
App.component.ts
ngOnInit(): void {
this.columns = [
{
field: "id",
headerText: "Employee ID",
width: "90"
},
{ field: "Template", headerText: "Template", width: "90" },
{
field: "All",
headerText: "All",
width: "90"
},
{
field: "Input",
headerText: "Input",
width: "90"
},
{ field: "View", headerText: "View", width: "90" },
{
field: "MarkComplete",
headerText: "MarkComplete",
width: "90"
}
];
}
onChange(args) {
let row = parentsUntil(args.event.target, "e-row", false);
if (row) {
row.querySelectorAll(".e-checkbox").forEach(element => {
(element as any).ej2_instances[0].checked = args.checked;
});
}
}
ngAfterViewInit(): void {
(this.grid.getColumns()[2].template as any) = this.temp1;
(this.grid.getColumns()[3].template as any) = this.temp1;
(this.grid.getColumns()[4].template as any) = this.temp1;
(this.grid.getColumns()[5].template as any) = this.temp1;
} |
Please get back to us if you need further assistance.
Regards,
Ajith G.
