Query builder - DropDownTree is allowing parent selection and closing the dropdown

[KS]

Hello,

We are using the QueryBuilder with fieldMode as DropDownTree, and now that we have updated, there are some issues with the parents allowing selection and closing the dropdown, which should not be allowed. Please see the following screenshot:

If I click on the General row instead of the arrow to expand, the dropdown closes, displays the General parent as the selected field, and the operators are set to a default list of operators, but we do not want the selection of the parent to do anything. Ideally, the dropdown would only close when we click one of its children.

This is how the control used to function previously, but we did upgrade to 25.2.3, and now this is causing an issue. Can we prevent this? Either the closing of the dropdown, or allowing a click on the parent data to select it as a field?

Thank you,

KS

[YuvanShankar Arunagiri]

Hi KS,

We have checked your reported query and prepared it based on your provided details (query builder with dropdown tree mode and mentioned Syncfusion package version). But we are unable to reproduce your reported issue. Refer to the below sample link, and if we check it in our Angular demo sites, parent selection has prevented and expanded the child items and closed when we clicked on the child items alone.

Sample link: https://stackblitz.com/edit/angular-xtzebbkm?file=src%2Fapp.component.html

Additionally, we suspect that this issue may occur due to duplicate packages installed in your application. Follow the below steps to resolve the issue.

• Delete the @Syncfusion folder from node_modules and the package-lock.json file from the root folder.

• Clear the npm cache file at your end: npm cache clean --force. 

• Run the ‘’npm install” command to install the Syncfusion packages again.

We hope this information helps. If you need any further assistance reach out to us.

Regards,

YuvanShankar A

[KS]

Hello,

On further inspection, the first level nodes on our field list do not have the "e-prevent" class on them, and that seems to be needed to make them not able to be selected.

Is there a way for us to add this class onto specific nodes so that they do not allow selection?

Thank you,

KS

[YuvanShankar Arunagiri]

Hi KS,

Based on your shared details, we suspect that you are using the old version of the Query Builder component. We have provided the “Dropdown tree item expand and selection related issue in query builder” fix in the 24.1.45 version of Syncfusion query builder. So to resolve this issue, kindly update the Syncfusion package to the latest version (above 25.x).

Sample link: https://stackblitz.com/edit/angular-sxq6bxsn?file=src%2Fapp.component.html

Query: Is there a way for us to add this class onto specific nodes so that they do not allow selection?

We can’t add the custom class to dropdown tree list item, but we can add the respected style to that element. Refer to the below custom CSS style.

.e-ddt.e-popup.e-qb-ddt .e-has-child .e-fullrow {

    cursor: default !important;

}

Please let us know if you need further assistance.

Regards,

YuvanShankar A

[KS]

Hello,

We actually have already upgraded to 25.2.3 before I even made this thread, and this seems to still be an issue for us.

Is there a later version than that which would help us?

Thank you,

KS

[YuvanShankar Arunagiri]

Hi KS,

Based on your provided details, we have prepared the local sample with your mentioned version. But the dropdown tree expand action works properly on our end. For your reference, we have attached a sample and video demonstration.

Additionally, this issue may occur due to duplicate packages installed in your application. Follow the below steps to resolve the issue.

• Delete the @Syncfusion folder from node_modules and the package-lock.json, .angular file from the root folder.

• Clear the npm cache file at your end: npm cache clean --force. 

• Update our packages to the same major version. For example, if you are using a version like (i.e., v27.1.XX), use the same version for all the Syncfusion components in the package.json file. 

• Run the ‘’npm install” command to install the Syncfusion packages again.

Please get back to us if you need any further assistance on this.

Regards,

YuvanShankar A

Attachment: angfile_fef782db.zip