need to focus Inbox folder by default

[Narsimsetty Chalamaiah]

i am using ejs-treeview for mailbox.

when i load application inbox folder focus is not active  in treeview.

my requirement is when load application inbox folder should be active.

when i click on inbox folder it has been focused.

i am sending attached file please find that.

i used below code.

<div class="navigation-tree">

    <div class="folder-pane customScrollBar" *ngIf="folderList.length > 0">

        <ejs-treeview id="tree" #tree [fields]="treeviewFields" (nodeSelected)='nodeSelected($event)' expandOn="Click">

            <ng-template #nodeTemplate let-data>

                <div class="treeviewdiv">

                    <div style="float:left">

                        <span class="{{data.iconClass}}"></span>

                    <span class="treeName">{{data.Name}}</span>

                    </div>

                    <div class="count" style="margin-left: 5px; float:right" [ngClass]="{'display-none': data.ID === 4}">

                        <span id="treeCount_{{data.Name}}" class="e-badge e-badge-pill treeCount" [ngClass]="{'display-none' : data.Count < 1}">{{data.Count}}</span>

                    </div>

                    <button title="{{data.FavoriteMessage}}" class="treeview-btn-temp">

                        <span class="e-btn-icon ej-icon-{{data.Favorite}} {{data.Name}}"></span>

                    </button>

                </div>

            </ng-template>

        </ejs-treeview>

        <div  id="navigation-tree-loader"></div>

    </div>

    <div class="no-mail-list message-pane" *ngIf="folderList.length === 0">    

        <div class="text">No Folders available to check.Please try after sometime</div>

      </div>

</div>

Attachment: treeview_folder_focous_issue_7b7a1986.zip

[Sowmiya Padmanaban]

Hi Narsimsetty Chalamaiah,  

 

Greetings from Syncfusion support. 

 

We have checked your requirement with TreeView component. To achieve  your requirement, you need to set selected as true for particular node during initial loading. 

 

Refer to the below code snippet. 

  public localData: Object[] = [ 

    { id: 6, name: "Inbox", selected: true, count: "20", icon: "folder" }, 

    { id: 7, name: "Drafts", count: "5", icon: "folder" }, 

    { id: 8, name: "Deleted Items", icon: "folder" }, 

    { id: 9, name: "Sent Items", icon: "folder" }, 

    { id: 10, name: "Sales Reports", count: "4", icon: "folder" }, 

    { id: 11, name: "Marketing Reports", count: "6", icon: "folder" } 

  ]; 

Refer to the sample link below. 

 

https://stackblitz.com/edit/angular-aechaj-ygzomm?file=app.component.html 

 

Refer the below links to know more about the TreeView component. 

 

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

 

Demo link- https://ej2.syncfusion.com/angular/demos/#/material/treeview/icons  

 

API reference- https://ej2.syncfusion.com/angular/documentation/api/treeview/ 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P