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

Remove Pink style when Renaming a node in treeview

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.

3 Replies

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team January 8, 2020 02:32 AM

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. 



NI Niloofar January 8, 2020 05:19 AM

Thank you so much! that fixed my problem.

Cheers,
Niloofar


SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team January 8, 2020 09:00 PM

 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. 


Loader.
Live Chat Icon For mobile
Up arrow icon