1. Home
  2. Forum
  3. Vue
  4. How can I customize the operator field in the Query Builder rule template?

How can I customize the operator field in the Query Builder rule template?

I'm trying to add a control for the operator. The example in documentation shows that I can modify the entire rule template, but doesn't give a clear example of how to include an operator field. Currently when I try to use it with notifyChange and 'operator' type it does not propagate up to parent. How do I go about connecting the operator parameter?




Attachment: querybuilder_f19833fd.7z


3 Replies
AS Aravinthan Seetharaman Syncfusion Team November 12, 2021 02:50 AM UTC

Hi Damien, 
 
Thanks for contacting Syncfusion Support. 
 
We have checked your query. We suspect that this issue has been occurred due to not specifying value property in DropDownList. We have added value property in DropDownList, please check the below code snippet and sample. 
 
 
  dropDownTemplate: () => { 
        return { 
          template: Vue.component("ruleTemplate", { 
            template: `<div class="e-rule e-rule-template"> 
                        <div class="e-rule-filter e-custom-filter"> 
                        <div class="e-rule-filter e-custom-filter"> 
                            <ejs-dropdownlist :change='fieldChange' :value="data.rule.field" :dataSource="data.columns" :fields="data.fields"> 
                            </ejs-dropdownlist> 
                        </div> 
                        </div> 
                            <div class="e-rule-operator e-operator"> 
                                 <ejs-dropdownlist :change='operatorChange' :dataSource="operators" :fields='fields' :value='data.rule.operator'> 
                            </ejs-dropdownlist> 
                            </div> 
                            <div class="e-rule-value e-value"> 
                             <input class="e-input" type="text" v-on:keyup="onKeyPressBtwn" /> 
                             </div> 
                            <div class="e-rule-btn e-rule-value-delete"> 
                                <button class="e-removerule e-rule-delete e-css e-btn e-small e-round"> 
                                    <span class="e-btn-icon e-icons e-delete-icon"/> 
                                </button> 
                            </div> 
                         
                    </div>`, 
            data(args) { 
              return { 
                qryBldrObj: getComponent( 
                  document.getElementById("querybuilder"), 
                  "query-builder" 
                ), 
              }; 
            }, 
            computed: { 
              operators: function () { 
                return [ 
                  { key: "Equal", value: "equal" }, 
                  { key: "Not equal", value: "notequal" }, 
                  { key: "Greater than", value: "greaterthan" }, 
                  { key: "Less than", value: "lessthan" }, 
                  { key: "Less than or equal", value: "lessthanorequal" }, 
                  { key: "Greater than or equal", value: "greaterthanorequal" }, 
                ]; 
              }, 
              fields: function () { 
                return { text: "key", value: "value" }; 
              }, 
              menuItems: function () { 
                return [ 
                     { iconCss: "",  
                      items: [ 
                          { text: "IndexField",  items: [ 
                          { text: "CompanyId" }, 
                          { text: "Status" }, 
                          { text: "Total" }, 
                        ] } 
                        ]} 
                ]; 
              }, 
              valueID: function () { 
                return `${this.data.ruleID}_menuId`; 
              }, 
              inputID: function () { 
                return `${this.data.ruleID}_inputId`; 
              }, 
            }, 
            methods: { 
               fieldChange: function(args) { 
                            this.qryBldrObj.notifyChange(args.value, args.element, 'field'); 
              }, 
              operatorChange: function (args) { 
                this.qryBldrObj.notifyChange( 
                  args.value, 
                  args.element, 
                  "operator" 
                ); 
              }, 
               onKeyPressBtwn: function(args) { 
                   this.qryBldrObj.notifyChange(args.target.value, args.target, "value"); 
               }, 
            }, 
          }), 
        }; 
      }, 
 
 
 
Could you please check the above details, and get back to us, if you need assistance or we misunderstood your requirement. 
 
Regards, 
Aravinthan S 


DT Damien Taylor March 25, 2022 04:24 PM UTC

 was able to get it working using your example and by also listening on the querybuilder element using operatorChange <ejs-queryBuilder :operatorChange='onChange'></ejs-queryBuilder>


GK Gayathri KarunaiAnandam Syncfusion Team March 28, 2022 02:44 AM UTC

Hi Damien, 
 
We are happy to hear that your requirement has been fulfilled. Kindly get back to us if you need any further assistance. 
 
Regards, 
Gayathri K 


Loader.
Up arrow icon