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

Unable to change eye icons in child records and parent record.

I am trying to change eye icon based on a click event.
Please see the below stackblitz link.

In the last column i have placed eye icons initially.
I would like to change the icons with (click) = "getData(data)".
Current Behavior: Child icons are changing from eye<=>eye-slash but the parent record is still in previous mode
Expected Behavior:
1. I would like to change icons from eye to eye to eye-slash and vice-versa.
2. If the record has the child records , child records icons must be changed.
3. if the record doesn't has any child records only that corresponding record should changed.

Justin Ebenezer

4 Replies

EB Ebenezer April 3, 2019 03:21 AM

Hi Syncfusion Team
Can any one provide solution for the below query .

Justin Ebenezer.

VN Vignesh Natarajan Syncfusion Team April 3, 2019 07:51 AM

Hi Justin Ebenezer, 
Thanks for contacting Syncfusion Forums. 
Query: “Unable to change eye icons in child records and parent record.” 
From your query we understand that you need to change the eye icon based on the child elements. (ie) To change icon of both parent and child node, from eye to eye-slash when a parent node is being clicked and alos to change the icon of the clicked record alone if the record has no child record. 
In TreeGrid, we have support for rendering checkbox column from 2019 Volume 1 release. Please refer the below link for help documentation, 
We have achieved your requirement using check box feature and modified the icon as per your requirement with the help of CSS.  
Refer the below style for your reference 
.e-grid .e-gridcontent .e-css.e-checkbox-wrapper .e-frame::before,   
.e-grid .e-css.e-checkbox-wrapper .e-frame.e-stop::before { 
  font: normal normal normal 14px/1 FontAwesome; 
  content: '\f06e'; 
.e-grid .e-gridcontent .e-css.e-checkbox-wrapper .e-frame.e-check::before { 
  font: normal normal normal 14px/1 FontAwesome; 
  content: "\f070"; 
.e-grid .e-gridheader .e-hierarchycheckbox span.e-icons { 
  display: none; 
.e-grid .e-gridcontent .e-css.e-checkbox-wrapper span.e-frame  { 
  border: 0px; 
.e-grid .e-gridcontent .e-css.e-checkbox-wrapper .e-frame.e-icons, 
.e-grid .e-gridcontent .e-css.e-checkbox-wrapper:hover .e-frame.e-icons, 
.e-grid .e-gridcontent .e-css.e-checkbox-wrapper .e-frame.e-icons.e-stop 
  background-color: transparent; 
For your convenience we have prepared a sample which can be referred below 
please get back to us if you have further queries. 
Vignesh Natarajan. 

EB Ebenezer April 4, 2019 04:31 AM

Hi Syncfusion Team
Thanks for your response.
Provided Stackblitz link  example is working fine.
But while implementing the same in our application i am getting below error.
Please see the below image for your reference

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team April 5, 2019 06:43 AM

Hi Justin, 

QUERY: Facing parse errors while using checkbox column in my application 

In your query you have mentioned that, you are facing errors while using checkbox column in your application. We suspect that you are using older version of TreeGrid  source. We have provided the checkbox column support  from 2019 Volume 1 Release (release version: v17.1.0.38). 

Could you please upgrade into v17.1.0.38 and after upgrade still facing the issue please get back to us with further details. 

Farveen sulthana T 

Live Chat Icon For mobile
Up arrow icon