1. Home
  2. Forum
  3. Angular - EJ 2
  4. Initialize Grid Component and add columns programatically

Initialize Grid Component and add columns programatically

Hi,

I want to add the Grid Component to a Angular 11 project. I tried something really simple:
html:

<ejs-grid #grid> </ejs-grid>

TS:

@ViewChild('grid') public grid: GridComponent;

But then I get the following error:

error TS2564: Property 'grid' has no initializer and is not definitely assigned in the constructor.

So my first question is how to initialize the grid component in the constructor?

Then I what I actually want to achieve is to dynamically load an Excel file in to the grid with the catch that the file can be one of five different templates, so the columns will vary depending on each template. So I was thinking on reading the Excel file and removing and adding the columns programmatically but I'm open to any suggestions.



3 Replies
RS Rajapandiyan Settu Syncfusion Team July 16, 2021 01:59 PM UTC

Hi Adrian, 
 
Thanks for contacting Syncfusion support. 
 
Before proceeding with your query, we would like to share the behavior of EJ2 Grid configure. 
 
The EJ2 Grid columns and dataSource are supports array of object only. 
 
 
The Grid columns settings should be in below format. 
 
1. Typescript way: 
 
 
 
        columns: [ 
            { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' }, 
            { field: 'CustomerName', headerText: 'Customer Name', width: 150 }, 
            { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' }, 
            { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' }, 
            { field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format: 'yMd', textAlign: 'Right' }, 
            { field: 'ShipCountry', headerText: 'Ship Country', width: 150 } 
        ] 
 
 
 
You can generate the columns in angular by below way. 
 
2. Angular way: 
 
 
 
        <e-columns> 
            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 
            <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column> 
            <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'></e-column> 
            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 
            <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'></e-column> 
            <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 
        </e-columns> 
 
 
 
Please find the available columnSettings in EJ2 Grid. 
 
 
Refer to the below documentation to know about the EJ2 Grid component. 
 
 
When we creating the EJ2 Grid, we must bind either dataSource or columns to the Grid. We are not supposed to render the Grid without dataSource and columns. Since this is the basic of EJ2 Grid configure. 
 
Find the below sample for your reference. 
 
 
 
In your query, you said that you want to generate the column based on the excel file. We need more information on that so, please share the below detail. 
 
  1. How could you have the column settings in the excel file.
  2. Share the excel sheet for our reference.
  3. Share video demo of your requirement.
 
Regards, 
Rajapandiyan S 


RK Ronald Koh May 28, 2024 12:23 AM UTC

Hi, I want to achieve the same thing as well. I am using Angular and I want to 

  1. initialize a GridComponent programatically
  2. Assign a data source to it
  3. Export it to excel
Pseudocode will be something like this:
let gridComponent: GridComponent = new GridComponent();
gridComponent.dataSource = myData;
gridComponent.excelExport();

AR Aishwarya Rameshbabu Syncfusion Team May 28, 2024 10:41 AM UTC

Hi Ronald Koh,


Upon reviewing your query, we noticed that you need to programmatically render the Syncfusion Grid within Angular. We have developed a basic sample based on your specifications, which involves creating a Grid, assigning the necessary data source, and programmatically exporting it to an Excel document. For more detailed information, please consult the provided sample, code snippet, and documentation link.

App.component.ts

 

<ejs-grid #grid id='Grid' [columns]='columns'

               [toolbar]='toolbarOptions' [allowExcelExport]='true'

                (toolbarClick)='toolbarClick($event)'>

                </ejs-grid>

 

 

export class AppComponent implements OnInit {

 

    @ViewChild('grid')

    public grid!: GridComponent;

 

    public data: Object[] = [

        { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38, ShipCountry: 'Germany' },

        { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61, ShipCountry: 'France' }

    ];

 

    public columns: ColumnModel[] = [

        { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },

        { field: 'CustomerID', headerText: 'Customer Name', width: 150 },

        { field: 'Freight', headerText: 'Freight', width: 120, format: 'C2', textAlign: 'Right' }, 

        { field: 'ShipCountry', headerText: 'Ship Country', width: 130 }

    ];

 

    public toolbarOptions?: ToolbarItems[];

 

    ngOnInit() {

        this.toolbarOptions = ['ExcelExport'];

     }

 

    ngAfterViewInit() {

        this.grid.dataSource = this.data;

    }

 

    toolbarClick(args: ClickEventArgs): void {

        if (args.item.id === `${this.grid.element.id}_excelexport`) { 

            // Grid component id + _ + toolbar item name

            this.grid.excelExport();

        }

    }

 

}

 



Sample: https://stackblitz.com/edit/github-dp76ix-iciuag?file=src%2Fapp.component.ts,src%2Fdatasource.ts


Documentation Link: Excel-exporting


If you need any further assistance or have additional questions, please feel free to let us know.


Regards

Aishwarya R


Loader.
Up arrow icon