How to use syncfusion grid as custom component

[Julien]

Hello,

I need to use syncfusion grid as custom component, like this :

  <DataGrid>

    <columns>

        <DGColumn headerText="Col1" dataField="@c2">< / DGColumn>

        <DGColumn headerText="Col2" dataField="@c3">< / DGColumn>

        <DGColumn headerText="Col3" dataField="@c4">< / DGColumn>

        <DGColumn headerText="Col4" dataField="@c5">< / DGColumn>

    < / columns>

  < / DataGrid>

I found your example for the datepicker :

https://www.syncfusion.com/kb/10692/how-to-use-syncfusion-datepicker-components-as-custom-component

So I understand the concept to create a DataGrid component which includes the syncfusion ejs-grid.

But how can I handle the use of columns / DGColumn to be rendered with the syncfusion e-columns / e-column ?

Thanks for help

[Praveenkumar Gajendiran]

Hi Julien, 

Greetings from Syncfusion support.


We checked your query and based on that we would like to inform you that, by default you can render the wrapper component as demonstrated in the below code example and when defining the columns you have to define it as e-columns/e-column only because we cannot find out when column attribute change. 

Code Example: 

[app.component.ts]

@Component({ 

  selector: 'app-root', 

  template: '<div><DataGrid></DataGrid></div>', 

  changeDetection: ChangeDetectionStrategy.OnPush, 

  providers: [ToolbarService, EditService, PageService] 

})-------------------------------------------------------------------------------------------------------------------
[app.childcomponent.ts]

@Component({ 

  selector: 'DataGrid', 

  template: ` 

      <ejs-grid #grid [dataSource]='data' [height]='400'> 

        <e-columns> 

          <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Left'></e-column> 

          <e-column field='CustomerID' headerText='Customer Name' width='150'></e-column> 

          <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'></e-column> 

        </e-columns> 

</ejs-grid> 

       

  `, 

  changeDetection: ChangeDetectionStrategy.OnPush, 

  // styleUrls: ['./child.component.css'] 

}) 

export class ChildComponent { 

   

  @ViewChild('grid', { static: true }) public grid: GridComponent; 

  public data: object[]; 

  public selectionOptions: SelectionSettingsModel; 

   

   

  ngOnInit(): void { 

    this.data = hierarchyOrderdata; 

     

  } 

   

} 

We have prepared a sample based on this for your reference.

Sample: https://stackblitz.com/edit/angular-udaqpk-fraiyt?file=app.component.ts

Please get back to us if you need further assistance.

Regards,
Praveenkumar G 

[Julien]

Hello, and thanks for fast answer.

Based on your sample, I need that the template of app.component.ts includes the columns.

I can rename "columns" by "e-columns" and "DGColumn" by "e-column", if it makes it easier.

To be clearer :

[app.component.ts]

@Component({ 

  selector: 'app-root', 

  template: '<div><DataGrid><e-columns><e-column field="OrderID" headerText="Order ID" width="120" textAlign="Left"></e-column></e-columns>> </DataGrid></div>', 

  changeDetection: ChangeDetectionStrategy.OnPush, 

  providers: [ToolbarService, EditService, PageService] 

})-------------------------------------------------------------------------------------------------------------------

So, app.childcomponent.ts has to find these columns from the <DataGrid> template

Is it possible ?

[Praveenkumar Gajendiran]

Hi Julien,

No, it is not possible. Because we have to render the e-columns through the directory in EJ2 Grid. So we cannot change the name of e-columns.

Alternately, we suggest you to pass the columns as arrays of object to wrapper component instead of using tag helper. This is demonstrated in the below code example

Code Example: 

[app.component.ts]

@Component({ 

  selector: 'app-root', 

  template: `<div><DataGrid [tableColumns]="tableColumns"></DataGrid></div>`, 

  changeDetection: ChangeDetectionStrategy.OnPush, 

  providers: [ToolbarService, EditService, PageService] 

}) 

export class AppComponent implements OnInit { 

tableColumns:any = [{ 

      field: "OrderID", 

      headerText: "Order ID", 

      textAlign: "Right", 

      width: 120 

    }, 

    { 

      field: "CustomerID", 

      headerText: "Customer ID", 

      width: 140 

    }, 

    { 

      field: "Freight", 

      headerText: "Freight", 

      textAlign: "Right", 

      width: 120, 

      format: "C2", 

    },] 

}-------------------------------------------------------------------------------------------------------------------
[app.childcomponent.ts]

@Component({ 

  selector: 'DataGrid', 

  template: ` 

      <ejs-grid #grid [dataSource]='data' [height]='400' [columns]='gcolumns'> 

         

</ejs-grid> 

       

  `, 

  changeDetection: ChangeDetectionStrategy.OnPush, 

  // styleUrls: ['./child.component.css'] 

}) 

export class ChildComponent { 

   

  @Input() childProperty: any; 

  @Input() tableColumns: any; 

  constructor() { 

    this.initDefaults(); 

  } 

  private initDefaults(): void { 

    this.tableColumns = []; 

  } 

  @ViewChild('grid', { static: true }) public grid: GridComponent; 

  public data: object[]; 

  public selectionOptions: SelectionSettingsModel; 

  public gcolumns: object[]; 

   

   

  ngOnInit(): void { 

    debugger; 

    this.data = hierarchyOrderdata; 

    this.gcolumns = this.tableColumns; 

  } 

   

} 

Please get back to us if you need further assistance.

Regards,
Praveenkumar G 

[Julien]

Hello and thanks for answer.

My application displays thousands html files which contain custom components. These custom components have special attributes for business logic.

I really need to be able to use a datagrid custom component which can find columns in the html file. 

In your sample, can I declare the array of columns, in the template in app.component.ts ?

Namely :

  template: `<div><DataGrid [tableColumns]="array_here"></DataGrid></div>`, 

Other idea, is it possible that my custom component extends ejs-grid ? So i can add my special attributed and keep using <e-columns> <e-column>

Something like this :

@Component({...})
class Datagrid extends ejs-grid implements OnInit

Is it a good idea ?

[Praveenkumar Gajendiran]

Hi Julien,

Query1: “In your sample, can I declare the array of columns, in the template in app.component.ts ?”

Yes, you have to define the array of columns in the “app.component.ts” file.

Query2: “Other idea, is it possible that my custom component extends ejs-grid ? So i can add my special attributed and keep using <e-columns> <e-column>”

No, it is not possible. By default in EJ2 Grid, we have rendered the Grid columns based on the e-columns directory (i.e, We have rendered the Grid columns based on What you have declared in the e-columns directory). So we are unable to change the e-columns directory and the flow. This is our default behavior.


Regards,
Praveenkumar G