import { Component, ViewEncapsulation } from '@angular/core';
import { sampleCustomers } from './customers';

@Component({
  selector: 'app-root',
  template: `
        <kendo-grid [data]="gridData" [filterable]="true">
            <kendo-grid-column
              field="ContactName"
              title="Contact Name"
              [width]="150"
              [headerStyle]="{'background-color': '#666','color': '#fff','line-height': '1em'}"
              [class]="'isTrainedColumn'"
              [footerStyle]="{'background-color': '#888','color': '#fff'}"
              [filterStyle]="{'padding': '10px'}"
              [filterClass]="{'default': true}"
            >
              <ng-template kendoGridFooterTemplate>Contacts: 10</ng-template>
            </kendo-grid-column>
            <kendo-grid-column
              field="CompanyName"
              title="Company Name"
              [headerStyle]="{'background-color': '#666','color': '#fff','line-height': '1em'}"
              [filterClass]="{'accented': true}"
            >
            </kendo-grid-column>
            <kendo-grid-column
              field="City"
              title="City"
              [headerStyle]="{'background-color': '#666','color': '#fff','line-height': '1em'}"
              [filterClass]="{'accented': true}"
            >
            </kendo-grid-column>
        </kendo-grid>
    `,
  styles: [
    `
    .k-grid-header .accented { background-color: #10595259; }
    .k-grid-header .default { background-color: #888; }
    .isTrainedColumn {
      text-align: right !important;
      background-color: red;
    }
    `,
  ],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  public gridData: any[] = sampleCustomers;
}
