We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Maximum nesting of groups in querybuilder angular

Hi all,

Currently I am making use of the query builder in Angular. However, i would really like to add a maximum of groups that can be nested in each other.

I already found out that there is the option to set [maxGroupCount] option, but I would really like to have the ability to set a max nesting of one, so that groups cannot appear in groups.

Is that possible?


1 Reply

YA YuvanShankar Arunagiri Syncfusion Team January 31, 2023 06:30 AM UTC

Hi Jan,

We have checked your reported query and prepared the sample based on your requirement. Kindly refer to the below code snippet and sample link. Using the beforeChange event, we can check the group count and prevent the adding nested group.

 <ejs-querybuilder #querybuilder class="row" [dataSource]="dataSource"



maxGroupCount = 1;


onChange(args) {

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

            var grp = this.qryBldrObj.getGroup(args.groupID);

            if (grp.rules.length == (this.maxGroupCount + 1)) {

                args.cancel = true;




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

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


YuvanShankar A

Live Chat Icon For mobile
Up arrow icon