From 8f2a9f93b485a90c9e468439beadeef56f500174 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Fri, 21 Jun 2024 16:45:39 +0530 Subject: [PATCH] Integrated latest changes at 06-21-2024 4:30:10 PM --- .../getting-started/addnode-cs1/app/index.tsx | 2 +- .../getting-started/apply-style/app/index.tsx | 2 +- .../connectnode-cs1/app/index.tsx | 2 +- .../flowdiagram-cs1/app/index.tsx | 2 +- .../initialize-cs1/app/index.tsx | 2 +- .../orgchart-cs1/app/index.tsx | 2 +- .../orgchart-cs2/app/index.tsx | 2 +- .../spreadsheet/open-from-json/app/app.tsx | 1 + .../spreadsheet/print-cs2/app/app.jsx | 73 ++++++++++++++ .../spreadsheet/print-cs2/app/app.tsx | 73 ++++++++++++++ .../spreadsheet/print-cs2/app/datasource.jsx | 97 ++++++++++++++++++ .../spreadsheet/print-cs2/app/datasource.tsx | 98 +++++++++++++++++++ .../spreadsheet/print-cs2/index.html | 52 ++++++++++ .../spreadsheet/print-cs2/systemjs.config.js | 56 +++++++++++ .../spreadsheet/save-as-json/app/app.tsx | 1 + ej2-react/diagram/getting-started.md | 30 +++--- ej2-react/diagram/user-handle.md | 2 +- .../multicolumn-combobox/getting-started.md | 8 +- ej2-react/spreadsheet/print.md | 10 ++ 19 files changed, 484 insertions(+), 31 deletions(-) create mode 100644 ej2-react/code-snippet/spreadsheet/print-cs2/app/app.jsx create mode 100644 ej2-react/code-snippet/spreadsheet/print-cs2/app/app.tsx create mode 100644 ej2-react/code-snippet/spreadsheet/print-cs2/app/datasource.jsx create mode 100644 ej2-react/code-snippet/spreadsheet/print-cs2/app/datasource.tsx create mode 100644 ej2-react/code-snippet/spreadsheet/print-cs2/index.html create mode 100644 ej2-react/code-snippet/spreadsheet/print-cs2/systemjs.config.js 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 index 4f4ebbb7a..9c826594f 100644 --- 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 index 8ec1b87fd..60bcadb1e 100644 --- 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 index eeca48459..72a6b6c3a 100644 --- 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 index 6dafb32fd..5d2eb6aca 100644 --- 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 index d879c3f9d..650f40449 100644 --- 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 index 765a80e98..d60066f49 100644 --- 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 index 93ce693b8..7cbaf9959 100644 --- 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 index bc2e98d9f..374d98347 100644 --- 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 new file mode 100644 index 000000000..ffabeb8d2 --- /dev/null +++ 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 ( +
+
Print + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +}; +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/spreadsheet/print-cs2/app/app.tsx b/ej2-react/code-snippet/spreadsheet/print-cs2/app/app.tsx new file mode 100644 index 000000000..21bd49aa3 --- /dev/null +++ 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(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 ( +
+
Print + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +}; +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/spreadsheet/print-cs2/app/datasource.jsx b/ej2-react/code-snippet/spreadsheet/print-cs2/app/datasource.jsx new file mode 100644 index 000000000..068c8f397 --- /dev/null +++ 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, + } +]; diff --git a/ej2-react/code-snippet/spreadsheet/print-cs2/app/datasource.tsx b/ej2-react/code-snippet/spreadsheet/print-cs2/app/datasource.tsx new file mode 100644 index 000000000..68a1590de --- /dev/null +++ b/ej2-react/code-snippet/spreadsheet/print-cs2/app/datasource.tsx @@ -0,0 +1,98 @@ +export let budgetData: Object[] = [ + { + "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: Object[] = [ + { + "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, + } + ] \ No newline at end of file diff --git a/ej2-react/code-snippet/spreadsheet/print-cs2/index.html b/ej2-react/code-snippet/spreadsheet/print-cs2/index.html new file mode 100644 index 000000000..61b1022f2 --- /dev/null +++ b/ej2-react/code-snippet/spreadsheet/print-cs2/index.html @@ -0,0 +1,52 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
+
Loading....
+
+ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/spreadsheet/print-cs2/systemjs.config.js b/ej2-react/code-snippet/spreadsheet/print-cs2/systemjs.config.js new file mode 100644 index 000000000..d40d95afc --- /dev/null +++ b/ej2-react/code-snippet/spreadsheet/print-cs2/systemjs.config.js @@ -0,0 +1,56 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/26.1.35/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + }, + packages: { + 'app': { main: 'app', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/spreadsheet/save-as-json/app/app.tsx b/ej2-react/code-snippet/spreadsheet/save-as-json/app/app.tsx index 4a5235c9d..dd13e6db2 100644 --- a/ej2-react/code-snippet/spreadsheet/save-as-json/app/app.tsx +++ b/ej2-react/code-snippet/spreadsheet/save-as-json/app/app.tsx @@ -19,6 +19,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/diagram/getting-started.md b/ej2-react/diagram/getting-started.md index 7a4ffd4b3..659d81c79 100644 --- a/ej2-react/diagram/getting-started.md +++ b/ej2-react/diagram/getting-started.md @@ -40,18 +40,14 @@ You can use [`create-react-app`](https://github.com/facebookincubator/create-rea {% tabs %} {% highlight js tabtitle="npx" %} -```javascript - npx create-react-app my-diagram-app - cd my-diagram-app - npm start -``` + npx create-react-app my-diagram-app + cd my-diagram-app + npm start {% endhighlight %} {% highlight js tabtitle="yarn" %} -```javascript yarn create react-app my-diagram-app cd my-diagram-app yarn start -``` {% endhighlight %} {% endtabs %} @@ -61,18 +57,14 @@ To set-up a React application in `TypeScript` environment, run the following com {% tabs %} {% highlight js tabtitle="npx" %} -```javascript - npx create-react-app my-diagram-app --template typescript - cd my-diagram-app - npm start -``` + npx create-react-app my-diagram-app --template typescript + cd my-diagram-app + npm start {% endhighlight %} {% highlight js tabtitle="yarn" %} -```javascript yarn create react-app my-diagram-app --template typescript cd my-diagram-app yarn start -``` {% endhighlight %} {% endtabs %} @@ -97,7 +89,7 @@ The following CSS files are available in ../node_modules/@syncfusion package fol @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css"; @import "../node_modules/@syncfusion/ej2-navigations/styles/material.css"; ``` ->To refer App.css in the application, import it in the src/App.tsx file. `import './App.css';` +N> To refer App.css in the application, import it in the src/App.tsx file. `import './App.css';` ## Module Injection @@ -124,7 +116,7 @@ These modules should be injected into the diagram using the **Inject** directive ```javascript import * as React from "react"; -import * as ReactDOM from "react-dom/client"; +import * as ReactDOM from "react-dom"; import { DiagramComponent, HierarchicalTree, @@ -397,7 +389,7 @@ Define Employee Information as JSON data. The following code example shows an em ### Map data source -You can configure the above "Employee Information" with diagram, so that the nodes and connectors are automatically generated using the mapping properties. The following code example show how `dataSourceSettings` is used to map ID and parent with property name identifiers for employee information. +You can configure the above "Employee Information" with diagram, so that the nodes and connectors are automatically generated using the mapping properties. The following code example demonstrates how to use [`dataSourceSettings`](../api/diagram/datasourcemodel/) to map [`id`](../api/diagram/dataSourceModel/#id) and [`parentId`](../api/diagram/dataSourceModel/#parentid) with the corresponding property names of employee information. ```ts @@ -460,7 +452,7 @@ root.render(); ### Rendering layout with Datasource -To create an organizational chart, the [`type`](../api/diagram/layout) of layout should be set as an `OrganizationalChart`. The following code example shows how DataManager is used to generate Layout based on the DataSourceSettings of the Diagram. +To create an organizational chart, the [`type`](../api/diagram/layoutType/) of layout should be set as an `OrganizationalChart`. The following code example shows how DataManager is used to generate Layout based on the DataSourceSettings of the Diagram. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -495,4 +487,4 @@ The following code examples indicate how to define the default appearance of nod {% previewsample "page.domainurl/code-snippet/diagram/getting-started/orgchart-cs2" %} -> You can refer to our [React Diagram](https://www.syncfusion.com/react-components/react-diagram) feature tour page for its groundbreaking feature representations. You can also explore our [React Diagram example](https://ej2.syncfusion.com/react/demos/#/material/diagram/default-functionality) that shows how to render the Diagram in React. \ No newline at end of file +N> You can refer to our [React Diagram](https://www.syncfusion.com/react-components/react-diagram) feature tour page for its groundbreaking feature representations. You can also explore our [React Diagram example](https://ej2.syncfusion.com/react/demos/#/material/diagram/default-functionality) that shows how to render the Diagram in React. \ No newline at end of file diff --git a/ej2-react/diagram/user-handle.md b/ej2-react/diagram/user-handle.md index 60cdfe760..55af9eb3c 100644 --- a/ej2-react/diagram/user-handle.md +++ b/ej2-react/diagram/user-handle.md @@ -212,7 +212,7 @@ To show tooltip on mouse over, the [`tooltip`](https://ej2.syncfusion.com/react/ {% previewsample "page.domainurl/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs2" %} - ### Tooltip support for Fixed User Handle +### Tooltip support for Fixed User Handle The diagram provides support to show tooltip when the mouse hovers over any fixed user handle. To show the tooltip on mouse over, the [`tooltip`](../api/diagram#tooltip) property of diagram model needs to be set with the tooltip [`content`](../api/diagram/diagramTooltip/#content) and [`position`](../api/diagram/diagramTooltip/#position) as shown in the following example. diff --git a/ej2-react/multicolumn-combobox/getting-started.md b/ej2-react/multicolumn-combobox/getting-started.md index b938e026d..eb3e939ed 100644 --- a/ej2-react/multicolumn-combobox/getting-started.md +++ b/ej2-react/multicolumn-combobox/getting-started.md @@ -237,10 +237,10 @@ In the following sample, popup list's width and height are configured. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/combobox/basic-cs3/app/index.jsx %} +{% include code-snippet/multicolumn-combobox/basic-cs3/app/index.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/combobox/basic-cs3/app/index.tsx %} +{% include code-snippet/multicolumn-combobox/basic-cs3/app/index.tsx %} {% endhighlight %} {% endtabs %} @@ -250,10 +250,10 @@ In the following sample, popup list's width and height are configured. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/combobox/basic-cs4/app/index.jsx %} +{% include code-snippet/multicolumn-combobox/basic-cs4/app/index.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/combobox/basic-cs4/app/index.tsx %} +{% include code-snippet/multicolumn-combobox/basic-cs4/app/index.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/spreadsheet/print.md b/ej2-react/spreadsheet/print.md index e66e3bd1b..15f6467e6 100644 --- a/ej2-react/spreadsheet/print.md +++ b/ej2-react/spreadsheet/print.md @@ -30,6 +30,16 @@ The `printOptions` contain three properties, as described below. > When the `print` method is called without any parameters, the default printing will be performed. +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/print-cs2/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/print-cs2/app/app.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/spreadsheet/print-cs2" %} ## Disable printing