Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
141197 | Nov 29,2018 11:20 AM UTC | Feb 3,2020 12:24 PM UTC | Angular - EJ 2 | 7 |
![]() |
Tags: Grid |
<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> |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.