export excel csv print

src/app/components/datagrid-syncfution/datagrid-syncfution.component.html

@@ -8,14 +8,14 @@
   [allowMultiSorting]='true'>
 
   <e-columns>
-    <e-column [textAlign]="'center'" *ngIf="checkBoxSetting" [allowEditing]="false">
-      <ng-template #headerTemplate let-data>
+    <e-column headerText='checkboxSelect' [textAlign]="'center'" width='150' *ngIf="checkBoxSetting">
+      <ng-template #headerTemplate let-data *ngIf="checkBoxSetting">
         <input type="checkbox" [id]="'checkbox-all'" class="ti-form-checkbox cursor-pointer"
           [checked]="selectedItemsAll" (click)="toggleSelectionAll()">
         <label [for]="'checkbox-all'" class="font-size-12px font-weight-700 text-primary">
           &nbsp;{{selectedItems.count}} Selected</label>
       </ng-template>
-      <ng-template #template let-data>
+      <ng-template #template let-data *ngIf="checkBoxSetting">
         <input type="checkbox" class="ti-form-checkbox cursor-pointer"
           [checked]="selectedItems.data.get(data[selectedItems.key]) || false"
           (click)="toggleSelection(data[selectedItems.key], !selectedItems.data.get(data[selectedItems.key]))">
@@ -30,10 +30,10 @@
       </ng-template>
     </e-column>
     <e-column headerText='action' width='150' textAlign='Center' *ngIf="actionSetting">
-      <ng-template #headerTemplate let-data>
+      <ng-template #headerTemplate let-data *ngIf="actionSetting">
         <span class="font-size-12px font-weight-700 text-primary">การจัดการ</span>
       </ng-template>
-      <ng-template #template let-data>
+      <ng-template #template let-data *ngIf="actionSetting">
         <i class="ti ti-eye cursor-pointer i-gray fs-l px-1" (click)="onNextPage(data)" *ngIf="canChild"></i>
         <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" [attr.data-hs-overlay]="modalName" *ngIf="canEdit"
           (click)="onSelectData(data)"></i>

src/app/components/datagrid-syncfution/datagrid-syncfution.component.ts

@@ -6,7 +6,8 @@ import {
   ViewEncapsulation,
   OnInit,
   ViewChild,
-  SimpleChanges
+  SimpleChanges,
+  ChangeDetectorRef
 } from '@angular/core';
 import {
   EditService,
@@ -28,7 +29,9 @@ import {
   Grid,
   AggregateService,
   PdfExportProperties,
-  LoadingIndicatorModel
+  LoadingIndicatorModel,
+  ExcelExportProperties,
+  Column
 } from '@syncfusion/ej2-angular-grids';
 import { GroupSettingsModel, FilterSettingsModel, ColumnModel } from '@syncfusion/ej2-angular-grids';
 import { DataManager, Query } from '@syncfusion/ej2-data';
@@ -121,7 +124,8 @@ export class DatagridSyncfutionComponent implements OnInit {
   // @Output() pageChanged = new EventEmitter<number>();
   // @Output() filterChanged = new EventEmitter<FilterEventArgs>();
   // ...
-
+  constructor(private cdr: ChangeDetectorRef) {
+  }
   ngOnInit(): void {
     // this.query = new Query().addParams('dataCount', '1000');
     this.loadingIndicator = { indicatorType: 'Shimmer' };
@@ -150,11 +154,32 @@ export class DatagridSyncfutionComponent implements OnInit {
   }
 
   toolbarClick(args: any): void {
+    console.log(" 🐒 args.item.id:", args.item.id)
     if (args.item.id === 'Grid_excelexport') {
-      this.grid?.excelExport();
-    }
-    else if (args.item.id === 'Grid_csvexport') {
-      this.grid?.csvExport();
+      let exportProperties: ExcelExportProperties = {
+        columns: this.columns.map(col => ({
+          field: col.field,
+          headerText: col.headerText
+        })) as Column[]
+      };
+      this.grid?.excelExport(exportProperties);
+    } else if (args.item.id === 'Grid_csvexport') {
+      let exportColumns = this.columns.map(col => ({
+        field: col.field!,
+        headerText: col.headerText!
+      }));
+      this.grid?.csvExport({ columns: exportColumns as Column[] });
+    } else if (args.item.id === 'Grid_print') {
+      const checkBoxSetting = this.checkBoxSetting
+      this.checkBoxSetting = false
+      const actionSetting = this.actionSetting
+      this.actionSetting = false
+      this.cdr.detectChanges()
+      setTimeout(() => {
+        this.checkBoxSetting = checkBoxSetting
+        this.actionSetting = actionSetting
+        this.cdr.detectChanges()
+      }, 1000)
     }
   }