We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Foreign Key column problem

Thread ID:

Created:

Updated:

Platform:

Replies:

142620 Feb 12,2019 02:15 PM UTC Feb 22,2019 05:17 AM UTC Angular - EJ 2 7
loading
Tags: Grid
Manolo Capdevila
Asked On February 12, 2019 02:15 PM UTC

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

Madhu Sudhanan P [Syncfusion]
Replied On 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 


Manolo Capdevila
Replied On 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

Madhu Sudhanan P [Syncfusion]
Replied On 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 


Manolo Capdevila
Replied On 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?


Madhu Sudhanan P [Syncfusion]
Replied On 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 


Manolo Capdevila
Replied On February 21, 2019 02:56 PM UTC

Thank you!



Madhu Sudhanan P [Syncfusion]
Replied On February 22, 2019 05:17 AM UTC

Hi Manolo, 
  
Thanks for the update. 
  
Regards, 
Madhu 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon