Add multiple vue query builder in same page

[abdelrahman]

need to add multiple <ejs-querybuilder></ejs-querybuilder>

In same page 

[Saranya Dhayalan]

Hi Abdelrahman, 

 

Thank you for contacting Syncfusion support 

 

We have checked your reported query, we have rendered two querybuilder in same page. Please find the below code snippet: 

 

 

<template> 

    <div class="control-section"> 

        <div class="col-lg-12 querybuilder-control"> 

            <ejs-querybuilder id="querybuilder" :dataSource="dataSource" :rule="importRules" width="70%"> 

                <e-columns> 

                    <e-column field='EmployeeID' label='Employee ID' type='number' /> 

                    <e-column field='FirstName' label='First Name' type='string' /> 

                    <e-column field='TitleOfCourtesy' label='Title Of Courtesy' type='boolean' :values="values" /> 

                    <e-column field='Title' label='Title' type='string' /> 

                    <e-column field='HireDate' label='Hire Date' type='date' format='dd/MM/yyyy' /> 

                    <e-column field='Country' label='Country' type='string' /> 

                    <e-column field='City' label='City' type='string' /> 

                </e-columns> 

            </ejs-querybuilder> 

        </div> 

        <div> 

            <ejs-querybuilder id="querybuilder1" width="70%"> 

                <e-columns> 

                    <e-column field='EmployeeID' label='Employee ID' type='number' /> 

                    <e-column field='FirstName' label='First Name' type='string' /> 

                    <e-column field='TitleOfCourtesy' label='Title Of Courtesy' type='boolean' :values="values" /> 

                    <e-column field='Title' label='Title' type='string' /> 

                    <e-column field='HireDate' label='Hire Date' type='date' format='dd/MM/yyyy' /> 

                    <e-column field='Country' label='Country' type='string' /> 

                    <e-column field='City' label='City' type='string' /> 

                </e-columns> 

            </ejs-querybuilder> 

        </div> 

    </div> 

</template> 

 

For your convenience we have prepared a sample. Please find the below sample link 

 

Sample link: https://codesandbox.io/s/vue-template-i90tt?file=/src/App.vue:0-1734 

 

Please check the above sample and get back to us if you need further assistance on this. 

 

Regards, 

Saranya D