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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Remove Pink style when Renaming a node in treeview

Thread ID:

Created:

Updated:

Platform:

Replies:

150444 Jan 7,2020 03:08 PM UTC Jan 9,2020 05:00 AM UTC React - EJ 2 3
loading
Tags: Treeview
Niloofar
Asked On January 7, 2020 03:08 PM UTC

When i try to rename a tree node, the text will get highlighted with a pink/red background and also a pink underline gets added while editing. I was wondering what elements/classes have these styles so i can edit these.

Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On January 8, 2020 10:32 AM UTC

Hi Niloofar, 
 
Greetings from Syncfusion support. 
 
We have checked with your reported query. In EJ2 TreeView, Default theme(material) styles will be added to the tree node while editing it. You can customize the styles of the TreeView component based on your preference. Please. refer the below code block to customize these styles in your sample. 
 
[Index.js] 
 
export class TreeView extends SampleBase { 
    fields = {dataSource: dataSource.Data, id:'id', text:'name', child:'child'}; 
    render() { 
        return (<div className="control-pane"> 
                    <h4>TreeView</h4> 
                    <div className="content"> 
                      <TreeViewComponent id='sfTreeView' 
                        fields={this.fields} 
                        allowEditing={true} /> 
                    </div> 
                </div>); 
    } 
} 
 
render(<TreeView />, document.getElementById('sample')); 
 
 
 
We have added styles based on the TreeView component’s id property, so these customization styles will not affect the any other EJ2 TreeView in the same page of the project. 
 
[index.css] 
 
#sfTreeView.e-treeview .e-list-item.e-active > .e-text-content, 
#sfTreeView.e-treeview .e-list-item.e-active > .e-text-content .e-list-text { 
  color: green; 
} 
 
#sfTreeView.e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-list-text .e-input::selection, 
#sfTreeView.e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text .e-input::selection { 
      color: green; 
      background: gold; 
} 
 
#sfTreeView.e-treeview .e-input-group::after, #sfTreeView.e-treeview .e-input-group::before { 
    background: green; 
} 
 
 
 
We have prepared sample for your convenience, refer to the below link for the sample. 
 
 
Refer the below link for TreeView component node editing sample in different themes. 
 
 
 
 
 
 
To know more about EJ2 TreeView, please refer the following links. 
 
 
 
Please let us know if you need any further assistance on this. 
 
Regards, 
Shameer Ali Baig S. 


Niloofar
Replied On January 8, 2020 01:19 PM UTC

Thank you so much! that fixed my problem.

Cheers,
Niloofar

Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On January 9, 2020 05:00 AM UTC

 Hi Niloofar, 
  
We are pleased to hear that the problem is solved at your end. Please, get back to us if you need any other assistance. 
  
Regards, 
 
Shameer Ali Baig S. 


CONFIRMATION

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