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

Ebenezer

Asked On March 29, 2019 10:39 AM UTC

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

Reply | Reply with quote

Ebenezer

Replied On April 3, 2019 08:21 AM UTC

Hi Syncfusion Team

Can any one provide solution for the below query .

Regards

Justin Ebenezer.

Reply | Reply with quote

Vignesh Natarajan [Syncfusion]

Replied On April 3, 2019 12:51 PM UTC

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.

Reply | Reply with quote

Ebenezer

Replied On April 4, 2019 09:31 AM UTC

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

Reply | Reply with quote

Farveen Sulthana Thameeztheen Basha [Syncfusion]

Replied On April 5, 2019 11:43 AM UTC

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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
143709	Mar 29,2019 10:39 AM UTC	Apr 5,2019 11:43 AM UTC	Angular - EJ 2	4

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US