fix(samples): data id fix and some code cleaning

Author: tishko0

samples/grids/grid/data-exporting-indicator/src/index.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import "igniteui-react-grids/grids/themes/light/bootstrap.css";
-import { AthletesData } from "./AthletesData";
+import { AthletesData, AthletesDataItem } from "./AthletesData";
 
 import { IgrButton } from "igniteui-react";
 import {
@@ -16,19 +16,20 @@ import {
 
 
 export default function GridDataExportingIndicatorSample() {
-  const athletesData = new AthletesData();
+  const athletesData = useMemo(() => new AthletesData(), []);
   const [localData, setLocalData] = useState([]);
   const [showProgress, setShowProgress] = useState(false);
 
   useEffect(() => {
-    const data: any[] = [];
-    for (let i = 0; i < 2000; i += 3) {
+    const data: AthletesDataItem[] = [];
+    let uniqueId = 0;
+    for (let i = 0; i < 2000; i ++) {
       for (let c = 0; c < athletesData.length; c++) {
-        data.push(athletesData[c]);
+        data.push({ ...athletesData[c], Id: uniqueId++ });
       }
     }
     setLocalData(data);
-  }, []);
+  }, [athletesData]);
 
 
   const setupProgressVisibility = () => {
@@ -37,7 +38,7 @@ export default function GridDataExportingIndicatorSample() {
     setTimeout(() => {
       setShowProgress(false);
     }, 5000);
-  }
+  };
 
   return (
     <div className="container sample ig-typography">
@@ -46,7 +47,6 @@ export default function GridDataExportingIndicatorSample() {
           data={localData}
           autoGenerate={false}
           primaryKey="Id"
-          height="350px"
         >
           <IgrGridToolbar key="toolbar" showProgress={showProgress}>
             <IgrGridToolbarTitle key="toolbarTitle">
@@ -60,13 +60,13 @@ export default function GridDataExportingIndicatorSample() {
             </IgrGridToolbarActions>
           </IgrGridToolbar>
 
-          <IgrColumn field="Id" header="ID" dataType="number"></IgrColumn>
-          <IgrColumn field="Name" header="Name"></IgrColumn>
-          <IgrColumn field="Position" header="Position"></IgrColumn>
-          <IgrColumn field="AthleteNumber" header="Athlete Number" dataType="number"></IgrColumn>
-          <IgrColumn field="BeatsPerMinute" header="Beats Per Minute" dataType="number"></IgrColumn>
-          <IgrColumn field="TopSpeed" header="Top Speed" dataType="number"></IgrColumn>
-          <IgrColumn field="CountryName" header="Country"></IgrColumn>
+          <IgrColumn field="Id" header="ID" dataType="number" />
+          <IgrColumn field="Name" header="Name" />
+          <IgrColumn field="Position" header="Position" />
+          <IgrColumn field="AthleteNumber" header="Athlete Number" dataType="number" />
+          <IgrColumn field="BeatsPerMinute" header="Beats Per Minute" dataType="number" />
+          <IgrColumn field="TopSpeed" header="Top Speed" dataType="number" />
+          <IgrColumn field="CountryName" header="Country" />
         </IgrGrid>
       </div>
     </div>

samples/grids/tree-grid/data-exporting-indicator/src/index.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import "igniteui-react-grids/grids/themes/light/bootstrap.css";
-import { OrdersTreeData } from "./OrdersData";
+import { OrdersTreeData, OrdersTreeDataItem } from "./OrdersData";
 
 import { IgrButton } from "igniteui-react";
 import {
@@ -16,13 +16,13 @@ import {
 
 
 export default function TreeGridDataExportingIndicatorSample() {
-  const ordersData = new OrdersTreeData();
+  const ordersData = useMemo(() => new OrdersTreeData(), []);
   const [localData, setLocalData] = useState([]);
   const [showProgress, setShowProgress] = useState(false);
 
   useEffect(() => {
-    const data: any[] = [];
-    for (let i = 0; i < 1000; i++) {
+    const data: OrdersTreeDataItem[] = [];
+    for (let i = 0; i < 2000; i++) {
       for (let c = 0; c < ordersData.length; c++) {
         const original = ordersData[c];
         data.push({
@@ -33,15 +33,15 @@ export default function TreeGridDataExportingIndicatorSample() {
       }
     }
     setLocalData(data);
-  }, []);
+  }, [ordersData]);
 
   const setupProgressVisibility = () => {
     setShowProgress(true);
 
     setTimeout(() => {
       setShowProgress(false);
     }, 5000);
-  }
+  };
 
   return (
     <div className="container sample ig-typography">
@@ -51,7 +51,6 @@ export default function TreeGridDataExportingIndicatorSample() {
           autoGenerate={false}
           primaryKey="ID"
           foreignKey="ParentID"
-          height="350px"
         >
           <IgrGridToolbar key="toolbar" showProgress={showProgress}>
             <IgrGridToolbarTitle key="toolbarTitle">
@@ -65,13 +64,13 @@ export default function TreeGridDataExportingIndicatorSample() {
             </IgrGridToolbarActions>
           </IgrGridToolbar>
 
-          <IgrColumn field="ID" header="Order ID"></IgrColumn>
-          <IgrColumn field="Name" header="Order Product"></IgrColumn>
-          <IgrColumn field="Category" header="Category"></IgrColumn>
-          <IgrColumn field="Units" header="Units" dataType="number"></IgrColumn>
-          <IgrColumn field="UnitPrice" header="Unit Price" dataType="currency"></IgrColumn>
-          <IgrColumn field="Price" header="Price" dataType="currency"></IgrColumn>
-          <IgrColumn field="OrderDate" header="Order Date" dataType="date"></IgrColumn>
+          <IgrColumn field="ID" header="Order ID" />
+          <IgrColumn field="Name" header="Order Product" />
+          <IgrColumn field="Category" header="Category" />
+          <IgrColumn field="Units" header="Units" dataType="number" />
+          <IgrColumn field="UnitPrice" header="Unit Price" dataType="currency" />
+          <IgrColumn field="Price" header="Price" dataType="currency" />
+          <IgrColumn field="OrderDate" header="Order Date" dataType="date" />
         </IgrTreeGrid>
       </div>
     </div>