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.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
|
[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);
} |
