Disable dropdownlist in rule filter

[moez]

Hello

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:

<ejs-querybuilder id="asQuerybuilder">

    <e-querybuilder-columns>

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

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

    </e-querybuilder-columns>

</ejs-querybuilder>

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 !

[Vinoth Kumar Sundara Moorthy]

Hi Moez, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your requirement “Disable dropdownlist item in rule filter” and it can be achieved by adding custom class ‘e-disable’ to DropDownList using its ‘open’ event. Please check the below code example, 

 

<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="Title" label="Title" type="string"></e-querybuilder-column> 

    </e-querybuilder-columns> 

</ejs-querybuilder> 

 

<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")[3].classList.contains("e-disable")) { 

            this.popupObj.element.querySelectorAll(".e-list-item")[3].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> 

 

 

 

 

 

For your convenience, we have prepared a sample based on your scenario and the same can be found in below link, 

 

http://www.syncfusion.com/downloads/support/forum/144209/ze/EssentialJS2WebApplication5121431530 

 

 

 

Could you please check the above sample and get back to us if you need further assistance on this? 

 

Regards, 

Vinoth Kumar S 

[moez]

Hi Vinoth

Thank you for your reply.

I am trying to achieve a different behavior from what is described in the sample.

My goal is to restrict the user to one single operator for a specific field.

For instance, in the code you provided, I'd like to restrict the user to using the 'equal' operator exclusively.

I understand that this can be achieved by setting the operators property on the corresponding field, but even when there is only one operator (say equal), the user has to open the dropdown list and select it.

Is there a way to do that programmatically ? (select the first operator available for the field).

Thanks, M

[Vinoth Kumar Sundara Moorthy]

Hi Moez, 

 

Thank you for the update. 

 

We have checked your reported requirement and it can be achievable in QueryBuilder using change event and operators property as like in the below code example, 

 

Code Example 

<ejs-querybuilder id="querybuilder" width="73%" rule="ViewBag.rule" dataSource="ViewBag.dataSource" maxGroupCount=5 change="change"> 

    <e-querybuilder-columns> 

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

        ..// 

    </e-querybuilder-columns> 

</ejs-querybuilder> 

 

<script> 

    function change(args) { 

        if (args.type == "field" && args.value && args.ruleID) { 

            var obj = ej.base.getComponent(document.getElementById("querybuilder_" + args.ruleID + "_operatorkey"), 'dropdownlist'); 

            obj.value = 'equal'; // bind the value for operator dropdownlist 

            obj.dataBind(); 

        } 

    } 

</script> 

 

For your convenience, we have prepared the sample based on our suggestion. Please find the sample in below link, https://www.syncfusion.com/downloads/support/directtrac/144209/ze/EssentialJS2WebApplication5121431530-987085345 

 

Could you please check the above sample and get back to us, if you need any further assistance on this? 

 

Regards, 

Vinoth Kumar S