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.
