Preventing duplicate fields in Syncfusion QueryBuilder in Angular.

When utilizing the Syncfusion QueryBuilder in Angular applications, it’s important to enhance the user experience by ensuring that fields or columns are not repeated across different rules. This guide will walk you through the process of restricting the selection of already used fields in the Angular QueryBuilder component.

Implementing the Restriction

To prevent the repetition of entities (fields/columns) in the QueryBuilder dropdowns for different rules, you can follow these steps:

1. Bind Events to Dropdowns:
   Initially, bind an event to all the dropdown lists in the QueryBuilder component. This is done by selecting all dropdown elements and attaching a beforeOpen event to them.

   bindEvent() {
     let ddlColl: NodeListOf<Element> = document.querySelectorAll('.e-rule-filter .e-dropdownlist');
     for (let i: number = 0; i < ddlColl.length; i++) {
       let ddl: DropDownList = getComponent(ddlColl[i] as HTMLElement, 'dropdownlist');
       ddl.open = this.beforeOpen.bind(this);
     }
   }
   

2. Handle the beforeOpen Event:
   In the beforeOpen event handler, retrieve the current set of rules from the QueryBuilder using the getRules method. Then, iterate over the dropdown list items and hide those that match any field already used in the rules.

   beforeOpen(args: PopupEventArgs): void {
     const selectedRules = this.qryBldrObj.getRules();
     const elementsArr = args.popup.element.querySelector('ul').querySelectorAll('li');
   
     elementsArr.forEach((obj) => {
       const fieldName = obj.getAttribute('data-value');
       if (selectedRules.rules.find((rule) => rule.field === fieldName)) {
         obj.classList.add('e-list-hide');
       } else {
         obj.classList.remove('e-list-hide');
       }
     });
   }
   

3. Update the QueryBuilder Component:
   Ensure that the createdControl and onChange methods in your QueryBuilder component call the bindEvent method to maintain the restriction as rules are added or removed.

   createdControl(): void {
     this.bindEvent();
   }
   
   onChange(args: any): void {
     if (args.type != 'deleteRule') this.bindEvent();
   }
   

By following these steps, the dropdowns within the QueryBuilder component will no longer allow the selection of fields that have already been used in other rules.

Demo Sample Link

For a practical example, you can refer to the following sample link: Angular QueryBuilder Sample

Additional References

• Syncfusion QueryBuilder Documentation: QueryBuilder Component
• Angular Documentation: Angular Components
• Syncfusion DropDownList Documentation: DropDownList Component

This guide provides a general approach to enhancing the user experience by preventing duplicate selections in the QueryBuilder component. The implementation details may vary based on the specific requirements and version of the Syncfusion library being used.

Conclusion

I hope you enjoyed learning about preventing duplicate fields in Syncfusion QueryBuilder in Angular.

You can refer to our Angular QueryBuilder feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular QueryBuilder example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!