Search results

Auto Generated Columns in Angular Grid component

24 May 2022 / 3 minutes to read

The columns are automatically generated when columns declaration is empty or undefined while initializing the grid. All the columns in the dataSource are bound as grid columns.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data'>
               </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data: object[];

    ngOnInit(): void {
        this.data = [
            { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5 },
            { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6 },
            { OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4 }];
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

When the columns are auto-generated then the column type will be determined from the first record of the dataSource.

Set Primary key column for auto generated columns when editing is enabled

Primary key can be defined in the declaration of column object of the grid. When we didn’t declare the columns, the grid will generate the columns automatically. For these auto generated columns, you can set isPrimaryKey column property as true by using the following ways,

If Primary key “column index” is known then refer the following code example

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, EditSettingsModel, EditService } from '@syncfusion/ej2-angular-grids';

@Component({
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' [editSettings]='editSettings' (dataBound)="dataBound($event)">
               </ejs-grid>`,
    providers: [EditService]
})
export class AppComponent implements OnInit {

    public data: object[];
    public editSettings: EditSettingsModel;
    @ViewChild('grid')
    public grid: GridComponent;

    ngOnInit(): void {
        this.data = [
            { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5 },
            { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6 },
            { OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4 }];
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
    }

    dataBound(args: any) {
        (this.grid.columns[0] as any).isPrimaryKey = 'true';
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

If Primary key column and its field is known then primary key for the respective column can be defined as follows.

Copied to clipboard
  const column: ColumnModel = this.grid.getColumnByField('OrderID');
  column.isPrimaryKey = true;

Set column options to auto generated columns

You can set column options such as format, width to the auto generated columns by using dataBound event of the grid.

In the below example, width is set for OrderID column, date type is set for OrderDate column and format is set for Freight and OrderDate column.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent } from '@syncfusion/ej2-angular-grids';

@Component({
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' (dataBound)="dataBound($event)">
               </ejs-grid>`
})
export class AppComponent implements OnInit {
    public data: object[];
    @ViewChild('grid') public grid: GridComponent;

    ngOnInit(): void {
        this.data = [
            { OrderID: 10248, CustomerID: 'VINET', Freight: 32.3800, OrderDate: '1996-07-02T00:00:00.000Z' },
            { OrderID: 10249, CustomerID: 'TOMSP', Freight: 32.3800, OrderDate: '1996-07-19T00:00:00.000Z' },
            { OrderID: 10250, CustomerID: 'HANAR', Freight: 32.3800, OrderDate: '1996-07-22T00:00:00.000Z' }];
    }

    dataBound(args: any) {
        for (const cols of this.grid.columns) {
            if ((cols as any).field === 'OrderID') {
                (cols as any).width = 120;
            }
            if ((cols as any).field === 'OrderDate') {
                (cols as any).type = 'date';
                (cols as any).format = 'yMd';
            }
            if ((cols as any).field === 'Freight') {
                (cols as any).format = 'P2';
            }
        }
        this.grid.refreshColumns();
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);