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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Advanced functionnality in treegrid

Thread ID:

Created:

Updated:

Platform:

Replies:

151203 Feb 3,2020 07:18 PM UTC Feb 4,2020 03:38 PM UTC Angular - EJ 2 1
loading
Tags: TreeGrid
Gaylord Petit
Asked On February 3, 2020 07:18 PM UTC

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.


Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On February 4, 2020 03:38 PM UTC

Hi Gaylord, 

Thanks for contacting Syncfusion Support. 


Query#1:- when the user goes to the first field he must have a dropdown with predefined elements from a json. when the user makes a choice all the lines are pre-filled from the same json. 

As per your requirement we have placed the Dropdown using EditTemplate property of the TreeGrid. Using EditTemplate we can place any ej2 controls inside TreeGrid while on Editing.  

Query#2:- in addition to that, the total on the far right of each row should be calculated based on three column -- >Also while using column Template feature we have calculated value of three column and displayed it on Template column.   
Refer to the demo Links:- 
Please refer to the code example:- 

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); 
            } 
        }; 
    } 

In the change event of the Dropdownlist we have bind value for the remaining fields in the TreeGrid based on the selected value.  

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]; 
      } 
    }) 
  } 


Query#3:- subtotal of the entire rows should be calculated based on all the totals 
 
We can calculate the total of the rows using Aggregate feature of the TreeGrid. The calculate values  of the row will be displayed in the footer. 

Refer to the documentation Link:- 

Please get back to us if you need any further assistance 

Regards, 
Farveen sulthana T 


CONFIRMATION

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon