Removing the Or condition button

[Will Chambers]

Hi,

Is it possible to restrict a user from applying "or" conditions in the query builder? Ideally the button would not show at all.

Also, I intend to restrict the total groups to 0 - so only one level of conditions. Is it possible to remove the greyed-out "add group" button from the + menu?

Many thanks

Kind regards

Will

[Gayathri KarunaiAnandam]

Hi Will , 

  

Greetings from Syncfusion support. 

  

Based on your query, We can remove the “add Group”  button by using showButtons property . We can also remove the OR button by applying display to none. 

 

Code Example:  

<ejs-querybuilder id="querybuilder" width="73%" rule="ViewBag.rule" created="createdControl" dataSource="ViewBag.dataSource" showButtons="new Syncfusion.EJ2.QueryBuilder.QueryBuilderShowButtons {GroupDelete=true, GroupInsert=false, RuleDelete=true }"> 

    <e-querybuilder-columns> 

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

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

        <e-querybuilder-column field="TitleOfCourtesy" label="Title Of Courtesy" type="boolean" values="ViewBag.values"></e-querybuilder-column> 

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

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

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

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

    </e-querybuilder-columns> 

</ejs-querybuilder> 

 

<script> 

    function createdControl() { 

        var orElem = document.getElementById("querybuilder_or0"); 

        var conditionElem = orElem.closest(".e-btn-group"); 

        conditionElem.style.display = "none"; 

 

    } 

</script> 

<style> 

 

    .e-query-builder .e-group-header .e-group-action .e-btn { 

        margin-left: -5px; 

    } 

</style> 

 

 

Please find the code example below.  

  

Sample Link: https://www.syncfusion.com/downloads/support/forum/160232/ze/querybuilder-440715282  

 

API Link: https://ej2.syncfusion.com/documentation/api/query-builder/#showbuttons 

  

Regards, 

Gayathri K.