Problems with TreeGrid component

[Marko Bezjak]

Hello.

I have some troubles with the tree-grid component. In this thread I will focus on two that represent the biggest problem for me.

I have prepared an example where you will be able to see what I'm talking about.

https://stackblitz.com/edit/angular-s7i7hi-qddtp3

Porblem 1) after the method setRowData is called on a row... this row will lose it's hierarchy.. so in my example if you press on the button "setRowData" it will call this method on row number 2 and set the TaskName to 'aaa' but when the row is updated it's also moved to the left.. and this is not the right position in the hierarchy.

Problem 2) When dropping row on index = 0 the animation (red line) is not visible.. letting users in doubt if drag&drop is even allowed there.

[Gowri Loganathan]

Hi Marko, 

 

Thanks for using Syncfusion Products. 

 

Query#: Treegrid row loses its hierarchy after calling setRowData to update the record. 

 

We have analysed your query at our end and we are able to reproduce the reported issue of misalignment at our end. We are validating the issue in our source and we will provide you the further details on 26^th Feb 2020. 

 

 

Query#: When dropping row on index = 0 the animation (red line) is not visible. 

 

We have checked your reported issue at our end and we are able to reproduce the issue at our end. We have logged this as issue at our end, which will expected to be rolled out on our volume 1 beta release (March 9, 2020). 

 

 

Please revert us, if you need more assistance on this. 

 

Regards, 

Gowri V L. 

 

 

[Marko Bezjak]

Hello, 

Problem 3) When trying to export the grid as PDF I get this error which I don't fully understand. I guess some characters are unsupported but the only special characters in my case are % and  - (dash). 

Regards.

Marko

[Marko Bezjak]

Problem 4) I am having trouble globalizing the whole tree-grid. For example in context menu "AddRow" is not mapped to my language..and "DeleteRecord" is mapped correctly. Am I doing anything wrong in globalization object?

Regards.

Marko

[Marko Bezjak]

Problem 5) event "rowSelected" is not triggered by the drag and drop handle column (). I kind of understand why you disabled selection here but still it would be real nice if users were able to select a row with dragAndDropIcon column as well.

 

Problem 6) event "recordDoubleClick" IS triggered when event takes place on drag and drop handle icon column  ().. however the event lacks all of the row information. In the picture bellow you can see the first event that was triggered by double clicking on a normal column and second event that took place on previously mentioned column.

[Gowri Loganathan]

Hi Marko, 

 

Thanks for the patience. 

 

Query1#: Treegrid row loses its hierarchy after calling setRowData to update the record.  

We have validated the defect you have initiated with us. Thank you for the taking the time to report the issue and helping us improve our product. At Syncfusion we are committed to fixing all the validated defect (subject to technological feasibility and Product Development Life Cycle) and including its fix in our subsequent release. So fix for the issue will be included in our Volume 1 beta release which is expected to be rolled out in the second week of March 2020. 

  

You can track the current status of your request, review the resolution timeline and contact us for any further inquiries through this link.  

https://www.syncfusion.com/feedback/12383/hierarchy-misalignment-in-treegrid-when-using-setrowdata-method 

  

Disclaimer: The feedback link is in review state and you can check it once it is validated 

  

Note: To view the above feedback, kindly login into your account.  

 

 

Query2#: When trying to export the grid as PDF I get this error which I don't fully understand. I guess some characters are unsupported but the only special characters in my case are % and  - (dash).  

 

We are validating the reported issue at our end, meanwhile we would like to confirm the below details. 

1. Share the complete TreeGrid code example.
2. Share the video demonstration of the issue.
3. If possible, share the issue reproducible sample.

Provided details will help us to validate the reported issue as early as possible. 

Query3#: Event "rowSelected" is not triggered by the drag and drop handle column ( ). I kind of understand why you disabled selection here but still it would be real nice if users were able to select a row with dragAndDropIcon column as well. 

 

Rowselected event will not be triggered when you perform row drag and drop functionality. It is not feasible to select row with drag and drop functionality.  

Query4#: Event "recordDoubleClick" IS triggered when event takes place on drag and drop handle icon column  ( ).. however the event lacks all of the row information. In the picture bellow you can see the first event that was triggered by double clicking on a normal column and second event that took place on previously mentioned column. 

 

Query5#: I am having trouble globalizing the whole tree-grid. For example in context menu "AddRow" is not mapped to my language..and "DeleteRecord" is mapped correctly. Am I doing anything wrong in globalization object? 

 

We are validating the above queries (4 & 5) and will provide you the response on 27^th February 2020. 

 

Until then, we appreciate your patience. 

 

Regards, 

Gowri V L. 

[Marko Bezjak]

Hello.

Thank you for your hard work and for updating me.

You requested more information about this problem:

Query2#:

When trying to export the grid as PDF I get this error which I don't fully understand. I guess some characters are unsupported but the only special characters in my case are % and  - (dash).  

We are validating the reported issue at our end, meanwhile we would like to confirm the below details. 

1. Share the complete TreeGrid code example.
2. Share the video demonstration of the issue.
3. If possible, share the issue reproducible sample.

Provided details will help us to validate the reported issue as early as possible.

I extended my first example to showcase this problem. The bug occurs when any of column headers includes a (i guess) none English characters. In my case it is a letter "Ž".. which is commonly used in our country. other such problematic characters might be (š, č ,ć ,đ, and so on). It's on you to try if any of those cause problems as well.. because I haven't tested them all.

example: https://stackblitz.com/edit/angular-s7i7hi-nvevxe?file=app.component.ts (header text: Task Name Ž)

Regards.

Marko

[Gowri Loganathan]

Hi Marko, 

  

Thanks for the patience 

  

Query – 1: “Issue: PDF export error, while using non-English character.”  

Special characters are not supported in the pdf’s default fonts and so on using these characters error will be thrown. For including special characters you need to use custom fonts using TrueTypeFont property in the pdf exportProperties theme by passing the base64 format of the custom font that supports the special character to it. More details on this can be found in the below help documentation site 

  

Documentation: https://ej2.syncfusion.com/documentation/treegrid/pdf-export/#add-custom-font-for-pdf-exporting 

  

Sample: https://stackblitz.com/edit/vbuptk-pk43ny 

  

  

Query -2: “Event recordDoubleClick’s arguments lack row information on double clicking the drag and drop icon”  

As the TreeGrid is a dependent control of Grid, the reported issue is reproduced in the depenedent control. We have forwarded the query to concern team and we will provide you the response on 28^th Feb 2020. 

  

  

Query -3:”Issue in localization on AddRow in contextmenu in Treegrid” 

We have validated the defect you have initiated with us. Thank you for the taking the time to report the issue and helping us improve our product. At Syncfusion we are committed to fixing all the validated defect (subject to technological feasibility and Product Development Life Cycle) and including its fix in our subsequent release. So fix for the issue will be included in our Volume 1 main release which is expected to be rolled out in the end of March 2020.  

   

You can track the current status of your request, review the resolution timeline and contact us for any further inquiries through this link. 

https://www.syncfusion.com/feedback/12398/need-to-provide-localization-support-for-addrow-above-below-menu-items-in 

    

Note: To view the above feedback, kindly login into your account 

  

Query -4: Treegrid row loses its hierarchy after calling setRowData to update the record.  

  

Query -5: When dropping row on index = 0 the animation (red line) is not visible.  

  

The fix for the reported issues in Query 3,4,5, will be expected to rolled out in the end of the March 2020. 

  

  

Until then we appreciate your patience. 

  

Please get back to us, if you have any concerns. 

  

Regards, 

Gowri V L. 

[Gowri Loganathan]

Hi Marko, 

 

Thanks for your patience. 

 

Query#: The recordDoubleClick event does not contain row information when clicked on drag and drop icon 

 

We have logged – “The recordDoubleClick event does not contain row information when clicked on drag and drop icon” as a bug. Fix for this issue will be included in our weekly patch release which is expected to be rolled out in 18^th March 2020.  

   

You can track the current status of your request, review the resolution timeline and contact us for any further inquiries through this link.   

Feedback link: https://www.syncfusion.com/feedback/12471/the-recorddoubleclick-event-does-not-contain-row-information-when-clicked-on-drag 

   

Note: To view the above feedback, kindly login into your account.   

 

Please get back to us, if you need more assistance. 

 

Regards, 

Gowri V L. 

 

[Parthkumar Kakadiya]

Hello,

I followed the get started guidline to implement treegrid to my Angular 12 Project.

Some how I am not able to see the styles of the treegrid view.

I have attached the project.

Regards,

Parth

Attachment: treegridview_58589c67.7z

[Pon Selva Jeganathan]

Hi Parth, 

Thanks for contacting syncfusion forum. 

Query: how I am not able to see the styles of the treegrid view. 

 

We checked your shared sample, we are able to reproduce the issue(styles are not applied) at our end. You are not correctly refer the styles in your shared sample. So, styles are not applied. 

To avoid this issue, we suggest you refer this CSS reference into the styles.css file( [src/styles.css]) . 

 

Please refer to the below code snippet, 

 

 

Your code. 

 

App.component.css 

 

 

 

@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; 

@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; 

@import '../../node_modules/@syncfusion/ej2-calendars/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-grids/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-treegrid/styles/material.css';  

 

 

 

 

Modified code: 

 

Style.css 

 

 

@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-grids/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-treegrid/styles/material.css'; 

 

 

 

 

 

Please refer to the below documentation for referring the styles, 

https://ej2.syncfusion.com/angular/documentation/treegrid/getting-started/#adding-css-reference 

And we changed it in your sample, which you can download from the link below. 

Sample Link: https://www.syncfusion.com/downloads/support/forum/151795/ze/tree-grid-view1375280111 

Kindly get back to us for further assistance. 

Regards, 

Pon selva 

[Parthkumar Kakadiya]

Hi  Pon selva ,

Thank you for your quick reply.

It worked like a charm. 

Regards,

Parth

[Pon Selva Jeganathan]

Hi Parth,  

 

Thanks for the update. 

 

We are glad to hear your query has been solved by our solution. 

 

Kindly get back to us for further assistance. We are happy to assist you. 

 

   

Regards, 

Pon selva