@zeedhi/teknisa-components-common 1.90.3 → 1.91.1

package/dist/tek-components-common.esm.js

@@ -711,6 +711,95 @@ class TekGridDeleteRowsError extends Error {
     }
 }
 
+class ButtonOption {
+    constructor(config) {
+        this.config = config;
+    }
+    buildComponent(grid) {
+        const { type, label, portrait = true, iconName, } = this.config;
+        const orientation = portrait ? 'portrait' : 'landscape';
+        return {
+            label,
+            iconName,
+            name: `${grid.name}_export_${type}_${orientation}`,
+            component: 'ZdButton',
+            flat: true,
+            events: {
+                click: () => grid.getReport(type, portrait),
+            },
+        };
+    }
+}
+
+class MultiOption {
+    constructor(config) {
+        this.config = config;
+    }
+    formatName(id, type, grid) {
+        return `${grid.name}_export_${type}_${id}`;
+    }
+    buildTooltip(option, type, grid) {
+        const { label } = option;
+        return {
+            name: this.formatName(`tooltip_${label}`, type, grid),
+            component: 'ZdTooltip',
+            bottom: true,
+            label,
+            children: [],
+        };
+    }
+    buildButton(option, type, grid) {
+        const { cssClass, label, iconName, reportParams, } = option;
+        const { portrait: optionPortrait, rowObj } = reportParams || {};
+        return {
+            name: this.formatName(`button_${label}`, type, grid),
+            component: 'ZdButton',
+            cssClass,
+            icon: true,
+            iconName,
+            events: {
+                click: () => grid.getReport(type, optionPortrait, rowObj),
+            },
+        };
+    }
+    buildDivider(option, type, grid) {
+        const { label } = option;
+        return {
+            name: this.formatName(`divider_${label}`, type, grid),
+            component: 'ZdDivider',
+            cssClass: 'zd-my-1',
+            vertical: true,
+        };
+    }
+    buildComponent(grid) {
+        const { type, label, multiOption, } = this.config;
+        const optionComponents = multiOption.map((option) => ([
+            Object.assign(Object.assign({}, this.buildTooltip(option, type, grid)), { children: [
+                    this.buildButton(option, type, grid),
+                ] }),
+            this.buildDivider(option, type, grid),
+        ]))
+            .flat();
+        optionComponents.pop();
+        const text = {
+            name: this.formatName('text', type, grid),
+            component: 'ZdText',
+            cssClass: 'zd-display-flex zd-align-center zd-flex-grow-1 tek-grid-export-multioption-text',
+            events: {
+                click: ({ event }) => event === null || event === void 0 ? void 0 : event.stopPropagation(),
+            },
+            text: label || '',
+        };
+        const result = {
+            name: this.formatName('row', type, grid),
+            component: 'ZdRow',
+            cssClass: 'zd-display-flex zd-ma-0 zd-py-0 zd-gap-x-1 tek-grid-export-multioption-row',
+            children: [text, ...optionComponents],
+        };
+        return result;
+    }
+}
+
 class GridBase {
     constructor(grid) {
         this.exportConfigButtons = [];
@@ -735,20 +824,15 @@ class GridBase {
         this.grid = grid;
         this.exportConfigButtons = this.getExportConfigButtons();
     }
+    getOption(config) {
+        if (config.multiOption)
+            return new MultiOption(config);
+        return new ButtonOption(config);
+    }
     getExportConfigButtons() {
         return this.grid.exportConfig.map((config) => {
-            const { type, label, portrait = true, iconName, } = config;
-            const orientation = portrait ? 'portrait' : 'landscape';
-            return {
-                label,
-                iconName,
-                name: `${this.grid.name}_export_${type}_${orientation}`,
-                component: 'ZdButton',
-                flat: true,
-                events: {
-                    click: () => this.grid.getReport(type, portrait),
-                },
-            };
+            const option = this.getOption(config);
+            return option.buildComponent(this.grid);
         });
     }
     createToolbarProps() {
@@ -1089,6 +1173,8 @@ Messages.add({
             TEKGRID_MULTIPLE_VALUE_HINT: 'Separe valores usando ";"',
             TEKGRID_EXPORT: 'Exportar',
             TEKGRID_EXPORT_AS: 'Exportar como {{ type }}',
+            TEKGRID_PORTRAIT: 'Retrato',
+            TEKGRID_LANDSCAPE: 'Paisagem',
             TEKGRID_COLUMN_VISIBLE: 'Visível',
             TEKGRID_COLUMN_GROUPED: 'Grupo',
             TEKGRID_COLUMN_AGGREGATION: 'Totalização',
@@ -1158,6 +1244,8 @@ Messages.add({
             TEKGRID_MULTIPLE_VALUE_HINT: 'Separate values using ";"',
             TEKGRID_EXPORT: 'Export',
             TEKGRID_EXPORT_AS: 'Export as {{ type }}',
+            TEKGRID_PORTRAIT: 'Portrait',
+            TEKGRID_LANDSCAPE: 'Landscape',
             TEKGRID_COLUMN_VISIBLE: 'Visible',
             TEKGRID_COLUMN_GROUPED: 'Grouped',
             TEKGRID_COLUMN_AGGREGATION: 'Aggregation',
@@ -1227,6 +1315,8 @@ Messages.add({
             TEKGRID_MULTIPLE_VALUE_HINT: 'Separe los valores usando ";"',
             TEKGRID_EXPORT: 'Exportar',
             TEKGRID_EXPORT_AS: 'Exportar como {{ type }}',
+            TEKGRID_PORTRAIT: 'Vertical',
+            TEKGRID_LANDSCAPE: 'Horizontal',
             TEKGRID_COLUMN_VISIBLE: 'Visible',
             TEKGRID_COLUMN_GROUPED: 'Grupo',
             TEKGRID_COLUMN_AGGREGATION: 'Totalización',
@@ -2080,6 +2170,15 @@ class TekGrid extends GridEditable {
             {
                 type: 'pdf',
                 label: I18n.translate('TEKGRID_EXPORT_AS', { type: 'PDF' }),
+                multiOption: [
+                    { label: I18n.translate('TEKGRID_PORTRAIT'), iconName: 'mdi-file-outline' },
+                    {
+                        label: I18n.translate('TEKGRID_LANDSCAPE'),
+                        iconName: 'mdi-file-outline',
+                        cssClass: 'tek-grid-export-landscape',
+                        reportParams: { portrait: false },
+                    },
+                ],
             },
             {
                 type: 'xls',
@@ -2474,8 +2573,9 @@ class TekGrid extends GridEditable {
     resetFooterVariables(group) {
         this.summaryColumns.forEach((column) => {
             group.footer[column.name] = {
-                sum: 0,
                 count: 0,
+                sum: undefined,
+                avg: undefined,
                 min: undefined,
                 max: undefined,
             };
@@ -2484,17 +2584,24 @@ class TekGrid extends GridEditable {
     isUndefined(value) {
         return value === undefined || value === null;
     }
-    calcSummaryValues(summary, rowValue) {
+    calcSummaryValues(columnName, summary, rowValue) {
         if (!this.isUndefined(rowValue)) {
             summary.count += 1;
-            if (summary.min === undefined)
-                summary.min = rowValue;
-            if (summary.max === undefined)
-                summary.max = rowValue;
-            summary.min = rowValue < summary.min ? rowValue : summary.min;
-            summary.max = rowValue > summary.max ? rowValue : summary.max;
-            if (typeof rowValue === 'number') {
-                summary.sum += rowValue;
+            if (this.events.calcSummary) {
+                this.callEvent('calcSummary', {
+                    component: this, columnName, summary, rowValue,
+                });
+            }
+            else {
+                if (summary.min === undefined)
+                    summary.min = rowValue;
+                if (summary.max === undefined)
+                    summary.max = rowValue;
+                summary.min = rowValue < summary.min ? rowValue : summary.min;
+                summary.max = rowValue > summary.max ? rowValue : summary.max;
+                if (typeof rowValue === 'number') {
+                    summary.sum = (summary.sum || 0) + rowValue;
+                }
             }
         }
     }
@@ -2506,14 +2613,15 @@ class TekGrid extends GridEditable {
                 if (this.isUndefined(this.summary[columnName])) {
                     this.summary[columnName] = {
                         count: 0,
-                        sum: 0,
+                        sum: undefined,
+                        avg: undefined,
                         min: undefined,
                         max: undefined,
                     };
                 }
-                this.calcSummaryValues(this.summary[columnName], rowValue);
+                this.calcSummaryValues(columnName, this.summary[columnName], rowValue);
                 this.groups.forEach((group) => {
-                    this.calcSummaryValues(group.footer[columnName], rowValue);
+                    this.calcSummaryValues(columnName, group.footer[columnName], rowValue);
                 });
             });
         }
@@ -2536,7 +2644,12 @@ class TekGrid extends GridEditable {
                 summaryData[column.name] = currentGroup.sum;
             }
             else if (aggregation === 'AVG') {
-                summaryData[column.name] = currentGroup.sum / currentGroup.count;
+                if (currentGroup.avg) {
+                    summaryData[column.name] = currentGroup.avg;
+                }
+                else if (typeof currentGroup.sum === 'number') {
+                    summaryData[column.name] = currentGroup.sum / currentGroup.count;
+                }
             }
             else if (aggregation === 'MIN') {
                 summaryData[column.name] = currentGroup.min;
@@ -3398,10 +3511,33 @@ class TekTreeGrid extends TreeGridEditable {
             {
                 type: 'pdf',
                 label: I18n.translate('TEKGRID_EXPORT_AS', { type: 'PDF' }),
+                multiOption: [
+                    { label: I18n.translate('TEKGRID_PORTRAIT'), iconName: 'mdi-file-outline' },
+                    {
+                        label: I18n.translate('TEKGRID_LANDSCAPE'),
+                        iconName: 'mdi-file-outline',
+                        cssClass: 'tek-grid-export-landscape',
+                        reportParams: { portrait: false },
+                    },
+                ],
             },
             {
                 type: 'xls',
-                label: I18n.translate('TEKGRID_EXPORT_AS', { type: 'XLS' }),
+                label: I18n.translate('TEKGRID_EXPORT_AS', {
+                    type: `XLS ${I18n.translate('TEKGRID_WITHOUT_GROUPS')}`,
+                }),
+            },
+            {
+                type: 'xls2',
+                label: I18n.translate('TEKGRID_EXPORT_AS', {
+                    type: `XLS ${I18n.translate('TEKGRID_WITH_GROUPS')}`,
+                }),
+            },
+            {
+                type: 'xls3',
+                label: I18n.translate('TEKGRID_EXPORT_AS', {
+                    type: `XLS ${I18n.translate('TEKGRID_GRID_MIRROR')}`,
+                }),
             },
             {
                 type: 'csv',

package/dist/tek-components-common.umd.js

@@ -715,6 +715,95 @@
       }
   }
 
+  class ButtonOption {
+      constructor(config) {
+          this.config = config;
+      }
+      buildComponent(grid) {
+          const { type, label, portrait = true, iconName, } = this.config;
+          const orientation = portrait ? 'portrait' : 'landscape';
+          return {
+              label,
+              iconName,
+              name: `${grid.name}_export_${type}_${orientation}`,
+              component: 'ZdButton',
+              flat: true,
+              events: {
+                  click: () => grid.getReport(type, portrait),
+              },
+          };
+      }
+  }
+
+  class MultiOption {
+      constructor(config) {
+          this.config = config;
+      }
+      formatName(id, type, grid) {
+          return `${grid.name}_export_${type}_${id}`;
+      }
+      buildTooltip(option, type, grid) {
+          const { label } = option;
+          return {
+              name: this.formatName(`tooltip_${label}`, type, grid),
+              component: 'ZdTooltip',
+              bottom: true,
+              label,
+              children: [],
+          };
+      }
+      buildButton(option, type, grid) {
+          const { cssClass, label, iconName, reportParams, } = option;
+          const { portrait: optionPortrait, rowObj } = reportParams || {};
+          return {
+              name: this.formatName(`button_${label}`, type, grid),
+              component: 'ZdButton',
+              cssClass,
+              icon: true,
+              iconName,
+              events: {
+                  click: () => grid.getReport(type, optionPortrait, rowObj),
+              },
+          };
+      }
+      buildDivider(option, type, grid) {
+          const { label } = option;
+          return {
+              name: this.formatName(`divider_${label}`, type, grid),
+              component: 'ZdDivider',
+              cssClass: 'zd-my-1',
+              vertical: true,
+          };
+      }
+      buildComponent(grid) {
+          const { type, label, multiOption, } = this.config;
+          const optionComponents = multiOption.map((option) => ([
+              Object.assign(Object.assign({}, this.buildTooltip(option, type, grid)), { children: [
+                      this.buildButton(option, type, grid),
+                  ] }),
+              this.buildDivider(option, type, grid),
+          ]))
+              .flat();
+          optionComponents.pop();
+          const text = {
+              name: this.formatName('text', type, grid),
+              component: 'ZdText',
+              cssClass: 'zd-display-flex zd-align-center zd-flex-grow-1 tek-grid-export-multioption-text',
+              events: {
+                  click: ({ event }) => event === null || event === void 0 ? void 0 : event.stopPropagation(),
+              },
+              text: label || '',
+          };
+          const result = {
+              name: this.formatName('row', type, grid),
+              component: 'ZdRow',
+              cssClass: 'zd-display-flex zd-ma-0 zd-py-0 zd-gap-x-1 tek-grid-export-multioption-row',
+              children: [text, ...optionComponents],
+          };
+          return result;
+      }
+  }
+
   class GridBase {
       constructor(grid) {
           this.exportConfigButtons = [];
@@ -739,20 +828,15 @@
           this.grid = grid;
           this.exportConfigButtons = this.getExportConfigButtons();
       }
+      getOption(config) {
+          if (config.multiOption)
+              return new MultiOption(config);
+          return new ButtonOption(config);
+      }
       getExportConfigButtons() {
           return this.grid.exportConfig.map((config) => {
-              const { type, label, portrait = true, iconName, } = config;
-              const orientation = portrait ? 'portrait' : 'landscape';
-              return {
-                  label,
-                  iconName,
-                  name: `${this.grid.name}_export_${type}_${orientation}`,
-                  component: 'ZdButton',
-                  flat: true,
-                  events: {
-                      click: () => this.grid.getReport(type, portrait),
-                  },
-              };
+              const option = this.getOption(config);
+              return option.buildComponent(this.grid);
           });
       }
       createToolbarProps() {
@@ -1093,6 +1177,8 @@
               TEKGRID_MULTIPLE_VALUE_HINT: 'Separe valores usando ";"',
               TEKGRID_EXPORT: 'Exportar',
               TEKGRID_EXPORT_AS: 'Exportar como {{ type }}',
+              TEKGRID_PORTRAIT: 'Retrato',
+              TEKGRID_LANDSCAPE: 'Paisagem',
               TEKGRID_COLUMN_VISIBLE: 'Visível',
               TEKGRID_COLUMN_GROUPED: 'Grupo',
               TEKGRID_COLUMN_AGGREGATION: 'Totalização',
@@ -1162,6 +1248,8 @@
               TEKGRID_MULTIPLE_VALUE_HINT: 'Separate values using ";"',
               TEKGRID_EXPORT: 'Export',
               TEKGRID_EXPORT_AS: 'Export as {{ type }}',
+              TEKGRID_PORTRAIT: 'Portrait',
+              TEKGRID_LANDSCAPE: 'Landscape',
               TEKGRID_COLUMN_VISIBLE: 'Visible',
               TEKGRID_COLUMN_GROUPED: 'Grouped',
               TEKGRID_COLUMN_AGGREGATION: 'Aggregation',
@@ -1231,6 +1319,8 @@
               TEKGRID_MULTIPLE_VALUE_HINT: 'Separe los valores usando ";"',
               TEKGRID_EXPORT: 'Exportar',
               TEKGRID_EXPORT_AS: 'Exportar como {{ type }}',
+              TEKGRID_PORTRAIT: 'Vertical',
+              TEKGRID_LANDSCAPE: 'Horizontal',
               TEKGRID_COLUMN_VISIBLE: 'Visible',
               TEKGRID_COLUMN_GROUPED: 'Grupo',
               TEKGRID_COLUMN_AGGREGATION: 'Totalización',
@@ -2084,6 +2174,15 @@
               {
                   type: 'pdf',
                   label: core.I18n.translate('TEKGRID_EXPORT_AS', { type: 'PDF' }),
+                  multiOption: [
+                      { label: core.I18n.translate('TEKGRID_PORTRAIT'), iconName: 'mdi-file-outline' },
+                      {
+                          label: core.I18n.translate('TEKGRID_LANDSCAPE'),
+                          iconName: 'mdi-file-outline',
+                          cssClass: 'tek-grid-export-landscape',
+                          reportParams: { portrait: false },
+                      },
+                  ],
               },
               {
                   type: 'xls',
@@ -2478,8 +2577,9 @@
       resetFooterVariables(group) {
           this.summaryColumns.forEach((column) => {
               group.footer[column.name] = {
-                  sum: 0,
                   count: 0,
+                  sum: undefined,
+                  avg: undefined,
                   min: undefined,
                   max: undefined,
               };
@@ -2488,17 +2588,24 @@
       isUndefined(value) {
           return value === undefined || value === null;
       }
-      calcSummaryValues(summary, rowValue) {
+      calcSummaryValues(columnName, summary, rowValue) {
           if (!this.isUndefined(rowValue)) {
               summary.count += 1;
-              if (summary.min === undefined)
-                  summary.min = rowValue;
-              if (summary.max === undefined)
-                  summary.max = rowValue;
-              summary.min = rowValue < summary.min ? rowValue : summary.min;
-              summary.max = rowValue > summary.max ? rowValue : summary.max;
-              if (typeof rowValue === 'number') {
-                  summary.sum += rowValue;
+              if (this.events.calcSummary) {
+                  this.callEvent('calcSummary', {
+                      component: this, columnName, summary, rowValue,
+                  });
+              }
+              else {
+                  if (summary.min === undefined)
+                      summary.min = rowValue;
+                  if (summary.max === undefined)
+                      summary.max = rowValue;
+                  summary.min = rowValue < summary.min ? rowValue : summary.min;
+                  summary.max = rowValue > summary.max ? rowValue : summary.max;
+                  if (typeof rowValue === 'number') {
+                      summary.sum = (summary.sum || 0) + rowValue;
+                  }
               }
           }
       }
@@ -2510,14 +2617,15 @@
                   if (this.isUndefined(this.summary[columnName])) {
                       this.summary[columnName] = {
                           count: 0,
-                          sum: 0,
+                          sum: undefined,
+                          avg: undefined,
                           min: undefined,
                           max: undefined,
                       };
                   }
-                  this.calcSummaryValues(this.summary[columnName], rowValue);
+                  this.calcSummaryValues(columnName, this.summary[columnName], rowValue);
                   this.groups.forEach((group) => {
-                      this.calcSummaryValues(group.footer[columnName], rowValue);
+                      this.calcSummaryValues(columnName, group.footer[columnName], rowValue);
                   });
               });
           }
@@ -2540,7 +2648,12 @@
                   summaryData[column.name] = currentGroup.sum;
               }
               else if (aggregation === 'AVG') {
-                  summaryData[column.name] = currentGroup.sum / currentGroup.count;
+                  if (currentGroup.avg) {
+                      summaryData[column.name] = currentGroup.avg;
+                  }
+                  else if (typeof currentGroup.sum === 'number') {
+                      summaryData[column.name] = currentGroup.sum / currentGroup.count;
+                  }
               }
               else if (aggregation === 'MIN') {
                   summaryData[column.name] = currentGroup.min;
@@ -3402,10 +3515,33 @@
               {
                   type: 'pdf',
                   label: core.I18n.translate('TEKGRID_EXPORT_AS', { type: 'PDF' }),
+                  multiOption: [
+                      { label: core.I18n.translate('TEKGRID_PORTRAIT'), iconName: 'mdi-file-outline' },
+                      {
+                          label: core.I18n.translate('TEKGRID_LANDSCAPE'),
+                          iconName: 'mdi-file-outline',
+                          cssClass: 'tek-grid-export-landscape',
+                          reportParams: { portrait: false },
+                      },
+                  ],
               },
               {
                   type: 'xls',
-                  label: core.I18n.translate('TEKGRID_EXPORT_AS', { type: 'XLS' }),
+                  label: core.I18n.translate('TEKGRID_EXPORT_AS', {
+                      type: `XLS ${core.I18n.translate('TEKGRID_WITHOUT_GROUPS')}`,
+                  }),
+              },
+              {
+                  type: 'xls2',
+                  label: core.I18n.translate('TEKGRID_EXPORT_AS', {
+                      type: `XLS ${core.I18n.translate('TEKGRID_WITH_GROUPS')}`,
+                  }),
+              },
+              {
+                  type: 'xls3',
+                  label: core.I18n.translate('TEKGRID_EXPORT_AS', {
+                      type: `XLS ${core.I18n.translate('TEKGRID_GRID_MIRROR')}`,
+                  }),
               },
               {
                   type: 'csv',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-common",
-  "version": "1.90.3",
+  "version": "1.91.1",
   "description": "Teknisa Components Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -32,5 +32,5 @@
   "peerDependencies": {
     "@zeedhi/core": "*"
   },
-  "gitHead": "e2f690d31f9bad188cd264ec2df52b609af556f8"
+  "gitHead": "12c0d9d2635c1d23829ff759b773223ea8f29b2d"
 }

package/tests/unit/components/tek-grid/grid.spec.ts

@@ -1,10 +1,10 @@
 /* eslint-disable no-underscore-dangle */
 
 import {
-  Button, Dropdown, IButton, IModal, Modal, ModalService, Search, TextInput, Text, Report,
+  Button, Dropdown, IModal, Modal, ModalService, Search, TextInput, Text, Report,
 } from '@zeedhi/common';
 import {
-  KeyMap, Http, Metadata, IDictionary,
+  KeyMap, Http, Metadata, IDictionary, IEventParam,
 } from '@zeedhi/core';
 import {
   ITekGrid,
@@ -157,48 +157,6 @@ describe('TekGrid', () => {
       expect(instance.toolbarSlot.length).toBe(0);
     });
 
-    it('should create default export buttons from exportConfig', () => {
-      const instance = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-      });
-
-      expect((instance as any).gridBase.exportConfigButtons[0].label).toBe('Export as PDF');
-      expect((instance as any).gridBase.exportConfigButtons[0].iconName).toBeUndefined();
-      expect((instance as any).gridBase.exportConfigButtons[0].name).toBe('grid_export_pdf_portrait');
-      expect((instance as any).gridBase.exportConfigButtons[0].component).toBe('ZdButton');
-      expect((instance as any).gridBase.exportConfigButtons[0].flat).toBeTruthy();
-      expect((instance as any).gridBase.exportConfigButtons[0].events).toBeDefined();
-
-      expect((instance as any).gridBase.exportConfigButtons[1].label).toBe('Export as XLS TEKGRID_WITHOUT_GROUPS');
-      expect((instance as any).gridBase.exportConfigButtons[1].iconName).toBeUndefined();
-      expect((instance as any).gridBase.exportConfigButtons[1].name).toBe('grid_export_xls_portrait');
-      expect((instance as any).gridBase.exportConfigButtons[1].component).toBe('ZdButton');
-      expect((instance as any).gridBase.exportConfigButtons[1].flat).toBeTruthy();
-      expect((instance as any).gridBase.exportConfigButtons[1].events).toBeDefined();
-
-      expect((instance as any).gridBase.exportConfigButtons[2].label).toBe('Export as XLS TEKGRID_WITH_GROUPS');
-      expect((instance as any).gridBase.exportConfigButtons[2].iconName).toBeUndefined();
-      expect((instance as any).gridBase.exportConfigButtons[2].name).toBe('grid_export_xls2_portrait');
-      expect((instance as any).gridBase.exportConfigButtons[2].component).toBe('ZdButton');
-      expect((instance as any).gridBase.exportConfigButtons[2].flat).toBeTruthy();
-      expect((instance as any).gridBase.exportConfigButtons[2].events).toBeDefined();
-
-      expect((instance as any).gridBase.exportConfigButtons[3].label).toBe('Export as XLS TEKGRID_GRID_MIRROR');
-      expect((instance as any).gridBase.exportConfigButtons[3].iconName).toBeUndefined();
-      expect((instance as any).gridBase.exportConfigButtons[3].name).toBe('grid_export_xls3_portrait');
-      expect((instance as any).gridBase.exportConfigButtons[3].component).toBe('ZdButton');
-      expect((instance as any).gridBase.exportConfigButtons[3].flat).toBeTruthy();
-      expect((instance as any).gridBase.exportConfigButtons[3].events).toBeDefined();
-
-      expect((instance as any).gridBase.exportConfigButtons[4].label).toBe('Export as CSV');
-      expect((instance as any).gridBase.exportConfigButtons[4].iconName).toBeUndefined();
-      expect((instance as any).gridBase.exportConfigButtons[4].name).toBe('grid_export_csv_portrait');
-      expect((instance as any).gridBase.exportConfigButtons[4].component).toBe('ZdButton');
-      expect((instance as any).gridBase.exportConfigButtons[4].flat).toBeTruthy();
-      expect((instance as any).gridBase.exportConfigButtons[4].events).toBeDefined();
-    });
-
     it('should change export buttons from exportConfig', () => {
       const instance = new TekGrid({
         name: 'grid',
@@ -243,44 +201,14 @@ describe('TekGrid', () => {
       httpReportSpy.mockReset();
     });
 
-    it('should call getReport on export button click', () => {
-      (window as any).open = jest.fn();
-
-      const instance = new TekGrid({
-        name: 'grid_getReport',
-        component: 'TekGrid',
-        events: {
-          beforeOpenReport: jest.fn(),
-        },
-      });
-
-      instance.onCreated();
-
-      const buttonProps = (instance as any).gridBase.exportConfigButtons[0] as IButton;
-      const button = new Button(buttonProps);
-
-      const event = new Event('click');
-      button.click(event, {} as HTMLElement);
-
-      expect(reportSpy).toBeCalledTimes(1);
-
-      (window as any).open.mockClear();
-    });
-
     it('should call window open on getReport method', async () => {
       (window as any).open = jest.fn();
 
       const instance = new TekGrid({
         name: 'grid',
         component: 'TekGrid',
-        datasource: {
-          type: 'tek-rest',
-          uniqueKey: 'id',
-          route: '/zeedhi',
-          lazyLoad: true,
-          data: [
-            { id: '1', department_id: '1' },
-          ],
+        events: {
+          beforeOpenReport: jest.fn(),
         },
         columns: [
           {
@@ -1419,7 +1347,7 @@ describe('TekGrid', () => {
       expect(instance.groupedData[5].salary).toBe(50);
     });
 
-    it('should aggregation with different functions', async () => {
+    it('should aggregate with different functions', async () => {
       const instance = createAndMount({
         name: 'grid_aggregate_4',
         component: 'TekGrid',
@@ -1491,6 +1419,88 @@ describe('TekGrid', () => {
       expect(instance.groupedData[6].column_count).toBe(3);
     });
 
+    it('should aggregate using calcSummary event', async () => {
+      const doCalcSummary = ({ summary, rowValue }: IEventParam<any>) => {
+        summary.sum = `${(summary.sum || '')}${rowValue}`;
+        summary.avg = `${summary.sum}/${summary.count}`;
+        summary.max = summary.max === undefined || summary.max < rowValue ? rowValue : summary.max;
+        summary.min = summary.min === undefined || summary.min > rowValue ? rowValue : summary.min;
+      };
+
+      const instance = createAndMount({
+        name: 'grid_aggregate_5',
+        component: 'TekGrid',
+        showSummaryTotal: true,
+        events: {
+          calcSummary: doCalcSummary,
+        },
+        columns: [
+          {
+            name: 'id',
+            label: 'id',
+          },
+          {
+            name: 'column_sum',
+            label: 'sum',
+            aggregation: 'SUM',
+          },
+          {
+            name: 'column_min',
+            label: 'min',
+            aggregation: 'MIN',
+          },
+          {
+            name: 'column_max',
+            label: 'max',
+            aggregation: 'MAX',
+          },
+          {
+            name: 'column_avg',
+            label: 'avg',
+            aggregation: 'AVG',
+          },
+          {
+            name: 'column_count',
+            label: 'count',
+            aggregation: 'COUNT',
+          },
+          {
+            name: 'department',
+            label: 'department',
+            grouped: true,
+          },
+        ],
+        datasource: {
+          uniqueKey: 'id',
+          data: [
+            {
+              id: 1, department: 1, column_sum: 'd', column_min: 'd', column_max: 'd', column_avg: 'd', column_count: 'd',
+            },
+            {
+              id: 2, department: 1, column_sum: 'b', column_min: 'b', column_max: 'b', column_avg: 'b', column_count: 'b',
+            },
+            {
+              id: 3, department: 1, column_sum: 'a', column_min: 'a', column_max: 'a', column_avg: 'a', column_count: 'a',
+            },
+            {
+              id: 4, department: 1, column_sum: 'c', column_min: 'c', column_max: 'c', column_avg: 'c', column_count: 'c',
+            },
+          ],
+        },
+      });
+
+      await flushPromises();
+
+      expect(instance.datasource.data.length).toBe(4);
+      expect(instance.groupedData.length).toBe(7);
+      expect(instance.groupedData[6].groupSummary).toBeTruthy();
+      expect(instance.groupedData[6].column_sum).toBe('dbac');
+      expect(instance.groupedData[6].column_min).toBe('a');
+      expect(instance.groupedData[6].column_max).toBe('d');
+      expect(instance.groupedData[6].column_avg).toBe('dbac/4');
+      expect(instance.groupedData[6].column_count).toBe(4);
+    });
+
     it('should group data on rest datasource with lazyLoad', async () => {
       const httpSpy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({
         data: {

package/tests/unit/components/tree-grid/tree-grid.spec.ts

@@ -477,44 +477,53 @@ describe('TekTreeGrid', () => {
       httpReportSpy.mockClear();
     });
 
-    it('should call getReport on export button click', () => {
+    it('should call window open on getReport method', async () => {
       (window as any).open = jest.fn();
 
       const instance = new TekTreeGrid({
-        name: 'grid_getReport',
+        name: 'grid',
         component: 'TekTreeGrid',
         events: {
           beforeOpenReport: jest.fn(),
         },
+        datasource: {
+          type: 'tek-rest',
+          uniqueKey: 'id',
+          route: '/zeedhi',
+          lazyLoad: false,
+          data: [
+            { id: '1', department_id: '1' },
+          ],
+        },
+        columns: [
+          {
+            name: 'id',
+            label: 'ID',
+          },
+          {
+            name: 'department_id',
+            label: 'Department ID',
+          },
+        ],
       });
 
-      instance.onCreated();
-
-      const buttonProps = (instance as any).gridBase.exportConfigButtons[0] as IButton;
-      const button = new Button(buttonProps);
-
-      const event = new Event('click');
-      button.click(event, {} as HTMLElement);
+      const spy = jest.spyOn(window, 'open');
+      await instance.getReport('pdf');
 
-      expect(reportSpy).toBeCalledTimes(1);
+      expect(spy).toHaveBeenCalledTimes(1);
 
       (window as any).open.mockClear();
+      spy.mockClear();
     });
 
-    it('should call window open on getReport method', async () => {
+    it('should call window open on getReport method when using tekmemorydatasource', async () => {
       (window as any).open = jest.fn();
 
       const instance = new TekTreeGrid({
         name: 'grid',
         component: 'TekTreeGrid',
-        datasource: {
-          type: 'tek-rest',
-          uniqueKey: 'id',
-          route: '/zeedhi',
-          lazyLoad: false,
-          data: [
-            { id: '1', department_id: '1' },
-          ],
+        events: {
+          beforeOpenReport: jest.fn(),
         },
         columns: [
           {

package/tests/unit/utils/grid-base/export-options/button-option.spec.ts

@@ -0,0 +1,44 @@
+import { Button } from '@zeedhi/common';
+import { TekGrid } from '../../../../../src/components';
+import { ButtonOption } from '../../../../../src/utils';
+
+describe('ButtonOption', () => {
+  describe('buildComponent()', () => {
+    it('when called, should build a simple button component', () => {
+      const grid = new TekGrid({ name: 'Grid', component: 'TekGrid' });
+      const config = {
+        type: 'pdf',
+        label: 'Exportar PDF',
+      };
+      const option = new ButtonOption(config);
+
+      const component = option.buildComponent(grid);
+
+      expect(component).toEqual(expect.objectContaining({
+        label: config.label,
+        name: 'Grid_export_pdf_portrait',
+        component: 'ZdButton',
+        iconName: undefined,
+        flat: true,
+      }));
+    });
+
+    it('the generated button component should call grid.getReport on click', () => {
+      const grid = new TekGrid({ name: 'Grid', component: 'TekGrid' });
+      const spy = jest.fn();
+      grid.getReport = spy;
+      const config = {
+        type: 'pdf',
+        label: 'Exportar PDF',
+      };
+      const option = new ButtonOption(config);
+
+      const component = option.buildComponent(grid);
+
+      const instance = new Button(component);
+      instance.click();
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/tests/unit/utils/grid-base/export-options/multi-option.spec.ts

@@ -0,0 +1,135 @@
+import { Button, IText, Text } from '@zeedhi/common';
+import { ITekGridExportConfig, TekGrid } from '../../../../../src/components';
+import { MultiOption } from '../../../../../src/utils';
+
+describe('MultiOption', () => {
+  describe('buildComponent()', () => {
+    it('when called, should build a row with multiple buttons', () => {
+      const grid = new TekGrid({ name: 'Grid', component: 'TekGrid' });
+      const config: ITekGridExportConfig = {
+        type: 'pdf',
+        label: 'Exportar PDF',
+        multiOption: [
+          { label: 'portrait', iconName: 'icon-portrait' },
+          { label: 'landscape', iconName: 'icon-landscape' },
+        ],
+      };
+      const option = new MultiOption(config);
+
+      const component = option.buildComponent(grid);
+
+      expect(component).toEqual({
+        name: 'Grid_export_pdf_row',
+        component: 'ZdRow',
+        cssClass: 'zd-display-flex zd-ma-0 zd-py-0 zd-gap-x-1 tek-grid-export-multioption-row',
+        children: [
+          expect.objectContaining({
+            name: 'Grid_export_pdf_text',
+            component: 'ZdText',
+            text: 'Exportar PDF',
+            cssClass: 'zd-display-flex zd-align-center zd-flex-grow-1 tek-grid-export-multioption-text',
+          }),
+          {
+            name: 'Grid_export_pdf_tooltip_portrait',
+            component: 'ZdTooltip',
+            bottom: true,
+            label: 'portrait',
+            children: [
+              expect.objectContaining({
+                name: 'Grid_export_pdf_button_portrait',
+                component: 'ZdButton',
+                icon: true,
+                iconName: 'icon-portrait',
+              }),
+            ],
+          },
+          expect.objectContaining({
+            name: 'Grid_export_pdf_divider_portrait',
+            component: 'ZdDivider',
+            cssClass: 'zd-my-1',
+            vertical: true,
+          }),
+          {
+            name: 'Grid_export_pdf_tooltip_landscape',
+            component: 'ZdTooltip',
+            bottom: true,
+            label: 'landscape',
+            children: [
+              expect.objectContaining({
+                name: 'Grid_export_pdf_button_landscape',
+                component: 'ZdButton',
+                icon: true,
+                iconName: 'icon-landscape',
+              }),
+            ],
+          },
+        ],
+      });
+    });
+
+    it('the generated text component should call stopPropagation on click', () => {
+      const grid = new TekGrid({ name: 'Grid', component: 'TekGrid' });
+      const config: ITekGridExportConfig = {
+        type: 'pdf',
+        label: 'Exportar PDF',
+        multiOption: [
+          { label: 'portrait', iconName: 'icon-portrait' },
+          { label: 'landscape', iconName: 'icon-landscape' },
+        ],
+      };
+      const option = new MultiOption(config);
+
+      const component = option.buildComponent(grid);
+
+      const instance = new Text(component.children![0] as IText);
+      const spy = jest.fn();
+      const event = { stopPropagation: spy } as unknown as Event;
+      instance.click(event);
+
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('the generated text component should not throw if event is undefined', () => {
+      const grid = new TekGrid({ name: 'Grid', component: 'TekGrid' });
+      const config: ITekGridExportConfig = {
+        type: 'pdf',
+        label: 'Exportar PDF',
+        multiOption: [
+          { label: 'portrait', iconName: 'icon-portrait' },
+          { label: 'landscape', iconName: 'icon-landscape' },
+        ],
+      };
+      const option = new MultiOption(config);
+
+      const component = option.buildComponent(grid);
+
+      const instance = new Text(component.children![0] as IText);
+
+      expect(() => instance.callEvent('click', { event: undefined })).not.toThrow();
+    });
+
+    it('the generated button components should call grid.getReport on click', () => {
+      const grid = new TekGrid({ name: 'Grid', component: 'TekGrid' });
+      const spy = jest.fn();
+      grid.getReport = spy;
+      const config: ITekGridExportConfig = {
+        type: 'pdf',
+        multiOption: [
+          { label: 'portrait', iconName: 'icon-portrait' },
+          { label: 'landscape', iconName: 'icon-landscape' },
+        ],
+      };
+      const option = new MultiOption(config);
+
+      const component = option.buildComponent(grid);
+
+      const instance = new Button(component.children![1].children![0]);
+      instance.click();
+
+      const instance2 = new Button(component.children![3].children![0]);
+      instance2.click();
+
+      expect(spy).toHaveBeenCalledTimes(2);
+    });
+  });
+});

package/types/components/tek-grid/interfaces.d.ts

@@ -4,8 +4,13 @@ import { IDynamicFilterItem, TekGrid, TekGridLayoutOptions, TekTreeGrid } from '
 export interface ITekGridLayoutEventParams extends IEventParam<ITekGrid> {
     layouts: ITekGridLayoutInfo;
 }
+export interface ITekGridCalcSummaryEventParams extends IEventParam<ITekGrid> {
+    summary: ITekGridSummary;
+    columnName: string;
+    rowValue: IDictionary<any>;
+}
 export declare type ITekGridEvent<T> = (event: T) => Promise<any>;
-export interface ITekGridEvents<T = IEventParam<any> | ITekGridLayoutEventParams> extends IComponentEvents<T> {
+export interface ITekGridEvents<T = IEventParam<any> | ITekGridLayoutEventParams | ITekGridCalcSummaryEventParams> extends IComponentEvents<T> {
     addClick?: EventDef<T>;
     afterCancel?: EventDef<T>;
     afterDelete?: EventDef<T>;
@@ -14,6 +19,7 @@ export interface ITekGridEvents<T = IEventParam<any> | ITekGridLayoutEventParams
     beforeCancel?: EventDef<T>;
     beforeDelete?: EventDef<T>;
     beforeSave?: EventDef<T>;
+    calcSummary?: EventDef<T>;
     filterClick?: EventDef<T>;
     loadLayouts?: EventDef<T, ITekGridEvent<T>>;
     saveLayouts?: EventDef<T>;
@@ -54,11 +60,21 @@ export interface ITekGrid extends IGridEditable {
     layoutOptions?: TekGridLayoutOptions;
     mainGrid?: boolean;
 }
+export declare type MultiOptionParams = {
+    iconName: string;
+    label: string;
+    cssClass?: string;
+    reportParams?: {
+        portrait?: boolean;
+        rowObj?: any;
+    };
+};
 export interface ITekGridExportConfig {
     type: string;
     portrait?: boolean;
     label?: string;
     iconName?: string;
+    multiOption?: MultiOptionParams[];
 }
 export interface ITekGridLayoutInfo {
     currentLayoutName?: string;
@@ -141,7 +157,8 @@ export interface ITekGridFooter {
     [key: string]: ITekGridSummary;
 }
 export interface ITekGridSummary {
-    sum: number;
+    sum: any;
+    avg: any;
     count: number;
     min: any;
     max: any;

package/types/utils/grid-base/export-options/button-option.d.ts

@@ -0,0 +1,16 @@
+import { ITekGridExportConfig, TekGrid, TekTreeGrid } from '../../../components';
+import { IExportOption } from './interfaces';
+export declare class ButtonOption implements IExportOption {
+    private config;
+    constructor(config: ITekGridExportConfig);
+    buildComponent(grid: TekGrid | TekTreeGrid): {
+        label: string | undefined;
+        iconName: string | undefined;
+        name: string;
+        component: string;
+        flat: boolean;
+        events: {
+            click: () => any;
+        };
+    };
+}

package/types/utils/grid-base/export-options/index.d.ts

@@ -0,0 +1,3 @@
+export * from './button-option';
+export * from './multi-option';
+export * from './interfaces';

package/types/utils/grid-base/export-options/interfaces.d.ts

@@ -0,0 +1,5 @@
+import { IComponentRender } from '@zeedhi/common';
+import { TekGrid, TekTreeGrid } from '../../../components';
+export interface IExportOption {
+    buildComponent: (grid: TekGrid | TekTreeGrid) => IComponentRender;
+}

package/types/utils/grid-base/export-options/multi-option.d.ts

@@ -0,0 +1,12 @@
+import { IRow } from '@zeedhi/common';
+import { ITekGridExportConfig, TekGrid, TekTreeGrid } from '../../../components';
+import { IExportOption } from './interfaces';
+export declare class MultiOption implements IExportOption {
+    private config;
+    constructor(config: ITekGridExportConfig);
+    private formatName;
+    private buildTooltip;
+    private buildButton;
+    private buildDivider;
+    buildComponent(grid: TekGrid | TekTreeGrid): IRow;
+}

package/types/utils/grid-base/grid-base.d.ts

@@ -1,4 +1,4 @@
-import { IButton } from '@zeedhi/common';
+import { IComponentRender } from '@zeedhi/common';
 import { IEventParam } from '@zeedhi/core';
 import { TekGrid, TekGridFilterButton, TekTreeGrid } from '../../components';
 export interface ITekGridAtoms {
@@ -23,6 +23,7 @@ export declare class GridBase {
     private grid;
     private exportConfigButtons;
     constructor(grid: TekGrid | TekTreeGrid);
+    private getOption;
     private getExportConfigButtons;
     createToolbarProps(): ({
         name: string;
@@ -153,7 +154,7 @@ export declare class GridBase {
                 iconName: string;
                 isVisible: string;
             };
-            children: IButton[] | import("@zeedhi/common").IComponentRender[];
+            children: IComponentRender[];
             label?: undefined;
             bottom?: undefined;
             vertical?: undefined;

package/types/utils/index.d.ts

@@ -1,5 +1,5 @@
-import { ReportFilter } from './report-filter/report-filter';
-import { GridBase, ITekGridAtoms } from './grid-base/grid-base';
-import { GridController } from './grid-base/grid-controller';
-import { ITekConfig } from './config/config';
-export { ReportFilter, GridBase, ITekGridAtoms, GridController, ITekConfig, };
+export * from './report-filter/report-filter';
+export * from './grid-base/grid-base';
+export * from './grid-base/grid-controller';
+export * from './grid-base/export-options';
+export * from './config/config';