Trying to get two queryBuilders on one page

[Kevin Orcutt]

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 }

    });

    incorporationBldrObj.appendTo('.incorporation-rules');

    applicabilityBldrObj = new ej.querybuilder.QueryBuilder({

        width: '100%',

        ruleChange: updateApplicabilityRule,

        showButtons: { ruleDelete: true, groupInsert: true, groupDelete: true }

    });

    applicabilityBldrObj.appendTo('.applicability-rules');

  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: [phone]
Email: [e-mail]
www.belcan.com

[Madhan Venkateshan]

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, 

Html 

<div id = "querybuilder1" ></div> 

<div id = "querybuilder2" ></div> 

Js 

var qryBldrObj = new ej.querybuilder.QueryBuilder({ 

    width: '100%' 

}); 

qryBldrObj.appendTo('#querybuilder1'); 

var qryBldrObj = new ej.querybuilder.QueryBuilder({ 

   width: '100%' 

}); 

qryBldrObj.appendTo('#querybuilder2'); 

 

 

Sample Link : https://stackblitz.com/edit/cxhbeg-bbstqj?file=index.html 

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

Regards, 

Madhan V 

[Kevin Orcutt]

Perfect!!! Thanks!!!!  That worked just fine!  

Thanks again.

[Madhan Venkateshan]

Hi Kevin, 

 

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

 

Regards, 

 Madhan V