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
SIGN IN To post a reply.
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
SIGN IN To post a reply.
- 3 Replies
- 3 Participants
-
DT Damien Taylor
- Nov 10, 2021 06:35 PM UTC
- Mar 28, 2022 02:44 AM UTC
