import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { CustomerModel } from './../../../shared/models/';
import { EJComponents } from 'ej-angular2';
@Component({
selector: 'mj-customer-list',
templateUrl: './customer-list.component.html',
styleUrls: ['./customer-list.component.scss']
})
export class CustomerListComponent {
@Input() entityList: CustomerModel[];
@Output() updatedEntity = new EventEmitter<CustomerModel>();
public pageSettings;
public editSettings;
public toolbarItems;
public filterType;
public selectionMode;
constructor() {
this.pageSettings = { pageSize: '10' };
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: 'normal' };
this.toolbarItems = { showToolbar: true, toolbarItems: ['add', 'edit', 'delete', 'update', 'cancel'] };
this.filterType = { filterType: 'menu' };
this.selectionMode = { selectionMode: ['row'] };
}
onEditEntity(entity: CustomerModel) {
this.isNew.emit(false);
this.updatedEntity.emit(entity);
}
}
Template
<ej-grid *ngIf="entityList && showTable" id="Grid" [dataSource]="entityList" [allowPaging]="true" [pageSettings]="pageSettings"
[allowFiltering]="true" [filterSettings]="filterType" [toolbarSettings]="toolbarItems" [editSettings]="editSettings" allowSelection="true"
selectionType="multiple" [selectionSettings]="selectionMode">
<e-columns>
<e-column field="$key" headerText="ID" width="10" textAlign="left"></e-column>
<e-column field="name" headerText="Name" width="80" textAlign="left"></e-column>
<e-column field="image" headerText="Logo" width="80" textAlign="left"></e-column>
</e-columns>
</ej-grid>
