Query Builder - Issue with using 2 DropdownTrees for certain conditions
Hello,
I am using the Query Builder with the fields dropdown set up as a DropdownTree list. This dropdown works as expected. When I select a field that also uses a DropdownTree through a ColumnTemplate, I am getting errors in the console and the dropdown does not load any items.
This is the error that is displayed:
And this is how we have set up our template for these fields; I have removed some of the write portion for simplicity:
lookupTemplate: TemplateColumn = {
create: () => {
return createElement('input', { attrs: { 'type': 'text' } });
},
destroy: (args: { elementId: string }) => {
let dropdown: DropDownList = (getComponent(document.getElementById(args.elementId), 'dropdownlist') as DropDownList);
let dropdowntree: DropDownTree = (getComponent(document.getElementById(args.elementId), 'dropdowntree') as DropDownTree);
let textbox: TextBox = (getComponent(document.getElementById(args.elementId), 'textbox') as TextBox);
if (dropdown) {
dropdown.destroy();
}
if (dropdowntree) {
dropdowntree.destroy();
}
if (textbox) {
textbox.destroy();
}
},
write: (args: { elements: Element, values: string[] | string, operator: string, field: string }) => {
...
this.getLookupData(type, options).subscribe(result => {
// For each result that is returned, we should pull the names and make a data array
let resultArray: any[] = result;
let parentFieldName: string = options.isHierarchy ? this.ParentFieldName : "";
// This method creates an array of items in the following format, where parentFieldName is > 0 if it is a child for a hierarchy, and 0 if it is a root/top level item:
// { value: 'value', text: 'text', id: 1, parentFieldName: 3, hasChild: true }
// The last 2 properties are only added if isHierarchy is true
let dataSource: any[] = this.createLookupArray(resultArray, type, parentFieldName);
if (options.isHierarchy) {
// Create the DropdDownTree for the hierarchy value field
let dropDownObj: DropDownTree = new DropDownTree({
fields: {
dataSource: dataSource,
parentValue: parentFieldName,
hasChildren: "hasChild"
},
allowFiltering: true,
filterType: 'StartsWith',
change: (e: any) => {
this.queryBuilder.notifyChange(e.value.length > 0 ? e.value[0] : "", e.element);
}
});
dropDownObj.appendTo('#' + args.elements.id);
} else {
let dropDownObj: DropDownList = new DropDownList({
dataSource: dataSource,
allowFiltering: true,
filterType: 'StartsWith',
value: args.values as string,
change: (e: any) => {
this.queryBuilder.notifyChange(e.itemData.value, e.element);
}
});
dropDownObj.appendTo('#' + args.elements.id);
}
});
...
}
};
Is there something wrong with the way this hierarchy dropdown is set up? Please let me know if there is anything I can fix.
Thank you,
KS
Hello,
Sorry for the delay.
I am able to replicate the behavior by using our data array in the following sample link:
https://stackblitz.com/edit/angular-75yatm-eaaezb?file=src%2Fapp.component.html,src%2Fapp.component.ts,package.json,src%2Fapp.component.css
When you select General > Assigned To, the value field is supposed to be a hierarchy dropdown. However, it is not able to load and just displays an empty dropdown when opened and there is an error in the console.
Is this an issue with our data?
Thank you,
KS
