DropDownTree Control

Posted by: boyagowri on 9 December 2020, 5:46 pm EST

  • Posted 9 December 2020, 5:46 pm EST

    I'm trying to implement drodowntree control in my angular application but I'm unable to implement it because it is in pure js, please help me how to implement dropdown tree view in angular is there any import is there in wijmo?
  • Marked as Answer

    Replied 14 December 2020, 4:29 am EST

    Hi,

    DropDownTree is a custom implementation and not part of the standard wijmo suite. To use it in an angular application you may refer to the following sample which demonstrates the same and let us know if you face any issues:
    https://codesandbox.io/s/wijmo-angular-forked-ugsxw?file=/src/app/app.component.ts

    Regards
  • Replied 14 December 2020, 4:46 pm EST

    Hi Sharad,
    I'm getting this error
    ERROR in src/app/poc1/usersetup/dropdowntree.ts:286:24 - error TS2445: Property '_createDropDown' is protected and only accessible within class 'DropDown' and its subclasses.

    286 _super.prototype._createDropDown.call(this);

  • Replied 17 December 2020, 5:16 am EST

    You may add the following comment at the top of the dropdowntree.ts file to ignore typescript related errors for that file.
    // @ts-nocheck
  • Replied 20 December 2020, 8:29 pm EST

    Do you know how to apply scrolling for dropdown tree control?
  • Replied 23 December 2020, 8:02 am EST

    You may enable scroll by using the following CSS:
    /* TS */
    ddTree.dropDownCssClass = "my-tree-dropdown";

    /* CSS */
    .my-tree-dropdown {
    max-height: 150px;
    overflow: auto;
    }
  • Replied 5 January 2021, 2:31 am EST

    I'm trying to implement checkboxes should be checked for selected types in dropdowntree control like [checkedMemberPath]="'selected'". please suggest me how to achieve it
  • Replied 5 January 2021, 11:48 pm EST

    Hi,

    You may set the checkedMemberPath property of the underlying treeview as shown in the following code snippet:
    dropdownTree.treeView.checkedMemberPath = "selected";

    You may also refer to the following sample demonstrating the same:
    https://codesandbox.io/s/wijmo-angular-forked-13c5d?file=/src/app/app.component.ts

    Regards
    Sharad
  • Replied 6 January 2021, 12:03 am EST

    Thanks Sharad actually I'm new to this wijmo.
  • Replied 11 January 2021, 4:21 pm EST

    Hi Sharad,

    can we disable dropdown tree , I tried in this way ddTree.treeView.isDisabled = this.isDocumentTypeDisabled // this is boolean value, but it is not working properly, and I also tried this way also
    let ddTree = new DropDownTree(this.hostEl, {
    displayMemberPath: "Name",
    childItemsPath: "items",
    //checkedMemberPath : "showCheckboxes",
    showCheckboxes: !this.isSLB,
    itemsSource: this.nested,
    isDisabled: this.isDocumentTypeDisabled,
    checkedItemsChanged: (s, e) => {
    // console.log(s, "afercheked");
    // console.log(e, "eaction");
    // console.log("dropDownTree.checkedItemsChanged:");
    s.checkedItems.forEach((item, index) => {
    console.log(index, item[s.displayMemberPath]);
    });
    },
    });
    for wijmo combo box this option is there, same i'm trying to do...please help me
  • Replied 12 January 2021, 5:28 pm EST

    Could you please explain more about the issue/error you are facing? I tried to set the isDisabled property in the following way and it seems to be working fine on my end:
    let ddTree = new DropDownTree(hostEl, {
    displayMemberPath: "header",
    childItemsPath: "items",
    showCheckboxes: true,
    itemsSource: this.data,
    isDisabled: true,
    checkedItemsChanged: function (s, e) {
    console.log("dropDownTree.checkedItemsChanged:");
    s.checkedItems.forEach(function (item, index) {
    console.log(index, item[s.displayMemberPath]);
    });
    }
    });

    Sample: https://codesandbox.io/s/wijmo-angular-forked-0mfji?file=/src/app/app.component.ts
  • Replied 13 January 2021, 2:25 am EST

    Inside ngAfterViewInit() method it is working fine , but when I'm trying to update the isDisable value in other method it is not updating and it throwing error could please help me
    my code :
    this.hostEl = this.ddtHost.nativeElement;
    this.ddTree = new DropDownTree(hostEl, {
    displayMemberPath: "header",
    childItemsPath: "items",
    showCheckboxes: true,
    itemsSource: this.data,
    isDisabled: this.isDisableValue,// intially it is true
    checkedItemsChanged: function (s, e) {
    console.log("dropDownTree.checkedItemsChanged:");
    s.checkedItems.forEach(function (item, index) {
    console.log(index, item[s.displayMemberPath]);
    });
    }
    });
    I'm trying to update this value to false from other onchange event method,
    onroleChange(){
    this.isDisableValue = false
    this.ddTree.isDisabled = this.isDisableValue
    }
    In console getting this error
    core.js:4127 ERROR ** Assertion failed in Wijmo: Element is already hosting a control. Error
    at assert (http://localhost:4200/vendor.js:146131:10955)
    at DropDownTree.Control [as constructor] (http://localhost:4200/vendor.js:146131:82417)
    at DropDownTree.DropDown [as constructor] (http://localhost:4200/vendor.js:145913:77813)
    at new DropDownTree (http://localhost:4200/main.js:10479:32)
    at ManageSubscriptionsComponent.push../src/app/modules/cust-supp-portal/components/general-popups/manage-subscriptions/manage-subscriptions.component.ts.ManageSubscriptionsComponent.onroleChange (http://localhost:4200/main.js:11352:26)
    at ManageSubscriptionsComponent_Template_wj_combo_box_selectedIndexChanged_59_listener (ng:///ManageSubscriptionsComponent.js:296:22)
    at executeListenerWithErrorHandling (http://localhost:4200/vendor.js:73069:16)
    at wrapListenerIn_markDirtyAndPreventDefault (http://localhost:4200/vendor.js:73104:22)
    at SafeSubscriber.schedulerFn [as _next] (http://localhost:4200/vendor.js:83661:17)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (http://localhost:4200/vendor.js:185306:16)


  • Replied 13 January 2021, 3:33 pm EST

    The specified error is thrown when we try to initialize a wijmo control on an element that is already hosting another wijmo control or calling constructor multiple times on the same element. Please make sure that you are not calling the DropDownTree constructor multiple times in your application.
    Regarding setting isDisabled outside of ngAfterViewInit, I tried setting the property in the following way and it worked fine without any errors:
    this.ddTree.isDisabled = !this.ddTree.isDisabled;

    You may also refer to the following sample:
    https://codesandbox.io/s/wijmo-angular-forked-ig8yl?file=/src/app/app.component.ts
    If the issue persists, please share a small sample to replicate the issue so that we could further investigate and assist you accordingly.
  • Replied 20 January 2021, 4:55 pm EST

    Thanks Sharad it is working
  • Replied 3 March 2021, 7:34 pm EST

    Hi sharad,
    In wijmo combo box control I'm trying to show dropdown menu to bottom , but i'm unable to align css style for dropdown menu to bottom, will you please help me
    here I'm providing image , I have to show that menu to bottom.
  • Replied 4 March 2021, 6:19 pm EST

    Hi Gowri,

    As the default behaviour, DropDown menu is displayed at the bottom. It is displayed on top only if there is not enough space available on the page for the dropdown to display at bottom position. Make sure that there is enough space for the dropdown to display at the bottom position. If the issue persists, please share a sample that replicates the issue so that we could further investigate it.

    Regards
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels