How to change the expand collapse icon Blazor TreeView Component


I’m working with Blazor TreeView Component in my project angular. I succeeded to implement the component.
This is my angular component:
TS:

  menuList: MenuModel[] = [];
public hierarchicalData: NodeModel[] = [];
// set the Multi Selection option to TreeView
public cssClass = 'custom';
public fieldTree: Object= {dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild', iconCss: 'icon'};
showCheckBox = true;
@ViewChild('treevalidate', {static: false})('treevalidate') treevalidate: TreeViewComponent;

ngOnInit() {
    this.getMenu();
}

/* defined the array of data */
getMenu() {
    const storageMenu = localStorage.getItem('ngStorage-menu');
    this.menuList = JSON.parse(storageMenu);
    let parentMenu: MenuModel[] = [];
    parentMenu = this.menuList.filter(menu => menu.parentMenu === 0 && !menu.menuDisable && !(menu.title.indexOf('~?') > -1));
    parentMenu.forEach(m => {
        const node: NodeModel = new NodeModel();
        if (m.parentMenu === 0) {
            node.id = m.id;
            node.icon = 'folder';
            node.expanded = false;
            node.name = m.title;
            this.hierarchicalData.push(node);
        }
    });
    parentMenu.forEach(parent => {
        const childMenu = this.menuList.filter(menu => menu.parentMenu === parent.id && !(menu.title.indexOf('SEPARATOR') > -1));
        childMenu.forEach(child => {
            const nodeExist = this.hierarchicalData.find(data => child.parentMenu === data.id);
            const newNode: NodeModel = new NodeModel();
            newNode.name = child.title;
            newNode.id = child.id;
            newNode.expanded = false;
            nodeExist.subChild.push(newNode);
        });
    });
    this.hierarchicalData.forEach(parent => {
        parent.subChild.forEach(subChild => {
            const sousChildMenu = this.menuList.filter(menu => menu.parentMenu === subChild.id);
            sousChildMenu.forEach(child => {
                const newNode: NodeModel = new NodeModel();
                newNode.name = child.title;
                newNode.id = child.id;
                newNode.expanded = false;
                subChild.subChild.push(newNode);
            });
        });
    });
}


public onNodeCheck(args): void {
    // To get the iconCss
}

this is my html:

<div id='treeparent'>
<ejs-treeview  #treevalidate id='treeElement' [fields]='fieldTree' cssClass="custom"
               [showCheckBox]='showCheckBox'  (nodeChecking)='onNodeCheck($event)' >
</ejs-treeview>

and this is my css:

#treeparent {
    display: block;
    max-width: 400px;
    max-height: 330px;
    margin: auto;
    overflow: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}

#wrapper {
    width: 350px;
    margin: 0 auto;
}

.custom .e-list-item .e-icons {
    font-family: "Customize-icon";
}

.custom.e-treeview .e-list-item .e-icon-expandable::before, .custom.e-treeview .e-list-item .e-icon-collapsible:before {
    content: 'e700';
    font-size: 12px;
}


.custom .e-list-item.e-level-1 .e-text-content.e-icon-wrapper
.e-checkbox-wrapper {
    display: none
}

.e-treeview .e-list-img {
    width: 25px;
    height: 25px;
}

.e-treeview .e-list-icon {
    background-repeat: no-repeat;
    background-image: url(https://ej2.syncfusion.com/javascript/demos/src/treeview/images/icons/file_icons.png);
    height: 20px;
}

.e-treeview .e-list-icon.folder {
    background-position: -10px -552px
}

@font-face {
    font-family: 'Customize-icon';
    src: url(
    data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRcAAAEoAAAAVmNtYXDnEOdaAAABjAAAADhnbHlmcYqIngAAAcwAAAD8aGVhZBWT124AAADQAAAANmhoZWEHmANtAAAArAAAACRobXR4C9AAAAAAAYAAAAAMbG9jYQBAAH4AAAHEAAAACG1heHABEAAxAAABCAAAACBuYW1l/qscPAAAAsgAAAJ5cG9zdIPGFvoAAAVEAAAAVgABAAADUv9qAFoEAAAA//8D6QABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAIKcGUl8PPPUACwPoAAAAANlGSVAAAAAA2UZJUAAAAAAD6QPpAAAACAACAAAAAAAAAAEAAAADACUAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAQNS/2oAWgPpAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAkAAAABAAEAAEAAOcB//8AAOcA//8AAAABAAQAAAABAAIAAAAAAEAAfgADAAAAAAPpA+kACAAWACQAAAEhFSEHMzcnIyUWEAcGICcmEDc+ATIWBQYQFxYgNzYQJy4BIgYCMf6kAWqUqMK8rgF+goKK/qCEfn5Coquf/amRkZoBkpqRkUq3xLcCKmSTybt4if6ghYKChQFgiUJBQRma/m6akZGaAZKaSElJAAMAAAAAA+gD6QAGABQAIgAAASMXNyMRIyUWEAcGICcmEDc+ATIWBQYQFxYgNzYQJy4BIgYBvrLp6JmGAW6BgYf+oYiBgUGhqqH9qZOTmgGOmpOTSrbCtgGy6ekBbwuI/qGHgYGIAV6IQEFBFpr+cZmTk5oBj5lKSUkAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAA4AAQABAAAAAAACAAcADwABAAAAAAADAA4AFgABAAAAAAAEAA4AJAABAAAAAAAFAAsAMgABAAAAAAAGAA4APQABAAAAAAAKACwASwABAAAAAAALABIAdwADAAEECQAAAAIAiQADAAEECQABABwAiwADAAEECQACAA4ApwADAAEECQADABwAtQADAAEECQAEABwA0QADAAEECQAFABYA7QADAAEECQAGABwBAwADAAEECQAKAFgBHwADAAEECQALACQBdyBDdXN0b21pemUtaWNvblJlZ3VsYXJDdXN0b21pemUtaWNvbkN1c3RvbWl6ZS1pY29uVmVyc2lvbiAxLjBDdXN0b21pemUtaWNvbkZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAQwB1AHMAdABvAG0AaQB6AGUALQBpAGMAbwBuAFIAZQBnAHUAbABhAHIAQwB1AHMAdABvAG0AaQB6AGUALQBpAGMAbwBuAEMAdQBzAHQAbwBtAGkAegBlAC0AaQBjAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAQwB1AHMAdABvAG0AaQB6AGUALQBpAGMAbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQAFy1hcnJvdy1jaXJjbGUtcmlnaHQtXzAxEi1hcnJvdy1jaXJjbGUtZG93bgAAAAA=)
    format('truetype');
    font-weight: normal;
    font-style: normal;
}
.e-treeview .e-treeview-toggle-item-visibility {
    right: 10px;
    left: auto;
}

.e-treeview .e-treeview-toggle-item-visibility:before {
    content: "f04e ";
}
.e-treeview .e-treeview-toggle-item-visibility.dx-treeview-toggle-item-visibility-opened:before {
    content: "f001 ";
}

I get this result enter image description here
enter image description here

I try to change the expand collapse icon and the position like this but i didn’t succeeded :

enter image description here

But no result I try to implement using this tutorial : https://blazor.syncfusion.com/documentation/treeview/getting-started
any help, thanks in advance

Source: CSS – Stack Overflow

October 20, 2021
Category : News
Tags: angular7 | css | html | treeview

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.