1. Home
  2. Forum
  3. Angular - EJ 2
  4. Foreign Key column problem

Foreign Key column problem

Hi,

I've a problem using foreign key column and set datasources calling custom services.

If I get data calling a webApi:

public getEnergiasApi(): Observable<any> {
const url = this.baseUrl + 'api/Common/GetEnergias';
return this.http.get(url);
}

public getClientesApi(): Observable<any> {
const url = this.baseUrl + 'api/Clientes/GetClientes';
return this.http.get(url);
}

the foreign key column not works and not show data.

But if I set the dataSource values from foreign column, it works fine

public dsEnergia: any[] = [{"id":1,"nombre":"Electricidad"},{"id":2,"nombre":"Gas"}];

The HTML

<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
<ejs-grid #gridClientes [dataSource]='dsClientes'
allowPaging='true' allowSorting='true' allowTextWrap='true' allowResizing='true' allowFiltering='true' allowExcelExport='true'

[filterSettings]='filterOptions' [toolbar]='toolbarOptions'
(toolbarClick)='toolbarClick($event)'
>
<e-columns>
<e-column field='id' headerText='id' [visible]='false' isPrimaryKey='true'></e-column>
<e-column field='idEnergia' width='120' headerText='Energía' foreignKeyValue='nombre' foreignKeyField='id' [dataSource]='dsEnergia'></e-column>
<e-column field='cups' headerText='CUPS'></e-column>
<e-column field='titular' headerText='Titular'></e-column>
<e-column field='cif' headerText='CIF'></e-column>
<e-column field='direccion' headerText='Dirección' allowFiltering='false'></e-column>
<e-column field='telefono' headerText='Teléfono'></e-column>
<e-column field='tarifa' headerText='Tarifa'></e-column>
<e-column field='consumo' headerText='Consumo'></e-column>
<e-column field='potencia' headerText='Potencia'></e-column>
<e-column field='maximetro' headerText='Máximetro'></e-column>
<e-column field='fechaBaja' headerText='F. Baja' [format]='dateFormat' type='date'></e-column>
<e-column field='fechaRecepcion' headerText='F. Recepción' [format]='dateFormat' type='date'></e-column>
<e-column field='contactoEsencial' headerText='Contacto Esencial'></e-column>
<e-column field='observaciones' headerText='Observaciones'></e-column>
</e-columns>
</ejs-grid>


I attach an example, angular project and aspnet core.

Also, I like show an spinner while grid is loading data, but the function showSpinner not works...

// Configuracion de grid
@ViewChild('gridClientes')
public gridClientes: GridComponent;
....

this.gridClientes.showSpinner();


Thanks

Attachment: angular_5fd0e320.zip

7 Replies
MS Madhu Sudhanan P Syncfusion Team February 14, 2019 09:41 AM UTC

Hi Manolo, 

Greeting from syncfusion. 

Query: I've a problem using foreign key column and set datasources calling custom services. 
 
We have validated the provided sample and checked with our end. By default, we have process the foreign data by using dataManager but in your application you are assign JSON data(it take time to get the data from server so that it does not create data manager internally ) so that it does not show records in Grid. 

We suggest you to use the below way to resolve the reported problem. Please refer the below code example and updated sample for more information.  

import { DataManager } from '@syncfusion/ej2-data'; 
   
 
this.dataService.getEnergiasApi().subscribe(data => { 
      this.dsEnergiaApi = new DataManager(data); 
    }); 



Help documentation :  



Regards, 
Madhu Sudhanan P 


MC Manolo Capdevila February 18, 2019 04:19 PM UTC

Hi,

Thanks for your answer, it works!

But not I'be two questions more in the same context:
  1. I need hierarchy grid, how can I bind the childgrid with data throght service? And child grid datasource has also foreign keys also
  2. In typescript, how can I for to show a spinner while loading data?
Thanks

MS Madhu Sudhanan P Syncfusion Team February 20, 2019 12:12 PM UTC

Hi Manolo, 

Thanks for your update. 

Query: I need hierarchy grid, how can I bind the childgrid with data throght service? And child grid datasource has also foreign keys also 
 
As per your requirement, we have modified the sample. In the below sample, we assigned data source for childGrid in dataBound event of parent Grid. Please refer the below code example and sample for more information. 

   <ejs-grid #gridClientesApi [dataSource]='dsClientesApi' [childGrid]='childGrid' (actionFailure)='actionFailure($event)' (created)='created($event)' 
    allowPaging='true' allowSorting='true' allowTextWrap='true' (dataBound)='dataBound($event)' allowResizing='true' allowFiltering='true' allowExcelExport='true'> 
      <e-columns> 
          <e-column field='id' headerText='id' isPrimaryKey='true'></e-column> 
                . . . . . . . 
      </e-columns> 
  </ejs-grid> 


export class AppComponent implements OnInit { 
  constructor(private dataService: DataService) { } 
 
  ngAfterViewInit(){ 
     
    this.dataService.getEnergiasApi().subscribe(data => { 
      this.dsEnergiaApi = new DataManager(data); 
    }); 
     
    this.dataService.getClientesApi().subscribe(data => { 
      this.dsClientesApi = data; 
      this.grid.hideSpinner(); 
    }); 
  } 
  ngOnInit() { 
    this.childGrid = { dataSource: this.dsEnergiaApi, actionFailure: this.actionFailure, queryString: 'id', allowPaging: true, pageSettings: {pageSize: 6, pageCount: 5}, 
columns: [  
{ field: 'cif', headerText: 'cif', textAlign: 'Right', width: 120 },  
{ field: 'idEnergia', headerText: 'idEnergia', width: '120', foreignKeyValue: 'nombre', foreignKeyField: 'id' }  
]  
};  
   
  dataBound(args){ 
    // bind datasource for child grid 
    this.grid.childGrid.dataSource = this.dsClientesApi; 
    this.grid.childGrid.columns[1].dataSource = this.dsEnergiaApi; // foreignkey datasource 
  } 
 
  created(args){ 
    this.grid.showSpinner(); 
    setSpinner({type: 'Bootstrap'}); 
  } 
} 
 

 

Query2: In typescript, how can I for to show a spinner while loading data? 

You can show and hide the spinner in Grid by using the showSpinner and hideSpinner method of Grid. In the below sample we have show spinner in created event and hide the spinner after getting data from service. You can also use the below way to achieve your requirement. 

   <ejs-grid #gridClientesApi [dataSource]='dsClientesApi' [childGrid]='childGrid' (actionFailure)='actionFailure($event)' (created)='created($event)' 
    allowPaging='true' allowSorting='true' allowTextWrap='true' (dataBound)='dataBound($event)' allowResizing='true' allowFiltering='true' allowExcelExport='true'> 
      <e-columns> 
          <e-column field='id' headerText='id' isPrimaryKey='true'></e-column> 
                . . . . . . . 
      </e-columns> 
  </ejs-grid> 


export class AppComponent implements OnInit { 
  constructor(private dataService: DataService) { } 
 
  ngAfterViewInit(){ 
     
    this.dataService.getEnergiasApi().subscribe(data => { 
      this.dsEnergiaApi = new DataManager(data); 
    }); 
     
    this.dataService.getClientesApi().subscribe(data => { 
      this.dsClientesApi = data; 
      // need to do this in ngAfterViewInit so that we can get the grid instance 
      this.grid.hideSpinner(); 
    }); 
  } 
 
  created(args){ 
    this.grid.showSpinner(); 
    setSpinner({type: 'Bootstrap'}); 
  } 
} 
 




Regards, 
Madhu Sudhanan P 


MC Manolo Capdevila February 20, 2019 03:57 PM UTC

Thanks, it works perfect!

And the last question.... How can I use a template edit in child grid?  and Can I use reactive forms in template child edit?


MS Madhu Sudhanan P Syncfusion Team February 21, 2019 06:17 AM UTC

Hi Manolo, 

Thanks for the update. 

We have created a sample in which hierarchy grid uses reactive form editing in grid. Please go through the below sample. 


Also for using any type of template inside the hierarchy grid, the template should be provided with ViewContainerRef. To more about setting these values please go through the below link. 


Regards, 
Madhu Sudhanan P 


MC Manolo Capdevila February 21, 2019 02:56 PM UTC

Thank you!



MS Madhu Sudhanan P Syncfusion Team February 22, 2019 05:17 AM UTC

Hi Manolo, 
  
Thanks for the update. 
  
Regards, 
Madhu 


Loader.
Up arrow icon