sub query

[Noel Walsh]

Hi Support,

We are looking to use query builder control in our application. In our scenario we need to add sub-query in condition, so wondering if it is possible to do it in query builder?

If possible can we get any sample code or article reference to add sub query in query builder conditions?

Regards,

Awais

[Janakiraman Sakthivel]

Hi Noel Walsh, 

 

Thanks for contacting Syncfusion support. 

 

We have checked your requirements and would like to let you know that we currently do not have this support in our Query Builder. However, we will try the possibilities to log this as a custom sample. And we will provide details on December 9,2021. We appreciate your patience until then. 

 

Regards,  

Janakiraman S. 

[Gayathri KarunaiAnandam]

Hi Noel Walsh, 

 

Thanks for the patience. 

 

We have checked your reported requirement. We suspect that your requirement can be achieved by using complex data binding in querybuilder. Please check the code snippet. 

Code snippet: 

this.fieldMode = 'DropdownTree'; 

        this.separator = '.'; 

        this.columns = [ 

            { field: 'Employee', label: 'Employee', columns: [ 

                    { field: 'ID', label: 'ID', type: 'number' }, 

                    { field: 'DOB', label: 'Date of birth', type: 'date', format: 'yMd' }, 

                    { field: 'HireDate', label: 'Hire Date', type: 'date' }, 

                    { field: 'Salary', label: 'Salary', type: 'number' }, 

                    { field: 'Age', label: 'Age', type: 'number' }, 

                    { field: 'Title', label: 'Title', type: 'string' } 

                ] }, 

            { field: 'Name', label: 'Name', columns: [ 

                    { field: 'FirstName', label: 'First Name', type: 'string' }, 

                    { field: 'LastName', label: 'Last Name', type: 'string' } 

                ] }, 

            { field: 'Country', label: 'Country', columns: [ 

                    { field: 'State', label: 'State', columns: [ 

                            { field: 'City', label: 'City', type: 'string' }, 

                            { field: 'Zipcode', label: 'Zip Code', type: 'number' } 

                        ] }, 

                    { field: 'Region', label: 'Region', type: 'string' }, 

                    { field: 'Name', label: 'Name', type: 'string' } 

                ] } 

        ]; 

        this.importRules = { 

            'condition': 'and', 

            'rules': [{ 

                    'label': 'ID', 

                    'field': 'Employee.ID', 

                    'type': 'number', 

                    'operator': 'equal', 

                    'value': 1001 

                }, 

                { 

                    'label': 'First Name', 

                    'field': 'Name.FirstName', 

                    'type': 'string', 

                    'operator': 'equal', 

                    'value': 'Mark' 

                }, 

                { 

                    'condition': 'or', 

                    'rules': [{ 

                            'label': 'City', 

                            'field': 'Country.State.City', 

                            'operator': 'equal', 

                            'type': 'string', 

                            'value': 'Jersey City' 

                        }, { 

                            'label': 'Date of birth', 

                            'field': 'Employee.DOB', 

                            'operator': 'equal', 

                            'type': 'date', 

                            'value': '7/7/96' 

                        }] 

                } 

            ] 

        }; 

    } 

    render() { 

        return (<div className='control-pane'> 

                <div className='control-section'> 

                    <div className='col-lg-12 control-section'> 

                        <QueryBuilderComponent dataSource={complexData} columns={this.columns} rule={this.importRules}  

                                 fieldMode={this.fieldMode} separator={this.separator}> 

                        </QueryBuilderComponent> 

                    </div> 

                </div> 

            </div>); 

    } 

For your convenience, please check the below sample link. 

Sample: https://stackblitz.com/edit/react-ugymwn 

Documentation: https://ej2.syncfusion.com/react/documentation/query-builder/data-binding/#complex-data-binding 

Please check the above link and if we misunderstood your requirement please share more details regarding your requirement so that we can analyze and provide you a better solution quickly. 

Regards, 

Gayathri K