Skip to content

Commit da80f46

Browse files
Merge pull request #453 from Syncfusion-Content/hotfix/hotfix-v26.1.35
DOCINFRA-2341_merged_using_automation
2 parents eb0748a + 25399bb commit da80f46

File tree

20 files changed

+547
-18
lines changed

20 files changed

+547
-18
lines changed

ej2-react/auto-complete/disabled-items.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,4 +54,4 @@ The [disableItem](https://ej2.syncfusion.com/react/documentation/api/auto-comple
5454

5555
If you want to disabled the overall component to set the [enabled](https://ej2.syncfusion.com/react/documentation/api/auto-complete/#enabled) property to false.
5656

57-
{% [Disabled AutoComplete Component](././images/autocomplete-disable.png)" %}
57+
![Disabled AutoComplete Component](../images/autocomplete-disable.png)"

ej2-react/code-snippet/diagram/group/es5groupaddatruntime-cs1/app/index.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,4 +38,6 @@ function App() {
3838
);
3939
}
4040
const root = ReactDOM.createRoot(document.getElementById('diagram'));
41-
root.render(<App />);
41+
root.render(<App />);
42+
43+
{% endraw %}

ej2-react/code-snippet/gantt/exception-handling-cs1/app/App.jsx

Whitespace-only changes.

ej2-react/code-snippet/gantt/exception-handling-cs1/app/App.tsx

Whitespace-only changes.
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
export let data = [
2+
{
3+
TaskID: 1,
4+
TaskName: 'Project Initiation',
5+
StartDate: new Date('04/02/2019'),
6+
EndDate: new Date('04/21/2019'),
7+
subtasks: [
8+
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
9+
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
10+
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
11+
]
12+
},
13+
{
14+
TaskID: 5,
15+
TaskName: 'Project Estimation',
16+
StartDate: new Date('04/02/2019'),
17+
EndDate: new Date('04/21/2019'),
18+
subtasks: [
19+
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
20+
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
21+
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
22+
]
23+
},
24+
];
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
export let data: Object[] = [
2+
{
3+
TaskID: 1,
4+
TaskName: 'Project Initiation',
5+
StartDate: new Date('04/02/2019'),
6+
EndDate: new Date('04/21/2019'),
7+
subtasks: [
8+
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
9+
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
10+
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
11+
]
12+
},
13+
{
14+
TaskID: 5,
15+
TaskName: 'Project Estimation',
16+
StartDate: new Date('04/02/2019'),
17+
EndDate: new Date('04/21/2019'),
18+
subtasks: [
19+
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
20+
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
21+
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
22+
]
23+
},
24+
];
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import * as React from 'react';
2+
import * as ReactDOM from 'react-dom';
3+
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
4+
import { data } from './datasource';
5+
function App() {
6+
const taskFields = {
7+
id: 'TaskID',
8+
name: 'TaskName',
9+
startDate: 'StartDate',
10+
duration: 'Duration',
11+
progress: 'Progress',
12+
child: 'subtasks'
13+
};
14+
const splitterSettings = {
15+
columnIndex: 2
16+
};
17+
const onActionFailure = (e) => {
18+
const span = document.createElement('span');
19+
const gantt = (document.getElementsByClassName("e-gantt")[0]).ej2_instances[0];
20+
if (gantt) {
21+
(gantt).element.parentNode.insertBefore(span, gantt.element);
22+
span.style.color = "#FF0000";
23+
span.innerHTML = e.error[0];
24+
}
25+
}
26+
return <GanttComponent dataSource={data} taskFields={taskFields}
27+
actionFailure={onActionFailure} splitterSettings={splitterSettings} height='450px'>
28+
<ColumnsDirective>
29+
<ColumnDirective field='TaskName' headerText='Task Name'></ColumnDirective>
30+
<ColumnDirective field='StartDate'></ColumnDirective>
31+
<ColumnDirective field='Duration'></ColumnDirective>
32+
<ColumnDirective field='Predecessor'></ColumnDirective>
33+
<ColumnDirective field='Progress'></ColumnDirective>
34+
</ColumnsDirective>
35+
</GanttComponent>
36+
};
37+
ReactDOM.render(<App />, document.getElementById('root'));
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import * as React from 'react';
2+
import * as ReactDOM from 'react-dom';
3+
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
4+
import { data } from './datasource';
5+
function App() {
6+
const taskFields: any = {
7+
id: 'TaskID',
8+
name: 'TaskName',
9+
startDate: 'StartDate',
10+
duration: 'Duration',
11+
progress: 'Progress',
12+
child: 'subtasks'
13+
};
14+
const splitterSettings: any = {
15+
columnIndex: 2
16+
};
17+
const onActionFailure = (e: any) => {
18+
const span: HTMLElement = document.createElement('span');
19+
const gantt = (document.getElementsByClassName("e-gantt")[0] as any).ej2_instances[0];
20+
if (gantt) {
21+
(gantt as any).element.parentNode.insertBefore(span, gantt.element);
22+
span.style.color = "#FF0000";
23+
span.innerHTML = e.error[0];
24+
}
25+
}
26+
return <GanttComponent dataSource={data} taskFields={taskFields}
27+
actionFailure={onActionFailure} splitterSettings={splitterSettings} height='450px'>
28+
<ColumnsDirective>
29+
<ColumnDirective field='TaskName' headerText='Task Name'></ColumnDirective>
30+
<ColumnDirective field='StartDate'></ColumnDirective>
31+
<ColumnDirective field='Duration'></ColumnDirective>
32+
<ColumnDirective field='Predecessor'></ColumnDirective>
33+
<ColumnDirective field='Progress'></ColumnDirective>
34+
</ColumnsDirective>
35+
</GanttComponent>
36+
};
37+
ReactDOM.render(<App />, document.getElementById('root'));
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Syncfusion React Gantt</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/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+
</style>
24+
</head>
25+
26+
<body>
27+
<div id='root'>
28+
<div id='loader'>Loading....</div>
29+
</div>
30+
</body>
31+
32+
</html>
Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
24+
"@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
25+
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
26+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
27+
"@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
28+
"@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js",
29+
"@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js",
30+
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
31+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
32+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
33+
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
34+
"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
35+
"@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
36+
"@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
37+
"@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
38+
"@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
39+
"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
40+
"@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
41+
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
42+
"@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
43+
"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
44+
"@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
45+
"@syncfusion/ej2-react-grids": "syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js",
46+
"@syncfusion/ej2-react-gantt": "syncfusion:ej2-react-gantt/dist/ej2-react-gantt.umd.min.js",
47+
"@syncfusion/ej2-react-treegrid": "syncfusion:ej2-react-treegrid/dist/ej2-react-treegrid.umd.min.js",
48+
"@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
49+
"@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js",
50+
"@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
51+
"@syncfusion/ej2-react-svg-base": "syncfusion:ej2-react-svg-base/dist/ej2-react-svg-base.umd.min.js",
52+
"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
53+
"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
54+
},
55+
packages: {
56+
'app': { main: 'index', defaultExtension: 'tsx' },
57+
}
58+
59+
});
60+
61+
System.import('app');
62+
63+
64+

ej2-react/combo-box/disabled-items.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,4 +54,4 @@ The [disableItem](https://ej2.syncfusion.com/react/documentation/api/combo-box/#
5454

5555
If you want to disabled the overall component to set the [enabled](https://ej2.syncfusion.com/react/documentation/api/combo-box/#enabled) property to false.
5656

57-
{% [Disabled ComboBox Component](././images/combobox-disable.png)" %}
57+
![Disabled ComboBox Component](../images/combobox-disable.png)

ej2-react/diagram/connectors.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,9 @@ The following code example illustrates how to add connector at runtime.
5252

5353
## Add collection of connectors at runtime
5454

55-
* The collection of connectors can be dynamically added using 'addElements' method.Each time an element is added to the diagram canvas, the 'collectionChange' event will be triggered.
55+
* The collection of connectors can be dynamically added using `addElements` method.Each time an element is added to the diagram canvas, the `collectionChange` event will be triggered.
5656

57-
The following code illustrates how to add a connectors collection at runtime.
57+
The following code illustrates how to add connectors collection at runtime.
5858

5959
{% tabs %}
6060
{% highlight ts tabtitle="index.jsx" %}

ej2-react/diagram/group.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,9 @@ The following code illustrates how a group node is added at runtime.
7171

7272
## Add collection of group nodes at runtime
7373

74-
* The collection of group nodes can be dynamically added using 'addElements' method.Each time an element is added to the diagram canvas, the 'collectionChange' event will be triggered.
74+
* The collection of group nodes can be dynamically added using `addElements` method.Each time an element is added to the diagram canvas, the `collectionChange` event will be triggered.
7575

76-
The following code illustrates how to add a group nodes collection at runtime.
76+
The following code illustrates how to add group nodes collection at runtime.
7777

7878
{% tabs %}
7979
{% highlight js tabtitle="index.jsx" %}

ej2-react/diagram/nodes.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,9 @@ The following code illustrates how to add a node.
5757

5858
## Add collection of nodes at runtime
5959

60-
* The collection of nodes can be dynamically added using 'addElements' method.Each time an element is added to the diagram canvas, the 'collectionChange' event will be triggered.
60+
* The collection of nodes can be dynamically added using `addElements` method.Each time an element is added to the diagram canvas, the `collectionChange` event will be triggered.
6161

62-
The following code illustrates how to add a nodes collection at run time.
62+
The following code illustrates how to add nodes collection at run time.
6363

6464
{% tabs %}
6565
{% highlight js tabtitle="index.jsx" %}

ej2-react/drop-down-list/disabled-items.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,4 +54,4 @@ The [disableItem](https://ej2.syncfusion.com/react/documentation/api/drop-down-l
5454

5555
If you want to disabled the overall component to set the [enabled](https://ej2.syncfusion.com/react/documentation/api/drop-down-list/#enabled) property to false.
5656

57-
{% [Disabled DropDownList Component](././images/dropdownlist-disable.png)" %}
57+
![Disabled DropDownList Component](../images/dropdownlist-disable.png)

ej2-react/gantt/getting-started.md

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ documentation: ug
88
domainurl: ##DomainURL##
99
---
1010

11-
# Getting started
11+
# Getting started in React Gantt control
1212

1313
This section explains you the steps required to create a simple Essential JS 2 Gantt in a React application and demonstrates its basic features.
1414

@@ -714,4 +714,39 @@ Output will be appears as follows.
714714
715715
{% previewsample "page.domainurl/code-snippet/gantt/run-cs1" %}
716716
717-
> You can refer to our [React Gantt Chart]( https://www.syncfusion.com/react-components/react-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [React Gantt Chart example]( https://ej2.syncfusion.com/react/demos/#/material/gantt/default) that shows how to render the Gantt Chart in React.
717+
> You can refer to our [React Gantt Chart]( https://www.syncfusion.com/react-components/react-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [React Gantt Chart example]( https://ej2.syncfusion.com/react/demos/#/material/gantt/default) that shows how to render the Gantt Chart in React.
718+
719+
## Error handling
720+
721+
Error handling is used to identify errors, display them and develop recovery strategies to handle errors from gantt. In Gantt, error handling is done by using the [actionFailure](https://ej2.syncfusion.com/react/documentation/api/gantt/#actionfailure) event. Some of the scenarios that this event handles are:
722+
* Invalid duration : The [duration](https://ej2.syncfusion.com/react/documentation/api/gantt/taskFields/#duration) field accepts only numerical values with an optional decimal point. Entering non-numerical values triggers the `actionFailure` event and displays issue information in the event argument.
723+
* Invalid dependency: The [dependency](https://ej2.syncfusion.com/react/documentation/api/gantt/taskFields/#dependency) field accepts only a number followed by a predecessor type (FS, FF, SS, SF). Entering invalid values, such as special characters or incorrect predecessor types, triggers the `actionFailure` event and displays issue information in the event argument.
724+
* Invalid offset : The [offset](https://ej2.syncfusion.com/react/documentation/api/gantt/iPredecessor/#offset) accepts only numerical values or their word equivalents followed by a unit. Entering invalid values, such as special characters triggers `actionFailure` event and displays issue information in the event argument.
725+
* Failure to map task fields : The data source fields necessary for rendering tasks should be mapped to the Gantt control using the [taskFields](https://ej2.syncfusion.com/react/documentation/api/gantt/taskFields/) property. Failure to map `taskFields` in the sample triggers `actionFailure` event and displays issue information in the event argument.
726+
* Failure to map resource fields : To assign resources to a task, resource fields should be mapped to the Gantt control using the [resourceFields](https://ej2.syncfusion.com/react/documentation/api/gantt/resourceFields/). Failure to map `resourceFields` in the sample triggers `actionFailure` event and displays issue information in the event argument.
727+
* Failure to map `isPrimaryKey` : [isPrimaryKey](https://ej2.syncfusion.com/react/documentation/api/gantt/column/#isprimarykey) field is crucial for CRUD operations. Failure to map [id](https://ej2.syncfusion.com/react/documentation/api/gantt/taskFields/#id) column in gantt column collection or [isPrimaryKey](https://ej2.syncfusion.com/react/documentation/api/gantt/column/#isprimarykey) field in one of the columns will trigger `actionFailure` event and display issue information in the event argument.
728+
* Invalid date format : [format](https://ej2.syncfusion.com/react/documentation/api/gantt/iTimelineFormatter/) property under `topTier` and `bottomTier` determines how the timelines are displayed in the top tier and bottom tier of the Gantt chart timeline. If the `format` does not contain a valid standard [date format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), it triggers the `actionFailure` event, displaying issue information in the event argument.
729+
* Failure to map `hasChildMapping` : [hasChildMapping](https://ej2.syncfusion.com/react/documentation/api/gantt/taskFields/#haschildmapping) property should configured for [load-on-demand](https://ej2.syncfusion.com/react/documentation/gantt/data-binding#load-child-on-demand). Ensure it properly configured in the [taskFields](https://ej2.syncfusion.com/react/documentation/api/gantt/taskFields/). Failure to map `hasChildMapping` in the `load-on-demand` sample triggers `actionFailure` event and displays issue information in the event argument.
730+
* Invalid day in event markers : [day](https://ej2.syncfusion.com/react/documentation/api/gantt/eventMarker/#day) should configured in [eventMarkers](https://ej2.syncfusion.com/react/documentation/api/gantt/eventMarker/) to render striplines in a particular day. Failure to configure the `day` in `eventMarkers` triggers `actionFailure` event and displays issue information in the event argument.
731+
732+
> Additionally, TreeGrid side error handling information is also displayed from the Gantt `actionFailure` event. For more details on TreeGrid side error handling, refer [here](https://ej2.syncfusion.com/react/documentation/treegrid/getting-started#handling-errors).
733+
734+
The following code example shows how to use the [actionFailure](https://ej2.syncfusion.com/react/documentation/api/gantt/#actionfailure) event in the Gantt control to display an exception when `isPrimaryKey` is not configured properly in the Gantt Chart column.
735+
736+
{% tabs %}
737+
{% highlight js tabtitle="index.jsx" %}
738+
{% include code-snippet/gantt/run-cs1/app/index.jsx %}
739+
{% endhighlight %}
740+
{% highlight ts tabtitle="index.tsx" %}
741+
{% include code-snippet/gantt/run-cs1/app/index.tsx %}
742+
{% endhighlight %}
743+
{% highlight html tabtitle="index.html" %}
744+
{% include code-snippet/gantt/run-cs1/index.html %}
745+
{% endhighlight %}
746+
{% endtabs %}
747+
748+
{% previewsample "page.domainurl/code-snippet/gantt/run-cs1" %}
749+
750+
The following screenshot represents the Gantt Exception handling in `actionFailure` event.
751+
752+
![Error Handling](images/error-handling.png)
12.5 KB
Loading

0 commit comments

Comments
 (0)