Remove Pink style when Renaming a node in treeview

[Unknown]

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]

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. 

 

https://stackblitz.com/edit/tree-nodeediting-customization  

 

Refer the below link for TreeView component node editing sample in different themes. 

 

Material: https://ej2.syncfusion.com/react/demos/#/material/treeview/node-editing 

 

Fabric: https://ej2.syncfusion.com/react/demos/#/fabric/treeview/node-editing 

 

Bootstrap: https://ej2.syncfusion.com/react/demos/#/bootstrap/treeview/node-editing 

 

Bootstrap4: https://ej2.syncfusion.com/react/demos/#/bootstrap4/treeview/node-editing 

 

High Contrast: https://ej2.syncfusion.com/react/demos/#/highcontrast/treeview/node-editing 

 

To know more about EJ2 TreeView, please refer the following links. 

 

Documentation: https://ej2.syncfusion.com/documentation/treeview/getting-started/  

 

Demos: https://ej2.syncfusion.com/demos/#/material/treeview/default.html 

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Shameer Ali Baig S. 

[Unknown]

Thank you so much! that fixed my problem.

Cheers,

Niloofar

[Shameer Ali Baig Sulaiman Ali Baig]

 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.