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

Trying to get two queryBuilders on one page

Hello all,
     I'm trying to put two queryBuilders on one page...  Here's the code I'm using to had the queryBuilders:

    incorporationBldrObj = new ej.querybuilder.QueryBuilder({
        width: '100%',
        ruleChange: updateIncorporationRule,
        showButtons: { ruleDelete: true, groupInsert: true, groupDelete: true }

    applicabilityBldrObj = new ej.querybuilder.QueryBuilder({
        width: '100%',
        ruleChange: updateApplicabilityRule,
        showButtons: { ruleDelete: true, groupInsert: true, groupDelete: true }

  But, I'm having some issues!!  The issue come from the "And/Or" button groups are somehow linked to each other.  Once I place both in the area in question, when I click either "And" button or the "Or" button, both queryBuildres change...  The "+" button behaves as expected only affecting the particular queryBuilder that it's on...  I've inspected the elements and both "And" buttons are named/id with "_and0" and the "Or" buttons are names "_or0" and have an id of "_and0"   However, the "+" buttons have an id of "e-dropdown-btn_0" and "e-dropdown-btn_1" respectively...  \
     If I, by chance, add a new group both sides, then the two lower/second groups are linked together...
     In either/all cases, only the left hand side changes color indicator as to which button is in effect.  the right side does not change colors but clicking affects the left side buttons.
     If I, through the "DevTools", rename the right hand side buttons to be 1's instead of 0s, then things work as expected UNTIL I add a new group to either side then the new group is linked to the renumbered top-level buttons on the right side...  I was thinking this route to be done in maybe jQuery code behind the scenes, but I don't think it will fix the problem.

     Is there anyway to either prefix or suffix the buttons names/ids with something unique to either side so that there's no overlap???  Or some other solution to having two queryBuilders on on page

Thanks in advance!!!,

Kevin Orcutt
Senior Applications Developer
Phone: (513) 985-7090
Email: korcutt@belcan.com

3 Replies

MV Madhan Venkateshan Syncfusion Team November 7, 2019 02:43 PM UTC

Hi Kevin Orcutt, 

Thank you for contacting Syncfusion support. 
We have checked your reported issue and we suggest you use the ID instead of className to render the two query builder in your sample. Because, we are internally handle the buttons (AND or OR) based on that unique id like as (querybuilder1_and0, querybuilder1_or0, querybuilder2_and0, querybuilder2_or0), so ID is mandatory for our query builder. We have created the sample based on your scenario, in that sample we have rendering the two query builder using unique id. 
Please refer the below code snippet and Sample link, 
<div id = "querybuilder1" ></div> 
<div id = "querybuilder2" ></div> 
var qryBldrObj = new ej.querybuilder.QueryBuilder({ 
    width: '100%' 
var qryBldrObj = new ej.querybuilder.QueryBuilder({ 
   width: '100%' 

Please get back to us with more information if we misunderstood your requirement. 

Madhan V 

KO Kevin Orcutt November 7, 2019 03:54 PM UTC

Perfect!!! Thanks!!!!  That worked just fine!  
Thanks again.

MV Madhan Venkateshan Syncfusion Team November 8, 2019 08:29 AM UTC

Hi Kevin, 
Thank you for your update, Please feel free to contact us if you need any further assistance on this. 
 Madhan V

Live Chat Icon For mobile
Up arrow icon