queryBuilder with remote data

[Franky Lee]

Hi

I try to practice the queryBuilder so I choose this example

https://ej2.syncfusion.com/vue/demos/#/material/query-builder/grid.html

And I select the remote data from yours 

https://ej2services.syncfusion.com/production/web-services/api/Orders

ejs-querybuilder

<e-columns> <e-column field='OrderID' label='Order ID' type='number' />

<e-column field=''CustomerID' label='Customer ID' type='string' /> <e-column field='EmployeeID' label='Employee ID' type='string' /> <e-column field='Freight' label='Freight' type='string' />

<e-column field='ShipCountry' label='ShipCountry' type='string' />

</e-columns>

ejs-grid

<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> <e-column field='CustomerID' headerText='Customer ID' width='140'></e-column> <e-column field='EmployeeID' headerText='Employee ID' width='140' textAlign='Right'></e-column> <e-column field='Freight' headerText='Freight' width='130'></e-column> <e-column field='ShipCountry' headerText='ShipCountry' width='120'></e-column>

importRules: { 'condition': 'or', 'rules': [{ 'label': 'Order ID', 'field': 'OrderID', 'type': 'number', 'operator': 'equal', 'value': '10011' }] }

updateRule: function(args) { var predicate = this.$refs.querybuilder.ej2Instances.getPredicate(args.rule); var fltrDataSource = []; var dataManagerQuery; if (isNullOrUndefined(predicate)) { dataManagerQuery = new Query().select(['OrderID', 'CustomerID', 'EmployeeID', 'Freight', 'ShipCountry']); } else { dataManagerQuery = new Query().select(['OrderID', 'CustomerID', 'EmployeeID', 'Freight', 'ShipCountry']) .where(predicate); } new DataManager({

url: "https://ej2services.syncfusion.com/production/web-services/api/Orders"

adaptor: new WebApiAdaptor()

}) .executeQuery(dataManagerQuery) .then((e) => { (e.result).forEach((data) => { fltrDataSource.push(data); }); }); this.gridDataSource = fltrDataSource; this.$refs.grid.ej2Instances.refresh(); },

But in the step of (e.result).forEach the problem occurs,

Can you help me solve the problem?

Thanks

your sincerely

Franky

[Sangeetha Priya Murugan]

Hi Franky, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your reported requirement and it can be achievable in our QueryBuilder in a button click event. Please find the sample link below. 

 

Sample Link : https://codesandbox.io/s/vue-template-forked-6bvoj?file=/src/App.vue:540-608 

 

Could you please check the above sample and get back to us if you need further assistance. 

 

Regards, 

Sangeetha M