Litmus example of onFetchRecords issue

litmus/bugs/GridOnFetchRecords.tsx

@@ -0,0 +1,60 @@
+import { bind, createAccessorModelProxy, createFunctionalComponent, KeySelection } from "cx/ui";
+import { Grid, GridColumnConfig } from "cx/widgets";
+
+const tags = ["history", "american", "crime", "tets"].map((tag) => ({
+   name: tag,
+   id: tag,
+}));
+
+interface Model {
+   $page: {
+      showGrid: boolean;
+      tag: string;
+   };
+}
+
+const m = createAccessorModelProxy<Model>();
+
+const columns = [
+   {
+      field: "id",
+      header: "ID",
+   },
+   {
+      field: "title",
+      header: "Title",
+   },
+   {
+      field: "body",
+      header: "Body",
+   },
+] as GridColumnConfig[];
+
+export default createFunctionalComponent(() => (
+   <cx>
+      {/* <Button text="Show Grid" onClick={(e, { store }) => store.toggle(m.$page.showGrid)} /> */}
+
+      <div>
+         <Grid
+            columns={columns}
+            infinite
+            emptyText="No data"
+            scrollable
+            remoteSort
+            selection={{ type: KeySelection, bind: "$page.selection", keyField: "id" }}
+            sortDirection={bind("sortDir")}
+            sortField={bind("sortField")}
+            onFetchRecords={async ({}) => {
+               const response = await fetch(`https://dummyjson.com/posts`);
+               const data = await response.json();
+               let finalData = data.posts;
+
+               return {
+                  records: finalData,
+                  totalRecordCount: finalData.length,
+               };
+            }}
+         />
+      </div>
+   </cx>
+));

litmus/index.js

@@ -140,7 +140,8 @@ import "./index.scss";
 // import Demo from "./features/charts/PointReducer";
 // import Demo from "./features/charts/line-graph/LineGraph";
 // import Demo from "./bugs/GridDefaultSortFieldClearableSortIssue";
-import Demo from "./bugs/GridFixedColumnsFixedHeaderColumnsPosition";
+// import Demo from "./bugs/GridFixedColumnsFixedHeaderColumnsPosition";
+import Demo from "./bugs/GridOnFetchRecords";
 // import Demo from "./features/charts/axis/ComplexAxisLabels";
 // import Demo from "./bugs/pie-chart-active-bind";
 let store = (window.store = new Store());

packages/cx/src/widgets/grid/Grid.tsx

@@ -2647,6 +2647,7 @@ class GridComponent extends VDOM.Component<GridComponentProps, GridComponentStat
                   pageRecords.forEach((page) => {
                      if (Array.isArray(page)) {
                         records.push(...page);
+                        lastPage = records.length < pageSize;
                      } else {
                         if (!Array.isArray(page.records))
                            throw new Error(
@@ -2663,14 +2664,17 @@ class GridComponent extends VDOM.Component<GridComponentProps, GridComponentStat
 
                   if (!isNumber(totalRecordCount)) {
                      totalRecordCount = (startPage - 1) * pageSize + records.length;
-                     if (!lastPage && records.length == (endPage - startPage + 1) * pageSize) totalRecordCount++;
-                     if (data.totalRecordCount > totalRecordCount) totalRecordCount = data.totalRecordCount;
+                     if (!lastPage) {
+                        if (records.length == (endPage - startPage + 1) * pageSize) totalRecordCount++;
+                        if (data.totalRecordCount > totalRecordCount) totalRecordCount = data.totalRecordCount;
+                     }
                   }
 
                   instance.buffer.totalRecordCount = data.totalRecordCount = totalRecordCount;
                   instance.buffer.records = data.records = records;
                   instance.buffer.page = data.page = startPage;
                   data.offset = (startPage - 1) * pageSize;
+                  data.empty = totalRecordCount == 0;
 
                   instance.store.silently(() => {
                      instance.set("records", records);
@@ -2693,7 +2697,7 @@ class GridComponent extends VDOM.Component<GridComponentProps, GridComponentStat
                })
                .catch((error) => {
                   this.loading = false;
-                  if (widget.onLoadingError) instance.invoke(error, "onLoadingError", instance);
+                  if (widget.onLoadingError) instance.invoke("onLoadingError", error, instance);
                });
          }, 30);