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.
|
var comp = Vue.component("datepicker", {
el: "#_group0_rule0_valuekey0",
template: '<md-datepicker />',
data() {
return {
data: {}
};
}
});
export default {
data: function() {
return {
dataSource: dataSource.expenseData,
textAreaContent: '',
paymentOperators: [{ value: 'equal', key: 'Equal' }, { value: 'notequal', key: 'Not Equal' }],
transOperators: [{key:'Equal',value:'equal'},{key:'Not Equal',value:'notequal'}],
amountOperators: [{ 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' }],
paymentTemplate: {
create: () => {
return document.createElement("div");
},
destroy: (args) => {},
write: () => {
var componentObj = Vue.extend(comp);
new componentObj().$mount();
}
},
importRules: {
'condition': 'and',
'rules': [{
'label': 'Payment Mode',
'field': 'PaymentMode',
'type': 'date',
'operator': 'equal'
}]
}
};
}
} |
|
npm install @syncfusion/ej2-vue-querybuilder --save
npm install vue-material –save
npm run dev |
|
var comp = Vue.component("datepicker", {
data(args) {
return {
data: {}
};
}
});
paymentOperators: [{ value: 'equal', key: 'Equal' }, { value: 'notequal', key: 'Not Equal' }],
paymentTemplate: {
create: () => {
var DateElement = document.createElement("div");
return DateElement;
},
destroy: (args) => {},
write: (args) => {
var componentObj = Vue.extend(comp);
new componentObj({el: "#" + args.elements.id, template: '<md-datepicker id='+ args.elements.id +' />'}).$mount();
}
} |
|
<template>
<div class="template-querybuilder-section">
<div class="col-lg-8 control-section">
<ejs-querybuilder id="querybuilder" ref="querybuilder" : dataSource="dataSource" :rule="importRules" width="100%" >
<e-columns>
<e-column v-for="item in columns" : field= "item.field" :label="item.label" :type= "item.type" :operators="item.operators" :template="item.template" />
</e-columns>
</ejs-querybuilder>
</div>
</div>
</template >
columns: [
{
field: "PaymentMode", label: "Payment Mode", type: "string", operators: [{ value: 'equal', key: 'Equal' }, { value: 'notequal', key: 'Not Equal' }], template: {
create: () => {
var DateElement = document.createElement("div");
return DateElement;
},
destroy: (args) => {
},
write: (args) => {
var componentObj = Vue.extend(comp);
new componentObj({ el: "#" + args.elements.id, template: '<md-datepicker id=' + args.elements.id + ' />' }).$mount();
}
}
},
{ field: "test2", label: "test2", type: "string", operators: [{ value: 'equal', key: 'Equal' }, { value: 'notequal', key: 'Not Equal' }] }
] |
|
write: (args) => {
let ds = ['Cash', 'Debit Card', 'Credit Card', 'Net Banking', 'Wallet'];
let dropDownObj = new DropDownList({
dataSource: ds,
value: args.values,
change: (e) => {
this.$refs.querybuilder.ej2Instances.notifyChange(e.itemData.value, e.element);
}
});
dropDownObj.appendTo('#' + args.elements.id);
} |
|
methods: {
dateMoment() {
this.$el.classList.add('e-template');
let querybuilder = getComponent(this.$el.closest('.e-query-builder.e-control'), 'query-builder');
querybuilder.notifyChange(this.date, this.$el);
}
} |
