We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hello,
we have a need for development but we cannot correctly implement all the functionalities between them.
first, we must have an array as shown in the basic function of treegrid.
then the user can click on "add" to add a new row.
when the user goes to the first field he must have a dropdown with predefined elements from a json.
then, when the user makes a choice all the lines are pre-filled from the same json.
once the entire line is pre-filled, the user must be able to modify all the cells.
in addition to that, the total on the far right of each row should be calculated based on three columns and a subtotal of the entire rows should be calculated based on all the totals.
have i been clear enough?
thank you very much in advance.|
App.Component.html
<ejs-treegrid #treegrid [dataSource]='data' height='350' childMapping='subtasks' [treeColumnIndex]='1' [editSettings]='editSettings' [toolbar]='toolbar'>
<e-columns>
<e-column field='taskName' headerText='Task Name' width='200' [validationRules]='tasknamerules' [edit]='dpParams' ></e-column>
<e-column field='taskID' headerText='Task ID' width='70' isPrimaryKey='true' textAlign='Right' [edit]='numericParams' [validationRules]='taskidrules'></e-column>
. . .
<e-column headerText='Total' width='80' textAlign='Right'>
<ng-template #template let-data>
<div>{{data.duration + data.taskID}}</div>
</ng-template>
</e-column>
</e-columns>
</ejs-treegrid>
App.Component.ts
export class AppComponent {
public data: Object[] = [];
public dpParams: Object;
public autoCompleteObj: DropDownList;
@ViewChild('treegrid')
public treegrid: TreeGridComponent;
ngOnInit(): void {
this.data = sampleData;
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Row' };
this.dpParams = {
create: () => {
let elem: HTMLInputElement = document.createElement('input');
elem.id = 'taskname';
return elem;
},
read: () => {
return this.autoCompleteObj.value;
},
destroy: () => {
this.autoCompleteObj.destroy();
},
write: (args: { rowData: Object, column: Column, element: HTMLElement }) => {
this.autoCompleteObj = new DropDownList({
dataSource: <{key: string, value: any}[]>this.treegrid.grid.dataSource,
fields: { value: 'taskName' },
value: args.rowData[args.column.field],
change: this.valueChanged
});
this.autoCompleteObj.appendTo(args.element);
}
};
} |
|
valueChanged(e: any){
let selected: string = e.value;
let rowData: object = e.itemData;
let formObj: object = e.element.closest('form').ej2_instances[0];
(formObj as any).inputElements.forEach(input => {
if(["taskID", "duration", "approved"].indexOf(input.name) != -1) {
input.value = rowData[input.name];
}
})
} |
