Kenodo UI Grid with Web API data source?

Question

I'm creating an Angular application running on ASP.NET Core and I want to create a grid component that uses a Web API datasource. I can't find any clues on how to do this in the official documentation. Is this even possible?

Thanks.

Answer 1

Of course it is possible, one example: Have a shared service that gets the info from my API to populate the GridDataResult

the service:

/** 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;
                });
            });
        });
    }

}

then in your grid component you should subscribe to this method and translate it to your GridDataResult. something like:

/** 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);
    }
}

and the template will be something in the likes of:

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

Please note that this is just an example of how it should be donne, you must consider all your specific needs and perform changes accordingly, also you must make the necessary includes (for Http handeling, observables, OnInit, Ondestroy, etc.) that I left just as a comment /** Includes go up here **/