BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
<ejs-grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column>
<e-column field='CustomerID' headerText='Customer ID' width='120' [validationRules]='customeridrules'></e-column>
<e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightrules'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'></e-column>
<e-column field='Verified' editType='booleanedit' headerText='Fee Status' width=60 type="boolean" displayAsCheckBox='true'></e-column>
</e-columns>
</ejs-grid>
|
[.html]
<div class="control-section">
<ejs-grid #grid [dataSource]='data' (dataBound)='dataBound($event)' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column>
<e-column field='CustomerID' headerText='Customer ID' width='120' [validationRules]='customeridrules'></e-column>
<e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightrules'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'></e-column>
<e-column field='Verified' headerText='Fee Status' editType='booleanedit' width=60 type="boolean">
<ng-template #template let-data>
<div>
<ejs-checkbox #checkbox [checked]='data.Verified' (change)='checkboxChange($event)'></ejs-checkbox>
</div>
</ng-template>
</e-column>
</e-columns>
</ejs-grid>
</div>
|
[.component.ts]
...
public ngOnInit(): void {
this.data = ...
}
checkboxChange(args: any) {
let currentRowObject: any = this.grid.getRowObjectFromUID(args.event.target.closest('tr').getAttribute('data-uid'));
let currentRowData: Object = currentRowObject.data;
let rowIndex: any = args.event.target.closest('td').getAttribute("index");
this.grid.setCellValue(currentRowData["OrderID"],"Verified",args.checked); //save the checkbox changes
}
}
|
normal-edit.component.ts
checkboxChange(args: any) {
let currentRowObject: any = this.grid.getRowObjectFromUID(args.event.target.closest('tr').getAttribute('data-uid'));
let currentRowData: Object = currentRowObject.data;
let rowIndex: any = args.event.target.closest('td').getAttribute("index");
if (this.grid.editSettings.mode === 'Normal') {
this.grid.setCellValue(currentRowData["OrderID"], "Verified", args.checked);
} else if (this.grid.editSettings.mode === 'Batch') {
this.grid.editModule.updateCell(rowIndex, "Verified", args.checked);
}
} |
normal-edit.html
<e-column field='Verified' headerText='Fee Status' editType='booleanedit' width=60 type="boolean">
<ng-template #template let-data>
<div>
<ejs-checkbox #checkbox [checked]='data.Verified' (change)='checkboxChange($event)'></ejs-checkbox>
</div>
</ng-template>
</e-column> |
<ejs-grid #grid [dataSource]='data' [allowSelection]='false'></ejs-grid> |
// Checkbox change event handler
checkboxChange(args: any) {
var verIndex;
// Retrieve the index which has previous checked value
this.grid.dataSource.forEach((dat, index) => { if (dat["Verified"] === true) { verIndex = index } });
if (verIndex !== undefined) {
// Update the checkbox field value for that row and refresh the Grid columns
this.grid.dataSource[verIndex]["Verified"] = false;
this.grid.refreshColumns();
}
} |