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.
Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 149842 | Dec 11,2019 12:25 PM UTC | Apr 10,2020 11:49 AM UTC | Angular - EJ 2 | 9 |
|
Tags: Grid |
|
import { Query, DataManager, UrlAdaptor } from "@syncfusion/ej2-data";
/**
* GraphQL Adaptor with Essentail JS2 Grid
*/
export class CustomGraphQLAdaptor extends UrlAdaptor {
public opt: IGraphQLAdaptorOptions;
public schema: { result: string, count: string };
public query: string;
public getVariables: Function;
public getQuery: Function;
constructor(options: IGraphQLAdaptorOptions) {
super();
this.opt = options;
this.schema = this.opt.response;
this.query = this.opt.query;
// tslint:disable-next-line:no-empty
this.getVariables = () => { };
this.getQuery = () => this.query;
}
processQuery(datamanager: DataManager, query: Query) {
var result = super.processQuery.apply(this, arguments);
var tmp = JSON.parse(result.data);
var vars = this.getVariables() || {};
vars['datamanager'] = tmp;
var data = JSON.stringify({
query: this.getQuery(),
variables: vars
});
result.data = data;
return result; // form query based on your need
}
processResponse(data: any, context: any, query: any) {
return data.data.orders; // should return result and count
}
generateData(inserted: { data: string }, action: string) {
let parsed = JSON.parse(inserted.data);
inserted.data = JSON.stringify({
query: this.opt.getMutation(action),
variables: parsed
});
return inserted;
}
}
let data: Object = new DataManager({
url: 'http://localhost:4000/graphql',
adaptor: new CustomGraphQLAdaptor({
response: {
result: 'orders',
count: 'count'
},
query: `query Order($datamanager: DataManager) { // initial loading
orders(datamanager: $datamanager) {
result { // column names are defined
CustomerID,
ShipName,
Freight
},
count
}
}`
})
});
. . . . .
export interface IGraphQLAdaptorOptions {
response: { result: string, count: string };
query: string;
getQuery?: () => string;
getVariables?: () => Object;
getMutation?: (action: string) => string;
}
|
 |
 |
|
<ejs-grid #grid [dataSource]='data | async' allowPaging='true' [editSettings]='editSettings' allowGrouping='true'
allowReordering='true' (actionFailure)="actionComplete($event)" [toolbar]='toolbar' (dataStateChange)='dataStateChange($event)'>
<e-columns>
<e-column field='id' headerText='Customer ID' width='120' textAlign='Right' isPrimaryKey='true'></e-column>
<e-column field="name" headerText="City" foreignKeyField="name" foreignKeyValue="ShipCity" [dataSource]='colData'
width="150"></e-column>
</e-columns>
</ejs-grid>
public ngOnInit(): void {
. . . . .
this.crudService.execute(state);
const fData: Object[] = [
{ id: 1, name: 'HANAR', ShipCity: 'Germany' },
{ id: 2, name: 'VINER', ShipCity: 'Berlin' },
. . . . .
] // you can get the foreign key data and assign to data manager
this.colData = new DataManager({
json: fData
});
}
|
|
<ejs-grid #Grid [dataSource]='data | async' allowPaging= 'true' [pageSettings]='pageOptions' allowSorting= 'true' allowGrouping= 'true' (dataStateChange)= 'dataStateChange($event)' (actionFailure)='fail($event)'>
<e-columns>
. . . . .
<e-column field= "ShipCity" headerText="Ship City" width="150" foreignKeyField="ShipCity" foreignKeyValue="OrderID" [dataSource]='colData'></e-column>
</e-columns>
</ejs-grid>
|
|
export class AsyncPipeComponent {
. . . . .
public dataStateChange(state: DataStateChangeEventArgs): void {
this.service.execute(state);
}
public colData: any;
public ngOnInit(): void {
. . . . .
this.service.subscribe((args)=>{
// you can directly assign json result to colData or assign to data manager
this.colData = new DataManager({json: (args as any).result});
});
}
|
|
class CustomGraphQLAdaptor extends UrlAdaptor {
processResponse(): Object {
let original: Object[] = super.processResponse.apply(this, arguments);
return original;
}
}
export class AppComponent {
public eventSettings: EventSettingsModel = {
dataSource: new DataManager({
url: 'http://localhost:54738/Home/LoadData', // Here need to mention the web api sample running path
crudUrl: 'http://localhost:54738/Home/UpdateData',
crossDomain: true,
adaptor: new CustomGraphQLAdaptor
}),
};
} |
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.
