Print Page - How to automatically create grid columns according to server side tabular data?

You can create a service to get the column definitions from remote server, subscribe it and then create the datagrid component. Please refer to the code below:

Code:

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `
    <eui-datagrid *ngIf="columns" style="height:250px"
        [pagination]="true"
        [data]="data"
        [total]="total"
        [pageNumber]="pageNumber"
        [pageSize]="pageSize">
      <eui-grid-column *ngFor="let col of columns" [field]="col.field" [title]="col.title"></eui-grid-column>
    </eui-datagrid>
  `,
  providers: [DataService]
})
export class AppComponent {
  columns = null;
  total: number = 0;
  pageNumber = 1;
  pageSize = 20;
  data = [];

  constructor(public dataService: DataService){}

  ngAfterViewInit() {
    this.dataService.getColumns().subscribe(columns => this.columns = columns);
    this.dataService.getData().subscribe((data) => {
      this.total = data.total;
      this.data = data.rows;
    });
  }
}

EasyUI Forum

General Category => EasyUI for Angular => Topic started by: softboy99 on February 01, 2018, 01:28:15 AM