Skip to content

Commit 88d64d0

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 12-15-2024 4:32:59 PM
1 parent 95fcd1b commit 88d64d0

File tree

25 files changed

+1489
-105
lines changed

25 files changed

+1489
-105
lines changed

‎ej2-react-toc.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1963,6 +1963,7 @@
19631963
<ul>
19641964
<li><a href="/ej2-react/pdfviewer/form-designer/create-programmatically">Create form fields programmatically</a></li>
19651965
<li><a href="/ej2-react/pdfviewer/form-designer/create-with-user-interface-interaction">Create form fields with UI interaction</a></li>
1966+
<li><a href="/ej2-react/pdfviewer/form-designer/form-field-events">Form Field events</a></li>
19661967
</ul>
19671968
</li>
19681969
<li><a href="/ej2-react/pdfviewer/organize-pdf">Organize Pages</a></li>

‎ej2-react/circular-gauge/gauge-pointers.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ The pointers can be dragged along the axis line by clicking and dragging them. T
169169

170170
### Enabling drag functionality for a specific pointer
171171

172-
To enable or disable the drag functionality for specific pointers along the axis line, use the `enableDrag` property in the required pointer model.
172+
To enable or disable the drag functionality for specific pointers along the axis line, use the [enableDrag](https://ej2.syncfusion.com/react/documentation/api/circular-gauge/pointerModel/#enabledrag) property in the required pointer model.
173173

174174
>When the `enableDrag` property is enabled for any individual pointer model, the `enablePointerDrag` property becomes ineffective.
175175

‎ej2-react/code-snippet/circulargauge/gauge-pointers-drag-cs1/systemjs.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ System.config({
1414
}
1515
},
1616
paths: {
17-
"syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
17+
"syncfusion:": "https://cdn.syncfusion.com/ej2/28.1.33/"
1818
},
1919
map: {
2020
app: 'app',

‎ej2-react/code-snippet/maps/marker-clusters-cs1/app/index.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export function App() {
3838
},
3939
shape: 'Image',
4040
height: 40, width: 40,
41-
imageUrl: './cluster-france.svg'
41+
imageUrl: 'https://ej2.syncfusion.com/react/demos/src/maps/images/cluster-france.svg'
4242
}}
4343
animationDuration={0}
4444
dataSource={[
@@ -67,7 +67,7 @@ export function App() {
6767
color: 'white',
6868
size: '10px'
6969
},
70-
imageUrl: './cluster-usa.svg'
70+
imageUrl: 'https://ej2.syncfusion.com/react/demos/src/maps/images/cluster-usa.svg'
7171
}}
7272
animationDuration={0}
7373
dataSource={[
@@ -97,7 +97,7 @@ export function App() {
9797
color: 'white',
9898
size: '10px'
9999
},
100-
imageUrl: './cluster-india.svg'
100+
imageUrl: 'https://ej2.syncfusion.com/react/demos/src/maps/images/cluster-india.svg'
101101
}}
102102
animationDuration={0}
103103
dataSource={[

‎ej2-react/code-snippet/maps/marker-clusters-cs1/app/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export function App() {
3939
},
4040
shape: 'Image',
4141
height: 40, width: 40,
42-
imageUrl: './cluster-france.svg'
42+
imageUrl: 'https://ej2.syncfusion.com/react/demos/src/maps/images/cluster-france.svg'
4343
}}
4444
animationDuration={0}
4545
dataSource={[
@@ -68,7 +68,7 @@ export function App() {
6868
color: 'white',
6969
size: '10px'
7070
},
71-
imageUrl: './cluster-usa.svg'
71+
imageUrl: 'https://ej2.syncfusion.com/react/demos/src/maps/images/cluster-usa.svg'
7272
}}
7373
animationDuration={0}
7474
dataSource={[
@@ -98,7 +98,7 @@ export function App() {
9898
color: 'white',
9999
size: '10px'
100100
},
101-
imageUrl: './cluster-india.svg'
101+
imageUrl: 'https://ej2.syncfusion.com/react/demos/src/maps/images/cluster-india.svg'
102102
}}
103103
animationDuration={0}
104104
dataSource={[

‎ej2-react/code-snippet/maps/marker-clusters-cs1/cluster-france.svg

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎ej2-react/code-snippet/maps/marker-clusters-cs1/cluster-india.svg

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎ej2-react/code-snippet/maps/marker-clusters-cs1/cluster-usa.svg

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎ej2-react/code-snippet/maps/marker-clusters-cs1/systemjs.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ System.config({
1414
}
1515
},
1616
paths: {
17-
"syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"},
17+
"syncfusion:": "https://cdn.syncfusion.com/ej2/28.1.33/"},
1818
map: {
1919
app: 'app',
2020
ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",

‎ej2-react/code-snippet/maps/marker-size-customization-cs1/systemjs.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ System.config({
1414
}
1515
},
1616
paths: {
17-
"syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"},
17+
"syncfusion:": "https://cdn.syncfusion.com/ej2/28.1.33/"},
1818
map: {
1919
app: 'app',
2020
ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",

‎ej2-react/code-snippet/spreadsheet/calculation-cs1/app/app.jsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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 { data } from './datasource';
7+
8+
function App() {
9+
const spreadsheetRef = React.useRef(null);
10+
React.useEffect(() => {
11+
let spreadsheet = spreadsheetRef.current;
12+
if (spreadsheet) {
13+
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
14+
}
15+
}, []);
16+
17+
return (
18+
<div>
19+
<SpreadsheetComponent id='spreadsheet' ref={spreadsheetRef} calculationMode={'Automatic'}>
20+
<SheetsDirective>
21+
<SheetDirective name={"Product Details"}>
22+
<RangesDirective>
23+
<RangeDirective dataSource={data} startCell={"A1"}></RangeDirective>
24+
</RangesDirective>
25+
<ColumnsDirective>
26+
<ColumnDirective width={130}></ColumnDirective>
27+
<ColumnDirective width={92}></ColumnDirective>
28+
<ColumnDirective width={96}></ColumnDirective>
29+
</ColumnsDirective>
30+
</SheetDirective>
31+
</SheetsDirective>
32+
</SpreadsheetComponent>
33+
</div>
34+
);
35+
};
36+
export default App;
37+
38+
const root = createRoot(document.getElementById('root'));
39+
root.render(<App />);
40+
{% endraw %}

‎ej2-react/code-snippet/spreadsheet/calculation-cs1/app/app.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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 { data } from './datasource';
7+
8+
function App() {
9+
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
10+
React.useEffect(() => {
11+
let spreadsheet = spreadsheetRef.current;
12+
if (spreadsheet) {
13+
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
14+
}
15+
}, []);
16+
17+
return (
18+
<div>
19+
<SpreadsheetComponent id='spreadsheet' ref={spreadsheetRef} calculationMode={'Automatic'}>
20+
<SheetsDirective>
21+
<SheetDirective name={"Product Details"}>
22+
<RangesDirective>
23+
<RangeDirective dataSource={data} startCell={"A1"}></RangeDirective>
24+
</RangesDirective>
25+
<ColumnsDirective>
26+
<ColumnDirective width={130}></ColumnDirective>
27+
<ColumnDirective width={92}></ColumnDirective>
28+
<ColumnDirective width={96}></ColumnDirective>
29+
</ColumnsDirective>
30+
</SheetDirective>
31+
</SheetsDirective>
32+
</SpreadsheetComponent>
33+
</div>
34+
);
35+
};
36+
export default App;
37+
38+
const root = createRoot(document.getElementById('root')!);
39+
root.render(<App />);
40+
{% endraw %}

‎ej2-react/code-snippet/spreadsheet/calculation-cs1/app/datasource.jsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/**
2+
* Formula data source
3+
*/
4+
export let data = [
5+
{ 'Item Name': 'Casual Shoes', Date: '2/14/2024', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: '=PRODUCT(D2:E2)', Discount: '2%', Profit: '=PRODUCT(G2:F2)' },
6+
{ 'Item Name': 'Sports Shoes', Date: '6/11/2024', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: '=PRODUCT(D3:E3)', Discount: '5%', Profit: '=PRODUCT(G3:F3)' },
7+
{ 'Item Name': 'Formal Shoes', Date: '7/27/2024', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: '=PRODUCT(D4:E4)', Discount: '7.5%', Profit: '=PRODUCT(G4:F4)' },
8+
{ 'Item Name': 'Sandals & Floaters', Date: '11/21/2024', Time: '06:23:54 PM', Quantity: 15, Price: 20.45, Amount: '=PRODUCT(D5:E5)', Discount: '11%', Profit: '=PRODUCT(G5:F5)' },
9+
{ 'Item Name': 'Flip- Flops & Slippers', Date: '6/23/2024', Time: '12:43:59 AM', Quantity: 30, Price: 10.67, Amount: '=PRODUCT(D6:E6)', Discount: '10%', Profit: '=PRODUCT(G6:F6)' },
10+
{ 'Item Name': 'Sneakers', Date: '7/22/2024', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: '=PRODUCT(D7:E7)', Discount: '13.2%', Profit: '=PRODUCT(G7:F7)' },
11+
{ 'Item Name': 'Running Shoes', Date: '2/4/2024', Time: '03:44:34 AM', Quantity: 20, Price: 10.5, Amount: '=PRODUCT(D8:E8)', Discount: '3%', Profit: '=PRODUCT(G8:F8)' },
12+
{ 'Item Name': 'Loafers', Date: '11/30/2024', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: '=PRODUCT(D9:E9)', Discount: '6.67%', Profit: '=PRODUCT(G9:F9)' },
13+
{ 'Item Name': 'Cricket Shoes', Date: '7/9/2024', Time: '11:32:14 PM', Quantity: 41, Price: 30, Amount: '=PRODUCT(D10:E10)', Discount: '12.5%', Profit: '=PRODUCT(G10:F10)' },
14+
{ 'Item Name': 'T-Shirts', Date: '10/31/2024', Time: '12:01:44 AM', Quantity: 50, Price: 10.75, Amount: '=PRODUCT(D11:E11)', Discount: '9%', Profit: '=PRODUCT(G11:F11)' }
15+
];

‎ej2-react/code-snippet/spreadsheet/calculation-cs1/app/datasource.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/**
2+
* Formula data source
3+
*/
4+
export let data: Object[] = [
5+
{ 'Item Name': 'Casual Shoes', Date: '2/14/2024', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: '=PRODUCT(D2:E2)', Discount: '2%', Profit: '=PRODUCT(G2:F2)' },
6+
{ 'Item Name': 'Sports Shoes', Date: '6/11/2024', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: '=PRODUCT(D3:E3)', Discount: '5%', Profit: '=PRODUCT(G3:F3)' },
7+
{ 'Item Name': 'Formal Shoes', Date: '7/27/2024', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: '=PRODUCT(D4:E4)', Discount: '7.5%', Profit: '=PRODUCT(G4:F4)' },
8+
{ 'Item Name': 'Sandals & Floaters', Date: '11/21/2024', Time: '06:23:54 PM', Quantity: 15, Price: 20.45, Amount: '=PRODUCT(D5:E5)', Discount: '11%', Profit: '=PRODUCT(G5:F5)' },
9+
{ 'Item Name': 'Flip- Flops & Slippers', Date: '6/23/2024', Time: '12:43:59 AM', Quantity: 30, Price: 10.67, Amount: '=PRODUCT(D6:E6)', Discount: '10%', Profit: '=PRODUCT(G6:F6)' },
10+
{ 'Item Name': 'Sneakers', Date: '7/22/2024', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: '=PRODUCT(D7:E7)', Discount: '13.2%', Profit: '=PRODUCT(G7:F7)' },
11+
{ 'Item Name': 'Running Shoes', Date: '2/4/2024', Time: '03:44:34 AM', Quantity: 20, Price: 10.5, Amount: '=PRODUCT(D8:E8)', Discount: '3%', Profit: '=PRODUCT(G8:F8)' },
12+
{ 'Item Name': 'Loafers', Date: '11/30/2024', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: '=PRODUCT(D9:E9)', Discount: '6.67%', Profit: '=PRODUCT(G9:F9)' },
13+
{ 'Item Name': 'Cricket Shoes', Date: '7/9/2024', Time: '11:32:14 PM', Quantity: 41, Price: 30, Amount: '=PRODUCT(D10:E10)', Discount: '12.5%', Profit: '=PRODUCT(G10:F10)' },
14+
{ 'Item Name': 'T-Shirts', Date: '10/31/2024', Time: '12:01:44 AM', Quantity: 50, Price: 10.75, Amount: '=PRODUCT(D11:E11)', Discount: '9%', Profit: '=PRODUCT(G11:F11)' }
15+
];

‎ej2-react/code-snippet/spreadsheet/calculation-cs1/index.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Syncfusion React Spreadsheet</title>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="description" content="Essential JS 2 for React Components" />
9+
<meta name="author" content="Syncfusion" />
10+
<link href="https://cdn.syncfusion.com/ej2/28.1.33/material.css" rel="stylesheet" type="text/css" />
11+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
13+
<script src="systemjs.config.js"></script>
14+
<style>
15+
#loader {
16+
color: #008cff;
17+
height: 40px;
18+
left: 45%;
19+
position: absolute;
20+
top: 45%;
21+
width: 30%;
22+
}
23+
24+
body {
25+
overflow: hidden;
26+
}
27+
</style>
28+
</head>
29+
30+
<body>
31+
<div id='root'>
32+
<div id='loader'>Loading....</div>
33+
</div>
34+
</body>
35+
36+
</html>

0 commit comments

Comments
 (0)