Disable remove condition button

[Sanjay Singh]

Hello,

I am trying to implement below two scenarios, please advise how to achieve

1. How to delete the entire group when last condition of the group is removed.?
2. How can we disable "remove condition button" when only one condition is there in a group.?

Thanks,

Sanjay

[YuvanShankar Arunagiri]

Sorry for the delay, Sanjay.

We have prepared the sample based on your requirement. Please refer the below code snippet and sample link. Using the created, beforeChange and change event and getRule, getGroup and deleteGroup method of the query builder, we can achieve your requirement.

API link: https://ej2.syncfusion.com/angular/documentation/api/query-builder/#methods

Requirement-1: Using the deleteGroup method of query builder, we can delete the entire group query.

Requirement-2: Using the “e-disabled” class, we can enable and disable the delete button of rule.

onChange(args) {

       if (args.type === "deleteRule") {

           var grp = this.qryBldrObj.getGroup(args.ruleID.split('_')[0]);

           if (grp.rules[grp.rules.length - 1] === this.qryBldrObj.getRule(args.ruleID) && args.ruleID.split('_')[0] != "group0") {

                args.cancel = true;

                this.qryBldrObj.deleteGroup(args.ruleID.split('_')[0]);

           } else if (grp.rules.length === 2) {

            var btn = document.getElementById(this.qryBldrObj.element.id + '_' + args.groupID).querySelectorAll('.e-removerule');

            btn[btn.length - 1].classList.add('e-disabled');

           }

       }

       if (args.type === "insertRule") {

        var btn = document.getElementById(this.qryBldrObj.element.id + '_' + args.groupID).querySelector('.e-disabled');

        btn?.classList.remove('e-disabled');

       }

   }

 

   change(args) {

       if (args.type === "insertGroup") {

        var btn = document.getElementById(this.qryBldrObj.element.id + '_' + args.childGroupID).querySelector('.e-removerule');

        btn?.classList.add('e-disabled');

       }

   }

 

   onCreated() {

    document.getElementsByClassName("e-removerule")[0].classList.add('e-disabled');

   }

 

Sample link: https://stackblitz.com/edit/angular-q8krod?file=app.component.ts

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

Regards,

YuvanShankar A

[Sanjay Singh]

Hi Team,

Thank you for the response.

1. “e-disabled” class only gray out the button, button still works, when we click on it, rule condition is removed. ( Requirement-2 )
   
2. The button is greyed out only at initial load. When I try to add more conditions and then remove them until one is left, the last remove button is not greyed out. ( Requirement-2 )
3. When I add second group and add 4 rule conditions to it and now I try to remove any rule condition, whole group is deleted. (The requirement is, the group should be deleted only when we try to remove last rule.) ( Requirement-1 )

Please let me know if any clarifications is required.

Thanks,

Sanjay

[YuvanShankar Arunagiri]

Sanjay,

Query-1: To disable the delete button of the rule, please use the CSS below.

.e-disabled {

    pointer-events: none;

}

Query-2: To resolve this issue, please use the below code snippet in the change event of the query builder.

onChange(args) {

       if (args.type === "deleteRule") {

           …………………………………………………

           } else if (grp.rules.length === 2) {

            var btn = document.getElementById(this.qryBldrObj.element.id + '_' + args.groupID).querySelectorAll('.e-removerule');

            if (args.ruleID.split('_')[0] == "group0") {

                btn[0].classList.add('e-disabled');

            }

            btn[btn.length - 1].classList.add('e-disabled');

           }

       }

       ………………………………………

   }

 

Sample link: https://stackblitz.com/edit/angular-q8krod-jphcni?file=app.component.ts

Query-3: We are unable to reproduce this issue on our end. For your reference, we have prepared a video demonstration, which you can refer to in the attached video file. If you are still facing issues, please share a video demonstration of the issue that can be replicated or the proper steps to replicate the issue.

Attachment: Flonnect_20221220_46d10d6513b44b77a8e5e6d8872bc482_7bef1f5.zip