Skip to content

Commit ea32584

Browse files
Merge pull request #449 from Syncfusion-Content/hotfix/hotfix-v26.1.35
DOCINFRA-2341_merged_using_automation
2 parents a8d1c5e + 3f9065f commit ea32584

File tree

304 files changed

+5019
-229
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

304 files changed

+5019
-229
lines changed

ej2-react-toc.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1729,6 +1729,14 @@
17291729
OTP Input
17301730
<ul>
17311731
<li><a href="/ej2-react/otp-input/getting-started">Getting Started</a></li>
1732+
<li><a href="/ej2-react/otp-input/input-types">Input Types</a></li>
1733+
<li><a href="/ej2-react/otp-input/styling-modes">Styling Modes</a></li>
1734+
<li><a href="/ej2-react/otp-input/placeholder">Placeholder</a></li>
1735+
<li><a href="/ej2-react/otp-input/separator">Separator</a></li>
1736+
<li><a href="/ej2-react/otp-input/appearance">Appearance</a></li>
1737+
<li><a href="/ej2-react/otp-input/accessibility">Accessibility</a></li>
1738+
<li><a href="/ej2-react/otp-input/events">Events</a></li>
1739+
<li><a href="https://ej2.syncfusion.com/react/documentation/api/otp-input"></a>API Reference</li>
17321740
</ul>
17331741
</li><li>
17341742
Pager

ej2-react/auto-complete/virtual-scroll.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ In the following example, `text` column from complex data have been mapped to th
4040

4141
## Binding remote data
4242

43-
The AutoComplete supports retrieval of data from remote data services with the help of `DataManager` component. When using remote data, it initially fetches all the data from the server, triggering the `actionBegin` and `actionComplete` events, and then stores the data locally. During virtual scrolling, additional data is retrieved from the locally stored data, triggering the `actionBegin` and `actionComplete` events at that time as well.
43+
The AutoComplete supports the retrieval of data from remote data services with the help of the `DataManager` component, triggering the `actionBegin` and `actionComplete` events, and then updating the list data. During virtual scrolling, additional data is retrieved from the server, triggering the `actionBegin` and `actionComplete` events at that time as well.
4444

4545
The following sample displays the OrderId from the `Orders` Data Service.
4646

ej2-react/code-snippet/chart/dynamic-update/click-add-point/app/index.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,24 +44,24 @@ function App() {
4444
const chartMouseClick = (args: IMouseEventArgs): void => {
4545
let isRemoved: boolean = false;
4646
if (args.axisData) {
47-
for (let i: number = 0; i < (chartInstance.current.series[0] as Series).points.length; i++) {
48-
const markerWidth: number = (chartInstance.current.series[0] as Series).marker.width / 2;
47+
for (let i: number = 0; i < (chartInstance.series[0] as Series).points.length; i++) {
48+
const markerWidth: number = (chartInstance.series[0] as Series).marker.width / 2;
4949
let roundedX: number = Math.round(args.axisData['primaryXAxis']) + markerWidth;
5050
let roundedY: number = Math.round(args.axisData['primaryYAxis']) + markerWidth;
51-
let pointX: number = Math.round((chartInstance.current.series[0] as Series).points[i].x as number) + markerWidth;
52-
let pointY: number = Math.round((chartInstance.current.series[0] as Series).points[i].y as number) + markerWidth;
51+
let pointX: number = Math.round((chartInstance.series[0] as Series).points[i].x as number) + markerWidth;
52+
let pointY: number = Math.round((chartInstance.series[0] as Series).points[i].y as number) + markerWidth;
5353
if ((roundedX === pointX || roundedX + 1 === pointX || roundedX - 1 === pointX) &&
5454
(roundedY === pointY || roundedY + 1 === pointY || roundedY - 1 === pointY)) {
55-
if ((chartInstance.current.series[0] as Series).points.length > 1) {
56-
const points = (chartInstance.current.series[0] as Series).points;
55+
if ((chartInstance.series[0] as Series).points.length > 1) {
56+
const points = (chartInstance.series[0] as Series).points;
5757
const duration: number = i === 0 || i === points[points.length - 1].index ? 500 : 0;
58-
chartInstance.current.series[0].removePoint(i, duration);
58+
chartInstance.series[0].removePoint(i, duration);
5959
}
6060
isRemoved = true;
6161
}
6262
}
6363
if (!isRemoved) {
64-
chartInstance.current.series[0].addPoint({ x: Math.round(args.axisData['primaryXAxis']), y: Math.round(args.axisData['primaryYAxis']) });
64+
chartInstance.series[0].addPoint({ x: Math.round(args.axisData['primaryXAxis']), y: Math.round(args.axisData['primaryYAxis']) });
6565
}
6666
}
6767
};
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import * as React from "react";
2+
import * as ReactDOM from "react-dom";
3+
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
4+
let diagramInstance;
5+
// A node is created and stored in nodes array.
6+
let node = [{
7+
// Position of the node
8+
offsetX: 100,
9+
offsetY: 100,
10+
// Size of the node
11+
width: 100,
12+
height: 100,
13+
style: {
14+
fill: '#6BA5D7',
15+
strokeColor: 'white'
16+
},
17+
// Sets the Annotation for the Node
18+
annotations: [{
19+
content: 'Annotation',
20+
//set rotationReference to "page" to disable rotation
21+
rotationReference: 'Page'
22+
23+
}]
24+
}];
25+
26+
// initialize Diagram component
27+
function App() {
28+
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node} connectors={connector}/>);
29+
}
30+
const root = ReactDOM.createRoot(document.getElementById('diagram'));
31+
root.render(<App />);
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
2+
3+
import * as React from "react";
4+
import * as ReactDOM from "react-dom";
5+
import {
6+
Diagram,
7+
DiagramComponent,
8+
NodeModel, ConnectorModel
9+
} from "@syncfusion/ej2-react-diagrams";
10+
let diagramInstance: DiagramComponent;
11+
// A node is created and stored in nodes array.
12+
let node: NodeModel[] = [{
13+
// Position of the node
14+
offsetX: 100,
15+
offsetY: 100,
16+
// Size of the node
17+
width: 100,
18+
height: 100,
19+
style: {
20+
fill: '#6BA5D7',
21+
strokeColor: 'white'
22+
},
23+
// Sets the Annotation for the Node
24+
annotations: [{
25+
content: 'Annotation',
26+
//set rotationReference to "page" to disable rotation
27+
rotationReference: 'Page'
28+
}]
29+
}];
30+
31+
// initialize Diagram component
32+
function App() {
33+
return (
34+
<DiagramComponent
35+
id="container"
36+
width={'100%'}
37+
height={'600px'}
38+
nodes={node}
39+
/>
40+
);
41+
}
42+
const root = ReactDOM.createRoot(document.getElementById('diagram'));
43+
root.render(<App />);
44+
45+
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Syncfusion React Chart-DataLabel</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="index.css" rel="stylesheet">
11+
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
12+
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
13+
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
14+
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
15+
<link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/material.css" rel="stylesheet">
16+
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/fabric.css" rel="stylesheet">
17+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
18+
<script src="systemjs.config.js"></script>
19+
<style>
20+
#loader {
21+
color: #008cff;
22+
height: 40px;
23+
left: 45%;
24+
position: absolute;
25+
top: 45%;
26+
width: 30%;
27+
}
28+
#diagram {
29+
display: block;
30+
}
31+
</style>
32+
</head>
33+
34+
<body>
35+
<div id='diagram'>
36+
<div id='loader'>Loading....</div>
37+
</div>
38+
</body>
39+
40+
</html>
Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
System.config({
2+
transpiler: "ts",
3+
typescriptOptions: {
4+
target: "es5",
5+
module: "commonjs",
6+
moduleResolution: "node",
7+
emitDecoratorMetadata: true,
8+
experimentalDecorators: true,
9+
"jsx": "react"
10+
},
11+
meta: {
12+
'typescript': {
13+
"exports": "ts"
14+
}
15+
},
16+
paths: {
17+
"syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
18+
},
19+
map: {
20+
app: 'app',
21+
ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
22+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
23+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
24+
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
25+
"@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
26+
"@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
27+
"@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
28+
"@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
29+
"@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
30+
"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
31+
"@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
32+
"@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
33+
"@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
34+
"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
35+
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
36+
"@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
37+
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
38+
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
39+
"@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
40+
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
41+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
42+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
43+
"@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js",
44+
"@syncfusion/ej2-react-diagrams": "syncfusion:ej2-react-diagrams/dist/ej2-react-diagrams.umd.min.js",
45+
"react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
46+
"react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
47+
48+
49+
},
50+
packages: {
51+
'app': { main: 'index', defaultExtension: 'tsx' },
52+
}
53+
54+
});
55+
56+
System.import('app');
57+
58+
59+
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{% raw %}
2+
import * as React from "react";
3+
import * as ReactDOM from "react-dom";
4+
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
5+
let diagramInstance;
6+
//initialize connector collection
7+
let collectorCollection = [
8+
{ id: 'connector1', sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 150, y: 150 } },
9+
{id: 'connector2', type: 'Orthogonal', sourcePoint: { x: 170, y: 170 }, targetPoint: { x: 200, y: 200 }},
10+
{ id: 'connector3', type: 'Bezier', sourcePoint: { x: 320, y: 320 }, targetPoint: { x: 400, y: 400 } }
11+
];
12+
function App() {
13+
return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} created={() => {
14+
//Add collection of connectors
15+
diagramInstance.addElements(collectorCollection);
16+
}}/>);
17+
}
18+
const root = ReactDOM.createRoot(document.getElementById('diagram'));
19+
root.render(<App />);
20+
{% endraw %}
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{% raw %}
2+
import * as React from "react";
3+
import * as ReactDOM from "react-dom";
4+
import {DiagramComponent, ConnectorModel} from "@syncfusion/ej2-react-diagrams";
5+
let diagramInstance: DiagramComponent;
6+
//initialize connector collection
7+
var collectorCollection:ConnectorModel = [
8+
{ id: 'connector1', sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 150, y: 150 } },
9+
{id: 'connector2', type: 'Orthogonal', sourcePoint: { x: 170, y: 170 }, targetPoint: { x: 200, y: 200 }},
10+
{ id: 'connector3', type: 'Bezier', sourcePoint: { x: 320, y: 320 }, targetPoint: { x: 400, y: 400 } }
11+
];
12+
function App() {
13+
return (
14+
<DiagramComponent
15+
id="container"
16+
ref={(diagram) => (diagramInstance = diagram)}
17+
width={'100%'}
18+
height={'600px'}
19+
created={() => {
20+
//Add collection of connectors
21+
diagramInstance.addElements(collectorCollection);
22+
}}
23+
/>
24+
);
25+
}
26+
const root = ReactDOM.createRoot(document.getElementById('diagram'));
27+
root.render(<App />);
28+
29+
30+
{% endraw %}
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Syncfusion React Chart-DataLabel</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="index.css" rel="stylesheet">
11+
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
12+
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
13+
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
14+
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
15+
<link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/material.css" rel="stylesheet">
16+
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/fabric.css" rel="stylesheet">
17+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
18+
<script src="systemjs.config.js"></script>
19+
<style>
20+
#loader {
21+
color: #008cff;
22+
height: 40px;
23+
left: 45%;
24+
position: absolute;
25+
top: 45%;
26+
width: 30%;
27+
}
28+
#diagram {
29+
display: block;
30+
}
31+
</style>
32+
</head>
33+
34+
<body>
35+
<div id='diagram'>
36+
<div id='loader'>Loading....</div>
37+
</div>
38+
</body>
39+
40+
</html>
Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
System.config({
2+
transpiler: "ts",
3+
typescriptOptions: {
4+
target: "es5",
5+
module: "commonjs",
6+
moduleResolution: "node",
7+
emitDecoratorMetadata: true,
8+
experimentalDecorators: true,
9+
"jsx": "react"
10+
},
11+
meta: {
12+
'typescript': {
13+
"exports": "ts"
14+
}
15+
},
16+
paths: {
17+
"syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
18+
},
19+
map: {
20+
app: 'app',
21+
ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
22+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
23+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
24+
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
25+
"@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
26+
"@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
27+
"@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
28+
"@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
29+
"@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
30+
"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
31+
"@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
32+
"@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
33+
"@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
34+
"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
35+
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
36+
"@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
37+
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
38+
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
39+
"@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
40+
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
41+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
42+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
43+
"@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js",
44+
"@syncfusion/ej2-react-diagrams": "syncfusion:ej2-react-diagrams/dist/ej2-react-diagrams.umd.min.js",
45+
"react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
46+
"react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
47+
48+
49+
},
50+
packages: {
51+
'app': { main: 'index', defaultExtension: 'tsx' },
52+
}
53+
54+
});
55+
56+
System.import('app');
57+
58+
59+

0 commit comments

Comments
 (0)