Fixes for Table output

package.json

@@ -65,12 +65,12 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@genexus/reporting-api": "~2.3.6",
+    "@genexus/reporting-api": "~2.3.7",
     "@genexus/web-controls-library": "2.3.0",
     "date-fns": "^2.30.0",
     "highcharts": "^11.1.0",
     "jquery": "^3.7.1",
-    "jspivottable": "1.1.8",
+    "jspivottable": "1.1.9",
     "material-icons": "^1.13.1",
     "rollup-plugin-dotenv": "^0.5.0"
   }

src/components.d.ts

@@ -651,11 +651,11 @@ export namespace Components {
         /**
           * PivotTable's Method for PivotTable Page Data
          */
-        "getPageDataForPivotTable": (properties: QueryViewerPageDataForPivot, paging: boolean, totalForColumns: QueryViewerTotal, totalForRows: QueryViewerTotal) => Promise<void>;
+        "getPageDataForPivotTable": (pageData: QueryViewerPageDataForPivot) => Promise<void>;
         /**
           * Table's Method for Table Page Data
          */
-        "getPageDataForTable": (properties: QueryViewerPageDataForTable, paging: boolean, totalForColumns: QueryViewerTotal, totalForRows: QueryViewerTotal) => Promise<void>;
+        "getPageDataForTable": (pageData: QueryViewerPageDataForTable) => Promise<void>;
         /**
           * PivotTable's Method for PivotTable Data Sync Response
          */

src/components/query-viewer-pivot-table/controller/query-viewer-pivot-render.tsx

@@ -220,7 +220,7 @@ export class QueryViewerPivotTableRender {
         RealType: QueryViewerOutputType.PivotTable,
         ObjectName: this.serviceResponse.objectName,
         ControlName: this.controlName,
-        PageSize: this.paging === true ? this.pageSize : undefined,
+        PageSize: this.pageSize,
         metadata: this.serviceResponse.metadataXML,
         UcId: this.controlName,
         // ToDo: check if this property make sense with the AutoGrow implementation in the SD programming model
@@ -231,10 +231,11 @@ export class QueryViewerPivotTableRender {
         UseRecordsetCache: !this.serviceResponse.useGxQuery,
         AllowSelection: this.allowSelection,
         SelectLine: true,
-        // ToDo: update this value
+        // PivotTable and Table outputs always have ServerPaging enabled, because client-side paging is no
+        // longer supported. If in GeneXus Paging = false, we should send the PageSize property with undefined
+        // so that the PivotTable and the Table know that pagination is not configured.
         ServerPaging: true,
-        // ToDo: update this value
-        ServerPagingPivot: this.paging,
+        ServerPagingPivot: true,
         // ToDo: update this value
         ServerPagingCacheSize: 0,
         TotalForColumns: this.totalForColumns,
@@ -247,7 +248,7 @@ export class QueryViewerPivotTableRender {
       RealType: QueryViewerOutputType.Table,
       ObjectName: this.serviceResponse.objectName,
       ControlName: this.controlName,
-      PageSize: this.paging === true ? this.pageSize : undefined,
+      PageSize: this.paging ? this.pageSize : undefined,
       metadata: this.serviceResponse.metadataXML,
       UcId: this.controlName,
       // ToDo: check if this property make sense with the AutoGrow implementation in the SD programming model
@@ -258,10 +259,11 @@ export class QueryViewerPivotTableRender {
       UseRecordsetCache: !this.serviceResponse.useGxQuery,
       AllowSelection: this.allowSelection,
       SelectLine: true,
-      // ToDo: update this value
+      // PivotTable and Table outputs always have ServerPaging enabled, because client-side paging is no
+      // longer supported. If in GeneXus Paging = false, we should send the PageSize property with undefined
+      // so that the PivotTable and the Table know that pagination is not configured.
       ServerPaging: true,
-      // ToDo: update this value
-      ServerPagingPivot: this.paging,
+      ServerPagingPivot: true,
       // ToDo: update this value
       ServerPagingCacheSize: 0,
       TotalForColumns: this.totalForColumns,
@@ -307,24 +309,6 @@ export class QueryViewerPivotTableRender {
       if (!previousStateSave || !this.rememberLayout) {
         this.requestInitialPageDataForTable();
       }
-    } else if (!this.paging) {
-      this.mustWaitInitialPageDataForTable = false;
-      // Paginado en el cliente
-      // qv.services.GetDataIfNeeded(qViewer, function (resText, qViewer) {
-      //   // Servicio GetData
-      //   if (resText != qViewer.xml.data) {
-      //     qViewer.xml.data = resText;
-      //   }
-      //   const d3 = new Date();
-      //   const t3 = d3.getTime();
-      //   if (!qv.util.anyError(resText)) {
-      //     renderPivotTable(qViewer);
-      //   } else {
-      //     // Error en el servicio GetData
-      //     errMsg = qv.util.getErrorFromText(resText);
-      //     qv.util.renderError(qViewer, errMsg);
-      //   }
-      // });
     } else {
       this.mustWaitInitialPageDataForTable = false;
     }
@@ -375,17 +359,15 @@ export class QueryViewerPivotTableRender {
 
   private requestInitialPageDataForTable() {
     const dataFieldAndOrder = this.getDataFieldAndOrder();
-
     const pageDataTableParameters = {
       PageNumber: 1,
-      PageSize: this.pageSize,
+      PageSize: this.paging ? this.pageSize : undefined,
       RecalculateCantPages: true,
       DataFieldOrder: dataFieldAndOrder.dataFieldOrder,
       OrderType: dataFieldAndOrder.orderType,
       Filters: [],
       LayoutChange: false,
-      // ToDo: get the proper QueryViewerId
-      QueryviewerId: ""
+      QueryviewerId: this.controlName
     };
     const requestPageDataEvent = new CustomEvent("RequestPageDataForTable", {
       bubbles: true

src/components/query-viewer-pivot-table/query-viewer-pivot.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-import { Component, h, Method, Prop, Watch } from "@stencil/core";
+import { Component, h, Method, Prop, Watch, Listen } from "@stencil/core";
 import {
   renderJSPivot,
   OAT,
@@ -23,7 +23,9 @@ import {
   QueryViewerPivotParameters,
   QueryViewerPivotTable,
   QueryViewerShowDataLabelsIn,
-  QueryViewerTotal
+  QueryViewerTotal,
+  QueryViewerPageDataForTable,
+  QueryViewerPageDataForPivot
 } from "@genexus/reporting-api";
 
 const PIVOT_PAGE = (ucId: string) => `${ucId}_GeneralQuery1_pivot_page`;
@@ -37,6 +39,7 @@ export class QueryViewerPivot {
   private queryViewerContainer: HTMLDivElement;
   private queryViewerConfiguration: QueryViewerPivotTable = undefined;
   private shouldReRenderPivot = false;
+  private pageSizeChangeWasCommittedByTheUser = false;
 
   /**
    * Response Attribute Values
@@ -197,6 +200,10 @@ export class QueryViewerPivot {
   @Prop() readonly pageSize: number;
   @Watch("pageSize")
   pageSizeInChange() {
+    if (this.pageSizeChangeWasCommittedByTheUser) {
+      this.pageSizeChangeWasCommittedByTheUser = false;
+      return;
+    }
     this.shouldReRenderPivot = true;
   }
 
@@ -266,6 +273,18 @@ export class QueryViewerPivot {
     GXPL_QViewerJSMoveColumnToRight: "to right"
   };
 
+  @Listen("RequestPageDataForPivotTable", {
+    target: "document",
+    capture: true
+  })
+  @Listen("RequestPageDataForTable", { target: "document", capture: true })
+  handleRequestPageDataForTable(event) {
+    const pageData: QueryViewerPageDataForTable | QueryViewerPageDataForPivot =
+      (event as any).parameter;
+    this.pageSizeChangeWasCommittedByTheUser =
+      this.pageSize !== pageData.PageSize;
+  }
+
   /**
    * Returns an XML on a string variable containing all the data for the attributes loaded in the Pivot Table.
    */
@@ -330,14 +349,14 @@ export class QueryViewerPivot {
         ObjectName: this.objectName,
         ControlName: this.pivotParameters.ControlName,
         metadata: this.metadata,
-        PageSize: this.pageSize,
+        PageSize: this.paging ? this.pageSize : undefined,
         UcId: this.pivotParameters.UcId,
         AutoResize: this.autoResize,
         DisableColumnSort: false,
         RememberLayout: this.rememberLayout,
         ShowDataLabelsIn: this.showDataLabelsIn,
-        ServerPaging: true,
-        ServerPagingPivot: this.paging,
+        ServerPaging: true, // PivotTable and Table outputs always have ServerPaging enabled, because client-side paging is no longer supported. If in GeneXus Paging = false, we should send the PageSize property with undefined so that the PivotTable and the Table know that pagination is not configured.
+        ServerPagingPivot: true,
         ServerPagingCacheSize: 0,
         UseRecordsetCache: true,
         AllowSelection: false,
@@ -377,7 +396,7 @@ export class QueryViewerPivot {
     return (
       <div
         class="gx-query-viewer-pivot-container"
-        id="gx_query_viewer_pivot_container"
+        id={this.pivotParameters.UcId}
         ref={el => (this.queryViewerContainer = el)}
       >
         <div