import {{ '{' }} Component {{ '}' }} from '@angular/core';

declare var jQuery: any;
@Component({{ '{' }}
    selector: "my-app",
    template: `
        <ig-grid 
            [(options)]="gridOptions" 
            [(widgetId)]="id" 
            (cellClick)="cellClickHandler($event)" 
            (rendering)="renderedEventHandler($event)" 
        ></ig-grid>
        `
{{ '}' }})
export class AppComponent {{ '{' }}
    private gridOptions: IgGrid;
    private cellClickHandler: any;
    private renderedEventHandler:any;
    private data: Array<any>;
    private id: string = "grid1";
    
    constructor() {{ '{' }}
        this.data = [/* data omitted */];

        this.cellClickHandler= function(ui){{ '{' }}
            console.log("grid cell click event fired");
        {{ '}' }};

        this.renderedEventHandler= function(ui){{ '{' }}
            console.log("grid rendered event fired");
        {{ '}' }};

        this.gridOptions = {{ '{' }}
            dataSource: this.data,
            width: "100%",
            primaryKey: "ProductID",
            autoCommit: true,
            autoGenerateColumns: false,
            columns: [
                        {{ '{' }} "headerText": "Product ID", "key": "ProductID", "dataType": "number", "width": "10%" {{ '}' }},
                        {{ '{' }} "headerText": "Name", "key": "ProductName", "dataType": "string", "width": "40%" {{ '}' }},
                        {{ '{' }} "headerText": "Quantity per unit", "key": "QuantityPerUnit", "dataType": "string", "width": "25%" {{ '}' }},
                        {{ '{' }} "headerText": "Unit Price", "key": "UnitPrice", "dataType": "string", "width": "25%" {{ '}' }}
            ],
            features: [{{ '{' }}
                name: "Updating",
                columnSettings: [{{ '{' }}
                    columnKey: "ProductID",
                    readOnly: true
                {{ '}' }}]
            {{ '}' }}, {{ '{' }}
                name: "Paging",
                pageSize: 10
            {{ '}' }}, {{ '{' }}
                name: "Filtering"
            {{ '}' }}, {{ '{' }}
                name: "Sorting"
            {{ '}' }}]
        {{ '}' }};
    {{ '}' }}
{{ '}' }}