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.
Maybe this will help show it better. To confirm:
As it is, the below code gives me this error and no data in the table:
If I comment out offline: true, then my Grid is populated as a long list of 200 items, but i have lost the ability to paginate, filter, sort, search and of course subsequent paginate, filter, sort, search events are sent to the server (which I do not want to happen).
Code:
<template>
<div class="container">
<h2>Data is ok, but no longer get the postProcessiong of Data option</h2>
<div id="app">
<ejs-grid :dataSource='data' :allowSorting='true' :allowFiltering='true' :filterSettings='filterOptions' :allowPaging="true" :pageSettings='pageSettings' :toolbar='toolbarOptions' >
<e-columns>
<e-column field='id' headerText='ID' textAlign='Right' width=175></e-column>
<e-column field='trackName' headerText='User' width=100></e-column>
<e-column field='title' headerText='Title' width=100></e-column>
<e-column field='newItem' headerText='Pretty Completed' width=100></e-column>
<e-column field='completed' headerText='Raw Completed' width=180></e-column>
<e-column headerText='Buttom' width='150' textAlign='Center' :template="'cTemplate'"></e-column>
</e-columns>
<template v-slot:cTemplate="{data}">
<ejs-button v-if="data.completed == true" @click="myClick(data)">Yesss</ejs-button>
<ejs-button v-else @click="myClick(data)">Noooo</ejs-button>
</template>
</ejs-grid>
</div>
</div>
</template>
<script>
import { Page, Sort, Filter , Toolbar, Search } from "@syncfusion/ej2-vue-grids";
import { DataManager, WebApiAdaptor , Query } from "@syncfusion/ej2-data";
class postProcessing extends WebApiAdaptor {
processResponse() {
let original = super.processResponse.apply(this, arguments);
original.forEach((item) => item['newItem'] = 5);
original.forEach((item) => {
if(item['completed'] == false){
item['completedCleaned'] = "No";
} else {
item['completedCleaned'] = "Yes";
}
original.push(item);
});
let response = {"result": original, "Count": original.length };
console.log(response);
return response;
}
}
export default({
data() {
return {
data: new DataManager({
url: 'https://jsonplaceholder.typicode.com/todos',
adaptor: new postProcessing(),
crossDomain: true,
offline: true
}),
filterOptions: {
matchCase: false,
operator: 'contains',
predicate: 'and',
ignoreAccent: true,
type: 'Excel'
},
toolbarOptions: ['Search'],
pageSettings: { pageSize: 10 },
sortOptions: { columns: [{ field: 'title', direction: 'Ascending' }] },
query: new Query().addParams('aaaaaaa', 'true')
};
},
methods: {
myClick: function(args) {
alert(JSON.stringify(args.title));
}
},
provide: {
grid: [Page, Sort, Filter, Toolbar, Search]
}
});
</script>
<style>
@import "https://cdn.syncfusion.com/ej2/material.css";
</style>
