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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Disable dropdownlist in rule filter

Thread ID:

Created:

Updated:

Platform:

Replies:

144209 Apr 24,2019 11:14 PM UTC Aug 13,2019 09:40 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: Query Builder
moez
Asked On April 24, 2019 11:14 PM UTC

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 [Syncfusion]
Replied On April 29, 2019 11:11 AM UTC

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, 
 
 
 
 
Could you please check the above sample and get back to us if you need further assistance on this? 
 
Regards, 
Vinoth Kumar S 


moez
Replied On August 13, 2019 02:48 AM UTC

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 [Syncfusion]
Replied On August 13, 2019 09:40 AM UTC

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 


CONFIRMATION

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