Here is my Data Service
import { HttpClient, HttpParams, HttpHeaders } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { map } from "rxjs/operators";
import { Request } from "@angular/http";
@Injectable()
export class DataService {
constructor(private http: HttpClient) {
}
public compData: Object[];
public compColumns: CompData[];
loadCompColumns() {
return this.http.get("/api/CompDetails/GetColumns")
.pipe(
map((data: any[]) => {
//console.log(data);
this.compColumns = data;
return true;
})
);
}
loadCompData() {
return this.http.get("/api/CompDetails/GetData")
.pipe(
map((data: any[]) => {
this.compData = data;
return true;
})
);
}
}
export interface CompData {
field: string,
headerText: string,
minWidth: number,
maxWidth: number,
width: number,
allowEditing: Boolean,
allowFiltering: Boolean,
allowReordering: Boolean,
allowResizing: Boolean,
allowSorting: Boolean,
isFrozen: Boolean,
visible: Boolean,
format: string,
columns: CompData
}
Here is my home.component.html
<ejs-grid #gridComp height='500px' [editSettings]="editSettings" [toolbar]="toolbar" showColumnChooser='true' allowResizing= 'false' allowTextWrap='true' [gridLines]='lines' (created)="gridCreated($event)" >
</ejs-grid>
Here is my home.component.ts file
import { Component, OnInit, ViewChild, ViewEncapsulation, Input, Injectable, Inject, ElementRef } from '@angular/core';
import { DataManager, Query, UrlAdaptor, WebApiAdaptor, ODataAdaptor } from '@syncfusion/ej2-data';
import { GridComponent, EditService, ToolbarService, PageService, ColumnChooserService, EditSettingsModel, ToolbarItems, GridLine, Column, valueAccessor, ValueAccessor } from '@syncfusion/ej2-ng-grids';
import { EventArgs } from '@syncfusion/ej2-navigations';
import {DataService, AttorneyCompData} from '../shared/dataService'
@Component({
selector: 'app-home',
styleUrls: ['./home.component.css'],
templateUrl: './home.component.html',
encapsulation: ViewEncapsulation.None,
providers: [ToolbarService, EditService, PageService, ColumnChooserService]
})
export class HomeComponent implements OnInit {
public title: string = 'Attorney Comp';
public lines: GridLine = <GridLine>'Both';
public editSettings: EditSettingsModel;
public toolbar: ToolbarItems[];
constructor(private data: DataService) {
}
public columns: Object[];
@ViewChild('gridAttorneyComp')
public gridAttorneyComp: GridComponent;
ngOnInit() {
this.data.loadCompData().subscribe(successForData => {
if (successForData) {
this.gridComp.dataSource = this.data.compData;
this.gridComp.allowPaging = false;
this.gridComp.pageSettings = { pageSize: this.data.compData.length };
this.data.loadCompColumns().subscribe(success => {
if (success) {
this.columns = this.data.compColumns;
this.gridComp.columns = this.columns;
}
});
}
});
}
public gridCreated(test: EventArgs) {
}
}
This keeps on generating error -
if I hardcopy the columns that are returned from the web service in this.columns and assign it to the grid columns it works perfectly. But as soon as I go back to the web service to pull that data it errors out. I cannot use DataManager since I am doing some manipulation on columns on the grid and have to update one column at a time.
any help is greatly appreciated.
