Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 144585 | May 13,2019 02:20 PM UTC | Jun 10,2019 03:26 AM UTC | Vue | 11 |
|
Tags: Data Grid |
|
[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);
} |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
