CODEWITHSUNDEEP
angularkendo-ui
SKL
SKL

Reputation: 1453

Kendo angular 2 grid - get http request

I'm trying to retrieve json data from the api and populate in template with using kendo grid. Can anyone tell me where I did mistake? I could retrieve data in debug but cannot populate in template. Here is sample code:

recent-sales.component.ts

import {Component,OnInit} from '@angular/core';
import {GridDataResult,PageChangeEvent} from '@progress/kendo-angular-grid';
import {Headers,Http,RequestOptions,Response} from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-recent-sales',
  templateUrl: './recent-sales.component.html'
})

export class RecentSalesComponent implements OnInit {

  private gridView: GridDataResult;
  private data: Object[];
  private pageSize: number = 10;
  private skip: number = 0;

  private items: any[];

  constructor(private http: Http) {
    this.loadItems();


    http.get('http://www.json-generator.com/api/json/get/crdokgCHma?indent=3')
      .map(res => res.json())
      .subscribe(data => {
        this.items = data;
      });
  }

  ngOnInit() {

  }

  protected pageChange(event: PageChangeEvent): void {
    this.skip = event.skip;
    this.loadItems();
  }

  private loadItems(): void {
    this.gridView = {
      data: this.items.slice(this.skip, this.skip + this.pageSize),
      total: this.items.length
    };
  }

}

recent-sales.component.html

<kendo-grid [selectable]="true" [data]="gridView" [pageSize]="pageSize" [skip]="skip" [pageable]="true" (pageChange)="pageChange($event)">
  <kendo-grid-column field="date" [width]="80" title="Date / Time" [class]="{'rs-date-time rs-table': true}">
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
      <div>{{dataItem.date}}</div>
      <div>{{dataItem.time}}</div>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="transactionId" [width]="150" title="Transaction ID" [class]="{'rs-transaction-id': true}"></kendo-grid-column>
  <kendo-grid-column field="outletName" [width]="220" title="Outlet" [class]="{'rs-outlet': true}"></kendo-grid-column>
  <kendo-grid-column field="amountPaid" title="Amount Paid" width="100" [class]="{'rs-amount-paid': true}">
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
      <div class="{{dataItem.status == 'successful' ? 'amount-success' : 'amount-void'}}">{{dataItem.amountPaid | currency:'MYR':true:'1.2-2'}}</div>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="status" title="Status" width="100" [headerClass]="{'rs-status-col': true}">
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
      <div class="{{dataItem.status == 'successful' ? 'status-success' : 'status-void'}}">{{dataItem.status}}</div>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

Upvotes: 1

Views: 1061

Answers (1)

Vikhyath Maiya
Vikhyath Maiya

Reputation: 3202

Change the code as following. 1.Call the http method on ngInit and call loadItems method after the data is available.Declare a class variable that will check whether the data is available before rendering the template.

import {Component,OnInit} from '@angular/core';
import {GridDataResult,PageChangeEvent} from '@progress/kendo-angular-grid';
import {Headers,Http,RequestOptions,Response} from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-recent-sales',
  templateUrl: './recent-sales.component.html'
})

export class RecentSalesComponent implements OnInit {

  private gridView: GridDataResult;
  private data: Object[];
  private pageSize: number = 10;
  private skip: number = 0;
  private dataAvailable:boolean=false;

  private items: any[];

  constructor(private http: Http) {
   
  }

  ngOnInit() {
   
    http.get('http://www.json-generator.com/api/json/get/crdokgCHma?indent=3')
      .map(res => res.json())
      .subscribe(data => {
        this.items = data;
        this.loadItems();//if it gives error saying not found,then move this http method to ngAfterViewInit
      });

  }

  protected pageChange(event: PageChangeEvent): void {
    this.skip = event.skip;
    this.loadItems();
  }

  private loadItems(): void {
    this.gridView = {
      data: this.items.slice(this.skip, this.skip + this.pageSize),
      total: this.items.length
    };
    this.dataAvailable=true;
  }

}
<div *ngIf="dataAvailable">
<kendo-grid [selectable]="true" [data]="gridView" [pageSize]="pageSize" [skip]="skip" [pageable]="true" (pageChange)="pageChange($event)">
  <kendo-grid-column field="date" [width]="80" title="Date / Time" [class]="{'rs-date-time rs-table': true}">
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
      <div>{{dataItem.date}}</div>
      <div>{{dataItem.time}}</div>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="transactionId" [width]="150" title="Transaction ID" [class]="{'rs-transaction-id': true}"></kendo-grid-column>
  <kendo-grid-column field="outletName" [width]="220" title="Outlet" [class]="{'rs-outlet': true}"></kendo-grid-column>
  <kendo-grid-column field="amountPaid" title="Amount Paid" width="100" [class]="{'rs-amount-paid': true}">
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
      <div class="{{dataItem.status == 'successful' ? 'amount-success' : 'amount-void'}}">{{dataItem.amountPaid | currency:'MYR':true:'1.2-2'}}</div>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="status" title="Status" width="100" [headerClass]="{'rs-status-col': true}">
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
      <div class="{{dataItem.status == 'successful' ? 'status-success' : 'status-void'}}">{{dataItem.status}}</div>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>
</div>

I dont know much about kendo,so if the outer div is giving some problem,please use the *ngIf condition in the next line where you specify kendo-grid.Hope this works

Upvotes: 1

Related Questions