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

[Ebenezer]

HI

I am trying to change eye icon based on a click event.

Please see the below stackblitz link.

https://stackblitz.com/edit/ebe-treegrid-btn-view

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.

Regards

Justin Ebenezer

[Ebenezer]

Hi Syncfusion Team

Can any one provide solution for the below query .

Regards

Justin Ebenezer.

[Vignesh Natarajan]

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, 

 

https://ej2.syncfusion.com/angular/documentation/treegrid/columns/#checkbox-column 

 

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 

 

https://stackblitz.com/edit/ebe-treegrid-btn-view-fvritr  

 

please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan. 

 

[Ebenezer]

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

[Farveen Sulthana Thameeztheen Basha]

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. 

Regards, 

Farveen sulthana T