syncfusion-content · SyncfusionBuild · Jun 22, 2024 · Jun 21, 2024
diff --git a/ej2-react/code-snippet/diagram/getting-started/addnode-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/getting-started/addnode-cs1/app/index.tsx
@@ -1,7 +1,7 @@
 
 
 import * as React from "react";
-import * as ReactDOM from "react-dom/client";
+import * as ReactDOM from "react-dom";
 import { DiagramComponent, NodeModel } from "@syncfusion/ej2-react-diagrams";
 
 export default function App() {

diff --git a/ej2-react/code-snippet/diagram/getting-started/apply-style/app/index.tsx b/ej2-react/code-snippet/diagram/getting-started/apply-style/app/index.tsx
@@ -1,7 +1,7 @@
 
 
 import * as React from "react";
-import * as ReactDOM from "react-dom/client";
+import * as ReactDOM from "react-dom";
 import { DiagramComponent, NodeModel } from "@syncfusion/ej2-react-diagrams";
 export default function App() {
   const nodes:NodeModel[]= [

diff --git a/ej2-react/code-snippet/diagram/getting-started/connectnode-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/getting-started/connectnode-cs1/app/index.tsx
@@ -1,7 +1,7 @@
 
 
 import * as React from "react";
-import * as ReactDOM from "react-dom/client";
+import * as ReactDOM from "react-dom";
 import {
   DiagramComponent,
   NodeModel,

diff --git a/ej2-react/code-snippet/diagram/getting-started/flowdiagram-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/getting-started/flowdiagram-cs1/app/index.tsx
@@ -2,7 +2,7 @@
 
 
 import * as React from "react";
-import * as ReactDOM from "react-dom/client";
+import * as ReactDOM from "react-dom";
 import {
   DiagramComponent,
   NodeModel,

diff --git a/ej2-react/code-snippet/diagram/getting-started/initialize-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/getting-started/initialize-cs1/app/index.tsx
@@ -1,7 +1,7 @@
 
 
 import * as React from "react";
-import * as ReactDOM from "react-dom/client";
+import * as ReactDOM from "react-dom";
 import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
 export default function App() {
   return (

diff --git a/ej2-react/code-snippet/diagram/getting-started/orgchart-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/getting-started/orgchart-cs1/app/index.tsx
@@ -2,7 +2,7 @@
 
 
 import * as React from "react";
-import * as ReactDOM from "react-dom/client";
+import * as ReactDOM from "react-dom";
 import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
 import {
   Node,

diff --git a/ej2-react/code-snippet/diagram/getting-started/orgchart-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/getting-started/orgchart-cs2/app/index.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom/client";
+import * as ReactDOM from "react-dom";
 import { DiagramComponent, ImageElement, StackPanel, TextElement } from "@syncfusion/ej2-react-diagrams";
 import {
   HierarchicalTree,

diff --git a/ej2-react/code-snippet/spreadsheet/open-from-json/app/app.tsx b/ej2-react/code-snippet/spreadsheet/open-from-json/app/app.tsx
@@ -31,6 +31,7 @@ function App() {
     options.ignoreChart = (document.getElementById('chart') as HTMLInputElement).checked;
     options.ignoreImage = (document.getElementById('image') as HTMLInputElement).checked;
     options.ignoreNote = (document.getElementById('note') as HTMLInputElement).checked;
+    return options;
   }
 
   const toggleCheckboxes = () => {

diff --git a/ej2-react/code-snippet/spreadsheet/print-cs2/app/app.jsx b/ej2-react/code-snippet/spreadsheet/print-cs2/app/app.jsx
@@ -0,0 +1,73 @@
+{% raw %}
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective} from '@syncfusion/ej2-react-spreadsheet';
+import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
+import { budgetData, salaryData } from './datasource';
+import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
+
+function App() {
+    const spreadsheetRef = React.useRef(null);
+    const items = [
+        { text: 'ActiveSheet' },
+        { text: 'Workbook' }
+    ];
+    const handleItemSelect = (args) => {
+        let spreadsheet = spreadsheetRef.current;
+        if (spreadsheet) {
+            const allowGridLines = document.getElementById('gridline');
+            const allowRowColumnHeader = document.getElementById('header');
+            spreadsheet.print({
+                type: args.item.text,
+                allowGridLines: allowGridLines.checked,
+                allowRowColumnHeader: allowRowColumnHeader.checked
+            });
+        }
+    };
+    function onCreated() {
+        let spreadsheet = spreadsheetRef.current;
+        if (spreadsheet) {
+            spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:D1');
+        }
+    }
+
+    return (
+        <div>
+            <div id="print"><DropDownButtonComponent id="button" items={items} select={handleItemSelect}> Print </DropDownButtonComponent>
+                <input type="checkbox" id="gridline" /><label htmlFor="gridline">Allow Grid Lines</label>
+                <input type="checkbox" id="header" /><label htmlFor="header">Allow Row Column Header </label>
+            </div>
+            <SpreadsheetComponent ref={spreadsheetRef} allowOpen={true} allowSave={true} openUrl='https://services.syncfusion.com/react/production/api/spreadsheet/open' saveUrl='https://services.syncfusion.com/react/production/api/spreadsheet/save' created={onCreated.bind(this)}>
+                <SheetsDirective>
+                    <SheetDirective name={"Budget"}>
+                        <RangesDirective>
+                            <RangeDirective dataSource={budgetData}></RangeDirective>
+                        </RangesDirective>
+                        <ColumnsDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                        </ColumnsDirective>
+                    </SheetDirective>
+                    <SheetDirective name={"Salary"}>
+                        <RangesDirective>
+                            <RangeDirective dataSource={salaryData}></RangeDirective>
+                        </RangesDirective>
+                        <ColumnsDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                        </ColumnsDirective>
+                    </SheetDirective>
+                </SheetsDirective>
+            </SpreadsheetComponent>
+        </div>
+    );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/spreadsheet/print-cs2/app/app.tsx b/ej2-react/code-snippet/spreadsheet/print-cs2/app/app.tsx
@@ -0,0 +1,73 @@
+{% raw %}
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, MenuSelectEventArgs, PrintType } from '@syncfusion/ej2-react-spreadsheet';
+import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
+import { budgetData, salaryData } from './datasource';
+import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
+
+function App() {
+    const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
+    const items: ItemModel[] = [
+        { text: 'ActiveSheet' },
+        { text: 'Workbook' }
+    ];
+    const handleItemSelect = (args: MenuSelectEventArgs): void => {
+        let spreadsheet: SpreadsheetComponent = spreadsheetRef.current;
+        if (spreadsheet) {
+            const allowGridLines: HTMLInputElement = document.getElementById('gridline') as HTMLInputElement;
+            const allowRowColumnHeader: HTMLInputElement = document.getElementById('header') as HTMLInputElement;
+            spreadsheet.print({
+                type: args.item.text as PrintType,
+                allowGridLines: allowGridLines.checked,
+                allowRowColumnHeader: allowRowColumnHeader.checked
+            });
+        }
+    };
+    function onCreated() {
+        let spreadsheet: SpreadsheetComponent = spreadsheetRef.current;
+        if (spreadsheet) {
+            spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:D1');
+        }
+    }
+
+    return (
+        <div>
+            <div id="print"><DropDownButtonComponent id="button" items={items} select={handleItemSelect}> Print </DropDownButtonComponent>
+                <input type="checkbox" id="gridline" /><label htmlFor="gridline">Allow Grid Lines</label>
+                <input type="checkbox" id="header" /><label htmlFor="header">Allow Row Column Header </label>
+            </div>
+            <SpreadsheetComponent ref={spreadsheetRef} allowOpen={true} allowSave={true} openUrl='https://services.syncfusion.com/react/production/api/spreadsheet/open' saveUrl='https://services.syncfusion.com/react/production/api/spreadsheet/save' created={onCreated.bind(this)}>
+                <SheetsDirective>
+                    <SheetDirective name={"Budget"}>
+                        <RangesDirective>
+                            <RangeDirective dataSource={budgetData}></RangeDirective>
+                        </RangesDirective>
+                        <ColumnsDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                        </ColumnsDirective>
+                    </SheetDirective>
+                    <SheetDirective name={"Salary"}>
+                        <RangesDirective>
+                            <RangeDirective dataSource={salaryData}></RangeDirective>
+                        </RangesDirective>
+                        <ColumnsDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                        </ColumnsDirective>
+                    </SheetDirective>
+                </SheetsDirective>
+            </SpreadsheetComponent>
+        </div>
+    );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/spreadsheet/print-cs2/app/datasource.jsx b/ej2-react/code-snippet/spreadsheet/print-cs2/app/datasource.jsx
@@ -0,0 +1,97 @@
+export let budgetData = [
+    {
+        "Expense Type": "Housing",
+        "Projected Cost": 7000,
+        "Actual Cost": 7500,
+        "Difference": -500,
+    },
+    {
+        "Expense Type": "Transportation",
+        "Projected Cost": 500,
+        "Actual Cost": 500,
+        "Difference": 0,
+    },
+    {
+        "Expense Type": "Insurance",
+        "Projected Cost": 1000,
+        "Actual Cost": 1000,
+        "Difference": 0,
+    },
+    {
+        "Expense Type": "Food",
+        "Projected Cost": 2000,
+        "Actual Cost": 1800,
+        "Difference": 200,
+    },
+    {
+        "Expense Type": "Pets",
+        "Projected Cost": 300,
+        "Actual Cost": 200,
+        "Difference": 100,
+    },
+    {
+        "Expense Type": "Personel Care",
+        "Projected Cost": 500,
+        "Actual Cost": 500,
+        "Difference": 0,
+    }, {
+        "Expense Type": "Loan",
+        "Projected Cost": 1000,
+        "Actual Cost": 1000,
+        "Difference": 0,
+    }, {
+        "Expense Type": "Tax",
+        "Projected Cost": 200,
+        "Actual Cost": 200,
+        "Difference": 0,
+    }, {
+        "Expense Type": "Savings",
+        "Projected Cost": 1000,
+        "Actual Cost": 900,
+        "Difference": 100,
+    },
+    {
+        "Expense Type": "Total",
+        "Projected Cost": 13500,
+        "Actual Cost": 13600,
+        "Difference": -100,
+    }
+];
+export let salaryData = [
+    {
+        "Earnings": "Basic",
+        "Credit Amount": 20000,
+        "Deductions": "Provident Fund",
+        "Debit Amount": 2400,
+    },
+    {
+        "Earnings": "HRA",
+        "Credit Amount": 8000,
+        "Deductions": "ESI",
+        "Debit Amount": 0,
+    },
+    {
+        "Earnings": "Special Allowance",
+        "Credit Amount": 25000,
+        "Deductions": "Professional Tax",
+        "Debit Amount": 200,
+    },
+    {
+        "Earnings": "Incentives",
+        "Credit Amount": 2000,
+        "Deductions": "TDS",
+        "Debit Amount": 2750,
+    },
+    {
+        "Earnings": "Bonus",
+        "Credit Amount": 1500,
+        "Deductions": "Other Deduction",
+        "Debit Amount": 0,
+    },
+    {
+        "Earnings": "Total Earnings",
+        "Credit Amount": 56500,
+        "Deductions": "Total Deductions",
+        "Debit Amount": 5350,
+    }
+];