Edit in TreeGrid

[sunithra]

Hi

I need a help by Adding a button control in treegrid by doing Action like Edit  & Delete option.Kindly find the screen shot for your reference,need Edit functionality under the Action field.

Thanks in Advance .

Regards,

Sunithra.C

Attachment: sample_5e67c8c9.zip

[Farveen Sulthana Thameeztheen Basha]

Hi Sunithra, 

Thanks for contacting Syncfusion Support. 

Query#:- I need a help by Adding a button control in treegrid by doing Action like Edit  & Delete option. 

We have checked your query and by default TreeGrid provides an option to render CRUD action buttons in a column by using the CommandColumn feature. 

 

 Please refer to the code example:- 

let grid: TreeGrid = new TreeGrid( 

        { 

            dataSource: sampleData, 

            childMapping: 'subtasks', 

            treeColumnIndex: 1, 

            height: 400, 

            columns: [ 

                { 

                    field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right', 

                    validationRules: { required: true, number: true }, width: 80 

                }, 

                { 

                    headerText: 'Manage Records', width: 130, 

                    commands: [{ type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } }, 

                    { type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } }, 

                    { type: 'Save', buttonOption: { iconCss: 'e-icons e-update', cssClass: 'e-flat' } }, 

                    { type: 'Cancel', buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' } }] 

                } 

            ] 

        }); 

    grid.appendTo('#Grid'); 

Demo and Documentation Link:- 

https://ej2.syncfusion.com/angular/documentation/treegrid/edit/?no-cache=1#command-column 

https://ej2.syncfusion.com/angular/demos/#/material/treegrid/commandcolumn 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T  

[sunithra]

Hi Sunithra, 

Thanks for contacting Syncfusion Support. 

Query#:- I need a help by Adding a button control in treegrid by doing Action like Edit  & Delete option. 

We have checked your query and by default TreeGrid provides an option to render CRUD action buttons in a column by using the CommandColumn feature. 

 

 Please refer to the code example:- 

let grid: TreeGrid = new TreeGrid( 

        { 

            dataSource: sampleData, 

            childMapping: 'subtasks', 

            treeColumnIndex: 1, 

            height: 400, 

            columns: [ 

                { 

                    field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right', 

                    validationRules: { required: true, number: true }, width: 80 

                }, 

                { 

                    headerText: 'Manage Records', width: 130, 

                    commands: [{ type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } }, 

                    { type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } }, 

                    { type: 'Save', buttonOption: { iconCss: 'e-icons e-update', cssClass: 'e-flat' } }, 

                    { type: 'Cancel', buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' } }] 

                } 

            ] 

        }); 

    grid.appendTo('#Grid'); 

Demo and Documentation Link:- 

https://ej2.syncfusion.com/angular/documentation/treegrid/edit/?no-cache=1#command-column 

https://ej2.syncfusion.com/angular/demos/#/material/treegrid/commandcolumn 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T  

Hi

Thanks for your Reply . If i click on Edit button on that page it should take me to our popup instead of showing default popup , instead of inline editing .

Kindly reply as soon as possible.

[Farveen Sulthana Thameeztheen Basha]

Hi Sunithra, 

 

Query#:- If i click on Edit button on that page it should take me to our popup instead of showing default popup , instead of inline editing . 

 

From your query we suspect that you need to customize the Dialog Form with your Template. In Tree Grid, we have the support of Template driven Forms so that you can place the forms using ngTemplate with editSettings mode with Dialog. 

 

Refer to the documentation and Demo Link:- 

https://ej2.syncfusion.com/angular/documentation/treegrid/edit/?no-cache=1#template-driven-forms 

Sample Link:- https://stackblitz.com/run?file=app.component.html 

If your requirement is different from above solution, please get back to us with further details. 

Regards, 

Farveen sulthana T 

[sunithra]

Hi Sunithra, 

 

Query#:- If i click on Edit button on that page it should take me to our popup instead of showing default popup , instead of inline editing . 

 

From your query we suspect that you need to customize the Dialog Form with your Template. In Tree Grid, we have the support of Template driven Forms so that you can place the forms using ngTemplate with editSettings mode with Dialog. 

 

Refer to the documentation and Demo Link:- 

https://ej2.syncfusion.com/angular/documentation/treegrid/edit/?no-cache=1#template-driven-forms 

Sample Link:- https://stackblitz.com/run?file=app.component.html 

If your requirement is different from above solution, please get back to us with further details. 

Regards, 

Farveen sulthana T 

Hi

Hi Thanks for your reply but the link what you have sent that not showing the results.

 

I need to control the functionality by only click on Edit button on the Grid. Normally by click on records in the grid its take me to another page we did a another functionality.

I need a Edit button only on the Grid,kindly find on the attached screen shot.

Regards,

Sunithra.C

Attachment: demo.jpg_85cad765.zip

[Farveen Sulthana Thameeztheen Basha]

Hi Sunithra, 

 

Query#:-  the link what you have sent that not showing the results  I need to control the functionality by only click on Edit button on the Grid. Normally by click on records in the grid its take me to another page we did a another functionality. 

 

Sorry for the link with previous update. Kindly check the updated link which satisfy your requirement. In which, we have achieved both command column and customized form with popup on Edit button 

 Refer to the modified Demo Link:- 

https://stackblitz.com/edit/angular-u7hyfk?file=app.component.html 

Refer to the screenshot:- 

 

 We have provided Edit functionality for on clicking Edit button in Grid row by removing default Toolbar. Do you want to prevent any click action on the row? 

   

If your requirement is different from above solution, please get back to us with further details 

Regards, 

Farveen sulthana T 

[sunithra]

Hi

Do you want to prevent any click action on the row?  -- yes 

regards,

Sunithra.C

[sunithra]

Hi

Regarding click event on the grid, if i click on any of the grid it should navigate to the separate page, by click on edit functionality it take me to the separate popup and its fine.

In the attachment we are having treegrid arrow i need your help to customise(change) the arrow.

in Grid default expanded child is false after click the arrow need to expanded the child . 

Thanks & Regards,

Sunithra.C

Attachment: july24.jpg_633b2a07.zip

[Farveen Sulthana Thameeztheen Basha]

Hi Sunithra, 

  

Query #1: " if i click on any of the grid it should navigate to the separate page" 

  

We have analyzed you query and prepared a sample to demonstrate the above mentioned requirement. We have used rowSelected event to achieve your requirement and in the event function we have navigated to a new page. Kindly refer to the below sample for your reference, 

  

Sample: https://stackblitz.com/edit/angular-u7hyfk-btb1am?file=app.component.ts 

  

Query #2: "we are having treegrid arrow i need your help to customise(change) the arrow" 

  

Before preparing a sample with a customization, we would like to know the below details as it will help us provide a better solution as soon as possible, 

  

1. Could you kindly provide us the exact customization requirement here in detail?
2. Could you provide us a UI level screenshot if possible?

  

Query #3: "in Grid default expanded child is false after click the arrow need to expanded the child" 

  

We suggest you to refer to the below help documentation to achieve your requirement, 

  

Documentation: https://ej2.syncfusion.com/documentation/api/treegrid/#collapseall 

 

Regards, 

Farveen sulthana T 

[sunithra]

Hi

If i click on the grid its redirect to another page its works fine, but if we do click on the edit button on the same Grid  its shows the pop up first and redirect to another page also .Check the below link for your reference .

https://stackblitz.com/edit/angular-u7hyfk-btb1am?file=app.component.ts 

Reply for  Query #2 : 

attached a screenshot for your reference 

regards,

Sunithra.C

[sunithra]

Hi

Reply for Query 2 .

Attached a screenshot for your reference .

Regards,

Sunithra.C

Attachment: sample_image.jpg_c7dac96b.zip

[Farveen Sulthana Thameeztheen Basha]

Hi Sunithra, 

 

Query#:- If i click on the grid its redirect to another page its works fine, but if we do click on the edit button on the same Grid  its shows the pop up first and redirect to another page also . 

 

We can reproduce your reported scenario at our end. We have prevented from redirect to another page while clicking on Editbutton by checking the condition on rowSelected event. 

Refer to the code example:- 

   

select(args: DialogEditEventArgs): void { 

      if(!args.target.classList.contains("e-btn-icon")) 

        window.location.assign("https://ej2.syncfusion.com/home/angular.html"); //url as per your requirement 

    }    

 

Refer to the modified sample link:- 

https://stackblitz.com/edit/angular-u7hyfk-atczdi?file=app.component.ts 

 

Query#2:- attached a screenshot for your reference  

 

We couldn’t find any screenshot attached. Could you please share it again 

Regards, 

Farveen sulthana T 

[sunithra]

Hi

Query#2:- attached a screenshot now

Regards,

Sunithra.C

Attachment: sample_image.jpg_c2fa6162.zip

[sunithra]

Hi

1.) I facing a problem by click on caret down arrow it should close the tree list instead of its Navigate to other page,find the screen shot for your reference. 

attached screenshot name - arrow

2.) In the Tree Grid we are having Edit functionality,but in that i need label button instead of icon,find the screen shot for your reference.

attached screenshot name - edit_button_icon

Attachment: sample_10f6ccea.zip

[Padmavathy Kamalanathan]

Hi Sunithra, 

Thanks for the update. 

QUERY1: In the Tree Grid we are having Edit functionality, but in that i need label button instead of icon 

From your query we understand that you need to display a labelled button in edit functionality instead of icons. This can be achieved by setting “Content” in the buttonOptions of commands property.  

Please refer the below code snippet, 

ngOnInit(): void { 

 

      ----------- 

    this.commands = [{ type: 'Edit', buttonOption: { content: 'Edit', cssClass: 'e-flat' } }, 

    { type: 'Delete', buttonOption: {  content: 'Delete', cssClass: 'e-flat' } }, 

    { type: 'Save', buttonOption: { content: 'Save',  cssClass: 'e-flat' } }, 

    { type: 'Cancel', buttonOption: { content: 'Cancel',  cssClass: 'e-flat' } }]; 

} 

QUERY2: I facing a problem by click on caret down arrow it should close the tree list instead of its Navigate to other page 

 

While expanding/collapsing the icon, it navigate to the other page, because we have not checked whether target has class name of these expand/collapse icon (e-treegridexpand and e-treegridcollapse) before redirecting to a specific page in “select” method. 

By using the below code we can prevent redirection to another page while expanding/collapsing treegrid. 

select(args: DialogEditEventArgs): void { 

//  - check if args.target contain class name of expand/collapse icon (e-treegridexpand and e-treegridcollapse) and class name of custom command button (e-btn)  

if(!args.target.classList.contains("e-btn") && !args.target.classList.contains("e-treegridexpand") && !args.target.classList.contains("e-treegridcollapse") ) 

      window.location.assign("https://ej2.syncfusion.com/home/angular.html"); //url as per your requirement 

  }    

Please refer the below sample, 

https://stackblitz.com/edit/angular-u7hyfk-mbyds1 

If you have further queries, please get back to us. 

Regards, 

Padmavathy Kamalanathan  

[sunithra]

Hi

Query #2: "we are having treegrid arrow i need your help to customise(change) the arrow" 

  

Before preparing a sample with a customization, we would like to know the below details as it will help us provide a better solution as soon as possible, 

  

1. Could you kindly provide us the exact customization requirement here in detail?
2. Could you provide us a UI level screenshot if possible?

-----> 

Attached a screenshot for your reference. 

Regards,

Sunithra.C

Attachment: sample_image.jpg_c7dac96b_2119ef8e.zip

[Farveen Sulthana Thameeztheen Basha]

Hi Sunithra, 

As per your requirement, we have customize the CSS of the expand collapse icon as like below code example:- 

Please refer to the code example:- 

<style> 

 .e-icons.e-treegridcollapse::before{ 

  content: '\e913' 

} 

 .e-icons.e-treegridexpand::before{ 

  content: '\e913' 

}  

  </style> 

Modified sample Link:- https://stackblitz.com/edit/angular-u7hyfk-hjse5r?file=index.html 

Refer to the documentation Link:- 

https://ej2.syncfusion.com/documentation/appearance/icons/ 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

[sunithra]

Hi

I am having problem in fetching data on the Grid, using this type parentIdMapping & idMapping

<ejs-treegrid [dataSource]='labelData' gridLines="Horizontal" rowHeight='60' [treeColumnIndex]='1' parentIdMapping='parentId'

idMapping='id' enableCollapseAll="true" >

sample Array below

this.labelData = [{

hasChild: true,

id: 83,

labelName: "formPageLAbel",

labelPageType: 2,

labelType: 1,

name: "formPageLAbel",

organisationId: 57,

parentId: 0,

userId: 2444

}, {

hasChild: false,

id: 84,

labelName: "labelunder",

labelPageType: 2,

labelType: 1,

name: "labelunder",

organisationId: 57,

parentId: 83,

userId: 2444

}, {

hasChild: false,

id: 84,

labelName: "labelunder",

labelPageType: 2,

labelType: 1,

name: "labelunder",

organisationId: 57,

parentId: 83,

userId: 2444

}];

Problem is

1. enableCollapseAll is not working

2. Having data on the grid , but some times it fetching the data but some times its not .

[Farveen Sulthana Thameeztheen Basha]

Hi Sunithra, 

Query#:- I am having problem in fetching data on the Grid, using this type parentIdMapping & idMapping. 1. enableCollapseAll is not working 

 

We have checked your query and prepared sample using parentIdMapping and idMapping using your provided dataSource. While checking your dataSource you have given parentId with value 0(parendIdmapping) but you have not defined the corresponding idMapping (id value as 0) in your dataSource. So the reported problems has been occurred. So we suggest you to set value null to parentId or define correspond idMapping value on the dataSource. 

 

Sample Link:- https://stackblitz.com/edit/yeq6v9-uhdyvf?file=data-source.ts 

 

Screenshot:-  

 

Query#2:- Having data on the grid , but some times it fetching the data but some times its not . 

 

We are unable to reproduce your reported problem at our end. We need some more additional details to find the cause of the issue. Share us the following details. 

 

1. Complete code example.
2. Exact scenario you have faced the issue.
3. Screenshot/Video Demo to replicate the issue.
4. If possible replicate the issue in the above sample and revert us back.

 

 

Regards, 

Farveen sulthana T 

[sunithra]

Hi

   I need a help on this to remove the edit button on the first row  in grid not for the remaining row ,we going to use the first row as a heading,below the heading the labels will come which is mentioned on the screen shot .

for edit button use this commands .

<e-column textAlign='Left' headerText='Actions' width='50' [commands]='commands'></e-column>

this.commands = [{ type: 'Edit', buttonOption: { content: 'Edit', cssClass: 'edit_button_label' } }];

Regards,

Sunithra.C

Attachment: samplegrid_fa0cebe3.zip

[Farveen Sulthana Thameeztheen Basha]

Hi sunithra, 

We have achieved your requirement through queryCellInfo event of the TreeGrid. By using queryCellInfo event we have removed the first row button based on the index and added the text from its args. 

Refer to the code example:- 

App.component.html 

<ejs-treegrid [dataSource]='data'  childMapping='subtasks' [treeColumnIndex]='1'allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings'  (queryCellInfo)="queryCellInfo($event)" > 

        <e-columns> 

            <e-column field='taskID' headerText='Task ID' width='120' textAlign='Right' isPrimaryKey='true' ></e-column> 

           .   .  . 

       </e-columns> 

        

   </ejs-treegrid> 

 

App.component.ts 

   queryCellInfo(args: QueryCellInfoEventArgs): void { 

       if (args.data.index == 0) { 

            if (args.cell.classList.contains("e-unboundcell")) { 

                args.cell.querySelector('.e-unboundcelldiv').style.display = "none"; 

                args.cell.innerText = "Header"; 

                

            } 

        } 

Refer to the sample Link:- 

https://stackblitz.com/edit/angular-u7hyfk-r4g4mp?file=app.component.ts 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T