使用Web API数据源的Kenodo UI Grid？

Question

我正在创建一个运行在ASP.NET核心上的Angular应用程序，并且我想创建一个使用Web数据源的网格组件。我在官方文档中找不到任何关于如何做到这一点的线索。这有可能吗？

谢谢。

Answer 1

当然，这也是可能的，举个例子:有一个共享服务，它从我的应用程序接口获取信息来填充GridDataResult

服务：

/** 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 **/