311223 1332 spinner modified

SanthoshIruthayaraj · Dec 31, 2023 · 142d537 · 142d537
1 parent 4f1b8fc
commit 142d537
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 144 deletions.
diff --git a/src/index.js b/src/index.js
@@ -1,92 +1,65 @@
-import React, { useEffect, useRef } from 'react';
+//indexGrpCaptionCond.js
 import { render } from 'react-dom';
-import { GridComponent, ColumnsDirective, ColumnDirective, Page, Group, Sort, Inject } from '@syncfusion/ej2-react-grids';
-import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-react-popups';
-import axios from 'axios';
 import './index.css';
+import React, { useEffect, useRef } from 'react';
+import {
+  GridComponent,
+  ColumnsDirective,
+  ColumnDirective,
+  Group,
+  Inject,
+} from '@syncfusion/ej2-react-grids';
+import { dataDetails } from './dataGrpCaptionCond';
 
-const OrderService = {
-  BASE_URL: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders',
-
-  execute(state) {
-    return this.getData(state);
-  },
-
-  getData(state) {
-    const { skip, take, sorted } = state;
-    const pageQuery = `$skip=${skip}&$top=${take}`;
-    const sortQuery = sorted && sorted.length ? `&$orderby=` + sorted.map(obj => `${obj.name} ${obj.direction}`).join(',') : '';
-    const url = `${this.BASE_URL}?${pageQuery}${sortQuery}&$inlinecount=allpages&$format=json`;
-
-    return axios.get(url)
-      .then(response => {
-        const data = response.data;
-        return { result: data['d']['results'], count: parseInt(data['d']['__count'], 10) };
-      })
-      .catch(error => {
-        console.error('Error fetching data:', error);
-        return { result: [], count: 0 };
-      });
-  }
-};
-
-const CustomBinding = () => {
-  const gridRef = useRef(null);
-
-  useEffect(() => {
-    const state = { skip: 0, take: 150 };
-    dataStateChange(state);
-  }, []);
+const OverView = () => {
+  const grid = useRef(null);
 
-  const created = () => {
-    const spinnerTarget = document.querySelector('#customSpinner');
-    createSpinner({ target: spinnerTarget, width: '20px' });
+  const groupSettings = {
+    columns: ['Verified'],
   };
 
-  const dataStateChange = (state) => {
-    const spinnerTarget = document.querySelector('#customSpinner');
-
-    showSpinner(spinnerTarget); // Show the spinner before fetching data
+  /*
+const queryCellInfo = (args) => {
+    if (args.column.field === 'Verified' && args.cell.classList.contains('e-groupcaption')) {
+      args.cell.innerHTML = args.data.key === 'true' ? 'Verified' : 'Not Verified';
+    }
+  };
+  */
 
-    OrderService.execute(state)
-      .then(gridData => {
-        console.log('Data received:', gridData);
-        gridRef.current.dataSource = gridData;
-      })
-      .catch(error => {
-        console.error('Error fetching data:', error);
-      })
-      .finally(() => {
-        hideSpinner(spinnerTarget); // Hide the spinner regardless of success or failure
-      });
+  const queryCellInfo = (args) => {
+    if (args.column.field === 'Verified' && args.cell.classList.contains('e-groupcaption')) {
+      const iconClass = args.data.key === 'true' ? 'e-icons e-true' : 'e-icons e-false';
+      args.cell.innerHTML = `<span class="${iconClass}"></span> ${args.data.key === 'true' ? 'Verified' : 'Not Verified'}`;
+    }
   };
 
   return (
-    <div className='control-pane'>
-      <div id='customSpinner'></div>
-      <div className='control-section'>
-        <GridComponent
-          dataSource={[]}
-          ref={gridRef}
-          allowPaging={true}
-          allowSorting={true}
-          pageSettings={{ pageCount: 4, pageSize: 150 }}
-          height='400'
-          created={created}
-          allowGrouping={true}
-          dataStateChange={dataStateChange}
-        >
-          <ColumnsDirective>
-            <ColumnDirective field='OrderID' headerText='Order ID' width='120'></ColumnDirective>
-            <ColumnDirective field='CustomerID' headerText='Customer Name' width='150'></ColumnDirective>
-            <ColumnDirective field='ShipName' headerText='Ship Name' width='120' />
-            <ColumnDirective field='ShipCity' headerText='Ship City' width='150'></ColumnDirective>
-          </ColumnsDirective>
-          <Inject services={[Page, Group, Sort]} />
-        </GridComponent>
-      </div>
-    </div>
+    <GridComponent
+      ref={grid}
+      groupSettings={groupSettings}
+      dataSource={dataDetails}
+      allowGrouping={true}
+      queryCellInfo={queryCellInfo}
+    >
+      <ColumnsDirective>
+        <ColumnDirective
+          field="OrderID"
+          headerText="Order ID"
+          width="120"
+          textAlign="Right"
+          isPrimaryKey={true}
+        />
+        <ColumnDirective
+          field="Freight"
+          headerText="Freight"
+          format="C2"
+          width="120"
+        />
+        <ColumnDirective field="Verified" headerText="Verified" width="120" />
+      </ColumnsDirective>
+      <Inject services={[Group]} />
+    </GridComponent>
   );
 };
 
-render(<CustomBinding />, document.getElementById('sample'));
+render(<OverView />, document.getElementById('sample'));
diff --git a/src/indexGrpCaptionCond.js b/src/indexGrpCaptionCond.js
diff --git a/src/indexSpinner.js b/src/indexSpinner.js
@@ -0,0 +1,93 @@
+// indexSpinner.js
+import React, { useEffect, useRef } from 'react';
+import { render } from 'react-dom';
+import { GridComponent, ColumnsDirective, ColumnDirective, Page, Group, Sort, Inject } from '@syncfusion/ej2-react-grids';
+import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-react-popups';
+import axios from 'axios';
+import './index.css';
+
+const OrderService = {
+  BASE_URL: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders',
+
+  execute(state) {
+    return this.getData(state);
+  },
+
+  getData(state) {
+    const { skip, take, sorted } = state;
+    const pageQuery = `$skip=${skip}&$top=${take}`;
+    const sortQuery = sorted && sorted.length ? `&$orderby=` + sorted.map(obj => `${obj.name} ${obj.direction}`).join(',') : '';
+    const url = `${this.BASE_URL}?${pageQuery}${sortQuery}&$inlinecount=allpages&$format=json`;
+
+    return axios.get(url)
+      .then(response => {
+        const data = response.data;
+        return { result: data['d']['results'], count: parseInt(data['d']['__count'], 10) };
+      })
+      .catch(error => {
+        console.error('Error fetching data:', error);
+        return { result: [], count: 0 };
+      });
+  }
+};
+
+const CustomBinding = () => {
+  const gridRef = useRef(null);
+
+  useEffect(() => {
+    const state = { skip: 0, take: 150 };
+    dataStateChange(state);
+  }, []);
+
+  const created = () => {
+    const spinnerTarget = document.querySelector('#customSpinner');
+    createSpinner({ target: spinnerTarget, width: '20px' });
+  };
+
+  const dataStateChange = (state) => {
+    const spinnerTarget = document.querySelector('#customSpinner');
+
+    showSpinner(spinnerTarget); // Show the spinner before fetching data
+
+    OrderService.execute(state)
+      .then(gridData => {
+        console.log('Data received:', gridData);
+        gridRef.current.dataSource = gridData;
+      })
+      .catch(error => {
+        console.error('Error fetching data:', error);
+      })
+      .finally(() => {
+        hideSpinner(spinnerTarget); // Hide the spinner regardless of success or failure
+      });
+  };
+
+  return (
+    <div className='control-pane'>
+      <div id='customSpinner'></div>
+      <div className='control-section'>
+        <GridComponent
+          dataSource={[]}
+          ref={gridRef}
+          allowPaging={true}
+          allowSorting={true}
+          pageSettings={{ pageCount: 4, pageSize: 150 }}
+          height='400'
+          created={created}
+          allowGrouping={true}
+          dataStateChange={dataStateChange}
+        >
+          <ColumnsDirective>
+            <ColumnDirective field='OrderID' headerText='Order ID' width='120'></ColumnDirective>
+            <ColumnDirective field='CustomerID' headerText='Customer Name' width='150'></ColumnDirective>
+            <ColumnDirective field='ShipName' headerText='Ship Name' width='120' />
+            <ColumnDirective field='ShipCity' headerText='Ship City' width='150'></ColumnDirective>
+          </ColumnsDirective>
+          <Inject services={[Page, Group, Sort]} />
+        </GridComponent>
+      </div>
+    </div>
+  );
+};
+
+render(<CustomBinding />, document.getElementById('sample'));