Web APIデータソースを持つKenodo UIグリッド？

Question

ASP.NET Coreで動作するAngularアプリケーションを作成しており、Web APIデータソースを使用するグリッドコンポーネントを作成したいと考えています。私は公式の文書でこれを行う方法についての手がかりを見つけることができません。これも可能ですか？

ありがとうございました。もちろん

Answer 1

それは、一つの例も可能である：GridDataResult

にサービスを投入するために、私のAPIから情報を取得し、共有サービスがいる：

/** Includes go up here **/ 

@Injectable() 
export class RestService { 

    apiRoot = 'http://myapi/api'; 
    headers: Headers = new Headers(); 
    options: RequestOptions = new RequestOptions(); 

    constructor(private http: Http) { 
     this.headers.append('Content-Type', 'application/json'); 
     this.headers.append('charset', 'utf-8'); 
     this.options.headers = this.headers; 
    } 

    getDataFromApi(): Observable<any> { 
     const callURL = `${this.uiRoot}/pathToData/`; 
     const requestBody: Object = {}; 

     return return this.http.post(callURL, requestBody, this.options) 
     .map(res => { 
      return res.json().map(value => { 
       return value.Result.map(item => { 
        return item; 
       }); 
      }); 
     }); 
    } 

} 

を、あなたのグリッド・コンポーネントにあなたが購読する必要がありますこの方法に変換してGridDataResultに翻訳してください。何かのように：

/** Includes go up here **/ 

@Component({ 
    selector: 'app-my-list', 
    templateUrl: './account-my-list.component.html' 
}) 
export class MyListComponent implements OnInit, OnDestroy { 
    mySubscription: Subscription; 

    state: State = { 
     skip: 0, 
     take: 50 
    } 

    myData: Array<any>; 
    gridData: GridDataResult; 

    constructor(private restService: RestService) { } 

    ngOnInit() { 
     this.mySubscription = this.restService.getDataFromApi().subscribe(val => { 
      this.myData = val; 
      this.gridData = process(this.myData, this.state); 
     }); 
    } 

    ngOnDestroy() { 
     this.mySubscription.unsubscribe(); 
    } 

    /** this is to change the state **/ 
    protected dataStateChange(state: DataStateChangeEvent): void { 
     this.state = state; 
     this.gridData = process(this.myData, this.state); 
    } 
} 

とテンプレートはの同類で何かになります：

<kendo-grid 
    [data]="gridData" 
    [pageSize]="state.take" 
    [skip]="state.skip" 
    (dataStateChange)="dataStateChange($event)"> 
</kendo-grid> 

これは、それはダンどうあるべきかのほんの一例であることに注意してください、あなたはすべてのあなたの特定のニーズを考慮する必要がありますそれに応じて変更を実行する必要があります。また、私はちょうどコメントとして残した必要なインクルード（HTTPハンドリング、オブザーバブル、OnInit、Ondestroyなど）を行う必要があります。/** Includes go up here **/