The item toolbar is not displayed as expected

[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 right, if more then one selected the toolbar will be hidden, but if I mouse over to the item the toolbar should be displayed.

    .........
    </ng-template>
    <ng-template let-item [iuiTemplate]="{ type: 'item-select' }">
      <app-demo-toolbar [data]='item' (buttonClick)="onToolbarButtonClick($event)">
      </app-demo-toolbar>
    </ng-template>
    <ng-template let-item [iuiTemplate]="{ type: 'item-hover' }">
      <app-demo-toolbar [data]='item' (buttonClick)="onToolbarButtonClick($event)">
      </app-demo-toolbar>
    </ng-template>
  </iui-treeview>

thanks

Originally posted by @robinNode in https://github.com/lidorsystems/integralui-web/issues/11#issuecomment-572848869

[Lidor-Systems]

You can customize this on your side.

1. To show the toolbar on left just change the CSS settings for the toolbar

    .trw-overview .iui-treeview-block-hover > div, .trw-overview .iui-treeview-block-select > div {
        left: 0;
        right: auto; /* you need this to reset the default setting of right attribute */
    }

We are using here the "trw-overview" as class selector so that change to the "iui-treeview-block-hover" and "iui-treeview-block-select" classes are changed for this specific TreeView ("trw-overview" is a class applied to the controlStyle property).

2. Hide the toolbar when multiple items are selected by setting the IntegralUIContentVisibility to None:

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

        this.contentVisibility = selList.length > 1 ? IntegralUIContentVisibility.None : IntegralUIContentVisibility.Both;
    }

When there is only one or none item selected, you can choose whether the toolbar will appear for Both states (hover and selected) or you can set it to Hover only.

The result is:

However, as you can see here the toolbar appear over the expand box icon, so you can't expand the items when toolbar is shown on left.

To solve this, change the layout of the tree items so that they appear moved by some space on right:

.trw-overview .iui-treeitem
{
    padding-left: 30px;
}

also increase their content size in item template so that scrolling works correctly:

    <ng-template let-item [iuiTemplate]="{ type: 'item' }">
        <div style="margin-right:32px;">
            <!-- Put item content here -->
        </div>
    </ng-template>

and the result is:

Note RTL is not supported yet, so if you need to show items on right side while having the toolbar on left, this will be available in future updates.

[mm-ryo]

You can customize this on your side.

1. To show the toolbar on left just change the CSS settings for the toolbar

    .trw-overview .iui-treeview-block-hover > div, .trw-overview .iui-treeview-block-select > div {
        left: 0;
        right: auto; /* you need this to reset the default setting of right attribute */
    }

We are using here the "trw-overview" as class selector so that change to the "iui-treeview-block-hover" and "iui-treeview-block-select" classes are changed for this specific TreeView ("trw-overview" is a class applied to the controlStyle property).

1. Hide the toolbar when multiple items are selected by setting the IntegralUIContentVisibility to None:

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

        this.contentVisibility = selList.length > 1 ? IntegralUIContentVisibility.None : IntegralUIContentVisibility.Both;
    }

When there is only one or none item selected, you can choose whether the toolbar will appear for Both states (hover and selected) or you can set it to Hover only.

The result is:

However, as you can see here the toolbar appear over the expand box icon, so you can't expand the items when toolbar is shown on left.

To solve this, change the layout of the tree items so that they appear moved by some space on right:

.trw-overview .iui-treeitem
{
    padding-left: 30px;
}

also increase their content size in item template so that scrolling works correctly:

    <ng-template let-item [iuiTemplate]="{ type: 'item' }">
        <div style="margin-right:32px;">
          <!-- Put item content here -->
        </div>
    </ng-template>

and the result is:

Note RTL is not supported yet, so if you need to show items on right side while having the toolbar on left, this will be available in future updates.

Hi, I am sorry, it's my typo issue. the toolbar should display on right, not left

[mm-ryo]

You can customize this on your side.

1. To show the toolbar on left just change the CSS settings for the toolbar

    .trw-overview .iui-treeview-block-hover > div, .trw-overview .iui-treeview-block-select > div {
        left: 0;
        right: auto; /* you need this to reset the default setting of right attribute */
    }

We are using here the "trw-overview" as class selector so that change to the "iui-treeview-block-hover" and "iui-treeview-block-select" classes are changed for this specific TreeView ("trw-overview" is a class applied to the controlStyle property).

1. Hide the toolbar when multiple items are selected by setting the IntegralUIContentVisibility to None:

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

        this.contentVisibility = selList.length > 1 ? IntegralUIContentVisibility.None : IntegralUIContentVisibility.Both;
    }

When there is only one or none item selected, you can choose whether the toolbar will appear for Both states (hover and selected) or you can set it to Hover only.

The result is:

However, as you can see here the toolbar appear over the expand box icon, so you can't expand the items when toolbar is shown on left.

To solve this, change the layout of the tree items so that they appear moved by some space on right:

.trw-overview .iui-treeitem
{
    padding-left: 30px;
}

also increase their content size in item template so that scrolling works correctly:

    <ng-template let-item [iuiTemplate]="{ type: 'item' }">
        <div style="margin-right:32px;">
          <!-- Put item content here -->
        </div>
    </ng-template>

and the result is:

Note RTL is not supported yet, so if you need to show items on right side while having the toolbar on left, this will be available in future updates.

Hi, I think you didn't get what I mean. let me explain the requirements clearly.

1. if there is only one item selected. the toolbar should be displayed on the right. meanwhile, if I move over on other items, the toolbar should also be displayed, at the moment you will see 2 items got toolbar.
2. if there are multiple items selected, the toolbar wouldn't display on the items. the only hover items will display the toolbar on the right.

Please have a look at the below images:

1. Item 1 selected and mouse over on Item 3:
2. both Item 1 and Item 3 selected then mouse over item 1:
3. both Item 1 and Item 3 selected then mouse over item 2:

NOTE: the hover toolbar will always be displayed.

[Lidor-Systems]

The requirements you describe are already handled (in previous posts, see https://github.com/lidorsystems/integralui-web/issues/11):

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

The above code will do:

1. If there is only one item selected, the toolbar will appear for selected and hovered item

2. If there are multiple items selected, only the toolbar for hovered item will appear

3. Toolbar will not appear for selected items:

This handles your requirements, so where is the problem???

[mm-ryo]

The requirements you describe are already handled (in previous posts, see #11):

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

The above code will do:

1. If there is only one item selected, the toolbar will appear for selected and hovered item

1. If there are multiple items selected, only the toolbar for hovered item will appear

1. Toolbar will not appear for selected items:

This handles your requirements, so where is the problem???

Hi, I am sorry, it's due to my CSS. but I found another issue when I try to expand tree-item, the toolbar disappears.

=> I have selected Item 1, then I try to expand it. the toolbar is gone. at that moment I was mouse over Item 3, there is no toolbar displayed on the right.

Your online sample is outdate, Could you help to create a sample with your latest codes? thanks

[Lidor-Systems]

We presume this happens because during expand/collapse of items, the layout is refreshed, which may cause the toolbar to become hidden.

We will look into it and preserve the visibility status during update. The fix will be available soon.

As for an updated sample, recently we have created an article from where you can access an updated online sample: Show Toolbar on Mouse Over in TreeView.

Note Select the Angular tab, and on far right side you can open the sample by clicking on the Edit in StackBlitz.

[Lidor-Systems]

Upon checking this issue in the sample, the problem is not happening during expand/collapse for selected item, only happens for hovering item (the demo doesn't use the selected template, so you need to check the sample on StackBlitz).

Can you please check it out.

[mm-ryo]

Upon checking this issue in the sample, the problem is not happening during expand/collapse for selected item, only happens for hovering item (the demo doesn't use the selected template, so you need to check the sample on StackBlitz).

Can you please check it out.

Ok, I will check it, thanks a lot.

[mm-ryo]

Upon checking this issue in the sample, the problem is not happening during expand/collapse for selected item, only happens for hovering item (the demo doesn't use the selected template, so you need to check the sample on StackBlitz).

Can you please check it out.

Hi, I have checked your online demo. there is no issue. Is it possible the version which I used is not the latest? the below package is getting from your team.

integralui-treeview-194115-Tgc8.zip

For more details please check the below screenshots. thanks.

On my side, I found a little difference. => I selected root item then I try to expand Item 1 => In the html code the binding elements all are commented. => but in your online demo, it looks different. the hover and select element are always there even I didn't select or mouse over any item.

[Lidor-Systems]

The version sent to you is correct. We have also double-checked this issue by compiling the sample with TreeView Module only (from v19.4.115), and it works the same.

The code that preserves the selected toolbar is present and it should work. This toolbar is present in the DOM only when there is at least one selected item. From your screenshot, this is under section (which from the screenshot is collapsed), but it is empty. If there are selected items, the DOM will update including elements for selected toolbar depending on your conditions.

Check out the HTML in your code, is there some condition that may prevent appearance of the selected toolbar.

You can also try to modify the online sample with your own code to see what may cause this.

[mm-ryo]

The version sent to you is correct. We have also double-checked this issue by compiling the sample with TreeView Module only (from v19.4.115), and it works the same.

The code that preserves the selected toolbar is present and it should work. This toolbar is present in the DOM only when there is at least one selected item. From your screenshot, this is under section (which from the screenshot is collapsed), but it is empty. If there are selected items, the DOM will update including elements for selected toolbar depending on your conditions.

Check out the HTML in your code, is there some condition that may prevent appearance of the selected toolbar.

You can also try to modify the online sample with your own code to see what may cause this.

Hi, I found the root cause. It's due to updateLayout() in the "AfterExpand" event handler. In our project, we don't want to load all data once the component initialized. only when we expand the tree-item it will call back-end service to load children. could you help to check it?

  onAfterExpand(){
    this.treeview.updateLayout();
  }

here is the sample code: https://stackblitz.com/edit/integralui-angular-treeview-hover-item-toolbar-vrgvls

[Lidor-Systems]

Thank you for your information.

We have found the bug that causes this problem. Apparently the status flag that checks whether layout update is active was not reset, after the layout has been updated. This caused the selected template to no appear by change detection from Angular.

This is now fixed.

We have also updated the code that handles the appearance of hover template. The position is now updated on layout update and mouse move over item, not just on mouse enter.

An update will be sent to your company representative.