Foreign Key column problem

[Manolo Capdevila]

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]

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); 

    }); 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridColumns.Angular-modified1064667948  

Help documentation :  

https://ej2.syncfusion.com/angular/documentation/data/adaptors/?no-cache=1  

https://ej2.syncfusion.com/angular/documentation/grid/data-binding/?no-cache=1  

Regards, 

Madhu Sudhanan P 

[Manolo Capdevila]

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]

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'}); 

  } 

} 

 

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridColumns-985555690.zip  

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'}); 

  } 

} 

 

Help documentation : https://ej2.syncfusion.com/documentation/api/grid/#showspinner  

https://ej2.syncfusion.com/documentation/api/grid/#hidespinner  

Regards, 

Madhu Sudhanan P 

[Manolo Capdevila]

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]

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. 

https://stackblitz.com/edit/hierarchy-reactiveform?file=dialog-reactive-form.component.ts 

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. 

https://ej2.syncfusion.com/angular/documentation/grid/hierarchy-grid/#template-column-in-child-grid 

Regards, 

Madhu Sudhanan P 

[Manolo Capdevila]

Thank you!

[Madhu Sudhanan P]

Hi Manolo, 

  

Thanks for the update. 

  

Regards, 

Madhu