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?DropDownTree Control
Posted by: boyagowri on 9 December 2020, 5:46 pm EST
-
boyagowri
-
Marked as Answer
sharad.tomer
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 -
boyagowri
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);
-
sharad.tomer
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 -
boyagowri
Replied 20 December 2020, 8:29 pm EST
Do you know how to apply scrolling for dropdown tree control? -
sharad.tomer
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;
} -
gowri.boya
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
-
sharad.tomer
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 -
gowri.boya
Replied 6 January 2021, 12:03 am EST
Thanks Sharad actually I'm new to this wijmo. -
gowri.boya
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 -
sharad.tomer
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 -
gowri.boya
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)
-
sharad.tomer
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. -
gowri.boya
Replied 20 January 2021, 4:55 pm EST
Thanks Sharad it is working -
gowri.boya
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.
-
sharad.tomer
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
