<div class="col-lg-12 control-section">
<ejs-querybuilder id="querybuilder" width="73%" rule="ViewBag.rule" dataSource="ViewBag.dataSource" maxGroupCount=5 created="createdControl" change="change">
<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-columns>
</ejs-querybuilder>
</div>
<script>
function createdControl() {
// Binding open event intially while creating the control
var ddlColl = document.querySelectorAll('.e-filter-input');
for (var i = 0; i < ddlColl.length; i++) {
var ddl = ej.base.getComponent(ddlColl[i], "dropdownlist");
ddl.open = Open
}
}
//Trigger before opening DropDownList
function Open() {
if (!this.popupObj.element.querySelectorAll(".e-list-item")[1].classList.contains("e-disable")) {
this.popupObj.element.querySelectorAll(".e-list-item")[1].classList.add("e-disable")
}
}
function change(args) {
if (args.type.indexOf('insert') > -1) {
// Binding open event while creating new rules
var qryBldrObj = ej.base.getComponent(document.getElementById("dropdownlist"), 'dropdownlist');
var ddlColl = document.querySelector("#querybuilder_" + args.groupID).querySelectorAll('.e-filter-input');
var ddl = ej.base.getComponent(ddlColl[ddlColl.length - 1], "dropdownlist");
ddl.open = Open
}
}
</script>
<style>
.e-disable {
opacity: 0.6;
pointer-events: none;
}
</style> |
Hello everyone,,I'd like to disable user interaction with the rule filter in the query filter, so that the user cannot select another filed from the list.Say I have a query filter component as follow:Once the control is rendered, the user can select the Property1 rule filter, and change the filed to Property2. I would like to disabled that.Thanks !