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.
|
[order-service.ts]
return this.ajax.send().then((response: any) => {
let data: any = JSON.parse(response);
return <DataResult>{
result: data["d"]["results"],
count: parseInt(data["d"]["__count"], 10)
};
}); |
var rows = { result: [ { Username: "testificate-1", Company: 'DMK IT Solutions GmbH', Actions: { read: true, write: true, delete: false }}, { Username: "testificate-2", Company: 'DMK IT Solutions GmbH', Actions: { read: true, write: true, delete: false } }, { Username: "testificate-3", Company: 'DMK IT Solutions GmbH', Actions: { read: true, write: true, delete: false } }, { Username: "t.rex", Company: 'Dino Solutions GbR', Actions: { read: true, write: true, delete: false } }, { Username: "t.rex", Company: 'Dino Solutions GbR', Actions: { read: true, write: true, delete: false } }, { Username: "t.rex", Company: 'Dino Solutions GbR', Actions: { read: true, write: true, delete: false } } ], count: 6 }; var rows2 = { result: [ { Username: "testificate-1", Company: 'DMK IT Solutions GmbH', Actions: { read: true, write: true, delete: false }}, { Username: "testificate-2", Company: 'DMK IT Solutions GmbH', Actions: { read: true, write: true, delete: false } }, { Username: "testificate-3", Company: 'DMK IT Solutions GmbH', Actions: { read: true, write: true, delete: false } }, { Username: "t.rex", Company: 'Dino Solutions GbR', Actions: { read: true, write: true, delete: false } }, ], count: 4 }; |
grid in VueJS template:
<ejs-grid :dataStateChange="dataStateChange" :dataSource="gridData" :toolbar='toolbarOptions' :allowPaging="true" :pageSettings="pageSettings" :allowSorting="true" :sortSettings="sortSettings" :allowSearching="true" :searchSettings="searchSettings" :allowGrouping="true" :groupSettings="groupSettings"> <e-columns> <e-column field='Username' :headerText="$t('username')" textAlign='Left'></e-column> <!-- <e-column field='Firstname' :headerText="$t('firstname')" textAlign='Left'></e-column> <e-column field='Lastname' :headerText="$t('lastname')" textAlign='Left'></e-column> --> <e-column field='Company' :visible="false" :headerText="$t('company')"></e-column> <e-column field='Actions' :headerText="$t('actions')" textAlign='Right' :template="actionColumnTemplate"></e-column> </e-columns> </ejs-grid> |
the methods part of my vue component:
methods: { dataStateChange: function (state) { return new Promise((resolve, reject) => { console.log('fake ajax request'); setTimeout(resolve, 2000); }).then((d) => { var r = null; if(flag) r = rows2; else r = rows; flag = !flag; return r; }).then((d) => { console.log('fake ajax finsihed', d); this.gridData = d; }); }, }, |
And then I trigger the dataStateChange method in my 'mounted' event method like this:
mounted() { let state = { skip: 0, take: 15 }; this.dataStateChange(state); }, |
I am not using TypeScript, is that a problem? I noticed that the 'gridData' in your example actually contains more values than it does for me.
I only have the 'count', 'json' and 'result' properties and your example has stuff like 'name' and 'actionArgs'. I think that's due to you actually initializing your 'gridData' with the typescript class constructor but I am not sure as I have never worked with TypeScript before.
Appreciate the help and hope to hear from you soon.
Best regards,
Niklas
|
import { DataManager, JsonAdaptor, Query, DataUtil } from '@syncfusion/ej2-data'
import { isNullOrUndefined } from '@syncfusion/ej2-base';
...
mounted() {
let state = { skip: 0, take: 15, group: this.groupSettings.columns };
this.dataStateChange(state);
},
dataStateChange: function (state) {
...
this.$apollo.query({
query: ALL_ORDERS_QUERY,
variables: {
first: state.take + this.i++,
skip: state.skip
},
fetchPolicy:'no-cache'
}).then(({ data, errors }) => {
let data1;
if(!isNullOrUndefined(state.group) && state.group.length) {
for(let i = 0; i < state.group.length; i++) {
data1 = DataUtil.group(data, state.group[i]); // perfom the grouping for service returned data source
}
} else {
data1 = data.allOrders;
}
this.gridData = {result: data1, count:data1.count};
})
} |
|
public ngOnInit(): void {
this.groupSettings = { columns: ["id"] };
const state: any = { skip: 0, take: 12, initialGroup: (this.groupSettings as any).columns };
this.crudService.execute(state);
}
getAllData(state ?: any): Observable < any[] > {
return this.http.get<Customer[]>(this.customersUrl)
.map((response: any) => (<any>{
result: state.take > 0 ? !isNullOrUndefined(state.initialGroup) ? DataUtil.group(response.slice(0, state.take), state.initialGroup[0]) : response.slice(0, state.take) : response,
count: response.length
}))
.map((data: any) => data);
} |
