0

I use DevExtreme widgets in my project. I would like to hide 'Tree View' when the user click outside of the widget.

My code is below. Can anybody help.

<div class="form">
    <dx-text-box
        #textBox
        placeholder="Search"
        [width]="300"
        mode="search"
        valueChangeEvent="keyup"
        value=""
    ></dx-text-box>
    <dx-tree-view
        id="simple-treeview"
        [items]="products"
        [width]="300"
        [searchValue]="textBox.value"
        (onItemClick)="selectItem($event)"
    ></dx-tree-view>
    <div id="product-details" *ngIf="currentItem.price">
        <img [src]="currentItem.image" />
        <div class="name">{{currentItem.text}}</div>
        <div class="price">{{"$" + currentItem.price}}</div>
    </div>
</div>
Green Computers
  • 723
  • 4
  • 14
  • 24
  • Just handle click and turn the [treeview.visible](https://js.devexpress.com/Documentation/16_2/ApiReference/UI_Widgets/dxTreeView/Configuration/#visible) option to false. – Sergey Apr 14 '17 at 10:56
  • Sorry. It did not work. Is there any other way. Can you provide sample code for this. – Green Computers Apr 17 '17 at 07:15
  • Sounds strange. At first, you need to handle tree view outside click. This [post](http://stackoverflow.com/questions/35712379/angular2-close-dropdown-on-click-outside-is-there-an-easiest-way) will be helpful. I've created a little [sample](https://plnkr.co/edit/EOTFMTphi95bok9WJqkn?p=preview) as well. – Sergey Apr 18 '17 at 08:12

0 Answers0