The item toolbar is not displayed correctly when row is not in active and hover state.

[mm-ryo]

The 'Favorites' item is not active/selected and hovered, but the toolbar is still there.

I also found some other cases :

1. if I pre-select items after ngAfterViewInit, the both active/select and hover toolbar are displayed there.
2. if multiple items selected the 'item-select' should always be hidden and only the item-hover is displayed, currently, the behavior is displayed select toolbar for the last selected item. I think you can export an API to the developer and let us decide what behavior should be (show 'item-select' on selected items or last selected item).

Currently, there is no API exposed to do interaction with it.

Steps: Press Ctrl + Mouse Left button click to select items or un-select items

<iui-treeview [items]="items" [appRef]="applicationRef" [allowDrag]="true" [controlStyle]="ctrlStyle"
        [selectionMode]="selMode" [allowAnimation]="false" [virtualMode]="true" [itemDisplay]="0" #treeview>
        <ng-template let-item [iuiTemplate]="{ type: 'item' }">
          <div (mouseenter)="hoverItem=item" (mouseleave)="hoverItem=null">
            <span [ngClass]="item.icon"></span>
            <span *ngIf="item!=editItem">{{item.text}}</span>
            <input *ngIf="item==editItem" type="text" [(ngModel)]="item.text" (keydown)="editorKeyDown($event)"
              [iuiFocus]="editorFocused" (focus)="selectContent($event)" (blur)="editorLostFocus()" />
          </div>
        </ng-template>
        <ng-template let-item [iuiTemplate]="{ type: 'item-hover' }">
          <div class="toolbar">
            <span class="item-button item-button-edit" (click)="showEditor(item)"></span>
            <span class="item-button item-button-delete" >D</span>
          </div>
        </ng-template>
        <ng-template let-item [iuiTemplate]="{ type: 'item-select' }">
          <div class="toolbar">
            <span class="item-button item-button-edit" (click)="showEditor(item)"></span>
            <span class="item-button item-button-delete">A</span>
          </div>
        </ng-template>
      </iui-treeview>

[Lidor-Systems]

We couldn't recreate the presence of content when item is not hovered nor selected. Can you specify how to recreate this?

1. Yes, the hover ans select content is present at the same time in the DOM, position depends on which item is hovered or selected, or both. Select content will appear over the hover content.
2. In current version, only the last selected item can have a select content displayed.

We are working to improve this feature so that:

• Hover content can displayed when item is hovered, but not selected
• Select content will appear for all currently selected items
• Select content has higher priority that hover content
• An option where you can set whether item content is allowed: None, Hover, Select or Both, that is TreeView level, which affects all items
• The same option but on item level. It works in combination with option on TreeView level

In this way you can set in your code when and for which items the content is allowed.

These improvements will be included in coming update 19.4.

[Lidor-Systems]

This feature is now updated in our internal build.

There is a new property named contentVisibility that can accept one of the following values from IntegralUIContentVisibility enumeration:

• None
• Hover
• Select
• Both

In combination with item.contentVisibility field value (accepts values from same enumeration), you can determine when content will appear.

For example, the TreeView has contentVisibility set to Both (by default), and the 'Downloads' item has contentVisibility set to Hover. So when this items is selected, the select content will not appear, will appear only when it is hovered. You can change this on demand:

 this.items = [
            { 
                id: 1,
                text: "Favorites",
                icon: "computer-icons favorites",
                items: [
                    { id: 11, pid: 1, text: "Desktop", icon: "computer-icons empty-doc" },
                    { id: 12, pid: 1, text: "Downloads", icon: "computer-icons downloads", contentVisibility: IntegralUIContentVisiblity.Hover }
                ]
            },
. . .

result is:

By default contentVisibility property is set to Both and if items don't have their contentVisibility field set or set as undefined, it is presumed that the value is Both.

[mm-ryo]

This feature is now updated in our internal build.

There is a new property named contentVisibility that can accept one of the following values from IntegralUIContentVisibility enumeration:

• None
• Hover
• Select
• Both

In combination with item.contentVisibility field value (accepts values from same enumeration), you can determine when content will appear.

For example, the TreeView has contentVisibility set to Both (by default), and the 'Downloads' item has contentVisibility set to Hover. So when this items is selected, the select content will not appear, will appear only when it is hovered. You can change this on demand:

this.items = [
{
    id: 1,
    text: "Favorites",
     icon: "computer-icons favorites",
     items: [
          { id: 11, pid: 1, text: "Desktop", icon: "computer-icons empty-doc" },
          { id: 12, pid: 1, text: "Downloads", icon: "computer-icons downloads", contentVisibility: IntegralUIContentVisiblity.Hover }
     ]
},
. . .

result is:

By default contentVisibility property is set to Both and if items don't have their contentVisibility field set or set as undefined, it is presumed that the value is Both.

this is a very nice feature. thanks a lot. if multiple items selected, could we stop to display the selected toolbar? or add another option for this case. in our project, we hide the selected toolbar if more than 1 item is selected.

[Lidor-Systems]

Yes, just change the contentVisibility property to Hover when there are more than one selected items, and back again to Both when there is only one or none selected items. You can do this by handling the selectionChanged event:

HTML

<iui-treeview [items]="items" [appRef]="applicationRef" [selectionMode]="selMode" [virtualMode]="true" [itemDisplay]="0" [contentVisibility]="contentVisibility" 
 (selectionChanged)="onSelectionChanged($event)"  #treeview>

Angular

import { IntegralUIContentVisiblity } from ./integralui/components/integralui.core';

. . .

public contentVisibility: IntegralUIContentVisiblity = IntegralUIContentVisiblity.Both;

onSelectionChanged(e: any){
    let selList = this.treeview.getList('selected');

    this.contentVisibility = selList.length > 1 ? IntegralUIContentVisiblity.Hover : IntegralUIContentVisiblity.Both;
}

or just set it directly using treeview reference:

    this.treeview.contentVisibility = selList.length > 1 ? IntegralUIContentVisiblity.Hover : IntegralUIContentVisiblity.Both;

[mm-ryo]

Hi, This feature did not meet my requirements. actually what I want is if there is an item selected the toolbar will be displayed on left, if more then one selected the toolbar will be hidden, but if I mouse over to the item the toolbar should be displayed.

thanks