Hide QueryBuilder operator or value?

[Phil Seeman]

I would like to be able to hide either the operator or the value for a particular column. I would be fine with hiding either one, whichever is easier to accomplish.

For example, in this case:

col.Field("TaskStatus").Label("Task Status").Type("boolean").Values(new List<string> { "Newly created", "Not newly created" }).Operators(ViewBag.statusOperator).Add();

where I'm setting

            List<object> statusOperator = new List<object> {
                new { key = "Is", value = "is" }
            };

the current result is

In this case, it's unnecessary and redundant to have the one operator of "Is" and the boolean selections.

What I would like is either to hide/remove the operator and just allow the selection of one of the radio buttons; or alternately to use the operator to set the values, as in:

            List<object> statusOperator = new List<object> {
                new { key = "Newly created", value = "new" },
                new { key = "Not newly created", value = "notnew" },
            };

and then hide/remove the value buttons (in effect to use the operator as the value selection).

Is one or both of these solutions possible?

[Phil Seeman]

I did figure out one way to do this, but please let me know if there is a better way than the following:

I set a Change event for the QueryBuilder as follows:

    function OnChange(args) {
        if (args.type == "field" && args.value == "TaskStatus" && args.ruleID) {
            // Hide the Operator field 
            var operatorElement = document.getElementById("querybuilder_" + args.ruleID + "_operatorkey");
            operatorElement.parentElement.style.display = 'none';

            // Make the value field wider so it displays both radio buttons on one line
            var topElement = document.getElementById("querybuilder_" + args.ruleID);
            var childElements = topElement.getElementsByClassName("e-rule-value e-value e-show e-custom-value");
            childElements[0].style.width = '400px';
        }
    }

[YuvanShankar Arunagiri]

Hi Phil,

We have checked your reported query, and as normal, we have recommended the Rule Template feature of query builder to achieve your requirement to hide the operator or value element of the query builder column. Refer to the below Demo link.

Demo link: https://ej2.syncfusion.com/aspnetmvc/QueryBuilder/RuleTemplate#/material3

And in your provided code snippet, it is fine to use it to hide the operator in a simple way. Compared to the rule template feature, your code is a simpler way to hide the operator. so kindly use your suggested code.

Regards,

YuvanShankar A

[Phil Seeman]

Thank you for the reply!

[YuvanShankar Arunagiri]

You're welcome, Phil. Please get back to us if you need any other assistance.

[Phil Seeman]

Hi,

I extended my above code to hide both the operator and value fields:

    functionOnChange(args){
        if(args.type =="field"&& args.value=="TaskStatus"&& args.ruleID){
                // Hide the Operator field
                var operatorElement = document.getElementById("querybuilder_" + args.ruleID + "_operatorkey");
                operatorElement.parentElement.style.display = 'none';
                // Hide the Value field
                var valueElement = document.getElementById("querybuilder_" + args.ruleID + "_valuekey0");
                valueElement.parentElement.style.display = 'none';
        }
    }

This works fine except that it prevents the rule from being updated (that is, the TaskStatus rule does not get added to the QueryBuilder's rules collection.

I tried using notifyChange calls to add the rule - here is one example of what I tried, though I tried other variations as well - but could not get anything to work:

    functionOnChange(args){
        if(args.type =="field"&& args.value=="TaskStatus"&& args.ruleID){
                // Hide the Operator field
                var operatorElement = document.getElementById("querybuilder_" + args.ruleID + "_operatorkey");
                qryBldrObj.notifyChange("is", operatorElement, "operator");
                operatorElement.parentElement.style.display = 'none';
                // Hide the Value field
                var valueElement = document.getElementById("querybuilder_" + args.ruleID + "_valuekey0");
                qryBldrObj.notifyChange("", valueElement, "value");
                valueElement.parentElement.style.display = 'none';
        }
    }

Is there a way I can resolve this issue? Thanks!

[Keerthikaran Venkatachalam]

Hi Phil,

We have checked the reported query, and we have updated QueryBuilder's rules collection after only changing the rule. Due to hiding the dropdown value, it won’t update. You need to update the dropdown value to resolve this issue. Please refer to the below code snippet.

function onchange(args): void{

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

            // Hide the Operator field

            var operatorElement = document.getElementById("querybuilder_" + args.ruleID + "_operatorkey");

            qryBldrObj.notifyChange("is", operatorElement, "operator");

            operatorElement.parentElement.style.display = 'none';

            // Hide the Value field

            var valueElement = document.getElementById("querybuilder_" + args.ruleID + "_valuekey0");

            qryBldrObj.notifyChange("", valueElement, "value");

            (valueElement as any).value = "Mark";

            valueElement.parentElement.style.display = 'none';

            var rule = qryBldrObj.getRule( args.ruleID);

            rule.value = "Mark";

    }

Get back to us if you need any further assistance on this.

[Phil Seeman]

That solution works perfectly, thanks.

[Keerthikaran Venkatachalam]

You are welcome, Phil. Please get back to us if you need any other assistance

NOTE: If that post is helpful, please mark it as an answer so that other members can locate it more quickly.