How to display color picker control for each node in tree grid dynamically?

[Ebenezer]

Hi, 

     I'm facing a problem in tree grid control, i'm trying to provide color picker for each node and also for its child dynamically. If i do so, color picker control was not working and it throws following violation warnings on console to n times. 

[Violation] 'message' handler took <N>ms

[Violation] 'setTimeout' handler took <N>ms

[Violation] Forced reflow while executing JavaScript took <N>ms

[Violation] 'mousedown' handler took <N>ms

Regards, 

Justin Ebenezer

Attachment: bugs_27e9615b.zip

[Vignesh Natarajan]

Hi Ebenezer, 

 

Thanks for using Syncfusion products. 

 

Query : If i do so, color picker control was not working and it throws following violation warnings on console to n times.  

 

We have prepared a sample as per your suggestion and we are able to reproduce the reported behavior at our end. The mentioned warnings are not related to our controls. These warning are a part of the Chrome browser which indicates that there is an opportunity to improve the performance in the running scripts. So, these warnings does not prevent our controls from working. 

Please refer the below public forums. 

https://stackoverflow.com/questions/42218699/javascript-chrome-violation-violation-handler-took-83ms-of-runtime 

https://stackoverflow.com/questions/41218507/violation-long-running-javascript-task-took-xx-ms 

You have mentioned that the color picker component is not working when it is rendered dynamically. We have also created a sample by rendering the ColorPicker component in a column using the Template Column feature of the TreeGrid and it is working fine. 

Please refer the below link for the sample. 

Sample : https://stackblitz.com/edit/angular-qxkhpg?file=columntemplate.html 

Please share the following details regarding your query. 

1. In our sample, when we click on color picker the palette is opening on the left corner of page, are you referring to this behavior as the issue?
2. Share how you have rendered the Color Picker component dynamically.
3. Share the exact scenario of the issue with video demonstration  of the issue.
4. Share the screenshot of script error in console window (if any)

Regards, 

Vignesh Natarajan. 

[Ebenezer]

Hi,

In the given url:  https://stackblitz.com/edit/angular-qxkhpg?file=app.module.ts. There is no syncfusion colorpicker created. 

In my application: 

• ColorPickerModule is also imported in my AppModule. But color picker is not created. It generates only html5 color picker.
• I have shared my code and attachment of the violation message which is generated n number of times.
• [Violation] 'message' handler took <N>ms. Also freezes my browser.

Attachment: Query_7f8282a3.zip

[Vignesh Natarajan]

Hi Justin Ebenezer, 

Thanks for contacting Syncfusion forums. 

Query: How to display color picker control for each node in tree grid dynamically? 

 

We have analyzed the provided sample (https://stackblitz.com/edit/angular-qxkhpg?file=app.module.ts) in chrome browser and it works fine without any violation message. We suspect that there is some issue with your browser. So we suggest you to ensure the reported sample by opening it in “incognito” window or any other browser. 

Refer the below screenshot for your reference 

 

If you have any other queries, please get back to us. 

Regards, 

Vignesh Natarajan.