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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





143625 Mar 29,2019 10:03 AM UTC Apr 8,2019 12:35 PM UTC Angular - EJ 2 3
Tags: TreeGrid
Asked On March 29, 2019 10:03 AM UTC

     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

Justin Ebenezer

Attachment: bugs_27e9615b.zip

Vignesh Natarajan [Syncfusion]
Replied On March 29, 2019 12:23 PM UTC

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. 

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. 

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)

Vignesh Natarajan. 

Replied On April 4, 2019 11:38 AM UTC

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 [Syncfusion]
Replied On April 8, 2019 12:35 PM UTC

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. 

Vignesh Natarajan. 


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