Disable dropdownlist in rule filter

[Humanjo Daro]

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:

<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 !

[Saranya Dhayalan]

Hi Humanjo,  

  

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,  

  

<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> 

 

  

  

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

  https://www.syncfusion.com/downloads/support/forum/150734/ze/EssentialJS2WebApplication4-1815257613 

 

Screenshot: 

 

 

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

Regards,  

Saranya D 

[Humanjo Daro]

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:

   https://100001.onl/ https://1921681254.mx/ https://acc.onl/hotmail

       

       

   

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 !

Thank you my issue has been solved,...

[Saranya Dhayalan]

Hi Humanjo, 

 

Thanks for your update. 

 

We are happy to hear that your issue has been resolved. Kindly get back to us if you need any further assistance. 

 

Regards, 

Saranya D