@Component({
selector: 'app-table',
templateUrl: './grid.component.html',
styleUrls: ['./grid.component.css'],
encapsulation: ViewEncapsulation.None,
providers: [InfiniteScrollService, ToolbarService, PdfExportService],
})
export class GridTableComponent implements OnInit {
@ViewChild('grid', { static: true }) public grid: GridComponent;
@Output() public fetchMore: EventEmitter<void> = new EventEmitter();
inputMessageRef: ElementRef;
editSettings: EditSettingsModel;
toolbar: ToolbarItems[];
selectionOptions: SelectionSettingsModel;
filterOptions: FilterSettingsModel;
pageSettings: PageSettingsModel;
infiniteOptions: InfiniteScrollSettingsModel;
public state: DataStateChangeEventArgs;
test = true;
columns: any;
data;
filtered = [];
refreshed = false;
flag = true;
scrollFlag = true;
isWeb: boolean;
title: string;
startIndex = this.tableService.paging;
totalPageable: number;
public addColumn: boolean = true;
public loadingIndicator;
showColumnChooser: boolean = true;
constructor(
private router: Router,
public tableService: TableService,
private translate: TranslateService,
private formService: FormService,
private loadingService: LoadingService
) {}
ngOnInit() {
this.pageSettings = { pageSize: 25, pageSizes: false };
this.selectionOptions = {
checkboxMode: 'ResetOnRowClick',
type: 'Multiple',
mode: 'Both',
};
this.filterOptions = { type: 'Menu' };
// this.tableModel(this.data);
this.infiniteOptions = {};
this.editSettings = {
allowEditing: true,
allowAdding: true,
allowDeleting: true,
mode: 'Normal',
};
this.toolbar = [
'Search',
'Add',
'Edit',
'Delete',
'Update',
'Cancel',
'PdfExport',
'ColumnChooser',
];
this.toolbar = ['Search', 'PdfExport', 'ColumnChooser'];
}
this.startIndex = this.tableService.paging - 25; // SHould be the same number as pageSettings -> pageSize
}
dataBound(args: any) {
if (this.flag) {
this.flag = false;
// const column: ColumnModel = this.grid.getColumnByField('checkbox');
// column.isPrimaryKey = true;
this.filtered = this.data.columns.filter((item) => {
for (var col in this.grid.columns) {
if (item.key === undefined || item.key == col['field']) return false;
}
return true;
});
for (const cols of this.grid.columns) {
(cols as any).visible = false;
this.filtered.forEach((column: TableColumn) => {
if ((cols as any).type === 'checkbox') {
(cols as any).hideAtMedia = '(min-width: 70px)';
(cols as any).visible = true;
(cols as any).allowEditing = false;
(cols as any).allowSorting = false;
(cols as any).allowSearching = false;
(cols as any).allowFiltering = false;
(cols as any).allowReordering = false;
(cols as any).showInColumnChooser = false;
(cols as any).width = 'auto';
}
if (
(cols as any).field === column.key &&
(cols as any).field !== 'checkbox'
) {
(cols as any).visible = true;
// (cols as any).width = column.width;
(cols as any).width = 'auto';
(cols as any).headerText = this.translate.instant(column.label);
// (cols as any).headerText = column.label;
(cols as any).allowEditing = column.allowEditing;
}
return true;
});
}
this.grid.refresh();
}
if (this.addColumn && this.data.checkbox) {
var obj = { type: 'checkbox', width: 50 };
this.grid.columns.unshift(obj as any);
this.addColumn = false;
(this.grid.columns[1] as any).isPrimaryKey = true;
this.grid.freezeRefresh();
}
}
action(args) {
if (
args.requestType == 'infiniteScroll' &&
args.startIndex == this.startIndex
) {
console.log('emited');
this.startIndex += this.tableService.paging;
this.scrollFlag = false;
this.fetchMore.emit();
this.scrollFlag = true;
}
}
}
