Skip to content

Commit 17a41f4

Browse files
SyncfusionBuildSyncfusionBuild
authored
Merge pull request #455 from Syncfusion-Content/hotfix/hotfix-v26.1.35
DOCINFRA-2341_merged_using_automation
2 parents e3d3676 + 8f2a9f9 commit 17a41f4

File tree

19 files changed

+484
-31
lines changed

19 files changed

+484
-31
lines changed

‎ej2-react/code-snippet/diagram/getting-started/addnode-cs1/app/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22

33
import * as React from "react";
4-
import * as ReactDOM from "react-dom/client";
4+
import * as ReactDOM from "react-dom";
55
import { DiagramComponent, NodeModel } from "@syncfusion/ej2-react-diagrams";
66

77
export default function App() {

‎ej2-react/code-snippet/diagram/getting-started/apply-style/app/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22

33
import * as React from "react";
4-
import * as ReactDOM from "react-dom/client";
4+
import * as ReactDOM from "react-dom";
55
import { DiagramComponent, NodeModel } from "@syncfusion/ej2-react-diagrams";
66
export default function App() {
77
const nodes:NodeModel[]= [

‎ej2-react/code-snippet/diagram/getting-started/connectnode-cs1/app/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22

33
import * as React from "react";
4-
import * as ReactDOM from "react-dom/client";
4+
import * as ReactDOM from "react-dom";
55
import {
66
DiagramComponent,
77
NodeModel,

‎ej2-react/code-snippet/diagram/getting-started/flowdiagram-cs1/app/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33

44
import * as React from "react";
5-
import * as ReactDOM from "react-dom/client";
5+
import * as ReactDOM from "react-dom";
66
import {
77
DiagramComponent,
88
NodeModel,

‎ej2-react/code-snippet/diagram/getting-started/initialize-cs1/app/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22

33
import * as React from "react";
4-
import * as ReactDOM from "react-dom/client";
4+
import * as ReactDOM from "react-dom";
55
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
66
export default function App() {
77
return (

‎ej2-react/code-snippet/diagram/getting-started/orgchart-cs1/app/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33

44
import * as React from "react";
5-
import * as ReactDOM from "react-dom/client";
5+
import * as ReactDOM from "react-dom";
66
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
77
import {
88
Node,

‎ej2-react/code-snippet/diagram/getting-started/orgchart-cs2/app/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from "react";
2-
import * as ReactDOM from "react-dom/client";
2+
import * as ReactDOM from "react-dom";
33
import { DiagramComponent, ImageElement, StackPanel, TextElement } from "@syncfusion/ej2-react-diagrams";
44
import {
55
HierarchicalTree,

‎ej2-react/code-snippet/spreadsheet/open-from-json/app/app.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ function App() {
3131
options.ignoreChart = (document.getElementById('chart') as HTMLInputElement).checked;
3232
options.ignoreImage = (document.getElementById('image') as HTMLInputElement).checked;
3333
options.ignoreNote = (document.getElementById('note') as HTMLInputElement).checked;
34+
return options;
3435
}
3536

3637
const toggleCheckboxes = () => {

‎ej2-react/code-snippet/spreadsheet/print-cs2/app/app.jsx

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
{% raw %}
2+
import * as React from 'react';
3+
import { createRoot } from 'react-dom/client';
4+
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective} from '@syncfusion/ej2-react-spreadsheet';
5+
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
6+
import { budgetData, salaryData } from './datasource';
7+
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
8+
9+
function App() {
10+
const spreadsheetRef = React.useRef(null);
11+
const items = [
12+
{ text: 'ActiveSheet' },
13+
{ text: 'Workbook' }
14+
];
15+
const handleItemSelect = (args) => {
16+
let spreadsheet = spreadsheetRef.current;
17+
if (spreadsheet) {
18+
const allowGridLines = document.getElementById('gridline');
19+
const allowRowColumnHeader = document.getElementById('header');
20+
spreadsheet.print({
21+
type: args.item.text,
22+
allowGridLines: allowGridLines.checked,
23+
allowRowColumnHeader: allowRowColumnHeader.checked
24+
});
25+
}
26+
};
27+
function onCreated() {
28+
let spreadsheet = spreadsheetRef.current;
29+
if (spreadsheet) {
30+
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:D1');
31+
}
32+
}
33+
34+
return (
35+
<div>
36+
<div id="print"><DropDownButtonComponent id="button" items={items} select={handleItemSelect}> Print </DropDownButtonComponent>
37+
<input type="checkbox" id="gridline" /><label htmlFor="gridline">Allow Grid Lines</label>
38+
<input type="checkbox" id="header" /><label htmlFor="header">Allow Row Column Header </label>
39+
</div>
40+
<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)}>
41+
<SheetsDirective>
42+
<SheetDirective name={"Budget"}>
43+
<RangesDirective>
44+
<RangeDirective dataSource={budgetData}></RangeDirective>
45+
</RangesDirective>
46+
<ColumnsDirective>
47+
<ColumnDirective width={100}></ColumnDirective>
48+
<ColumnDirective width={100}></ColumnDirective>
49+
<ColumnDirective width={100}></ColumnDirective>
50+
<ColumnDirective width={100}></ColumnDirective>
51+
</ColumnsDirective>
52+
</SheetDirective>
53+
<SheetDirective name={"Salary"}>
54+
<RangesDirective>
55+
<RangeDirective dataSource={salaryData}></RangeDirective>
56+
</RangesDirective>
57+
<ColumnsDirective>
58+
<ColumnDirective width={100}></ColumnDirective>
59+
<ColumnDirective width={100}></ColumnDirective>
60+
<ColumnDirective width={100}></ColumnDirective>
61+
<ColumnDirective width={100}></ColumnDirective>
62+
</ColumnsDirective>
63+
</SheetDirective>
64+
</SheetsDirective>
65+
</SpreadsheetComponent>
66+
</div>
67+
);
68+
};
69+
export default App;
70+
71+
const root = createRoot(document.getElementById('root'));
72+
root.render(<App />);
73+
{% endraw %}

‎ej2-react/code-snippet/spreadsheet/print-cs2/app/app.tsx

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
{% raw %}
2+
import * as React from 'react';
3+
import { createRoot } from 'react-dom/client';
4+
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, MenuSelectEventArgs, PrintType } from '@syncfusion/ej2-react-spreadsheet';
5+
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
6+
import { budgetData, salaryData } from './datasource';
7+
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
8+
9+
function App() {
10+
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
11+
const items: ItemModel[] = [
12+
{ text: 'ActiveSheet' },
13+
{ text: 'Workbook' }
14+
];
15+
const handleItemSelect = (args: MenuSelectEventArgs): void => {
16+
let spreadsheet: SpreadsheetComponent = spreadsheetRef.current;
17+
if (spreadsheet) {
18+
const allowGridLines: HTMLInputElement = document.getElementById('gridline') as HTMLInputElement;
19+
const allowRowColumnHeader: HTMLInputElement = document.getElementById('header') as HTMLInputElement;
20+
spreadsheet.print({
21+
type: args.item.text as PrintType,
22+
allowGridLines: allowGridLines.checked,
23+
allowRowColumnHeader: allowRowColumnHeader.checked
24+
});
25+
}
26+
};
27+
function onCreated() {
28+
let spreadsheet: SpreadsheetComponent = spreadsheetRef.current;
29+
if (spreadsheet) {
30+
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:D1');
31+
}
32+
}
33+
34+
return (
35+
<div>
36+
<div id="print"><DropDownButtonComponent id="button" items={items} select={handleItemSelect}> Print </DropDownButtonComponent>
37+
<input type="checkbox" id="gridline" /><label htmlFor="gridline">Allow Grid Lines</label>
38+
<input type="checkbox" id="header" /><label htmlFor="header">Allow Row Column Header </label>
39+
</div>
40+
<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)}>
41+
<SheetsDirective>
42+
<SheetDirective name={"Budget"}>
43+
<RangesDirective>
44+
<RangeDirective dataSource={budgetData}></RangeDirective>
45+
</RangesDirective>
46+
<ColumnsDirective>
47+
<ColumnDirective width={100}></ColumnDirective>
48+
<ColumnDirective width={100}></ColumnDirective>
49+
<ColumnDirective width={100}></ColumnDirective>
50+
<ColumnDirective width={100}></ColumnDirective>
51+
</ColumnsDirective>
52+
</SheetDirective>
53+
<SheetDirective name={"Salary"}>
54+
<RangesDirective>
55+
<RangeDirective dataSource={salaryData}></RangeDirective>
56+
</RangesDirective>
57+
<ColumnsDirective>
58+
<ColumnDirective width={100}></ColumnDirective>
59+
<ColumnDirective width={100}></ColumnDirective>
60+
<ColumnDirective width={100}></ColumnDirective>
61+
<ColumnDirective width={100}></ColumnDirective>
62+
</ColumnsDirective>
63+
</SheetDirective>
64+
</SheetsDirective>
65+
</SpreadsheetComponent>
66+
</div>
67+
);
68+
};
69+
export default App;
70+
71+
const root = createRoot(document.getElementById('root')!);
72+
root.render(<App />);
73+
{% endraw %}

‎ej2-react/code-snippet/spreadsheet/print-cs2/app/datasource.jsx

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
export let budgetData = [
2+
{
3+
"Expense Type": "Housing",
4+
"Projected Cost": 7000,
5+
"Actual Cost": 7500,
6+
"Difference": -500,
7+
},
8+
{
9+
"Expense Type": "Transportation",
10+
"Projected Cost": 500,
11+
"Actual Cost": 500,
12+
"Difference": 0,
13+
},
14+
{
15+
"Expense Type": "Insurance",
16+
"Projected Cost": 1000,
17+
"Actual Cost": 1000,
18+
"Difference": 0,
19+
},
20+
{
21+
"Expense Type": "Food",
22+
"Projected Cost": 2000,
23+
"Actual Cost": 1800,
24+
"Difference": 200,
25+
},
26+
{
27+
"Expense Type": "Pets",
28+
"Projected Cost": 300,
29+
"Actual Cost": 200,
30+
"Difference": 100,
31+
},
32+
{
33+
"Expense Type": "Personel Care",
34+
"Projected Cost": 500,
35+
"Actual Cost": 500,
36+
"Difference": 0,
37+
}, {
38+
"Expense Type": "Loan",
39+
"Projected Cost": 1000,
40+
"Actual Cost": 1000,
41+
"Difference": 0,
42+
}, {
43+
"Expense Type": "Tax",
44+
"Projected Cost": 200,
45+
"Actual Cost": 200,
46+
"Difference": 0,
47+
}, {
48+
"Expense Type": "Savings",
49+
"Projected Cost": 1000,
50+
"Actual Cost": 900,
51+
"Difference": 100,
52+
},
53+
{
54+
"Expense Type": "Total",
55+
"Projected Cost": 13500,
56+
"Actual Cost": 13600,
57+
"Difference": -100,
58+
}
59+
];
60+
export let salaryData = [
61+
{
62+
"Earnings": "Basic",
63+
"Credit Amount": 20000,
64+
"Deductions": "Provident Fund",
65+
"Debit Amount": 2400,
66+
},
67+
{
68+
"Earnings": "HRA",
69+
"Credit Amount": 8000,
70+
"Deductions": "ESI",
71+
"Debit Amount": 0,
72+
},
73+
{
74+
"Earnings": "Special Allowance",
75+
"Credit Amount": 25000,
76+
"Deductions": "Professional Tax",
77+
"Debit Amount": 200,
78+
},
79+
{
80+
"Earnings": "Incentives",
81+
"Credit Amount": 2000,
82+
"Deductions": "TDS",
83+
"Debit Amount": 2750,
84+
},
85+
{
86+
"Earnings": "Bonus",
87+
"Credit Amount": 1500,
88+
"Deductions": "Other Deduction",
89+
"Debit Amount": 0,
90+
},
91+
{
92+
"Earnings": "Total Earnings",
93+
"Credit Amount": 56500,
94+
"Deductions": "Total Deductions",
95+
"Debit Amount": 5350,
96+
}
97+
];

0 commit comments

Comments
 (0)