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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trying to get two queryBuilders on one page

Thread ID:





148879 Nov 6,2019 11:21 PM UTC Nov 8,2019 08:29 AM UTC JavaScript - EJ 2 3
Tags: Query Builder
Kevin Orcutt
Asked On November 6, 2019 11:21 PM UTC

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

Madhan Venkateshan [Syncfusion]
Replied On 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 

Kevin Orcutt
Replied On November 7, 2019 03:54 PM UTC

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

Madhan Venkateshan [Syncfusion]
Replied On 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


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon