From bf20dfdcb93b3cd3833a02c54d8029799be48c49 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Sun, 7 Sep 2025 20:01:36 +0530 Subject: [PATCH 01/34] Integrated latest changes at 09-07-2025 7:31:58 PM --- ej2-react/chat-ui/mention.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/ej2-react/chat-ui/mention.md b/ej2-react/chat-ui/mention.md index 71359737b..b35dcb3e6 100644 --- a/ej2-react/chat-ui/mention.md +++ b/ej2-react/chat-ui/mention.md @@ -10,8 +10,6 @@ domainurl: ##DomainURL## # Mention Integration in React Chat UI component -## Mention Integration in Syncfusion Chat UI - The Syncfusion ChatUI allows users to mention others in messages using the `@` character, with dropdown for selecting users. The following sections explain how to configure mentions ## Configure mention users @@ -62,7 +60,7 @@ You can use the [text](../api/chat-ui/messageModel/#text) property in the [Messa ## Configure mentionSelect -You can use the [mentionSelect](../api/chat-ui/messageModel/#mentionSelect/) event which triggers when a user selects an item from the mention dropdown, providing access to the selected user’s details for custom handling. +You can use the [mentionSelect](../api/chat-ui/#mentionSelect) event which triggers when a user selects an item from the mention dropdown, providing access to the selected user’s details for custom handling. {% tabs %} {% highlight js tabtitle="index.jsx" %} From f78e10d5cd72dbfa20444aec1d77212bd76dfbce Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Tue, 9 Sep 2025 20:17:05 +0530 Subject: [PATCH 02/34] Integrated latest changes at 09-09-2025 7:30:24 PM --- .../kanban/ajax-cs2/app/index.jsx | 20 +++---- .../kanban/error-cs2/app/index.jsx | 41 ++++++++------- .../kanban/error-cs2/app/index.tsx | 52 ++++++++++--------- ej2-react/kanban/accessibility.md | 18 +++---- ej2-react/kanban/cards.md | 16 +++--- ej2-react/kanban/columns.md | 16 +++--- ej2-react/kanban/data-binding.md | 36 ++++++------- ej2-react/kanban/dialog.md | 48 +++++++++-------- ej2-react/kanban/dimensions.md | 14 ++--- ej2-react/kanban/drag-and-drop.md | 20 +++---- ej2-react/kanban/getting-started.md | 15 ++++-- .../how-to/dynamically-change-columns.md | 12 ++--- ej2-react/kanban/how-to/filter-cards.md | 8 +-- .../kanban/how-to/header-double-click.md | 8 +-- ej2-react/kanban/how-to/search-cards.md | 8 +-- ej2-react/kanban/index.md | 8 +-- ej2-react/kanban/localization.md | 10 ++-- ej2-react/kanban/persistence.md | 6 +-- ej2-react/kanban/priority.md | 6 +-- ej2-react/kanban/responsive-mode.md | 14 ++--- ej2-react/kanban/sort.md | 38 +++++++------- ej2-react/kanban/style.md | 8 +-- ej2-react/kanban/swimlane.md | 16 +++--- ej2-react/kanban/tooltip.md | 10 ++-- ej2-react/kanban/validation.md | 6 +-- ej2-react/kanban/virtual-scrolling.md | 10 ++-- 26 files changed, 240 insertions(+), 224 deletions(-) diff --git a/ej2-react/code-snippet/kanban/ajax-cs2/app/index.jsx b/ej2-react/code-snippet/kanban/ajax-cs2/app/index.jsx index cb7485adb..60baf179f 100644 --- a/ej2-react/code-snippet/kanban/ajax-cs2/app/index.jsx +++ b/ej2-react/code-snippet/kanban/ajax-cs2/app/index.jsx @@ -4,24 +4,26 @@ import * as ReactDOM from 'react-dom'; import { Ajax } from '@syncfusion/ej2-base'; import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban"; function App() { - let kanban; - function componentDidMount() { + const kanbanRef = React.useRef(null); + + React.useEffect(() => { const ajax = new Ajax("https://services.syncfusion.com/react/production/api/Orders", "GET"); ajax.send(); ajax.onSuccess = (data) => { + const kanban = kanbanRef.current; if (kanban) { kanban.dataSource = JSON.parse(data); } }; - } - return ( kanban = kanban} id="kanban" keyField="ShipCountry" dataSource={data} cardSettings={{ contentField: "ShippedDate", headerField: "OrderID" }}> + }, []); + return ( - - - - + + + + - ); + ); } ReactDOM.render(, document.getElementById('kanban')); {% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/error-cs2/app/index.jsx b/ej2-react/code-snippet/kanban/error-cs2/app/index.jsx index 04e9d4766..668119e63 100644 --- a/ej2-react/code-snippet/kanban/error-cs2/app/index.jsx +++ b/ej2-react/code-snippet/kanban/error-cs2/app/index.jsx @@ -4,26 +4,29 @@ import * as ReactDOM from 'react-dom'; import { DataManager } from '@syncfusion/ej2-data'; import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban"; function App() { - let data = new DataManager({ - url: 'http://some.com/invalidUrl' - }); - let kanban; - return ( kanban = kanban} id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }} actionFailure={onActionFailure.bind(this)}> - - - - - - - ); - function onActionFailure(e) { - const span = document.createElement('span'); - if (kanban) { - kanban.element.parentNode.insertBefore(span, kanban.element); - span.style.color = "#FF0000"; - span.innerHTML = "Server exception: 404 Not found"; - } + const kanbanRef = React.useRef(null); + let data = new DataManager({ + url: 'http://some.com/invalidUrl' + }); + function onActionFailure(e) { + const span = document.createElement('span'); + const kanban = kanbanRef.current; + if (kanban) { + kanban.element.parentNode.insertBefore(span, kanban.element); + span.style.color = "#FF0000"; + span.innerHTML = "Server exception: 404 Not found"; } + } + + return ( + + + + + + + ); + } ReactDOM.render(, document.getElementById('kanban')); {% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/error-cs2/app/index.tsx b/ej2-react/code-snippet/kanban/error-cs2/app/index.tsx index 13c6d196e..2e34e0b18 100644 --- a/ej2-react/code-snippet/kanban/error-cs2/app/index.tsx +++ b/ej2-react/code-snippet/kanban/error-cs2/app/index.tsx @@ -5,33 +5,35 @@ import * as ReactDOM from 'react-dom'; import { DataManager } from '@syncfusion/ej2-data'; import { KanbanComponent, ColumnsDirective, ColumnDirective, DialogEventArgs, ActionEventArgs } from "@syncfusion/ej2-react-kanban"; -function App(){ - let data = new DataManager({ - url: 'http://some.com/invalidUrl' - }); - let kanbanObj: KanbanComponent|null; - return( - { kanbanObj = kanban }} id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }} actionFailure={onActionFailure}> - - - - - - - - ); - function onActionFailure (e: ActionEventArgs) { - const span: HTMLElement = document.createElement('span'); - if (kanbanObj) { - (kanbanObj.element.parentNode as HTMLElement).insertBefore(span, kanbanObj.element); - span.style.color = "#FF0000"; - span.innerHTML = "Server exception: 404 Not found"; - } - } -} +function App() { + let data = new DataManager({ + url: 'http://some.com/invalidUrl' + }); + const kanbanRef = React.useRef(null); -ReactDOM.render(, document.getElementById('kanban')); + function onActionFailure(e: ActionEventArgs) { + const span: HTMLElement = document.createElement('span'); + const kanban = kanbanRef.current; + if (kanban) { + (kanban.element.parentNode as HTMLElement).insertBefore(span, kanban.element); + span.style.color = "#FF0000"; + span.innerHTML = "Server exception: 404 Not found"; + } + } + return ( + + + + + + + + + ); +} + +ReactDOM.render(, document.getElementById('kanban')); {% endraw %} \ No newline at end of file diff --git a/ej2-react/kanban/accessibility.md b/ej2-react/kanban/accessibility.md index 69bcb724e..b50a35421 100644 --- a/ej2-react/kanban/accessibility.md +++ b/ej2-react/kanban/accessibility.md @@ -1,16 +1,16 @@ --- layout: post -title: Accessibility in React Kanban component | Syncfusion -description: Learn here all about Accessibility in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. +title: Accessibility in React Kanban Component | Syncfusion +description: Learn about accessibility features in the Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. control: Accessibility platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Accessibility in React Kanban component +# Accessibility in React Kanban Component -The Kanban component has been designed, keeping in mind the WAI-ARIA specifications, and applies the WAI-ARIA roles, states, and properties. This component is characterized by complete ARIA accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation. +The Kanban component is designed to meet WAI-ARIA specifications, applying roles, states, and properties to elements like cards (`.e-card`), columns (`.e-header-cells`), and dialogs to ensure accessibility for users relying on assistive technologies (AT) or keyboard navigation. This enables seamless interaction for users with disabilities, such as navigating cards with screen readers or selecting columns via keyboard. The accessibility compliance for the Kanban component is outlined below. @@ -53,12 +53,12 @@ The Kanban component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/pat ## Keyboard interaction -The Kanban component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Kanban component. +The Kanban component supports the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Kanban component. | **Press** | **To do this** | | --- | --- | -| Home | To select the first card in the kanban | -| End | To select the last card in the kanban | +| Home | Select the first card in the kanban | +| End | Select the last card in the kanban | | Arrow Up | Select the card through the up arrow | | Arrow Down | Select the card through the down arrow | | Arrow Right | Move the column selection to the right | @@ -76,11 +76,11 @@ The Kanban component followed the [keyboard interaction](https://www.w3.org/WAI/ ## Ensuring accessibility -The Kanban component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. +The Kanban component's accessibility levels is validated using [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. The accessibility compliance of the Kanban component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/kanban.html) in a new window to evaluate the accessibility of the Kanban component with accessibility tools. -{% previewsample "" %} +{% previewsample "https://ej2.syncfusion.com/accessibility/kanban.html" %} ## See also diff --git a/ej2-react/kanban/cards.md b/ej2-react/kanban/cards.md index bb4a12bc1..88cfb21cf 100644 --- a/ej2-react/kanban/cards.md +++ b/ej2-react/kanban/cards.md @@ -1,20 +1,20 @@ --- layout: post -title: Cards in React Kanban component | Syncfusion -description: Learn here all about Cards in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. -control: Cards +title: Cards in React Kanban Component | Syncfusion +description: Learn how to configure and customize cards in the Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. +control: Cards platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Cards in React Kanban component +# Cards in React Kanban Component The cards are main elements in Kanban board, which represent the task information with header and content. The header and content of a card is fetched from the corresponding mapping fields. The card layout can be customized with template also. ## Drag-and-drop -Transit or change the card position using the drag-and-drop functionality. By default, the `allowDragAndDrop` property is enabled on the Kanban board, which is used to change the card position by column-to-column or within the column. +Transit or change the card position using the drag-and-drop functionality. By default, the [allowDragAndDrop](https://ej2.syncfusion.com/react/documentation/api/kanban/#allowdraganddrop) property is enabled on the Kanban board, which is used to change the card position by column-to-column or within the column. Added dotted border on Kanban cells except the dragged clone cells when dragging, which indicates the possible ways for dropping the cards into the cells. @@ -60,11 +60,11 @@ In the following demo, the `showHeader` property is disabled on Kanban board. ## Content -The card's content is fetched from data source using the `contentField` property, which is placed inside the `cardSettings` property. If the `contentField` property is not used, card is rendered with empty content. +The card's content is fetched from `dataSource` using the `contentField` property in `cardSettings`. If `contentField` is not specified, cards render with empty content. ## Template -You can customize the default card layout using template as per your application needs. This can be achieved by template of the `cardSettings` property. +The default card layout can be customized using the `template` property in [cardSettings](https://ej2.syncfusion.com/react/documentation/api/kanban/#cardsettings) to meet application-specific needs, such as adding custom fields or styling. The following sample demonstrates a Kanban board with a custom card template. `[Class-component]` @@ -106,7 +106,7 @@ Kanban board allows to select single and multiple selection of cards when mouse * **Single**: Only one card allowed to select at a time in the Kanban board. * **Multiple**: Multiple cards are allowed to select in a board. -### Multiple Selection +### Multiple selection Select the multiple cards randomly using Ctrl + mouse click and select the multiple cards continuously using Shift + mouse click action on Kanban board. Set `Multiple` in `selectionType` to enable the multiple selection in a board. diff --git a/ej2-react/kanban/columns.md b/ej2-react/kanban/columns.md index aac3df330..342b2bd7a 100644 --- a/ej2-react/kanban/columns.md +++ b/ej2-react/kanban/columns.md @@ -1,20 +1,20 @@ --- layout: post title: Columns in React Kanban component | Syncfusion -description: Learn here all about Columns in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. -control: Columns +description: Learn how to configure columns in the Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. +control: Columns platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Columns in React Kanban component +# Columns in React Kanban Component The **Kanban** columns represent the each stage of the process. The column definitions are used as the **dataSource** schema in the Kanban. The Kanban operations such as drag-and-drop, swimlane, and toggle columns are performed based on column definitions. ## Single-key mapping -Kanban columns are categorized by mapping the **key** from the datasource using the `keyField` property. The corresponding **value** in the datasource is mapped inside the columns `keyField`. Based on this categorization, Kanban columns are split on this board. +Kanban columns are categorized by mapping the **key** from the datasource using the `keyField` property. The corresponding **value** in the datasource is mapped inside the columns [keyField](https://ej2.syncfusion.com/react/documentation/api/kanban/#keyfield). Based on this categorization, Kanban columns are split on this board. > The `keyField` property is mandatory to render the columns in the Kanban board. @@ -88,7 +88,7 @@ Kanban board allows to render a single column by mapping multiple keys using `ke ## Header text -You can provide the column header text of Kanban columns using the `headerText` property. If you have not specified any header text, it will render the header without any text. +The column header can be customized with HTML or CSS using the `template` property in `columns`. The following sample demonstrates a Kanban board with a custom column header template. ## Header template @@ -128,7 +128,7 @@ You can customize the column header with any HTML or CSS element using the `temp ## Toggle columns -Kanban allows to expand or collapse its columns using `allowToggle` inside the `columns` property. When enable the property, it will render the expand or collapse icon to the column header. +Columns can be expanded or collapsed using the `allowToggle` property in `columns`, which renders an expand/collapse icon in the header. > By default, collapsed column width is set to `50px`. @@ -206,7 +206,7 @@ In the following example, the backlog column is collapsed on initialization of K ## Drag and Drop -The Kanban component allows dynamic column reordering through drag-and-drop interactions. To enable this, set the [`allowColumnDragAndDrop`](https://ej2.syncfusion.com/react/documentation/api/kanban/#allowColumnDragAndDrop) property to true. Once enabled, users can rearrange columns by dragging a column header to a new position, with visual feedback highlighting potential drop locations. +The Kanban component allows dynamic column reordering through drag-and-drop interactions. To enable this, set the [allowColumnDragAndDrop](https://ej2.syncfusion.com/react/documentation/api/kanban/#allowColumnDragAndDrop) property to true. Once enabled, users can rearrange columns by dragging a column header to a new position, with visual feedback highlighting potential drop locations. `[Class-component]` @@ -244,7 +244,7 @@ The Kanban component allows dynamic column reordering through drag-and-drop inte Stacked headers are the additional headers to column header that will group the similar columns. -Define the grouping of columns **key** value to the `keyFields` property and provide the custom header text name to grouped columns using the `text` property, which is placed inside the `stackedHeaders` property. +Define the grouping of columns **key** value to the `keyFields` property and provide the custom header text name to grouped columns using the `text` property, which is placed inside the [stackedHeaders](https://ej2.syncfusion.com/react/documentation/api/kanban/#stackedheaders) property. In the following code, the kanban columns 'InProgress, Review' are grouped under 'Development Phase' category. diff --git a/ej2-react/kanban/data-binding.md b/ej2-react/kanban/data-binding.md index 6af692d99..ece9f4f6a 100644 --- a/ej2-react/kanban/data-binding.md +++ b/ej2-react/kanban/data-binding.md @@ -1,23 +1,23 @@ --- layout: post -title: Data binding in React Kanban component | Syncfusion -description: Learn here all about Data binding in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. -control: Data binding +title: Data Binding in React Kanban component | Syncfusion +description: Learn how to bind local and remote data to the Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. +control: Data binding platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Data binding in React Kanban component +# Data Binding in React Kanban Component -The Kanban uses `DataManager`, which supports both RESTful data service binding and JavaScript object array binding. The [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/kanban/#datasource) property of Kanban can be assigned either with the instance of `DataManager` or JavaScript object array collection, as it supports the following two data binding methods: +The Kanban uses `DataManager`, which supports both RESTful data service binding and JavaScript object array binding. The [dataSource](https://ej2.syncfusion.com/react/documentation/api/kanban/#datasource) property of Kanban can be assigned either with the instance of `DataManager` or JavaScript object array collection, as it supports the following two data binding methods: * Local data * Remote data ## Local data -To bind local JSON data to the Kanban, you can simply assign a JavaScript object array to the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/kanban/#datasource) property. The JSON object dataSource can also be provided as an instance of `DataManager` and assigned to the Kanban `dataSource` property. +To bind local JSON data to the Kanban, you can simply assign a JavaScript object array to the [dataSource](https://ej2.syncfusion.com/react/documentation/api/kanban/#datasource) property. The JSON object dataSource can also be provided as an instance of `DataManager` and assigned to the Kanban `dataSource` property. `[Class-component]` @@ -55,7 +55,7 @@ To bind local JSON data to the Kanban, you can simply assign a JavaScript object ## Remote data -To bind remote data to kanban component, assign service data as an instance of [`DataManager`](../data) to the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/kanban/#datasource) property. To interact with remote data source, provide the endpoint **url**. +To bind remote data to kanban component, assign service data as an instance of [DataManager](https://ej2.syncfusion.com/react/documentation/data/) to the [dataSource](https://ej2.syncfusion.com/react/documentation/api/kanban/#datasource) property. To interact with remote data source, provide the endpoint **url**. `[Class-component]` @@ -89,11 +89,11 @@ To bind remote data to kanban component, assign service data as an instance of [ {% previewsample "page.domainurl/code-snippet/kanban/remote-data-cs2" %} -> By default, [`DataManager`](../data) uses **ODataAdaptor** for remote data-binding. +> By default, [DataManager](https://ej2.syncfusion.com/react/documentation/data/) uses **ODataAdaptor** for remote data-binding. ### OData services -[`OData`](http://www.odata.org/documentation/odata-version-3-0/) is a standardized protocol for creating and consuming data. You can retrieve data from OData service using the DataManager. Refer to the following code example for remote Data binding using OData service. +[OData](http://www.odata.org/documentation/odata-version-3-0/) is a standardized protocol for creating and consuming data. You can retrieve data from OData service using the DataManager. Refer to the following code example for remote Data binding using OData service. `[Class-component]` @@ -129,7 +129,7 @@ To bind remote data to kanban component, assign service data as an instance of [ ### OData v4 services -The ODataV4 is an improved version of OData protocols, and the [`DataManager`](../data) can also retrieve and consume OData v4 services. For more details on OData v4 services, refer to the [`odata documentation`](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197). To bind OData v4 service, use the **ODataV4Adaptor**. +The ODataV4 is an improved version of OData protocols, and the [DataManager](https://ej2.syncfusion.com/react/documentation/data/) can also retrieve and consume OData v4 services. For more details on OData v4 services, refer to the [odata documentation](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197). To bind OData v4 service, use the **ODataV4Adaptor**. `[Class-component]` @@ -235,7 +235,7 @@ ReactDOM.render(, document.getElementById('kanban')); ``` {% endraw %} -Below server-side controller code to get the Kanban data. +Below is the server-side controller code to fetch Kanban data. ```ts @@ -329,7 +329,7 @@ ReactDOM.render(, document.getElementById('kanban')); ``` {% endraw %} -The server-side controller code to handle the CRUD operations are as follows. +The server-side controller code to handle CRUD operations is as follows. ```ts @@ -421,7 +421,7 @@ It is possible to create your own custom adaptor by extending the built-in avail ### Sending additional parameters to the server -To add a custom parameter to the data request, use the **addParams** method of **Query** class. Assign the **Query** object with additional parameters to the kanban [`query`](https://ej2.syncfusion.com/react/documentation/api/kanban/#query) property. +To add a custom parameter to the data request, use the **addParams** method of **Query** class. Assign the **Query** object with additional parameters to the kanban [query](https://ej2.syncfusion.com/react/documentation/api/kanban/#query) property. `[Class-component]` @@ -455,14 +455,14 @@ To add a custom parameter to the data request, use the **addParams** method of * {% previewsample "page.domainurl/code-snippet/kanban/additional-cs2" %} -> The parameters added using the [`query`](https://ej2.syncfusion.com/react/documentation/api/kanban/#query) property will be sent along with the data request for every kanban action. +> The parameters added using the [query](https://ej2.syncfusion.com/react/documentation/api/kanban/#query) property will be sent along with the data request for every kanban action. ### Handling HTTP error During server interaction from the kanban, some server-side exceptions may occur, and you can acquire those error messages or exception details -in client-side using the [`actionFailure`](https://ej2.syncfusion.com/react/documentation/api/kanban/#actionfailure) event. +in client-side using the [actionFailure](https://ej2.syncfusion.com/react/documentation/api/kanban/#actionfailure) event. -The argument passed to the [`actionFailure`](https://ej2.syncfusion.com/react/documentation/api/kanban/#actionfailure) event contains the error details returned from the server. +The argument passed to the [actionFailure](https://ej2.syncfusion.com/react/documentation/api/kanban/#actionfailure) event contains the error details returned from the server. `[Class-component]` @@ -496,11 +496,11 @@ The argument passed to the [`actionFailure`](https://ej2.syncfusion.com/react/do {% previewsample "page.domainurl/code-snippet/kanban/error-cs2" %} -> The [`actionFailure`](https://ej2.syncfusion.com/react/documentation/api/kanban/#actionfailure) event will be triggered not only for the server errors, but also when there is an exception while processing the kanban actions. +> The [actionFailure](https://ej2.syncfusion.com/react/documentation/api/kanban/#actionfailure) event will be triggered not only for the server errors, but also when there is an exception while processing the kanban actions. ## Loading data via ajax -You can use Kanban [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/kanban/#datasource) property to bind the datasource to Kanban from external ajax request. In the following code, we have fetched the datasource from the server using ajax request and provided that to the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/kanban/#datasource) property by using the **onSuccess** event of ajax. +You can use Kanban [dataSource](https://ej2.syncfusion.com/react/documentation/api/kanban/#datasource) property to bind the datasource to Kanban from external ajax request. In the following code, we have fetched the datasource from the server using ajax request and provided that to the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/kanban/#datasource) property by using the **onSuccess** event of ajax. `[Class-component]` diff --git a/ej2-react/kanban/dialog.md b/ej2-react/kanban/dialog.md index c2d4c34c1..a65158841 100644 --- a/ej2-react/kanban/dialog.md +++ b/ej2-react/kanban/dialog.md @@ -1,16 +1,16 @@ --- layout: post -title: Dialog in React Kanban component | Syncfusion -description: Learn here all about Dialog in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. +title: Dialog Editing in React Kanban component | Syncfusion +description: Learn how to use the dialog module in the Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. control: Dialog platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Dialog in React Kanban component +# Dialog in React Kanban Component -The Kanban provides built-in support to add, edit and delete a card using dialog module. User can edit a card using the following ways. +The Kanban component provides a built-in dialog module for adding, editing, and deleting cards, configured through the [dialogSettings](https://ej2.syncfusion.com/react/documentation/api/kanban/#dialogsettings) property. User can edit a card using the following ways. * Built-in dialog module * Custom Fields @@ -18,21 +18,23 @@ The Kanban provides built-in support to add, edit and delete a card using dialog ## Default Dialog -When double-click on the cards, the dialog is opened with below fields to edit a card. This dialog contains `Delete`, `Save` and `Cancel` buttons. +Double-clicking a card opens the dialog with fields mapped from `cardSettings` and `swimlaneSettings` for editing. The dialog includes `Save`, `Delete`, and `Cancel` buttons: -* To edit a card, modify the card details and click the `Save` button. -* To delete a card, click `Delete` button. -* Click on the `Cancel` button to cancel the editing action. +- **Save**: Updates the card with modified details. +- **Delete**: Removes the selected card. +- **Cancel**: Discards changes. The dialog displays with the following fields which mapped to dialog fields by default. Key | Type | Text -----|-----|---- -cardSettings.headerField | Input | ID -keyField | DropDown | - -cardSettings.contentField | TextArea | - -cardSettings.priority(If applicable) | Numeric | - -swimlaneSettings.keyField(If applicable) | DropDown | - +`cardSettings.headerField` | Input | ID +`keyField` | DropDown | - +`cardSettings.contentField`| TextArea | - +`cardSettings.priority` (If applicable) | Numeric | - +`swimlaneSettings.keyField` (If applicable) | DropDown | - + +The following sample demonstrates the default dialog for card editing. `[Class-component]` @@ -68,9 +70,7 @@ swimlaneSettings.keyField(If applicable) | DropDown | - ## Custom Fields -You can change the default fields of dialog using `fields` property inside the `dialogSettings` property. The `key` property used to map the dataSource value and rendered the corresponding component based on specified `type` property. - -The following types are available in dialog fields. +Customize dialog fields using the `fields` property in `dialogSettings`. The `key` property maps to the `dataSource` value, and the `type` property specifies the component type. Available types include: * String * Numeric @@ -81,6 +81,8 @@ The following types are available in dialog fields. > If `type` is not defined in the fields, then it renders as the HTML input element in dialog. +The following sample demonstrates custom dialog fields. + `[Class-component]` {% tabs %} @@ -115,7 +117,7 @@ The following types are available in dialog fields. ### Custom Fields label -By default, the fields `key` mapping value is considered as a `label` and you can change this label by using `text` property. +By default, the fields `key` mapping value is considered as a `label` and you can change this label by using `text` property. The following sample shows custom labels for dialog fields. `[Class-component]` @@ -151,7 +153,7 @@ By default, the fields `key` mapping value is considered as a `label` and you ca ### Fields Validation -The dialog fields can be validated while click on the `Save` button. This can be achieved by using `validationRules` property. +The dialog fields can be validated while click on the `Save` button. This can be achieved by using `validationRules` property. The following sample demonstrates field validation. `[Class-component]` @@ -223,7 +225,7 @@ Using the dialog template, you can render your own dialog by defining the `templ ## Prevent Dialog -The Kanban allows to prevent to open a dialog on card double-click by enabling `args.cancel` in `dialogOpen` event. +Prevent the dialog from opening on card double-click by setting `args.cancel` to `true` in the [dialogOpen](https://ej2.syncfusion.com/react/documentation/api/kanban/#dialogopen) event. The following sample demonstrates preventing dialog opening. `[Class-component]` @@ -259,15 +261,15 @@ The Kanban allows to prevent to open a dialog on card double-click by enabling ` ## Persisting data in server -The modified card data can be persisted in the database using the RESTful web services. All the CRUD operations in the Kanban are done through [`DataManager`](../data). The `DataManager` has an option to bind all the CRUD related data in server-side. +The modified card data can be persisted in the database using the RESTful web services. All the CRUD operations in the Kanban are done through [DataManager](https://ej2.syncfusion.com/react/documentation/data/). The `DataManager` has an option to bind all the CRUD related data in server-side. > For your information, the ODataAdaptor persists data in the server as per OData protocol. -In the below section covers how to get the edited data details on the server-side using the [`UrlAdaptor`](../../data/adaptors.html#url-adaptor). +In the below section covers how to get the edited data details on the server-side using the [UrlAdaptor](https://ej2.syncfusion.com/react/documentation/data/adaptors#url-adaptor). ### URL adaptor -You can use the [`UrlAdaptor`](../../data/adaptors.html#url-adaptor) of `DataManager` when binding data source for remote data. In the initial load of Kanban, data are fetched from remote data and bound to the Kanban using `url` property of `DataManager`. +You can use the [UrlAdaptor](https://ej2.syncfusion.com/react/documentation/data/adaptors#url-adaptor) of `DataManager` when binding data source for remote data. In the initial load of Kanban, data are fetched from remote data and bound to the Kanban using `url` property of `DataManager`. You can map the CRUD operation in Kanban can be mapped to server-side controller actions using the properties `insertUrl`, `removeUrl`, `updateUrl`, and `crudUrl`. @@ -348,7 +350,7 @@ ReactDOM.render(, document.getElementById('kanban')); ``` {% endraw %} -The server-side controller code to handle the CRUD operations are as follows. +The server-side controller code to handle CRUD operations is as follows. ```ts diff --git a/ej2-react/kanban/dimensions.md b/ej2-react/kanban/dimensions.md index 0668b3e0e..e05b740e8 100644 --- a/ej2-react/kanban/dimensions.md +++ b/ej2-react/kanban/dimensions.md @@ -1,16 +1,16 @@ --- layout: post -title: Dimensions in React Kanban component | Syncfusion -description: Learn here all about Dimensions in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. +title: Configuring Dimensions in React Kanban component | Syncfusion +description: Learn how to configure height and width in the Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. control: Dimensions platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Dimensions in React Kanban component +# Dimensions in React Kanban Component -The Kanban dimensions refers to both height and width of the entire layout and it accepts three types of values. +The Kanban dimensions refers to both [height](https://ej2.syncfusion.com/react/documentation/api/kanban/#height) and [width](https://ej2.syncfusion.com/react/documentation/api/kanban/#width) of the entire layout and it accepts three types of values. * Auto * Pixel @@ -18,7 +18,7 @@ The Kanban dimensions refers to both height and width of the entire layout and i ## Auto height and width -When height and width of the Kanban are set to `auto`, it will try as hard as possible to keep an element the same width as its parent container. In other words, the parent container that holds Kanban, its width or height will be the sum of its children. By default, Kanban is assigned with `auto` values for both the height and width properties. +When `height` and `width` of the Kanban are set to `auto`, it will try as hard as possible to keep an element the same width as its parent container. In other words, the parent container that holds Kanban, its width or height will be the sum of its children. By default, Kanban is assigned with `auto` values for both the height and width properties. `[Class-component]` @@ -54,7 +54,7 @@ When height and width of the Kanban are set to `auto`, it will try as hard as po ## Height and width in pixel -The Kanban height and width will be rendered exactly as per the given pixel values. It accepts both string and number values. +The Kanban `height` and `width` will be rendered exactly as per the given pixel values. It accepts both string and number values. `[Class-component]` @@ -90,7 +90,7 @@ The Kanban height and width will be rendered exactly as per the given pixel valu ## Height and width in percentage -When height and width of the Kanban are given in percentage, it will make the Kanban as wide as the parent container. +When `height` and `width` of the Kanban are given in percentage, it will make the Kanban as wide as the parent container. `[Class-component]` diff --git a/ej2-react/kanban/drag-and-drop.md b/ej2-react/kanban/drag-and-drop.md index 349fe206e..abef90867 100644 --- a/ej2-react/kanban/drag-and-drop.md +++ b/ej2-react/kanban/drag-and-drop.md @@ -1,14 +1,14 @@ --- layout: post -title: Drag and drop in React Kanban component | Syncfusion -description: Learn here all about Drag and drop in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. +title: Drag and Drop in React Kanban component | Syncfusion +description: Learn how to enable drag-and-drop for cards in the Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. control: Drag and drop platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Drag and drop in React Kanban component +# Drag and Drop in React Kanban Component All cards can be dragged and dropped across the columns or within the columns or swimlane row or kanban to an external source and vice versa. @@ -21,7 +21,7 @@ The following drag and drop types are available in the Kanban board. * Kanban to Kanban * Kanban to External source and vice versa. -> Dropped card position varies based on the `sortSettings` property. +> Dropped card position varies based on the [sortSettings](https://ej2.syncfusion.com/react/documentation/api/kanban/#sortsettings) property. ## Internal drag and drop @@ -32,7 +32,7 @@ Allows the user to drag and drop the cards within the kanban board. Based on thi ### Column drag and drop -By default, all cards can be dragged and dropped across the columns and within the columns. You cannot drag and drop the cards when disabling the `allowDragAndDrop` property. +By default, all cards can be dragged and dropped across the columns and within the columns. You cannot drag and drop the cards when disabling the [allowDragAndDrop](https://ej2.syncfusion.com/react/documentation/api/kanban/#allowdraganddrop) property. > You can prevent the drag or drop behavior of the particular column by disabling the `allowDrag` or `allowDrop` property. > You can also control the flow of transition cards between the columns by using the `transitionColumns` property. @@ -75,7 +75,7 @@ In the following example, disable the drag and drop behavior on the Kanban board By default, Swimlane allows drag and drop across the columns within the swimlane row. Kanban does not allow dragging the cards across the swimlane rows. -Enabling the `dragAndDrop` property allows you to drag the cards across the swimlane rows, which is specified inside the `swimlaneSettings` property. +Enabling the [dragAndDrop](https://ej2.syncfusion.com/react/documentation/api/kanban/#allowdraganddrop) property allows you to drag the cards across the swimlane rows, which is specified inside the [swimlaneSettings](https://ej2.syncfusion.com/react/documentation/api/kanban/#swimlanesettings) property. `[Class-component]` @@ -115,11 +115,11 @@ Allows the user to drag and drop the cards from one kanban to another kanban or ### Kanban to kanban -Drag and drop the card from one kanban to another kanban and vice versa. This can be achieved by specifying the `externalDropId` property which is used to specify the id of the dropped kanban element and the `dragStop` event which is used to delete the card on dragged Kanban and add the card on dropped Kanban using the `deleteCard` and `addCard` public methods. +Drag and drop the card from one kanban to another kanban and vice versa. This can be achieved by specifying the `externalDropId` property which is used to specify the id of the dropped kanban element and the [dragStop](https://ej2.syncfusion.com/react/documentation/api/kanban/#dragstop) event which is used to delete the card on dragged Kanban and add the card on dropped Kanban using the [deleteCard](https://ej2.syncfusion.com/react/documentation/api/kanban/#deletecard) and [addCard](https://ej2.syncfusion.com/react/documentation/api/kanban/#addcard) public methods. > Before adding a card to dropped kanban, you can manually change the card data `headerField` when the same card data `headerField` is dropped to another Kanban. -In the following example, Drag the card from one Kanban and drop it into another kanban using the `dragStop` event. In this event, remove the card from the dragged Kanban by using the `deleteCard` public method and add the card to the dropped Kanban by using the `addCard` public method. +In the following example, Drag the card from one Kanban and drop it into another kanban using the [dragStop](https://ej2.syncfusion.com/react/documentation/api/kanban/#dragstop) event. In this event, remove the card from the dragged Kanban by using the [deleteCard](https://ej2.syncfusion.com/react/documentation/api/kanban/#deletecard) public method and add the card to the dropped Kanban by using the [addCard](https://ej2.syncfusion.com/react/documentation/api/kanban/#addcard) public method. `[Class-component]` @@ -157,7 +157,7 @@ In the following example, Drag the card from one Kanban and drop it into another Drag the card from the Kanban board and drop it to the Treeview component and vice versa. -In the following sample, remove the data from the Kanban board using the `deleteCard` public method and add to the Treeview component using the `addNodes` public method at Kanban `dragStop` event when dragging the card and dropping it to the Treeview component. Remove the data from Treeview using the `removeNodes` public method and add to Kanban board using the `openDialog` public method when dragging the list from the Treeview component and dropping it to the kanban board. +In the following sample, remove the data from the Kanban board using the [deleteCard](https://ej2.syncfusion.com/react/documentation/api/kanban/#deletecard) public method and add to the Treeview component using the `addNodes` public method at Kanban [dragStop](https://ej2.syncfusion.com/react/documentation/api/kanban/#dragstop) event when dragging the card and dropping it to the Treeview component. Remove the data from Treeview using the `removeNodes` public method and add to Kanban board using the [openDialog](https://ej2.syncfusion.com/react/documentation/api/kanban/#opendialog) public method when dragging the list from the Treeview component and dropping it to the kanban board. `[Class-component]` @@ -195,7 +195,7 @@ In the following sample, remove the data from the Kanban board using the `delete Drag the card from the Kanban board and drop it to the Schedule component and vice versa. -In the following sample, remove the data from the Kanban board using the `deleteCard` public method and add to the schedule component using the `addNodes` public method at Kanban `dragStop` event when dragging the card and dropping it to the Treeview component. Remove the data from Treeview using the `removeNodes` public method and add to Kanban board using the `addCard` public method when dragging the list from the Treeview component and dropping it to the kanban board. +In the following sample, remove the data from the Kanban board using the [deleteCard](https://ej2.syncfusion.com/react/documentation/api/kanban/#deletecard) public method and add to the schedule component using the `addNodes` public method at Kanban [dragStop](https://ej2.syncfusion.com/react/documentation/api/kanban/#dragstop) event when dragging the card and dropping it to the Treeview component. Remove the data from Treeview using the `removeNodes` public method and add to Kanban board using the [addCard](https://ej2.syncfusion.com/react/documentation/api/kanban/#addcard) public method when dragging the list from the Treeview component and dropping it to the kanban board. `[Class-component]` diff --git a/ej2-react/kanban/getting-started.md b/ej2-react/kanban/getting-started.md index fbc86e666..ce6fc2426 100644 --- a/ej2-react/kanban/getting-started.md +++ b/ej2-react/kanban/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started with React Kanban component | Syncfusion +title: Getting started with React Kanban Component | Syncfusion description: Checkout and learn about Getting started with React Kanban component of Syncfusion Essential JS 2 and more details. control: Getting started platform: ej2-react @@ -8,10 +8,17 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting Started +# Getting Started with React Kanban Component This article provides a step-by-step introduction to get started with the Syncfusion® React Kanban component. +## Overview + +The Kanban component consists of: +- **Cards**: Represent tasks, mapped to a `dataSource` via `cardSettings`. +- **Columns**: Define workflow stages, mapped using `keyField`. +- **Swimlanes**: Group cards by categories, configured with `swimlaneSettings`. + ## Prerequisites [System requirements for Syncfusion® React UI components](https://ej2.syncfusion.com/react/documentation/system-requirement) @@ -142,7 +149,7 @@ The output will display the kanban header. ## Populating cards -To populate the empty Kanban with cards, define the local JSON data or remote data using the `dataSource` property. To define `dataSource`, the mandatory fields in JSON object should be relevant to `keyField`. In the following example, you can see the cards defined with default fields such as ID, Summary, and Status. +To populate the empty Kanban with cards, define the local JSON data or remote data using the [dataSource](https://ej2.syncfusion.com/react/documentation/api/kanban/#datasource) property. To define `dataSource`, the mandatory fields in JSON object should be relevant to [keyField](https://ej2.syncfusion.com/react/documentation/api/kanban/#keyfield). In the following example, you can see the cards defined with default fields such as ID, Summary, and Status. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -160,7 +167,7 @@ To populate the empty Kanban with cards, define the local JSON data or remote da ## Enable swimlane -`Swimlane` can be enabled by mapping the fields `swimlaneSettings.keyField` to appropriate column name in dataSource. This enables the grouping of the cards based on the mapped column values. +`Swimlane` can be enabled by mapping the fields [swimlaneSettings.keyField](https://ej2.syncfusion.com/react/documentation/api/kanban/#swimlanesettings) to appropriate column name in dataSource. This enables the grouping of the cards based on the mapped column values. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/kanban/how-to/dynamically-change-columns.md b/ej2-react/kanban/how-to/dynamically-change-columns.md index bc28049d0..30e03666f 100644 --- a/ej2-react/kanban/how-to/dynamically-change-columns.md +++ b/ej2-react/kanban/how-to/dynamically-change-columns.md @@ -1,18 +1,18 @@ --- layout: post -title: Dynamically change columns in React Kanban component | Syncfusion -description: Learn here all about Dynamically change columns in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. -control: Dynamically change columns +title: Dynamically Update Columns in React Kanban Component | Syncfusion +description: Learn here all about Dynamically change columns in the Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. +control: Dynamically change columns platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Dynamically change columns in React Kanban component +# Dynamically Update Columns in React Kanban Component -You can dynamically change the Kanban columns by using the [`columns`](https://ej2.syncfusion.com/react/documentation/api/kanban/#columns) property. +You can dynamically change the Kanban columns by using the [columns](https://ej2.syncfusion.com/react/documentation/api/kanban/#columns) property. -In the below sample, you can dynamically change the [`allowToggle`](https://ej2.syncfusion.com/react/documentation/api/kanban/columnsModel/#allowtoggle) property at the particular column when you click on the button. You can also change the initially created columns to the new Kanban columns by using the [`columns`](https://ej2.syncfusion.com/react/documentation/api/kanban/#columns) property when you click on the button. +In the below sample, you can dynamically change the [allowToggle](https://ej2.syncfusion.com/react/documentation/api/kanban/columnsModel/#allowtoggle) property at the particular column when you click on the button. You can also change the initially created columns to the new Kanban columns by using the [columns](https://ej2.syncfusion.com/react/documentation/api/kanban/#columns) property when you click on the button. `[Class-component]` diff --git a/ej2-react/kanban/how-to/filter-cards.md b/ej2-react/kanban/how-to/filter-cards.md index 53746de9b..4e5cd450c 100644 --- a/ej2-react/kanban/how-to/filter-cards.md +++ b/ej2-react/kanban/how-to/filter-cards.md @@ -1,16 +1,16 @@ --- layout: post -title: Filter cards in React Kanban component | Syncfusion -description: Learn here all about Filter cards in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. +title: Filter Cards in Syncfusion React Kanban component | Syncfusion +description: Learn how to filter cards in the Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. control: Filter cards platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Filter cards in React Kanban component +# Filter Cards in React Kanban Component -You can filter the collection of cards from the dataSource and display it on the Kanban board by using the [`query`](https://ej2.syncfusion.com/react/documentation/api/kanban/#query) property. +You can filter the collection of cards from the dataSource and display it on the Kanban board by using the [query](https://ej2.syncfusion.com/react/documentation/api/kanban/#query) property. In the below sample, you can filter the cards based on the ‘where’ query and display the filtered data to the Kanban board. diff --git a/ej2-react/kanban/how-to/header-double-click.md b/ej2-react/kanban/how-to/header-double-click.md index 4232fbf19..5557e6622 100644 --- a/ej2-react/kanban/how-to/header-double-click.md +++ b/ej2-react/kanban/how-to/header-double-click.md @@ -1,16 +1,16 @@ --- layout: post -title: Header double click in React Kanban component | Syncfusion -description: Learn here all about Header double click in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. +title: Handle Header Double-Click in React Kanban component | Syncfusion +description: Learn how to handle column header double-click events in the Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. control: Header double click platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Header double click in React Kanban component +# Handle Header Double-Click in React Kanban Component -You can bind the header double click event by using the [`dataBound`](https://ej2.syncfusion.com/react/documentation/api/kanban/#dataBound) event at the initial rendering. You can get the column header text when you double click on the headers. +You can bind the header double click event by using the [dataBound](https://ej2.syncfusion.com/react/documentation/api/kanban/#dataBound) event at the initial rendering. You can get the column header text when you double click on the headers. `[Class-component]` diff --git a/ej2-react/kanban/how-to/search-cards.md b/ej2-react/kanban/how-to/search-cards.md index 1fbad838e..2898be7c1 100644 --- a/ej2-react/kanban/how-to/search-cards.md +++ b/ej2-react/kanban/how-to/search-cards.md @@ -1,16 +1,16 @@ --- layout: post -title: Search cards in React Kanban component | Syncfusion -description: Learn here all about Search cards in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. +title: Search Cards in React Kanban component | Syncfusion +description: Learn how to search cards in the Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. control: Search cards platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Search cards in React Kanban component +# Search Cards in React Kanban Component -You can search the cards in Kanban by using the `query` property. +The Kanban component enables searching cards in the `dataSource`. You can search the cards in Kanban by using the [query](https://ej2.syncfusion.com/react/documentation/api/kanban/#query) property. In the following sample, the searching operation starts as soon as you start typing characters in the external text box. It will search the cards based on the `Id` and `Summary` using the `search` query with `contains` operator. diff --git a/ej2-react/kanban/index.md b/ej2-react/kanban/index.md index 33cbc0e33..671fbfc9c 100644 --- a/ej2-react/kanban/index.md +++ b/ej2-react/kanban/index.md @@ -1,21 +1,21 @@ --- layout: post -title: Index in React Kanban component | Syncfusion +title: Index in React Kanban Component | Syncfusion description: Learn here all about Index in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. -control: Index +control: Index platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Index in React Kanban component +# Index in React Kanban Component The **Kanban** board visually depicts work at various stages of a process using columns, cards, and swimlane. ## Key Features * **Drag-and-drop** - Provided smooth drag-and-drop support to cards to flow various stages of Kanban. -* **Data Binding** - Bind the Kanban component with an array of JSON objects or `DataManager`, which supports OData and remote web service binding. +* **Data Binding** - Bind the Kanban component with an array of JSON objects or [DataManager](https://ej2.syncfusion.com/react/documentation/data/), which supports OData and remote web service binding. * **Swimlane** – Supports Swimlane to group the cards based on specified key. * **Template** - Provided templating option to render card, column header, swimlane header, and tooltip. * **Stacked Headers** - Grouped the related headers with the common header. diff --git a/ej2-react/kanban/localization.md b/ej2-react/kanban/localization.md index fefb465cb..8834d4fe8 100644 --- a/ej2-react/kanban/localization.md +++ b/ej2-react/kanban/localization.md @@ -1,16 +1,16 @@ --- layout: post -title: Localization in React Kanban component | Syncfusion -description: Learn here all about Localization in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. +title: Localization and RTL in React Kanban component | Syncfusion +description: Learn how to localize text and enable right-to-left (RTL) support in the Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. control: Localization platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Localization in React Kanban component +# Localization in React Kanban Component -The localization library allows you to localize the default text content of the Kanban to different cultures using the `locale` property. +The localization library allows you to localize the default text content of the Kanban to different cultures using the [locale](https://ej2.syncfusion.com/react/documentation/api/kanban/#locale) property. In Kanban, total count and min or max count text alone will be localized based on culture. @@ -73,7 +73,7 @@ The following example demonstrates the Kanban in `Deutsch` culture. ## Right to left (RTL) -The Kanban provides an option to switch its text direction and layout from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable right-to-left mode in Kanban, set the `enableRtl` to true. +The Kanban provides an option to switch its text direction and layout from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable right-to-left mode in Kanban, set the [enableRtl](https://ej2.syncfusion.com/react/documentation/api/kanban/#enablertl) to true. `[Class-component]` diff --git a/ej2-react/kanban/persistence.md b/ej2-react/kanban/persistence.md index 43fae7144..618257ab4 100644 --- a/ej2-react/kanban/persistence.md +++ b/ej2-react/kanban/persistence.md @@ -8,11 +8,11 @@ documentation: ug domainurl: ##DomainURL## --- -# Persistence in React Kanban component +# Persistence in React Kanban Component -State persistence refers to the Kanban state maintained in the browser's [`localStorage`](https://www.w3schools.com/html/html5_webstorage.asp#) even if the browser is refreshed or if you move to the next page within the browser. +State persistence refers to the Kanban state maintained in the browser's [localStorage](https://www.w3schools.com/html/html5_webstorage.asp#) even if the browser is refreshed or if you move to the next page within the browser. -State persistence stores Kanban datasource, column and swimlane expand/collapse state in the local storage when the [`enablePersistence`](https://ej2.syncfusion.com/react/documentation/api/kanban/#enablepersistence) is defined as true. +State persistence stores Kanban datasource, column and swimlane expand/collapse state in the local storage when the [enablePersistence](https://ej2.syncfusion.com/react/documentation/api/kanban/#enablepersistence) is defined as true. `[Class-component]` diff --git a/ej2-react/kanban/priority.md b/ej2-react/kanban/priority.md index 4ee2bea90..12b14d0df 100644 --- a/ej2-react/kanban/priority.md +++ b/ej2-react/kanban/priority.md @@ -1,14 +1,14 @@ --- layout: post -title: Priority in React Kanban component | Syncfusion +title: Priority in React Kanban Component | Syncfusion description: Learn here all about Priority in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. -control: Priority +control: Priority platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Priority in React Kanban component +# Priority in React Kanban Component By default, the Kanban cards are initially placed and drop the card inside the columns based on JSON data orders. diff --git a/ej2-react/kanban/responsive-mode.md b/ej2-react/kanban/responsive-mode.md index 1e9efaacc..8f4f04c9f 100644 --- a/ej2-react/kanban/responsive-mode.md +++ b/ej2-react/kanban/responsive-mode.md @@ -1,6 +1,6 @@ --- layout: post -title: Responsive mode in React Kanban component | Syncfusion +title: Responsive Mode in React Kanban component | Syncfusion description: Learn here all about Responsive mode in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. control: Responsive mode platform: ej2-react @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Responsive mode in React Kanban component +# Responsive Mode in React Kanban Component The Kanban component has support for responsive behavior based on the client browser's width and height. @@ -19,13 +19,13 @@ Possible layouts are: * Default Layout * Swimlane Layout -### Default Layout +### Default layout Kanban user interface is customized and redesigned for the best view on small screens. In responsive mode, the first column occupies 80% and the second column occupies 20% of the screen layout. Tap and hold the Kanban card to drag and drop it. Swipe left or right to view the columns. ![kanban](./images/default-layout.PNG) -### Swimlane Layout +### Swimlane layout Kanban swimlane header is rendered with menu icon on top of the kanban board. It will show all the available swimlane groups of the header text with a popup when clicking the menu icon. Swimlane selected grouped header text resultant data is rendered on the Kanban board. By default, the first swimlane grouped header text is selected and the resultant data is shown on the Kanban board. The Kanban board data will be changed when changing the swimlane group header text. @@ -41,15 +41,15 @@ Column scrolling will be shown when exceeding the screen size in the columns. Select particular cards in the Kanban board by tapping the card. -### Single Selection +### Single selection Single card will be selected when you tap the card once and selection will be removed when you select another card. ![kanban](./images/single-selection.PNG) -### Multiple Selection +### Multiple selection -Enable [`selectionType`](https://ej2.syncfusion.com/react/documentation/api/kanban/cardSettingsModel/#selectiontype) as `Multiple` to select multiple cards. It will open the popup on the screen top. Selected card header text will be shown when selecting single card with a tap and hold action. If single card is selected, only tap action is required to select multiple cards. Multiple Selected card count will be shown on the popup when selecting multiple cards. +Enable [selectionType](https://ej2.syncfusion.com/react/documentation/api/kanban/cardSettingsModel/#selectiontype) as `Multiple` to select multiple cards. It will open the popup on the screen top. Selected card header text will be shown when selecting single card with a tap and hold action. If single card is selected, only tap action is required to select multiple cards. Multiple Selected card count will be shown on the popup when selecting multiple cards. ![kanban](./images/single-multiple.PNG) diff --git a/ej2-react/kanban/sort.md b/ej2-react/kanban/sort.md index 1f6b5375d..202a3f22f 100644 --- a/ej2-react/kanban/sort.md +++ b/ej2-react/kanban/sort.md @@ -1,28 +1,28 @@ --- layout: post -title: Sort in React Kanban component | Syncfusion +title: Card Sorting in React Kanban Component | Syncfusion description: Learn here all about Sort in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. -control: Sort +control: Sort platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Sort in React Kanban component +# Card Sorting in React Kanban Component -The Kanban provides built-in support to arrange the cards in their columns based on the JSON data order and drop the cards in the columns based on the dropped clone. Initially, users can change the arrangement of cards in the columns and position of the dropped card by using the [`sortBy`](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#sortby) property. The [`sortBy`](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#sortby) property contains three enumeration values as follows. +The Kanban provides built-in support to arrange the cards in their columns based on the JSON data order and drop the cards in the columns based on the dropped clone. Initially, users can change the arrangement of cards in the columns and position of the dropped card by using the [sortBy](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#sortby) property. The [sortBy](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#sortby) property contains three enumeration values as follows. * Index * DataSourceOrder * Custom -## Index +## Index sorting -SortBy `Index` property can be used with or without [`field`](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) mapping. +SortBy `Index` property can be used with or without [field](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) mapping. ### Index without field mapping -By default, SortBy `Index` property support without any [`field`](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) mapping. In this behavior, cards are loaded based on the JSON data order and cards are dropped based on the dropped clone. +By default, SortBy `Index` property support without any [field](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) mapping. In this behavior, cards are loaded based on the JSON data order and cards are dropped based on the dropped clone. `[Class-component]` @@ -58,23 +58,23 @@ By default, SortBy `Index` property support without any [`field`](https://ej2.sy ### Index with field mapping -SortBy `Index` property also supports with [`field`](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) mapping. In this behavior, cards are loaded based on mapping `field` values, and cards are dropped based on the dropped clone. +SortBy `Index` property also supports with [field](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) mapping. In this behavior, cards are loaded based on mapping `field` values, and cards are dropped based on the dropped clone. Cards are placed in a particular position in the columns where you can drop the cards by specifying the [`field`](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) property, which is mapped from the data source. This property allows the users to drop the cards in the Kanban board where the dropped clone is created exactly. It is also helpful to render the cards based on the [`field`](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) property value. -> The [`field`](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) property mapping key value must be in `number` format. +> The [field](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) property mapping key value must be in `number` format. -The following cases will dynamically change their [`field`](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) value when dropping the cards. +The following cases will dynamically change their [field](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) value when dropping the cards. -* If the cell has no cards, the dropped card [`field`](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) value does not change. +* If the cell has no cards, the dropped card [field](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) value does not change. -* If the cell has one card and dropped a card to the last position or previous/next cards that do not have continuous order, then the dropped card [`field`](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) value will be changed based on their previous card value. +* If the cell has one card and dropped a card to the last position or previous/next cards that do not have continuous order, then the dropped card [field](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) value will be changed based on their previous card value. -* If the cell has one card and dropped a card on the previous position, then it will compare both the values, and the dropped card [`field`](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) value will be changed if the cards have continuous order otherwise values will not be changed. +* If the cell has one card and dropped a card on the previous position, then it will compare both the values, and the dropped card [field](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) value will be changed if the cards have continuous order otherwise values will not be changed. -* When the previous and next cards do not have continuous order, the dropped card [`field`](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) value will be changed based on the previous card value. +* When the previous and next cards do not have continuous order, the dropped card [field](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) value will be changed based on the previous card value. -* When the previous and next cards have continuous order or odd/even value, then the [`field`](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) value of the dropped card and the cards followed by the dropped card will be changed based on the **previous** card value with continuous order. +* When the previous and next cards have continuous order or odd/even value, then the [field](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) value of the dropped card and the cards followed by the dropped card will be changed based on the **previous** card value with continuous order. For Example, **Continuous Order** - @@ -119,7 +119,7 @@ and Column B has Card D with priority value `5`, then the Dropped Card D will be ## DataSource Order -The SortBy `DataSourceOrder` property does not require any [`field`](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) mapping. In this behavior, cards are loaded based on the JSON data order, and also cards are dropped based on the JSON data order. +The SortBy `DataSourceOrder` property does not require any [field](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) mapping. In this behavior, cards are loaded based on the JSON data order, and also cards are dropped based on the JSON data order. `[Class-component]` @@ -157,7 +157,7 @@ The SortBy `DataSourceOrder` property does not require any [`field`](https://ej2 ### Custom with field mapping -The SortBy `Custom` property must require datasource [`field`](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) mapping. In this behavior, cards are loaded based on the [`field`](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) mapping value and also cards are dropped based on the [`field`](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) mapping value. +The SortBy `Custom` property must require datasource [field](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) mapping. In this behavior, cards are loaded based on the [field](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) mapping value and also cards are dropped based on the [field](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#field) mapping value. `[Class-component]` @@ -191,9 +191,9 @@ The SortBy `Custom` property must require datasource [`field`](https://ej2.syncf {% previewsample "page.domainurl/code-snippet/kanban/custom-mapping-cs2" %} -## Change the direction +## Sorting direction -Kanban board also provides support for aligning the cards in the columns using the [`direction`](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#direction) property inside the [`sortSettings`](https://ej2.syncfusion.com/react/documentation/api/kanban/#sortsettings) property. Based on this, cards can be aligned in the columns either in `Ascending` or `Descending` order. Sorting direction will be performed based on [`sortBy`](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#sortby) property. +Kanban board also provides support for aligning the cards in the columns using the [direction](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#direction) property inside the [sortSettings](https://ej2.syncfusion.com/react/documentation/api/kanban/#sortsettings) property. Based on this, cards can be aligned in the columns either in `Ascending` or `Descending` order. Sorting direction will be performed based on [sortBy](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#sortby) property. > By default, cards are aligned in the columns based on `Ascending` order. diff --git a/ej2-react/kanban/style.md b/ej2-react/kanban/style.md index 0d30a63c7..12ca97f0a 100644 --- a/ej2-react/kanban/style.md +++ b/ej2-react/kanban/style.md @@ -1,16 +1,16 @@ --- layout: post -title: Style in React Kanban component | Syncfusion +title: Styles in React Kanban Component | Syncfusion description: Learn here all about Style in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. -control: Style +control: Style platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Style in React Kanban component +# Styles in React Kanban Component -To modify the Kanban appearance, you need to override the default CSS of Kanban. Also, you have an option to create your own custom theme using our [`Theme Studio`](https://ej2.syncfusion.com/themestudio/?theme=material). Please find the list of CSS classes in Kanban. +To modify the Kanban appearance, you need to override the default CSS of Kanban. Also, you have an option to create your own custom theme using our [`Theme Studio`](https://ej2.syncfusion.com/themestudio/?theme=tailwind3). Please find the list of CSS classes in Kanban. | Css class | Purpose | |-------|---------| diff --git a/ej2-react/kanban/swimlane.md b/ej2-react/kanban/swimlane.md index a3f21c8a7..baa8e80af 100644 --- a/ej2-react/kanban/swimlane.md +++ b/ej2-react/kanban/swimlane.md @@ -1,20 +1,20 @@ --- layout: post -title: Swimlane in React Kanban component | Syncfusion +title: Swimlane in React Kanban Component | Syncfusion description: Learn here all about Swimlane in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. -control: Swimlane +control: Swimlane platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Swimlane in React Kanban component +# Swimlane in React Kanban Component Swimlanes are horizontal categorizations of cards on the Kanban board. It is used for grouping of cards, which brings transparency to the workflow process. ## Render swimlane row -Cards can be grouped based on `keyField` and displayed in rows, which are separated by columns. It is mandatory to define the `keyField` that is mapped from the datasource for rendering swimlane rows in the Kanban board. +Cards can be grouped based on [keyField](https://ej2.syncfusion.com/react/documentation/api/kanban/#keyfield) and displayed in rows, which are separated by columns. It is mandatory to define the `keyField` that is mapped from the datasource for rendering swimlane rows in the Kanban board. `[Class-component]` @@ -52,7 +52,7 @@ Cards can be grouped based on `keyField` and displayed in rows, which are separa Customize the swimlane row header text by using the `textField` property mapped from datasource. -> It is not mandatory to define the `textField` to `swimlaneSettings`. It will automatically consider the `keyField` to swimlane row header text. +> It is not mandatory to define the `textField` to [swimlaneSettings](https://ej2.syncfusion.com/react/documentation/api/kanban/#swimlanesettings).It will automatically consider the `keyField` to swimlane row header text. > If the mapping `textField` key is not present in the datasource, it will consider the swimlane `keyField` as swimlane row header text. `[Class-component]` @@ -125,7 +125,7 @@ You can customize the Kanban swimlane row by using the `template` property, whic ## Sorting -Swimlane rows are rendered on descending order when using the `sortBy` property set to `Descending` order. By default, swimlane rows are rendered by **Ascending** order. +Swimlane rows are rendered on descending order when using the [sortBy](https://ej2.syncfusion.com/react/documentation/api/kanban/sortSettingsModel/#sortby) property set to `Descending` order. By default, swimlane rows are rendered by **Ascending** order. `[Class-component]` @@ -161,7 +161,7 @@ Swimlane rows are rendered on descending order when using the `sortBy` property ## Drag-and-drop -By default, The Kanban does not allow dragging the cards across the swimlane rows. Enabling the `dragAndDrop` property allows you to drag the cards across the swimlane rows, which is specified inside `swimlaneSettings` property. +By default, The Kanban does not allow dragging the cards across the swimlane rows. Enabling the [draganddrop](https://ej2.syncfusion.com/react/documentation/api/kanban/#allowdraganddrop) property allows you to drag the cards across the swimlane rows, which is specified inside [swimlaneSettings](https://ej2.syncfusion.com/react/documentation/api/kanban/#swimlanesettings) property. `[Class-component]` @@ -197,7 +197,7 @@ By default, The Kanban does not allow dragging the cards across the swimlane row ## Create empty row -You can render the empty swimlane row by enabling the `showEmptyRow` property. If mapping `keyField` does not have cards, empty swimlane row will be rendered. +You can render the empty swimlane row by enabling the `showEmptyRow` property. If mapping [keyField](https://ej2.syncfusion.com/react/documentation/api/kanban/#keyfield) does not have cards, empty swimlane row will be rendered. `[Class-component]` diff --git a/ej2-react/kanban/tooltip.md b/ej2-react/kanban/tooltip.md index 912eab780..145b86f04 100644 --- a/ej2-react/kanban/tooltip.md +++ b/ej2-react/kanban/tooltip.md @@ -1,22 +1,22 @@ --- layout: post -title: Tooltip in React Kanban component | Syncfusion +title: Tooltip in React Kanban Component | Syncfusion description: Learn here all about Tooltip in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. -control: Tooltip +control: Tooltip platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Tooltip in React Kanban component +# Tooltip in React Kanban Component -The tooltip is used to show the card information when the cursor hover over the card elements using the `enableTooltip` property. Tooltip content is dynamically set based on hovering over the card elements. +The tooltip is used to show the card information when the cursor hover over the card elements using the [enableTooltip](https://ej2.syncfusion.com/react/documentation/api/kanban/#enabletooltip) property. Tooltip content is dynamically set based on hovering over the card elements. > If you wish to show tooltip on Kanban board custom elements, you need to add `e-tooltip-text` class name of a particular element. ## Tooltip template -You can customize the tooltip content with any HTML or CSS element and styling using the `tooltipTemplate` property. In the following demo, the tooltip is customized with HTML elements. +You can customize the tooltip content with any HTML or CSS element and styling using the [tooltipTemplate](https://ej2.syncfusion.com/react/documentation/api/kanban/#tooltiptemplate) property. In the following demo, the tooltip is customized with HTML elements. `[Class-component]` diff --git a/ej2-react/kanban/validation.md b/ej2-react/kanban/validation.md index 3bf6207b0..d95bc6a77 100644 --- a/ej2-react/kanban/validation.md +++ b/ej2-react/kanban/validation.md @@ -1,14 +1,14 @@ --- layout: post -title: Validation in React Kanban component | Syncfusion +title: Validation in React Kanban Component | Syncfusion description: Learn here all about Validation in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. -control: Validation +control: Validation platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Validation in React Kanban component +# Validation in React Kanban Component Validate particular column using the `minCount` or `maxCount` properties. The corresponding columns gets different appearance when validation fails. In default layout, `constraintType` property accept only `Column` type. In swimlane layout, accept both `Column` and `Swimlane` constraint type. diff --git a/ej2-react/kanban/virtual-scrolling.md b/ej2-react/kanban/virtual-scrolling.md index 1c69fe272..96dab224a 100644 --- a/ej2-react/kanban/virtual-scrolling.md +++ b/ej2-react/kanban/virtual-scrolling.md @@ -1,6 +1,6 @@ --- layout: post -title: Virtual scrolling in React Kanban component | Syncfusion +title: Virtual scrolling in React Kanban Component | Syncfusion description: Learn here all about Virtual scrolling in Syncfusion React Kanban component of Syncfusion Essential JS 2 and more. control: Virtual scrolling platform: ej2-react @@ -8,13 +8,13 @@ documentation: ug domainurl: ##DomainURL## --- -# Virtualization in React Kanban component +# Virtualization in React Kanban Component -Kanban allows you to load a large amount of data without any performance degradation. This feature can be enabled by setting the [`enableVirtualization`](../api/kanban/#enablevirtualization) property in the Kanban to `true`. +Kanban allows you to load a large amount of data without any performance degradation. This feature can be enabled by setting the [enableVirtualization](../api/kanban/#enablevirtualization) property in the Kanban to `true`. ## Virtual scrolling -Virtual scrolling optimizes data rendering within each column when using large datasets. Only a subset of cards that are visible and about to be loaded on the screen are rendered. The number of records displayed in the Kanban is determined implicitly by the height of the Kanban area and the card height. The [`cardHeight`](../api/kanban/#cardheight) property of Kanban can be used to set the cards' height in pixel value. By default, the card height will be `auto`. +Virtual scrolling optimizes data rendering within each column when using large datasets. Only a subset of cards that are visible and about to be loaded on the screen are rendered. The number of records displayed in the Kanban is determined implicitly by the height of the Kanban area and the card height. The [cardHeight](../api/kanban/#cardheight) property of Kanban can be used to set the cards' height in pixel value. By default, the card height will be `auto`. When the Kanban column is scrolled, the virtual scrolling feature dynamically loads additional data on demand into view and unloads the data that is no longer visible. @@ -52,7 +52,7 @@ When the Kanban column is scrolled, the virtual scrolling feature dynamically lo ### Configure the remote data service -When the remote data is configured for the [`dataSource`](../api/kanban/#datasource), the service method will receive an additional `KanbanVirtualization` parameter to handle the initial data load for Kanban Virtualization. +When the remote data is configured for the [dataSource](../api/kanban/#datasource), the service method will receive an additional `KanbanVirtualization` parameter to handle the initial data load for Kanban Virtualization. To handle Kanban virtual scrolling, the server-side code needs to handle the `Where` and `Take` queries differently using the `KanbanVirtualization` parameter. The following is the example code for handling Kanban virtualization's initial data load using the `KanbanVirtualization` parameter. From 414875c3e6061dc5d64d99de8dd518e66eed787d Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Wed, 10 Sep 2025 20:46:21 +0530 Subject: [PATCH 03/34] Integrated latest changes at 09-10-2025 7:30:19 PM --- ej2-react-toc.html | 2 +- .../gantt/baseline-cs1/app/index.jsx | 22 +++++----- .../gantt/baseline-cs1/index.html | 2 +- .../gantt/baseline-cs1/systemjs.config.js | 2 +- .../gantt/selection-cs16/app/index.jsx | 41 ++++++++++--------- .../gantt/selection-cs16/app/index.tsx | 39 ++++++++++-------- .../gantt/selection-cs16/index.html | 2 +- .../gantt/selection-cs16/systemjs.config.js | 2 +- ej2-react/gantt/baseline.md | 8 ++-- 9 files changed, 64 insertions(+), 56 deletions(-) diff --git a/ej2-react-toc.html b/ej2-react-toc.html index 4d00cf3ce..6904123e7 100644 --- a/ej2-react-toc.html +++ b/ej2-react-toc.html @@ -1185,7 +1185,7 @@
  • Taskbar diff --git a/ej2-react/code-snippet/gantt/baseline-cs1/app/index.jsx b/ej2-react/code-snippet/gantt/baseline-cs1/app/index.jsx index 7f99f39c7..b23f57f04 100644 --- a/ej2-react/code-snippet/gantt/baseline-cs1/app/index.jsx +++ b/ej2-react/code-snippet/gantt/baseline-cs1/app/index.jsx @@ -1,22 +1,24 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { GanttComponent } from '@syncfusion/ej2-react-gantt'; +import { baselineData } from './datasource'; function App (){ const taskFields = { - id: 'TaskID', - name: 'TaskName', - startDate: 'StartDate', - progress:'Progress', - duration:'Duration', - baselineStartDate: 'BaselineStartDate', - baselineEndDate: 'BaselineEndDate', - baselineDuration: 'BaselineDuration', - parentID: 'ParentID' + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + progress:'Progress', + duration:'Duration', + baselineStartDate: 'BaselineStartDate', + baselineEndDate: 'BaselineEndDate', + baselineDuration: 'BaselineDuration', + parentID: 'ParentID' }; - return + }; diff --git a/ej2-react/code-snippet/gantt/baseline-cs1/index.html b/ej2-react/code-snippet/gantt/baseline-cs1/index.html index b4d398da5..2576e7699 100644 --- a/ej2-react/code-snippet/gantt/baseline-cs1/index.html +++ b/ej2-react/code-snippet/gantt/baseline-cs1/index.html @@ -7,7 +7,7 @@ - + diff --git a/ej2-react/code-snippet/gantt/baseline-cs1/systemjs.config.js b/ej2-react/code-snippet/gantt/baseline-cs1/systemjs.config.js index 3dd62622a..fddb475fc 100644 --- a/ej2-react/code-snippet/gantt/baseline-cs1/systemjs.config.js +++ b/ej2-react/code-snippet/gantt/baseline-cs1/systemjs.config.js @@ -14,7 +14,7 @@ System.config({ } }, paths: { - "syncfusion:": "https://cdn.syncfusion.com/ej2/30.2.4/" + "syncfusion:": "https://cdn.syncfusion.com/ej2/31.1.17/" }, map: { app: 'app', diff --git a/ej2-react/code-snippet/gantt/selection-cs16/app/index.jsx b/ej2-react/code-snippet/gantt/selection-cs16/app/index.jsx index 593707a86..5305afc68 100644 --- a/ej2-react/code-snippet/gantt/selection-cs16/app/index.jsx +++ b/ej2-react/code-snippet/gantt/selection-cs16/app/index.jsx @@ -1,24 +1,27 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { GanttComponent, Inject, Selection} from '@syncfusion/ej2-react-gantt'; +import { GanttComponent, Inject, Selection } from '@syncfusion/ej2-react-gantt'; import { data } from './datasource'; -function App (){ - const taskFields = { - id: 'TaskID', - name: 'TaskName', - startDate: 'StartDate', - duration: 'Duration', - progress: 'Progress', - parentID: 'ParentID' - }; - const settings = { - mode: 'Row', - type: 'Multiple' - }; - let ganttInstance ; - return ganttInstance = gantt}> - - + +function App() { + let ganttInstance; + const taskFields = { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + duration: 'Duration', + progress: 'Progress', + parentID: 'ParentID' + }; + const settings = { + mode: 'Row', + type: 'Multiple' + }; + + return ganttInstance = gantt}> + + }; + ReactDOM.render(, document.getElementById('root')); \ No newline at end of file diff --git a/ej2-react/code-snippet/gantt/selection-cs16/app/index.tsx b/ej2-react/code-snippet/gantt/selection-cs16/app/index.tsx index de35e1bfa..9a0c44ac5 100644 --- a/ej2-react/code-snippet/gantt/selection-cs16/app/index.tsx +++ b/ej2-react/code-snippet/gantt/selection-cs16/app/index.tsx @@ -2,23 +2,26 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { GanttComponent, Inject, Selection, SelectionSettingsModel } from '@syncfusion/ej2-react-gantt'; import { data } from './datasource'; -function App (){ - const taskFields: any = { - id: 'TaskID', - name: 'TaskName', - startDate: 'StartDate', - duration: 'Duration', - progress: 'Progress', - parentID: 'ParentID' - }; - const settings: SelectionSettingsModel = { - mode: 'Row', - type: 'Multiple' - }; - let ganttInstance :any; - return ganttInstance = gantt}> - - + +function App() { + let ganttInstance: any; + const taskFields: any = { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + duration: 'Duration', + progress: 'Progress', + parentID: 'ParentID' + }; + const settings: SelectionSettingsModel = { + mode: 'Row', + type: 'Multiple' + }; + + return ganttInstance = gantt}> + + }; + ReactDOM.render(, document.getElementById('root')); \ No newline at end of file diff --git a/ej2-react/code-snippet/gantt/selection-cs16/index.html b/ej2-react/code-snippet/gantt/selection-cs16/index.html index b4d398da5..2576e7699 100644 --- a/ej2-react/code-snippet/gantt/selection-cs16/index.html +++ b/ej2-react/code-snippet/gantt/selection-cs16/index.html @@ -7,7 +7,7 @@ - + diff --git a/ej2-react/code-snippet/gantt/selection-cs16/systemjs.config.js b/ej2-react/code-snippet/gantt/selection-cs16/systemjs.config.js index 121af3aa6..2eade044c 100644 --- a/ej2-react/code-snippet/gantt/selection-cs16/systemjs.config.js +++ b/ej2-react/code-snippet/gantt/selection-cs16/systemjs.config.js @@ -14,7 +14,7 @@ System.config({ } }, paths: { - "syncfusion:": "https://cdn.syncfusion.com/ej2/30.2.4/" + "syncfusion:": "https://cdn.syncfusion.com/ej2/31.1.17/" }, map: { app: 'app', diff --git a/ej2-react/gantt/baseline.md b/ej2-react/gantt/baseline.md index 8a58a4159..2375a8d87 100644 --- a/ej2-react/gantt/baseline.md +++ b/ej2-react/gantt/baseline.md @@ -18,7 +18,7 @@ Before implementing baseline functionality, ensure the data source includes base - [baselineStartDate](https://ej2.syncfusion.com/react/documentation/api/gantt/taskFields/#baselinestartdate): Represents the originally planned start date of a task. This value is used to compare against the actual start date to identify schedule deviations. - [baselineEndDate](https://ej2.syncfusion.com/react/documentation/api/gantt/taskFields/#baselineenddate): Represents the originally planned end date of a task. It is used to compare against the actual end date. -- [baselineDuration](https://ej2.syncfusion.com/react/documentation/api/gantt/taskFields/#baselineduration): Represents the total planned duration of the task. This value is critical for baseline visualization. To represent a baseline milestone, this property must be explicitly set to 0. Setting `baselineStartDate` and `baselineEndDate` to the same value without setting baselineDuration to 0 will result in a one-day baseline task, not a milestone. +- [baselineDuration](https://ej2.syncfusion.com/react/documentation/api/gantt/taskFields/#baselineduration): Represents the total planned duration of the task. This value is critical for baseline visualization. To represent a baseline milestone, this property must be explicitly set to `0`. Setting `baselineStartDate` and `baselineEndDate` to the same value without setting `baselineDuration` to `0` will result in a one-day baseline task, not a milestone. ## Implement baseline @@ -33,7 +33,7 @@ export let projectData = [ EndDate: new Date('02/08/2019'), baselineStartDate: new Date('02/02/2019'), baselineEndDate: new Date('02/06/2019'), - baselineDuration: '5' // Regular baseline + baselineDuration: '5' // Regular baseline. }, { TaskID: 2, @@ -42,11 +42,11 @@ export let projectData = [ EndDate: new Date('02/10/2019'), baselineStartDate: new Date('02/09/2019'), baselineEndDate: new Date('02/09/2019'), - baselineDuration: '0' // Milestone baseline + baselineDuration: '0' // Milestone baseline. } ]; - const baselineColor = 'rgba(255, 107, 107, 0.8)'; // Semi-transparent red baseline + const baselineColor = 'rgba(255, 107, 107, 0.8)'; // Semi-transparent red baseline. ``` ```css From e8b326d38cda832c9c6e20fe17a4071606faf556 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Thu, 11 Sep 2025 20:13:46 +0530 Subject: [PATCH 04/34] Integrated latest changes at 09-11-2025 7:30:44 PM --- ej2-react-toc.html | 20 ++++ .../ai-integrations/gemini-integration.md | 91 ++++++++++++++++++ .../ai-integrations/openai-integration.md | 83 +++++++++++++++++ .../ai-integrations/gemini-integration.md | 90 ++++++++++++++++++ .../ai-integrations/openai-integration.md | 82 +++++++++++++++++ ej2-react/chat-ui/getting-started.md | 2 + ej2-react/chat-ui/messages.md | 2 +- .../ai-integrations/gemini-ai/app/index.jsx | 56 +++++++++++ .../ai-integrations/gemini-ai/app/index.tsx | 55 +++++++++++ .../ai-integrations/gemini-ai/index.css | 25 +++++ .../ai-integrations/gemini-ai/index.html | 28 ++++++ .../gemini-ai/systemjs.config.js | 46 ++++++++++ .../ai-integrations/open-ai/app/index.jsx | 69 ++++++++++++++ .../ai-integrations/open-ai/app/index.tsx | 68 ++++++++++++++ .../ai-integrations/open-ai/index.css | 25 +++++ .../ai-integrations/open-ai/index.html | 28 ++++++ .../open-ai/systemjs.config.js | 45 +++++++++ .../appearance/cssClass/systemjs.config.js | 1 + .../appearance/height/systemjs.config.js | 1 + .../appearance/width/systemjs.config.js | 1 + .../assist-view/clearbtn/systemjs.config.js | 1 + .../placeholder/systemjs.config.js | 1 + .../prompt-icon/systemjs.config.js | 1 + .../prompt-text/systemjs.config.js | 1 + .../assist-view/prompts/systemjs.config.js | 1 + .../response-icon/systemjs.config.js | 1 + .../suggestion-header/systemjs.config.js | 1 + .../suggestions/systemjs.config.js | 1 + .../active-view/systemjs.config.js | 1 + .../custom-view/type/systemjs.config.js | 1 + .../viewTemplate/systemjs.config.js | 1 + .../defaultprompts/systemjs.config.js | 1 + .../attachment-failure/systemjs.config.js | 1 + .../attachment-removed/systemjs.config.js | 1 + .../attachment-success/systemjs.config.js | 1 + .../before-attachment/systemjs.config.js | 1 + .../events/created/systemjs.config.js | 1 + .../events/prompt-changed/systemjs.config.js | 1 + .../events/promptRequest/systemjs.config.js | 1 + .../enable-attachment/systemjs.config.js | 1 + .../file-size/systemjs.config.js | 1 + .../file-type/systemjs.config.js | 1 + .../save-remove-url/systemjs.config.js | 1 + .../getting-started-class/systemjs.config.js | 1 + .../getting-started/systemjs.config.js | 1 + .../methods/execute-prompt/systemjs.config.js | 1 + .../object-response/systemjs.config.js | 1 + .../string-response/systemjs.config.js | 1 + .../banner-template/systemjs.config.js | 1 + .../footer-template/systemjs.config.js | 1 + .../prompt-item-template/systemjs.config.js | 1 + .../response-item-template/systemjs.config.js | 1 + .../suggestions-template/systemjs.config.js | 1 + .../toolbar-items/align/systemjs.config.js | 1 + .../toolbar-items/cssClass/systemjs.config.js | 1 + .../toolbar-items/disabled/systemjs.config.js | 1 + .../item-type/systemjs.config.js | 1 + .../itemClick/systemjs.config.js | 1 + .../prompt-itemClick/systemjs.config.js | 1 + .../prompt-settings/systemjs.config.js | 1 + .../response-itemClick/systemjs.config.js | 1 + .../response-settings/systemjs.config.js | 1 + .../toolbar-items/template/systemjs.config.js | 1 + .../toolbar-items/text/systemjs.config.js | 1 + .../toolbar-items/tooltip/systemjs.config.js | 1 + .../toolbar-items/visible/systemjs.config.js | 1 + .../ai-integrations/gemini/app/index.jsx | 81 ++++++++++++++++ .../ai-integrations/gemini/app/index.tsx | 80 ++++++++++++++++ .../chat-ui/ai-integrations/gemini/index.css | 28 ++++++ .../chat-ui/ai-integrations/gemini/index.html | 35 +++++++ .../ai-integrations/gemini/systemjs.config.js | 48 ++++++++++ .../ai-integrations/openai/app/index.jsx | 92 +++++++++++++++++++ .../ai-integrations/openai/app/index.tsx | 90 ++++++++++++++++++ .../chat-ui/ai-integrations/openai/index.css | 28 ++++++ .../chat-ui/ai-integrations/openai/index.html | 35 +++++++ .../ai-integrations/openai/systemjs.config.js | 47 ++++++++++ .../appearance/cssClass/systemjs.config.js | 1 + .../appearance/height/systemjs.config.js | 1 + .../appearance/placeholder/systemjs.config.js | 1 + .../appearance/width/systemjs.config.js | 1 + .../chat-ui/defaultMessage/systemjs.config.js | 1 + .../chat-ui/events/created/systemjs.config.js | 1 + .../events/messageSend/systemjs.config.js | 1 + .../events/userTyping/systemjs.config.js | 1 + .../chat-ui/footer/systemjs.config.js | 1 + .../getting-started-class/systemjs.config.js | 1 + .../getting-started/systemjs.config.js | 1 + .../localization/systemjs.config.js | 1 + .../globalization/rtl/systemjs.config.js | 1 + .../chat-ui/header/align/systemjs.config.js | 1 + .../header/cssClass/systemjs.config.js | 1 + .../chat-ui/header/disable/systemjs.config.js | 1 + .../header/header-icon/systemjs.config.js | 1 + .../header/header-text/systemjs.config.js | 1 + .../chat-ui/header/iconCss/systemjs.config.js | 1 + .../header/itemClick/systemjs.config.js | 1 + .../header/itemType/systemjs.config.js | 1 + .../header/showHeader/systemjs.config.js | 1 + .../header/template/systemjs.config.js | 1 + .../chat-ui/header/text/systemjs.config.js | 1 + .../chat-ui/header/tooltip/systemjs.config.js | 1 + .../chat-ui/header/visible/systemjs.config.js | 1 + .../chat-ui/loadondemand/systemjs.config.js | 1 + .../mention-message/systemjs.config.js | 1 + .../mention/mention-select/systemjs.config.js | 1 + .../mention-trigger/systemjs.config.js | 1 + .../mention/mention-user/systemjs.config.js | 1 + .../messages/autoScroll/systemjs.config.js | 1 + .../avatar-bgColor/systemjs.config.js | 1 + .../messages/avatarUrl/systemjs.config.js | 1 + .../messages/compactMode/systemjs.config.js | 1 + .../messages/cssClass/systemjs.config.js | 1 + .../messages/forwarded/systemjs.config.js | 1 + .../messages/iconCss/systemjs.config.js | 1 + .../messages/itemClicked/systemjs.config.js | 1 + .../chat-ui/messages/items/systemjs.config.js | 1 + .../messages/markdown/systemjs.config.js | 1 + .../messages/pinned/systemjs.config.js | 1 + .../messages/replyTo/systemjs.config.js | 1 + .../messages/showTimestamp/systemjs.config.js | 1 + .../messages/statusIcon/systemjs.config.js | 1 + .../messages/suggestions/systemjs.config.js | 1 + .../chat-ui/messages/text/systemjs.config.js | 1 + .../timestampFormat/systemjs.config.js | 1 + .../messages/tooltip/systemjs.config.js | 1 + .../chat-ui/messages/width/systemjs.config.js | 1 + .../addMessageModel/systemjs.config.js | 1 + .../addMessageString/systemjs.config.js | 1 + .../methods/editMessage/systemjs.config.js | 1 + .../methods/scrollToBottom/systemjs.config.js | 1 + .../emptyChatTemplate/systemjs.config.js | 1 + .../footerTemplate/systemjs.config.js | 1 + .../messageTemplate/systemjs.config.js | 1 + .../suggestionsTemplate/systemjs.config.js | 1 + .../timebreakTemplate/systemjs.config.js | 1 + .../typingUsersTemplate/systemjs.config.js | 1 + .../chat-ui/timebreak/systemjs.config.js | 1 + .../chat-ui/timestamp/systemjs.config.js | 1 + .../timestampFormat/systemjs.config.js | 1 + .../chat-ui/typingUsers/systemjs.config.js | 1 + 140 files changed, 1491 insertions(+), 1 deletion(-) create mode 100644 ej2-react/ai-assistview/ai-integrations/gemini-integration.md create mode 100644 ej2-react/ai-assistview/ai-integrations/openai-integration.md create mode 100644 ej2-react/chat-ui/ai-integrations/gemini-integration.md create mode 100644 ej2-react/chat-ui/ai-integrations/openai-integration.md create mode 100644 ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx create mode 100644 ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx create mode 100644 ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/index.css create mode 100644 ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/index.html create mode 100644 ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/systemjs.config.js create mode 100644 ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.jsx create mode 100644 ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.tsx create mode 100644 ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/index.css create mode 100644 ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/index.html create mode 100644 ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/systemjs.config.js create mode 100644 ej2-react/code-snippet/chat-ui/ai-integrations/gemini/app/index.jsx create mode 100644 ej2-react/code-snippet/chat-ui/ai-integrations/gemini/app/index.tsx create mode 100644 ej2-react/code-snippet/chat-ui/ai-integrations/gemini/index.css create mode 100644 ej2-react/code-snippet/chat-ui/ai-integrations/gemini/index.html create mode 100644 ej2-react/code-snippet/chat-ui/ai-integrations/gemini/systemjs.config.js create mode 100644 ej2-react/code-snippet/chat-ui/ai-integrations/openai/app/index.jsx create mode 100644 ej2-react/code-snippet/chat-ui/ai-integrations/openai/app/index.tsx create mode 100644 ej2-react/code-snippet/chat-ui/ai-integrations/openai/index.css create mode 100644 ej2-react/code-snippet/chat-ui/ai-integrations/openai/index.html create mode 100644 ej2-react/code-snippet/chat-ui/ai-integrations/openai/systemjs.config.js diff --git a/ej2-react-toc.html b/ej2-react-toc.html index 6904123e7..7835254dc 100644 --- a/ej2-react-toc.html +++ b/ej2-react-toc.html @@ -230,6 +230,16 @@
    • +
  • AI Integrations + +
  • Time break
  • Timestamp
  • Typing indicator
    • diff --git a/ej2-react/ai-assistview/ai-integrations/gemini-integration.md b/ej2-react/ai-assistview/ai-integrations/gemini-integration.md new file mode 100644 index 000000000..0dc7c0334 --- /dev/null +++ b/ej2-react/ai-assistview/ai-integrations/gemini-integration.md @@ -0,0 +1,91 @@ +--- +layout: post +title: Gemini AI With React AI AssistView component | Syncfusion +description: Checkout and learn about Integration of Gemini AI With React AI AssistView component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: AI AssistView +documentation: ug +domainurl: ##DomainURL## +--- + + +# Integration of Gemini AI With AI AssistView component + +The Syncfusion AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs), enabling advanced conversational AI features in your React applications. + +## Getting Started with the AI AssistView component + +Before integrating Gemini AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your React app: + +[React Getting Started Guide](../getting-started) + +## Prerequisites + +* Requires `Node.js` (v16 or higher) and `npm`. +* Google account to generate API key on accessing `Gemini AI` +* Syncfusion AI AssistView for React `@syncfusion/ej2-react-interactive-chat` installed in your project. + +## Install Dependencies + +Install the Syncfusion AI AssistView in your project + +```bash + +npm install @syncfusion/ej2-react-interactive-chat --save + +``` + +Install the Gemini AI dependencies + +```bash + +npm install @google/generative-ai + +``` + +## Generate API Key + +1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your Google account. If you don’t have one, create a new account. + +2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard. + +3. Click the “Create API Key” button. You’ll be prompted to either select an existing Google Cloud project or create a new one. Choose the appropriate option and proceed. + +4. After selecting or creating a project, your API key will be generated and displayed. Copy the key and store it securely, as it will only be shown once. + +> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production. + +## Integration Gemini AI with AI AssistView + +Create `src/App.js` to integrate the Gemini AI with AI AssistView component + +> Add your generated `API Key` at the line + +```bash + +const geminiApiKey = 'Place your API key here'; + +``` + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/ai-integrations/ai-assistview/gemini-ai" %} + +## Run and Test + +Run the application in the browser using the following command. + +```bash + +npm start + +``` + +Open `http://localhost:3000` to interact with your Gemini AI for dynamic response. diff --git a/ej2-react/ai-assistview/ai-integrations/openai-integration.md b/ej2-react/ai-assistview/ai-integrations/openai-integration.md new file mode 100644 index 000000000..a61ea590b --- /dev/null +++ b/ej2-react/ai-assistview/ai-integrations/openai-integration.md @@ -0,0 +1,83 @@ +--- +layout: post +title: Open AI With React AI AssistView component | Syncfusion +description: Checkout and learn about Integration of Open AI With React AI AssistView component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: AI AssistView +documentation: ug +domainurl: ##DomainURL## +--- + + +# Integration of Open AI With AI AssistView component + +The Syncfusion AI AssistView supports integration with [OpenAI](https://platform.openai.com/docs/overview), enabling advanced conversational AI features in your React applications. + +## Getting Started with the AI AssistView component + +Before integrating Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your React app: + +[React Getting Started Guide](../getting-started) + +## Prerequisites + +* Requires `Node.js` (v16 or higher) and `npm`. +* OpenAI account to generate an API key for accessing the `OpenAI` API +* Syncfusion AI AssistView for React `@syncfusion/ej2-react-interactive-chat` installed in your project. + +## Install Dependencies + +Install the Syncfusion AI AssistView in your project + +```bash + +npm install @syncfusion/ej2-react-interactive-chat --save + +``` + +## Generate API Key + +1. Go to [Open AI](https://platform.openai.com/docs/overview) and sign in with your Google account. If you don’t have one, create a new account. + +2. Once logged in, click on your profile icon in the top-right corner and select `API Keys` from the dropdown menu. + +3. Click the `+ Create new secret key` button. You’ll be prompted to name the key (optional). Confirm to generate the key. + +4. Your API key will be displayed once. Copy it and store it securely, as it won’t be shown again. + +> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production. + +## Integration Open AI with AI AssistView + +Create `src/App.js` to integrate the Open AI with AI AssistView component + +> Add your generated `API Key` at the line + +```bash + +const openaiApiKey = 'Place your API key here'; + +``` + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/ai-assistview/ai-integrations/open-ai/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/ai-assistview/ai-integrations/open-ai/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/ai-assistview/ai-integrations/open-ai" %} + +## Run and Test + +Run the application in the browser using the following command. + +```bash + +npm start + +``` + +Open `http://localhost:3000` to interact with your Open AI for dynamic response. diff --git a/ej2-react/chat-ui/ai-integrations/gemini-integration.md b/ej2-react/chat-ui/ai-integrations/gemini-integration.md new file mode 100644 index 000000000..c071b5f69 --- /dev/null +++ b/ej2-react/chat-ui/ai-integrations/gemini-integration.md @@ -0,0 +1,90 @@ +--- +layout: post +title: Gemini AI With React Chat UI component | Syncfusion +description: Checkout and learn about Integration of Gemini AI With React AI Chat UI component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: Chat UI +documentation: ug +domainurl: ##DomainURL## +--- + +# Integration of Gemini AI With Chat UI component + +The Syncfusion Chat UI supports integration with [Gemini](https://ai.google.dev/gemini-api/docs), enabling advanced conversational AI features in your React applications. + +## Getting Started with the Chat UI component + +Before integrating Gemini AI, ensure that the Syncfusion `Chat UI` is correctly rendered in your React app: + +[React Getting Started Guide](../getting-started) + +## Prerequisites + +* Requires `Node.js` (v16 or higher) and `npm`. +* Google account to generate API key on accessing `Gemini AI` +* Syncfusion Chat UI for React `@syncfusion/ej2-react-interactive-chat` installed in your project. + +## Install Dependencies + +Install the Syncfusion Chat UI in your project + +```bash + +npm install @syncfusion/ej2-react-interactive-chat --save + +``` + +Install the Gemini AI dependencies + +```bash + +npm install @google/generative-ai + +``` + +## Generate API Key + +1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your Google account. If you don’t have one, create a new account. + +2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard. + +3. Click the `Create API Key` button. You’ll be prompted to either select an existing Google Cloud project or create a new one. Choose the appropriate option and proceed. + +4. After selecting or creating a project, your API key will be generated and displayed. Copy the key and store it securely, as it will only be shown once. + +> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production. + +## Integration Gemini AI with Chat UI + +Include the below snippet in `src/App.jsx` to integrate the Syncfusion Chat UI with the Gemini AI + +> Add your generated `API Key` at the line + +```bash + +const geminiApiKey = 'Place your API key here'; + +``` + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/ai-integrations/gemini/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/ai-integrations/gemini/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/ai-integrations/gemini" %} + +## Run and Test + +Run the application in the browser using the following command. + +```bash + +npm start + +``` + +Open `http://localhost:4000` to interact with your Gemini AI for dynamic response. diff --git a/ej2-react/chat-ui/ai-integrations/openai-integration.md b/ej2-react/chat-ui/ai-integrations/openai-integration.md new file mode 100644 index 000000000..5183fb7b6 --- /dev/null +++ b/ej2-react/chat-ui/ai-integrations/openai-integration.md @@ -0,0 +1,82 @@ +--- +layout: post +title: Open AI With React Chat UI component | Syncfusion +description: Checkout and learn about Integration of Open AI With React Chat UI component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: Chat UI +documentation: ug +domainurl: ##DomainURL## +--- + +# Integration of Open AI With Chat UI component + +The Syncfusion Chat UI supports integration with [OpenAI](https://platform.openai.com/docs/overview), enabling advanced conversational AI features in your React applications. + +## Getting Started with the Chat UI component + +Before integrating Open AI, ensure that the Syncfusion Chat UI control is correctly rendered in your React app: + +[React Getting Started Guide](../getting-started) + +## Prerequisites + +* Requires `Node.js` (v16 or higher) and `npm`. +* OpenAI account to generate an API key for accessing the `OpenAI` API +* Syncfusion Chat UI for React `@syncfusion/ej2-react-interactive-chat` installed in your project. + +## Install Dependencies + +Install the Syncfusion Chat UI in your project + +```bash + +npm install @syncfusion/ej2-react-interactive-chat --save + +``` + +## Generate API Key + +1. Go to [Open AI](https://platform.openai.com/docs/overview) and sign in with your Google account. If you don’t have one, create a new account. + +2. Once logged in, click on your profile icon in the top-right corner and select `API Keys` from the dropdown menu. + +3. Click the `+ Create new secret key` button. You’ll be prompted to name the key (optional). Confirm to generate the key. + +4. Your API key will be displayed once. Copy it and store it securely, as it won’t be shown again. + +> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production. + +## Integration Open AI with Chat UI + +Create `src/App.jsx` to integrate the Open AI with Chat UI component + +> Add your generated `API Key` at the line + +```bash + +const openaiApiKey = 'Place your API key here'; + +``` + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chat-ui/ai-integrations/openai/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chat-ui/ai-integrations/openai/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/ai-integrations/openai" %} + +## Run and Test + +Run the application in the browser using the following command. + +```bash + +npm start + +``` + +Open `http://localhost:3000` to interact with your Open AI for dynamic response. diff --git a/ej2-react/chat-ui/getting-started.md b/ej2-react/chat-ui/getting-started.md index 5d421db7e..57fae2df0 100644 --- a/ej2-react/chat-ui/getting-started.md +++ b/ej2-react/chat-ui/getting-started.md @@ -24,6 +24,7 @@ The `Chat UI` component requires the following dependencies in your application: |-- @syncfusion/ej2-popups |-- @syncfusion/ej2-navigations |-- @syncfusion/ej2-inputs + |-- @syncfusion/ej2-dropdowns ``` ## Setup for Local Development @@ -104,6 +105,7 @@ Import the Chat UI component required CSS references as follows in `src/App.css` @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css"; @import "../node_modules/@syncfusion/ej2-popups/styles/material.css"; @import "../node_modules/@syncfusion/ej2-navigations/styles/material.css"; +@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; @import "../node_modules/@syncfusion/ej2-react-interactive-chat/styles/material.css"; ``` diff --git a/ej2-react/chat-ui/messages.md b/ej2-react/chat-ui/messages.md index 658baa492..a071807eb 100644 --- a/ej2-react/chat-ui/messages.md +++ b/ej2-react/chat-ui/messages.md @@ -349,7 +349,7 @@ The Chat UI component supports `Markdown` formatting for messages, enabling rich To enable Markdown rendering, a third-party library that converts Markdown syntax to HTML is required. -- Include the `marked` library: +- Include the `marked` library: ```bash diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx new file mode 100644 index 000000000..36043ab02 --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx @@ -0,0 +1,56 @@ +import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat'; +import { GoogleGenerativeAI } from '@google/generative-ai'; +import * as React from 'react'; +import * as ReactDOM from "react-dom"; +import { marked } from 'marked'; + +const geminiApiKey = ''; // Replace with your Gemini API key (WARNING: Do not expose API key in client-side code for production) +const genAI = new GoogleGenerativeAI(geminiApiKey); + + +function App() { + const assistInstance = React.useRef(null); + const suggestions = [ + 'How do I prioritize my tasks?', + 'How can I improve my time management skills?' + ]; + const bannerTemplate = ''; + const toolbarItemClicked = (args) => { + if (args.item.iconCss === 'e-icons e-refresh') { + assistInstance.current.prompts = []; + assistInstance.current.promptSuggestions = suggestions; + } + }; + + const assistViewToolbarSettings = { + items: [ { iconCss: 'e-icons e-refresh', align: 'Right' } ], + itemClicked: toolbarItemClicked + }; + + const onPromptRequest = (args) => { + setTimeout(async () => { + try { + const model = genAI.getGenerativeModel({ model: 'gemini-1.5-flash' }); + const result = await model.generateContent(args.prompt); + const response = result.response.text(); + assistInstance.current.addPromptResponse(marked.parse(response)); + } catch (error) { + console.error('Error fetching Gemini response:', error); + assistInstance.current.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.'); + } + }, 1000); + }; + + return ( + + ); +} + +ReactDOM.render(, document.getElementById('container')); diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx new file mode 100644 index 000000000..04ba63aed --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx @@ -0,0 +1,55 @@ +import { AIAssistViewComponent,PromptRequestEventArgs,ToolbarItemClickedEventArgs } from '@syncfusion/ej2-react-interactive-chat'; +import { GoogleGenerativeAI } from '@google/generative-ai'; +import * as React from 'react'; +import * as ReactDOM from "react-dom"; +import { marked } from 'marked'; + +const geminiApiKey = ''; // Replace with your Gemini API key (WARNING: Do not expose API key in client-side code for production) +const genAI = new GoogleGenerativeAI(geminiApiKey); + +function App() { + const assistInstance = React.useRef(null); + const suggestions: string[] = [ + 'How do I prioritize my tasks?', + 'How can I improve my time management skills?' + ]; + const bannerTemplate = ''; + const toolbarItemClicked = (args:ToolbarItemClickedEventArgs) => { + if (args.item.iconCss === 'e-icons e-refresh') { + assistInstance.current.prompts = []; + assistInstance.current.promptSuggestions = suggestions; + } + }; + + const assistViewToolbarSettings = { + items: [ { iconCss: 'e-icons e-refresh', align: 'Right' } ], + itemClicked: toolbarItemClicked + }; + + const onPromptRequest = (args:PromptRequestEventArgs) => { + setTimeout(async () => { + try { + const model = genAI.getGenerativeModel({ model: 'gemini-1.5-flash' }); + const result = await model.generateContent(args.prompt); + const response = result.response.text(); + assistInstance.current.addPromptResponse(marked.parse(response)); + } catch (error) { + console.error('Error fetching Gemini response:', error); + assistInstance.current.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.'); + } + }, 1000); + }; + + return ( + + ); +} + +ReactDOM.render(, document.getElementById('container')); \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/index.css b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/index.css new file mode 100644 index 000000000..708414b25 --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/index.css @@ -0,0 +1,25 @@ +/* Represents the styles for loader */ +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#container { + margin: 20px auto; +} + +.banner-content { + display: flex; + flex-direction: column; + justify-content: center; + height: 330px; + text-align: center; +} + +.banner-content .e-assistview-icon:before { + font-size: 35px; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/index.html b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/index.html new file mode 100644 index 000000000..b0eef4cfb --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/index.html @@ -0,0 +1,28 @@ + + + + + Syncfusion React AI AssistView + + + + + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/systemjs.config.js new file mode 100644 index 000000000..f8d760b59 --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/systemjs.config.js @@ -0,0 +1,46 @@ +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/20.3.56/" + }, + 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-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.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", + "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js", + "@google/generative-ai": "https://cdn.jsdelivr.net/npm/@google/generative-ai@0.24.1/dist/index.min.js" + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.jsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.jsx new file mode 100644 index 000000000..e1d6f98cb --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.jsx @@ -0,0 +1,69 @@ +import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat'; +import * as React from 'react'; +import * as ReactDOM from "react-dom"; +import { marked } from 'marked'; + +const openaiApiKey = ''; // Replace with your Open AI API key (WARNING: Do not expose API key in client-side code for production) + +function App() { + const assistInstance = React.useRef(null); + const suggestions = [ + 'How do I prioritize my tasks?', + 'How can I improve my time management skills?' + ]; + const bannerTemplate = ''; + const toolbarItemClicked = (args) => { + if (args.item.iconCss === 'e-icons e-refresh') { + assistInstance.current.prompts = []; + assistInstance.current.promptSuggestions = suggestions; + } + }; + + const assistViewToolbarSettings = { + items: [ { iconCss: 'e-icons e-refresh', align: 'Right' } ], + itemClicked: toolbarItemClicked + }; + + const onPromptRequest=(args)=> { + setTimeout(async () => { + let responseText = ''; + try { + const response = await fetch('https://api.openai.com/v1/chat/completions', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${openaiApiKey}`, + }, + body: JSON.stringify({ + model: 'gpt-4o-mini', + messages: [{ role: 'user', content: args.prompt }], + max_tokens: 150, + stream:true + }), + }); + const data = await response.json(); + responseText = data.choices[0].message.content.trim() || 'No response received.'; + assistInstance.current.addPromptResponse({ + response: marked.parse(responseText), + }); + } catch (error) { + assistInstance.current.addPromptResponse( + '⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.' + ); + } + }, 1000); + }; + + return ( + + ); +} + +ReactDOM.render(, document.getElementById('container')); diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.tsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.tsx new file mode 100644 index 000000000..323c1338c --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.tsx @@ -0,0 +1,68 @@ +import { AIAssistViewComponent,PromptRequestEventArgs,ToolbarItemClickedEventArgs } from '@syncfusion/ej2-react-interactive-chat'; +import * as React from 'react'; +import * as ReactDOM from "react-dom"; +import { marked } from 'marked'; + +const openaiApiKey = ''; // Replace with your Open AI API key (WARNING: Do not expose API key in client-side code for production) + +function App() { + const assistInstance = React.useRef(null); + const suggestions: string[] = [ + 'How do I prioritize my tasks?', + 'How can I improve my time management skills?' + ]; + const bannerTemplate = ''; + const toolbarItemClicked = (args:ToolbarItemClickedEventArgs) => { + if (args.item.iconCss === 'e-icons e-refresh') { + assistInstance.current.prompts = []; + assistInstance.current.promptSuggestions = suggestions; + } + }; + + const assistViewToolbarSettings = { + items: [ { iconCss: 'e-icons e-refresh', align: 'Right' } ], + itemClicked: toolbarItemClicked + }; + + const onPromptRequest=(args: PromptRequestEventArgs)=> { + setTimeout(async () => { + let responseText:string = ''; + try { + const response = await fetch('https://api.openai.com/v1/chat/completions', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${openaiApiKey}`, + }, + body: JSON.stringify({ + model: 'gpt-4o-mini', + messages: [{ role: 'user', content: args.prompt }], + max_tokens: 150, + stream:true + }), + }); + const data = await response.json(); + responseText = data.choices[0].message.content.trim() || 'No response received.'; + assistInstance.current.addPromptResponse({ + response: marked.parse(responseText), + }); + } catch (error) { + assistInstance.current.addPromptResponse( + '⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.'); + } + }, 1000); + }; + + return ( + + ); +} + +ReactDOM.render(, document.getElementById('container')); \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/index.css b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/index.css new file mode 100644 index 000000000..708414b25 --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/index.css @@ -0,0 +1,25 @@ +/* Represents the styles for loader */ +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#container { + margin: 20px auto; +} + +.banner-content { + display: flex; + flex-direction: column; + justify-content: center; + height: 330px; + text-align: center; +} + +.banner-content .e-assistview-icon:before { + font-size: 35px; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/index.html b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/index.html new file mode 100644 index 000000000..b0eef4cfb --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/index.html @@ -0,0 +1,28 @@ + + + + + Syncfusion React AI AssistView + + + + + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/systemjs.config.js new file mode 100644 index 000000000..3db14f249 --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/systemjs.config.js @@ -0,0 +1,45 @@ +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/20.3.56/" + }, + 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-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.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", + "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js" + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/appearance/cssClass/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/appearance/cssClass/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/appearance/cssClass/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/appearance/cssClass/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/appearance/height/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/appearance/height/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/appearance/height/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/appearance/height/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/appearance/width/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/appearance/width/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/appearance/width/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/appearance/width/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/assist-view/clearbtn/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/assist-view/clearbtn/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/assist-view/clearbtn/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/assist-view/clearbtn/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/assist-view/placeholder/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/assist-view/placeholder/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/assist-view/placeholder/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/assist-view/placeholder/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/assist-view/prompt-icon/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/assist-view/prompt-icon/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/assist-view/prompt-icon/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/assist-view/prompt-icon/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/assist-view/prompt-text/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/assist-view/prompt-text/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/assist-view/prompt-text/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/assist-view/prompt-text/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/assist-view/prompts/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/assist-view/prompts/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/assist-view/prompts/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/assist-view/prompts/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/assist-view/response-icon/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/assist-view/response-icon/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/assist-view/response-icon/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/assist-view/response-icon/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/assist-view/suggestion-header/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/assist-view/suggestion-header/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/assist-view/suggestion-header/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/assist-view/suggestion-header/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/assist-view/suggestions/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/assist-view/suggestions/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/assist-view/suggestions/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/assist-view/suggestions/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/custom-view/active-view/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/custom-view/active-view/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/custom-view/active-view/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/custom-view/active-view/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/custom-view/type/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/custom-view/type/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/custom-view/type/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/custom-view/type/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/custom-view/viewTemplate/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/custom-view/viewTemplate/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/custom-view/viewTemplate/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/custom-view/viewTemplate/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/defaultprompts/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/defaultprompts/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/defaultprompts/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/defaultprompts/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/events/attachment-failure/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/events/attachment-failure/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/events/attachment-failure/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/events/attachment-failure/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/events/attachment-removed/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/events/attachment-removed/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/events/attachment-removed/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/events/attachment-removed/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/events/attachment-success/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/events/attachment-success/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/events/attachment-success/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/events/attachment-success/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/events/before-attachment/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/events/before-attachment/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/events/before-attachment/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/events/before-attachment/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/events/created/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/events/created/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/events/created/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/events/created/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/events/prompt-changed/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/events/prompt-changed/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/events/prompt-changed/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/events/prompt-changed/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/events/promptRequest/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/events/promptRequest/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/events/promptRequest/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/events/promptRequest/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/file-attachments/enable-attachment/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/file-attachments/enable-attachment/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/file-attachments/enable-attachment/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/file-attachments/enable-attachment/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/file-attachments/file-size/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/file-attachments/file-size/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/file-attachments/file-size/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/file-attachments/file-size/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/file-attachments/file-type/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/file-attachments/file-type/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/file-attachments/file-type/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/file-attachments/file-type/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/file-attachments/save-remove-url/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/file-attachments/save-remove-url/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/file-attachments/save-remove-url/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/file-attachments/save-remove-url/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/getting-started-class/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/getting-started-class/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/getting-started-class/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/getting-started-class/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/getting-started/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/getting-started/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/getting-started/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/getting-started/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/methods/execute-prompt/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/methods/execute-prompt/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/methods/execute-prompt/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/methods/execute-prompt/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/methods/object-response/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/methods/object-response/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/methods/object-response/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/methods/object-response/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/methods/string-response/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/methods/string-response/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/methods/string-response/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/methods/string-response/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/template/banner-template/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/template/banner-template/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/template/banner-template/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/template/banner-template/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/template/footer-template/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/template/footer-template/systemjs.config.js index 5973914b4..d5c761b39 100644 --- a/ej2-react/code-snippet/ai-assistview/template/footer-template/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/template/footer-template/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/template/prompt-item-template/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/template/prompt-item-template/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/template/prompt-item-template/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/template/prompt-item-template/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/template/response-item-template/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/template/response-item-template/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/template/response-item-template/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/template/response-item-template/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/template/suggestions-template/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/template/suggestions-template/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/template/suggestions-template/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/template/suggestions-template/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/align/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/align/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/align/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/align/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/cssClass/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/cssClass/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/cssClass/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/cssClass/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/disabled/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/disabled/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/disabled/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/disabled/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/item-type/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/item-type/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/item-type/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/item-type/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/itemClick/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/itemClick/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/itemClick/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/itemClick/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/prompt-itemClick/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/prompt-itemClick/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/prompt-itemClick/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/prompt-itemClick/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/prompt-settings/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/prompt-settings/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/prompt-settings/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/prompt-settings/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/response-itemClick/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/response-itemClick/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/response-itemClick/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/response-itemClick/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/response-settings/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/response-settings/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/response-settings/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/response-settings/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/template/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/template/systemjs.config.js index 9770f56d8..b8b6bae9a 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/template/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/template/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/text/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/text/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/text/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/text/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/tooltip/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/tooltip/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/tooltip/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/tooltip/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/visible/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/visible/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/visible/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/visible/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/app/index.jsx b/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/app/index.jsx new file mode 100644 index 000000000..3b372208e --- /dev/null +++ b/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/app/index.jsx @@ -0,0 +1,81 @@ +import { ChatUIComponent } from '@syncfusion/ej2-react-interactive-chat'; +import { marked } from 'marked'; +import * as React from 'react'; +import * as ReactDOM from "react-dom"; +import { GoogleGenerativeAI } from '@google/generative-ai'; + +function App() { + const chatRef = React.useRef(null); + const geminiApiKey = ''; + const genAI = React.useMemo(() => new GoogleGenerativeAI(geminiApiKey), []); + + const currentUser = { + id: 'user1', + user: 'You', + }; + + const aiModel = { + id: 'ai', + user: 'Gemini', + }; + + const handleMessageSend = (args) => { + setTimeout(async () => { + if (chatRef.current) { + chatRef.current.typingUsers = [aiModel]; + } + + try { + const model = genAI.getGenerativeModel({ model: 'gemini-1.5-flash' }); + const result = await model.generateContent(args.message.text); + const response = await result.response.text(); + + if (chatRef.current) { + chatRef.current.addMessage({ + text: marked.parse(response), + author: aiModel, + }); + } + } catch (error) { + console.error('Error fetching Gemini response:', error); + if (chatRef.current) { + chatRef.current.addMessage({ + text: 'Error generating response. Please try again.', + author: aiModel, + }); + } + } finally { + if (chatRef.current) { + chatRef.current.typingUsers = []; + } + } + }, 500); + }; + + const handleToolbarItemClicked = () => { + if (chatRef.current) { + chatRef.current.messages = []; + } + }; + + return ( + // specifies the tag for render the Chat UI component + + ); +} + +ReactDOM.render(, document.getElementById('container')); \ No newline at end of file diff --git a/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/app/index.tsx b/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/app/index.tsx new file mode 100644 index 000000000..9d915ac96 --- /dev/null +++ b/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/app/index.tsx @@ -0,0 +1,80 @@ +import { ChatUIComponent, UserModel } from '@syncfusion/ej2-react-interactive-chat'; +import { marked } from 'marked'; +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import { GoogleGenerativeAI } from '@google/generative-ai'; + +function App() { + const chatRef = React.useRef(null); + const geminiApiKey: string = ''; + const genAI = React.useMemo(() => new GoogleGenerativeAI(geminiApiKey), []); + + const currentUser: UserModel = { + id: 'user1', + user: 'You', + }; + + const aiModel: UserModel = { + id: 'ai', + user: 'Gemini', + }; + + const handleMessageSend = (args: { message: { text: string } }) => { + setTimeout(async () => { + if (chatRef.current) { + chatRef.current.typingUsers = [aiModel]; + } + + try { + const model = genAI.getGenerativeModel({ model: 'gemini-1.5-flash' }); + const result = await model.generateContent(args.message.text); + const response = await result.response.text(); + + if (chatRef.current) { + chatRef.current.addMessage({ + text: marked.parse(response), + author: aiModel, + }); + } + } catch (error) { + console.error('Error fetching Gemini response:', error); + if (chatRef.current) { + chatRef.current.addMessage({ + text: 'Error generating response. Please try again.', + author: aiModel, + }); + } + } finally { + if (chatRef.current) { + chatRef.current.typingUsers = []; + } + } + }, 500); + }; + + const handleToolbarItemClicked = () => { + if (chatRef.current) { + chatRef.current.messages = []; + } + }; + + return ( + + ); +} + +ReactDOM.render(, document.getElementById('container')); \ No newline at end of file diff --git a/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/index.css b/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/index.css new file mode 100644 index 000000000..afea8b0f7 --- /dev/null +++ b/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/index.css @@ -0,0 +1,28 @@ +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#container { + margin: 20px auto; +} +.emptychat-content { + align-items: center; + display: flex; + flex-direction: column; +} +.e-ai-chat{ + margin-top:10px; + font-size:18px; +} +.e-chat-ui .e-message-content p { + margin: 0; + display: inline-block; +} +.e-assistview-icon{ + font-size: 24px; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/index.html b/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/index.html new file mode 100644 index 000000000..411703f5d --- /dev/null +++ b/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/index.html @@ -0,0 +1,35 @@ + + + + + Syncfusion React Chat UI + + + + + + + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/systemjs.config.js b/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/systemjs.config.js new file mode 100644 index 000000000..edbc947bc --- /dev/null +++ b/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/systemjs.config.js @@ -0,0 +1,48 @@ +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/20.3.56/" + }, + 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-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "@google/generative-ai": "https://cdn.jsdelivr.net/npm/@google/generative-ai@0.24.1/dist/index.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js", + "DOMPurify": "https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js" + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/chat-ui/ai-integrations/openai/app/index.jsx b/ej2-react/code-snippet/chat-ui/ai-integrations/openai/app/index.jsx new file mode 100644 index 000000000..97aab6010 --- /dev/null +++ b/ej2-react/code-snippet/chat-ui/ai-integrations/openai/app/index.jsx @@ -0,0 +1,92 @@ +import { ChatUIComponent } from '@syncfusion/ej2-react-interactive-chat'; +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import { marked } from 'marked'; + +function App() { + const chatRef = React.useRef(null); + const openaiApiKey = ''; + + const currentUser = { + id: 'user1', + user: 'You', + }; + + const aiModel = { + id: 'ai', + user: 'Open AI', + }; + + const handleMessageSend = (args) => { + setTimeout(async () => { + if (chatRef.current) { + chatRef.current.typingUsers = [aiModel]; + } + + try { + const response = await fetch( + 'https://api.openai.com/v1/chat/completions', + { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${openaiApiKey}`, + }, + body: JSON.stringify({ + model: 'gpt-4o-mini', + messages: [{ role: 'user', content: args.message.text }], + max_tokens: 150, + }), + } + ); + const data = await response.json(); + const responseText = data.choices[0].message.content.trim() || 'No response received.'; + + if (chatRef.current) { + chatRef.current.addMessage({ + text: marked.parse(responseText), + author: aiModel, + }); + } + } catch (error) { + console.error('Error fetching OpenAI response:', error); + if (chatRef.current) { + chatRef.current.addMessage({ + text: 'Error generating response. Please check your API key and try again.', + author: aiModel, + }); + } + } finally { + if (chatRef.current) { + chatRef.current.typingUsers = []; + } + } + }, 500); + }; + + const handleToolbarItemClicked = () => { + if (chatRef.current) { + chatRef.current.messages = []; + } + }; + + return ( + + ); +} + +ReactDOM.render(, document.getElementById('container')); \ No newline at end of file diff --git a/ej2-react/code-snippet/chat-ui/ai-integrations/openai/app/index.tsx b/ej2-react/code-snippet/chat-ui/ai-integrations/openai/app/index.tsx new file mode 100644 index 000000000..c8e3a0557 --- /dev/null +++ b/ej2-react/code-snippet/chat-ui/ai-integrations/openai/app/index.tsx @@ -0,0 +1,90 @@ +import { ChatUIComponent, UserModel } from '@syncfusion/ej2-react-interactive-chat'; +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import { marked } from 'marked'; + +function App() { + const chatRef = React.useRef(null); + const openaiApiKey: string = ''; + + const currentUser: UserModel = { + id: 'user1', + user: 'You', + }; + + const aiModel: UserModel = { + id: 'ai', + user: 'Open AI', + }; + + const handleMessageSend = (args: { message: { text: string } }) => { + setTimeout(async () => { + if (chatRef.current) { + chatRef.current.typingUsers = [aiModel]; + } + try { + const response = await fetch( + 'https://api.openai.com/v1/chat/completions', + { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${openaiApiKey}`, + }, + body: JSON.stringify({ + model: 'gpt-4o-mini', + messages: [{ role: 'user', content: args.message.text }], + max_tokens: 150, + }), + } + ); + const data = await response.json(); + let responseText = data.choices[0].message.content.trim() || 'No response received.'; + if (chatRef.current) { + chatRef.current.addMessage({ + text: marked.parse(responseText), + author: aiModel, + }); + } + } catch (error) { + console.error('Error fetching OpenAI response:', error); + if (chatRef.current) { + chatRef.current.addMessage({ + text: 'Error generating response. Please check your API key and try again.', + author: aiModel, + }); + } + } finally { + if (chatRef.current) { + chatRef.current.typingUsers = []; + } + } + }, 500); + }; + + const handleToolbarItemClicked = () => { + if (chatRef.current) { + chatRef.current.messages = []; + } + }; + + return ( + + ); +} + +ReactDOM.render(, document.getElementById('container')); \ No newline at end of file diff --git a/ej2-react/code-snippet/chat-ui/ai-integrations/openai/index.css b/ej2-react/code-snippet/chat-ui/ai-integrations/openai/index.css new file mode 100644 index 000000000..afea8b0f7 --- /dev/null +++ b/ej2-react/code-snippet/chat-ui/ai-integrations/openai/index.css @@ -0,0 +1,28 @@ +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#container { + margin: 20px auto; +} +.emptychat-content { + align-items: center; + display: flex; + flex-direction: column; +} +.e-ai-chat{ + margin-top:10px; + font-size:18px; +} +.e-chat-ui .e-message-content p { + margin: 0; + display: inline-block; +} +.e-assistview-icon{ + font-size: 24px; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/chat-ui/ai-integrations/openai/index.html b/ej2-react/code-snippet/chat-ui/ai-integrations/openai/index.html new file mode 100644 index 000000000..654c7c20b --- /dev/null +++ b/ej2-react/code-snippet/chat-ui/ai-integrations/openai/index.html @@ -0,0 +1,35 @@ + + + + + Syncfusion React Chat UI + + + + + + + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/chat-ui/ai-integrations/openai/systemjs.config.js b/ej2-react/code-snippet/chat-ui/ai-integrations/openai/systemjs.config.js new file mode 100644 index 000000000..7c1db3033 --- /dev/null +++ b/ej2-react/code-snippet/chat-ui/ai-integrations/openai/systemjs.config.js @@ -0,0 +1,47 @@ +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/20.3.56/" + }, + 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-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.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", + "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js", + "DOMPurify": "https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js" + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/chat-ui/appearance/cssClass/systemjs.config.js b/ej2-react/code-snippet/chat-ui/appearance/cssClass/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/appearance/cssClass/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/appearance/cssClass/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/appearance/height/systemjs.config.js b/ej2-react/code-snippet/chat-ui/appearance/height/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/appearance/height/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/appearance/height/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/appearance/placeholder/systemjs.config.js b/ej2-react/code-snippet/chat-ui/appearance/placeholder/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/appearance/placeholder/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/appearance/placeholder/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/appearance/width/systemjs.config.js b/ej2-react/code-snippet/chat-ui/appearance/width/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/appearance/width/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/appearance/width/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/defaultMessage/systemjs.config.js b/ej2-react/code-snippet/chat-ui/defaultMessage/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/defaultMessage/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/defaultMessage/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/events/created/systemjs.config.js b/ej2-react/code-snippet/chat-ui/events/created/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/events/created/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/events/created/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/events/messageSend/systemjs.config.js b/ej2-react/code-snippet/chat-ui/events/messageSend/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/events/messageSend/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/events/messageSend/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/events/userTyping/systemjs.config.js b/ej2-react/code-snippet/chat-ui/events/userTyping/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/events/userTyping/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/events/userTyping/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/footer/systemjs.config.js b/ej2-react/code-snippet/chat-ui/footer/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/footer/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/footer/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/getting-started-class/systemjs.config.js b/ej2-react/code-snippet/chat-ui/getting-started-class/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/getting-started-class/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/getting-started-class/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/getting-started/systemjs.config.js b/ej2-react/code-snippet/chat-ui/getting-started/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/getting-started/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/getting-started/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/globalization/localization/systemjs.config.js b/ej2-react/code-snippet/chat-ui/globalization/localization/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/globalization/localization/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/globalization/localization/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/globalization/rtl/systemjs.config.js b/ej2-react/code-snippet/chat-ui/globalization/rtl/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/globalization/rtl/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/globalization/rtl/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/header/align/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/align/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/header/align/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/align/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/header/cssClass/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/cssClass/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/header/cssClass/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/cssClass/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/header/disable/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/disable/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/header/disable/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/disable/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/header/header-icon/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/header-icon/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/header/header-icon/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/header-icon/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/header/header-text/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/header-text/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/header/header-text/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/header-text/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/header/iconCss/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/iconCss/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/header/iconCss/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/iconCss/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/header/itemClick/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/itemClick/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/header/itemClick/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/itemClick/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/header/itemType/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/itemType/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/header/itemType/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/itemType/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/header/showHeader/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/showHeader/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/header/showHeader/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/showHeader/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/header/template/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/template/systemjs.config.js index 609e0e930..c73890b01 100644 --- a/ej2-react/code-snippet/chat-ui/header/template/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/template/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/header/text/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/text/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/header/text/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/text/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/header/tooltip/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/tooltip/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/header/tooltip/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/tooltip/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/header/visible/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/visible/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/header/visible/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/visible/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/loadondemand/systemjs.config.js b/ej2-react/code-snippet/chat-ui/loadondemand/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/loadondemand/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/loadondemand/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/mention/mention-message/systemjs.config.js b/ej2-react/code-snippet/chat-ui/mention/mention-message/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/mention/mention-message/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/mention/mention-message/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/mention/mention-select/systemjs.config.js b/ej2-react/code-snippet/chat-ui/mention/mention-select/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/mention/mention-select/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/mention/mention-select/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/mention/mention-trigger/systemjs.config.js b/ej2-react/code-snippet/chat-ui/mention/mention-trigger/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/mention/mention-trigger/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/mention/mention-trigger/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/mention/mention-user/systemjs.config.js b/ej2-react/code-snippet/chat-ui/mention/mention-user/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/mention/mention-user/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/mention/mention-user/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/messages/autoScroll/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/autoScroll/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/messages/autoScroll/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/autoScroll/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/messages/avatar-bgColor/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/avatar-bgColor/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/messages/avatar-bgColor/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/avatar-bgColor/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/messages/avatarUrl/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/avatarUrl/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/messages/avatarUrl/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/avatarUrl/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/messages/compactMode/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/compactMode/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/messages/compactMode/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/compactMode/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/messages/cssClass/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/cssClass/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/messages/cssClass/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/cssClass/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/messages/forwarded/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/forwarded/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/messages/forwarded/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/forwarded/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/messages/iconCss/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/iconCss/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/messages/iconCss/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/iconCss/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/messages/itemClicked/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/itemClicked/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/messages/itemClicked/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/itemClicked/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/messages/items/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/items/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/messages/items/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/items/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/messages/markdown/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/markdown/systemjs.config.js index 7c1db3033..f13e3dad6 100644 --- a/ej2-react/code-snippet/chat-ui/messages/markdown/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/markdown/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/messages/pinned/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/pinned/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/messages/pinned/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/pinned/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/messages/replyTo/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/replyTo/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/messages/replyTo/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/replyTo/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/messages/showTimestamp/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/showTimestamp/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/messages/showTimestamp/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/showTimestamp/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/messages/statusIcon/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/statusIcon/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/messages/statusIcon/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/statusIcon/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/messages/suggestions/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/suggestions/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/messages/suggestions/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/suggestions/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/messages/text/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/text/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/messages/text/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/text/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/messages/timestampFormat/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/timestampFormat/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/messages/timestampFormat/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/timestampFormat/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/messages/tooltip/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/tooltip/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/messages/tooltip/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/tooltip/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/messages/width/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/width/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/messages/width/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/width/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/methods/addMessageModel/systemjs.config.js b/ej2-react/code-snippet/chat-ui/methods/addMessageModel/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/methods/addMessageModel/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/methods/addMessageModel/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/methods/addMessageString/systemjs.config.js b/ej2-react/code-snippet/chat-ui/methods/addMessageString/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/methods/addMessageString/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/methods/addMessageString/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/methods/editMessage/systemjs.config.js b/ej2-react/code-snippet/chat-ui/methods/editMessage/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/methods/editMessage/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/methods/editMessage/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/methods/scrollToBottom/systemjs.config.js b/ej2-react/code-snippet/chat-ui/methods/scrollToBottom/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/methods/scrollToBottom/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/methods/scrollToBottom/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/templates/emptyChatTemplate/systemjs.config.js b/ej2-react/code-snippet/chat-ui/templates/emptyChatTemplate/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/templates/emptyChatTemplate/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/templates/emptyChatTemplate/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/templates/footerTemplate/systemjs.config.js b/ej2-react/code-snippet/chat-ui/templates/footerTemplate/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/templates/footerTemplate/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/templates/footerTemplate/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/templates/messageTemplate/systemjs.config.js b/ej2-react/code-snippet/chat-ui/templates/messageTemplate/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/templates/messageTemplate/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/templates/messageTemplate/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/templates/suggestionsTemplate/systemjs.config.js b/ej2-react/code-snippet/chat-ui/templates/suggestionsTemplate/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/templates/suggestionsTemplate/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/templates/suggestionsTemplate/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/templates/timebreakTemplate/systemjs.config.js b/ej2-react/code-snippet/chat-ui/templates/timebreakTemplate/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/templates/timebreakTemplate/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/templates/timebreakTemplate/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/templates/typingUsersTemplate/systemjs.config.js b/ej2-react/code-snippet/chat-ui/templates/typingUsersTemplate/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/templates/typingUsersTemplate/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/templates/typingUsersTemplate/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/timebreak/systemjs.config.js b/ej2-react/code-snippet/chat-ui/timebreak/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/timebreak/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/timebreak/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/timestamp/systemjs.config.js b/ej2-react/code-snippet/chat-ui/timestamp/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/timestamp/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/timestamp/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/timestampFormat/systemjs.config.js b/ej2-react/code-snippet/chat-ui/timestampFormat/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/timestampFormat/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/timestampFormat/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/typingUsers/systemjs.config.js b/ej2-react/code-snippet/chat-ui/typingUsers/systemjs.config.js index fa90ac2c8..e1c0db382 100644 --- a/ej2-react/code-snippet/chat-ui/typingUsers/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/typingUsers/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", From b5a5ab3f626ae72872588fef33e22925305fec18 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Fri, 12 Sep 2025 19:41:41 +0530 Subject: [PATCH 05/34] Integrated latest changes at 09-12-2025 7:30:17 PM --- ej2-react-toc.html | 3 +- .../chart/series/column-cs20/app/index.jsx | 108 ++++------ .../chart/series/column-cs20/app/index.tsx | 118 ++++------- .../chart/series/pie-cs46/app/index.jsx | 157 +++++++------- .../chart/series/pie-cs46/app/index.tsx | 69 ++++--- .../working-with-data-cs4/app/index.jsx | 170 ++++++++-------- .../working-with-data-cs4/app/index.tsx | 191 +++++++++--------- ej2-react/pivotview/getting-started.md | 163 ++++++++++----- .../add-custom-aggregation-type-in-menu.md | 19 +- ...d-hyper-link-for-specific-row-or-column.md | 17 +- ...l-formatting-for-specific-row-or-column.md | 22 +- .../apply-custom-styles-to-pivot-cells.md | 17 +- .../bind-complex-data-to-the-pivot-table.md | 56 ++++- ...ange-load-limited-data-in-member-editor.md | 21 +- ...-the-pivotview-component-minimum-height.md | 6 +- .../chart-based-on-pivot-table-selection.md | 12 +- .../how-to/customize-cells-elements.md | 9 +- .../how-to/customize-empty-value-cells.md | 12 +- ...tion-and-get-selected-cells-information.md | 36 ++-- .../pivotview/how-to/show-hide-tool-tip.md | 10 +- ej2-react/pivotview/nextjs-getting-started.md | 47 ++--- 21 files changed, 687 insertions(+), 576 deletions(-) diff --git a/ej2-react-toc.html b/ej2-react-toc.html index 7835254dc..28b611ee3 100644 --- a/ej2-react-toc.html +++ b/ej2-react-toc.html @@ -1980,8 +1980,7 @@
  • Apply conditional formatting for specific row or column
  • Change load limited data in member editor
  • Customize cells elements
    • -
  • Customize empty value cellss
    • -
  • Customize the icons for pivot grid
    • +
  • Customize empty value cells
  • Perform cell selection and get selected cells information
  • Show hide tool tip
    • diff --git a/ej2-react/code-snippet/chart/series/column-cs20/app/index.jsx b/ej2-react/code-snippet/chart/series/column-cs20/app/index.jsx index af7682e01..8f7bbb260 100644 --- a/ej2-react/code-snippet/chart/series/column-cs20/app/index.jsx +++ b/ej2-react/code-snippet/chart/series/column-cs20/app/index.jsx @@ -1,45 +1,42 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { Category, ChartComponent, ColumnSeries, Inject, LineSeries, SeriesCollectionDirective, SeriesDirective, ILoadedEventArgs } from '@syncfusion/ej2-react-charts'; -import { data } from './datasource'; import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; function App() { - const [chartData, setChartData] = React.useState([]); - let chartInstance = React.useRef(null); - const buttonContainerRef = React.useRef(null); + var chartInstance; const [hasData, setHasData] = React.useState(false); const SAMPLE_CSS = ` -#noDataTemplateContainer { - height: inherit; - width: inherit; -} -.light-bg { - background-color: #fafafa; - color: #000000; -} + #noDataTemplateContainer { + height: inherit; + width: inherit; + } + .light-bg { + background-color: #fafafa; + color: #000000; + } -.template-align img { - max-width: 150px; - /* Adjust size as needed */ - max-height: 150px; - margin-top: 55px; -} + .template-align img { + max-width: 150px; + /* Adjust size as needed */ + max-height: 150px; + margin-top: 55px; + } -.load-data-btn { - border-radius: 4px; -} + .load-data-btn { + border-radius: 4px; + } -.template-align { - display: flex; - align-items: center; - justify-content: center; - text-align: center; - flex-direction: column; -} + .template-align { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + flex-direction: column; + } -#syncfusionButtonContainer { - margin-top: 5px; -}`; + #syncfusionButtonContainer { + margin-top: 5px; + }`; // Sample data that will be loaded when button is clicked const sampleData = [ { x: 'January', y: 19173 }, @@ -49,7 +46,7 @@ function App() { { x: 'May', y: 20072 }, { x: 'June', y: 19233 } ]; - useEffect(() => { + React.useEffect(() => { if (hasData) { const buttonContainer = document.getElementById("syncfusionButtonContainer"); if (buttonContainer) { @@ -57,7 +54,7 @@ function App() { } } }, [hasData]); - + const noDataTemplate = `
    @@ -74,11 +71,8 @@ function App() { // Function to load data when button is clicked const loadData = () => { - if (chartInstance.current) { - chartInstance.current.series[0].dataSource = sampleData; - setHasData(true); - chartInstance.current.series[0].animation.enable = true; - chartInstance.current.refresh(); + if (chartInstance) { + chartInstance.series[0].dataSource = sampleData; } }; // Function to load data when button is clicked @@ -101,45 +95,19 @@ function App() { } } }; - + return (
    {/* Custom No Data Template with Button */} - + {/* Chart Component */}
    - + chart = g} primaryXAxis={{ valueType: 'Category', majorGridLines: { width: 0 }, majorTickLines: { width: 0 }, }} chartArea={{ border: { width: 0 } }} + primaryYAxis={{ title: 'Production (in million pounds)', titleStyle: { fontWeight: '600' }, majorTickLines: { width: 0 }, lineStyle: { width: 0 } }} loaded={loadedChartData} noDataTemplate={noDataTemplate} title="Milk Production in US - 2025" subTitle="Source: nass.usda.gov"> - +
    @@ -147,4 +115,4 @@ function App() { ); }; export default App; -ReactDOM.render(, document.getElementById("charts")); +ReactDOM.render(, document.getElementById("charts")); \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/column-cs20/app/index.tsx b/ej2-react/code-snippet/chart/series/column-cs20/app/index.tsx index b782454ce..f09613abd 100644 --- a/ej2-react/code-snippet/chart/series/column-cs20/app/index.tsx +++ b/ej2-react/code-snippet/chart/series/column-cs20/app/index.tsx @@ -3,49 +3,47 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { createRoot } from 'react-dom/client'; -import { AxisModel,Category,ChartComponent, ColumnSeries, Inject, LineSeries, -SeriesCollectionDirective, SeriesDirective } from '@syncfusion/ej2-react-charts'; -import { useEffect, useRef, useState } from 'react'; +import { + AxisModel, Category, ChartComponent, ColumnSeries, Inject, LineSeries, + SeriesCollectionDirective, SeriesDirective +} from '@syncfusion/ej2-react-charts'; import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; -import { data } from './datasource'; function App() { - const [chartData, setChartData] = React.useState([]); - let chartInstance = React.useRef(null); - const buttonContainerRef = React.useRef(null); + var chartInstance: ChartComponent | null; const [hasData, setHasData] = React.useState(false); const SAMPLE_CSS = ` -#noDataTemplateContainer { - height: inherit; - width: inherit; -} + #noDataTemplateContainer { + height: inherit; + width: inherit; + } -.light-bg { - background-color: #fafafa; - color: #000000; -} + .light-bg { + background-color: #fafafa; + color: #000000; + } -.template-align img { - max-width: 150px; - /* Adjust size as needed */ - max-height: 150px; - margin-top: 55px; -} + .template-align img { + max-width: 150px; + /* Adjust size as needed */ + max-height: 150px; + margin-top: 55px; + } -.load-data-btn { - border-radius: 4px; -} + .load-data-btn { + border-radius: 4px; + } -.template-align { - display: flex; - align-items: center; - justify-content: center; - text-align: center; - flex-direction: column; -} + .template-align { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + flex-direction: column; + } -#syncfusionButtonContainer { - margin-top: 5px; -}`; + #syncfusionButtonContainer { + margin-top: 5px; + }`; // Sample data that will be loaded when button is clicked const sampleData = [ @@ -56,7 +54,7 @@ function App() { { x: 'May', y: 20072 }, { x: 'June', y: 19233 } ]; - useEffect(() => { + React.useEffect(() => { if (hasData) { const buttonContainer = document.getElementById("syncfusionButtonContainer"); if (buttonContainer) { @@ -64,7 +62,7 @@ function App() { } } }, [hasData]); - + const noDataTemplate = `
    @@ -81,11 +79,8 @@ function App() { // Function to load data when button is clicked const loadData = () => { - if (chartInstance.current) { - chartInstance.current.series[0].dataSource = sampleData; - setHasData(true); - chartInstance.current.series[0].animation.enable = true; - chartInstance.current.refresh(); + if (chartInstance) { + (chartInstance as ChartComponent).series[0].dataSource = sampleData; } }; // Function to load data when button is clicked @@ -108,45 +103,19 @@ function App() { } } }; - + return (
    {/* Custom No Data Template with Button */} - + {/* Chart Component */}
    - + chart = g} primaryXAxis={{ valueType: 'Category', majorGridLines: { width: 0 }, majorTickLines: { width: 0 } }} chartArea={{ border: { width: 0 } }} primaryYAxis={{ title: 'Production (in million pounds)', titleStyle: { fontWeight: '600' }, + majorTickLines: { width: 0 }, lineStyle: { width: 0 } }} loaded={loadedChartData} noDataTemplate={noDataTemplate} title="Milk Production in US - 2025" subTitle="Source: nass.usda.gov"> - +
    @@ -154,7 +123,4 @@ function App() { ); }; export default App; -ReactDOM.render(, document.getElementById("charts")); - - - +ReactDOM.render(, document.getElementById("charts")); \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/pie-cs46/app/index.jsx b/ej2-react/code-snippet/chart/series/pie-cs46/app/index.jsx index 920835679..9eb3e8efa 100644 --- a/ej2-react/code-snippet/chart/series/pie-cs46/app/index.jsx +++ b/ej2-react/code-snippet/chart/series/pie-cs46/app/index.jsx @@ -1,52 +1,54 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, Inject } from '@syncfusion/ej2-react-charts'; -import { accData } from 'datasource.ts'; +import { accData } from '../datasource.ts'; +import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; function App() { - let chartInstance = React.useRef< AccumulationChartComponent >(null); + const [hasData, setHasData] = React.useState(false); - useEffect(() => { - if (hasData) { - const buttonContainer = document.getElementById("syncfusionButtonContainer"); - if (buttonContainer) { - ReactDOM.unmountComponentAtNode(buttonContainer); - } - } - }, [hasData]); - const SAMPLE_CSS = ` -#noDataTemplateContainer { - height: inherit; - width: inherit; -} + var chart; + React.useEffect(() => { + if (hasData) { + const buttonContainer = document.getElementById("syncfusionButtonContainer"); + if (buttonContainer) { + ReactDOM.unmountComponentAtNode(buttonContainer); + } + } + }, [hasData]); + const SAMPLE_CSS = ` + #noDataTemplateContainer { + height: inherit; + width: inherit; + } -.light-bg { - background-color: #fafafa; - color: #000000; -} + .light-bg { + background-color: #fafafa; + color: #000000; + } -.template-align img { - max-width: 150px; - /* Adjust size as needed */ - max-height: 150px; - margin-top: 55px; -} + .template-align img { + max-width: 150px; + /* Adjust size as needed */ + max-height: 150px; + margin-top: 55px; + } -.load-data-btn { - border-radius: 4px; -} + .load-data-btn { + border-radius: 4px; + } -.template-align { - display: flex; - align-items: center; - justify-content: center; - text-align: center; - flex-direction: column; -} + .template-align { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + flex-direction: column; + } -#syncfusionButtonContainer { - margin-top: 5px; -}`; - const noDataTemplate = ` + #syncfusionButtonContainer { + margin-top: 5px; + }`; + const noDataTemplate = `
    No Data @@ -59,50 +61,49 @@ function App() {
    `; - - // Function to load data when button is clicked - const loadData = () => { - if (chartInstance.current) { - chartInstance.current.series[0].dataSource = accData; - chartInstance.current.refresh(); - } - }; - // Function to load data when button is clicked - const loadedChartData = () => { - if (!hasData) { - const buttonContainer = document.getElementById("syncfusionButtonContainer"); - if (buttonContainer && !buttonContainer.hasChildNodes()) { - // Create the button element using React.createElement - const buttonElement = React.createElement(ButtonComponent, { - id: "loadDataButton", - content: "Load Data", - iconCss: "e-icons e-refresh", - cssClass: "load-data-btn e-outline", - isPrimary: false, - onClick: loadData - }); - - const root = createRoot(buttonContainer); - root.render(buttonElement); - } - } - }; + + // Function to load data when button is clicked + const loadData = () => { + if (chart) { + chart.series[0].dataSource = accData; + } + }; + // Function to load data when button is clicked + const loadedChartData = () => { + if (!hasData) { + const buttonContainer = document.getElementById("syncfusionButtonContainer"); + if (buttonContainer && !buttonContainer.hasChildNodes()) { + // Create the button element using React.createElement + const buttonElement = React.createElement(ButtonComponent, { + id: "loadDataButton", + content: "Load Data", + iconCss: "e-icons e-refresh", + cssClass: "load-data-btn e-outline", + isPrimary: false, + onClick: loadData + }); + + const root = createRoot(buttonContainer); + root.render(buttonElement); + } + } + }; return ( -
    +
    {/* Custom No Data Template with Button */} - + {/* Chart Component */} -
    - - - - - - -
    - +
    chart = g} loaded={loadedChartData} noDataTemplate={noDataTemplate}> + + + + + + +
    +
    ); }; diff --git a/ej2-react/code-snippet/chart/series/pie-cs46/app/index.tsx b/ej2-react/code-snippet/chart/series/pie-cs46/app/index.tsx index ce780c24b..cb5287bfe 100644 --- a/ej2-react/code-snippet/chart/series/pie-cs46/app/index.tsx +++ b/ej2-react/code-snippet/chart/series/pie-cs46/app/index.tsx @@ -9,9 +9,9 @@ import { accData } from 'datasource.ts'; import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; function App() { - let chartInstance = React.useRef< AccumulationChartComponent >(null); + var chart: AccumulationChartComponent | null; const [hasData, setHasData] = React.useState(false); - useEffect(() => { + React.useEffect(() => { if (hasData) { const buttonContainer = document.getElementById("syncfusionButtonContainer"); if (buttonContainer) { @@ -19,39 +19,39 @@ function App() { } } }, [hasData]); -const SAMPLE_CSS = ` -#noDataTemplateContainer { - height: inherit; - width: inherit; -} + const SAMPLE_CSS = ` + #noDataTemplateContainer { + height: inherit; + width: inherit; + } -.light-bg { - background-color: #fafafa; - color: #000000; -} + .light-bg { + background-color: #fafafa; + color: #000000; + } -.template-align img { - max-width: 150px; - /* Adjust size as needed */ - max-height: 150px; - margin-top: 55px; -} + .template-align img { + max-width: 150px; + /* Adjust size as needed */ + max-height: 150px; + margin-top: 55px; + } -.load-data-btn { - border-radius: 4px; -} + .load-data-btn { + border-radius: 4px; + } -.template-align { - display: flex; - align-items: center; - justify-content: center; - text-align: center; - flex-direction: column; -} + .template-align { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + flex-direction: column; + } -#syncfusionButtonContainer { - margin-top: 5px; -}`; + #syncfusionButtonContainer { + margin-top: 5px; + }`; const noDataTemplate = `
    @@ -68,9 +68,8 @@ const SAMPLE_CSS = ` // Function to load data when button is clicked const loadData = () => { - if (chartInstance.current) { - chartInstance.current.series[0].dataSource = accData; - chartInstance.current.refresh(); + if (chart) { + (chart as AccumulationChartComponent).series[0].dataSource = accData; } }; // Function to load data when button is clicked @@ -99,10 +98,10 @@ const SAMPLE_CSS = ` {/* Chart Component */} -
    +
    chart = g} loaded={loadedChartData} noDataTemplate={noDataTemplate} > - + diff --git a/ej2-react/code-snippet/stock-chart/working-with-data-cs4/app/index.jsx b/ej2-react/code-snippet/stock-chart/working-with-data-cs4/app/index.jsx index 4e606ca17..a277c35e7 100644 --- a/ej2-react/code-snippet/stock-chart/working-with-data-cs4/app/index.jsx +++ b/ej2-react/code-snippet/stock-chart/working-with-data-cs4/app/index.jsx @@ -3,52 +3,53 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts'; import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export } from '@syncfusion/ej2-react-charts'; -import { chartData } from 'datasource.ts'; +import { chartData } from '../datasource.ts'; +import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; function App() { - let chartInstance = React.useRef(null); const [hasData, setHasData] = React.useState(false); - useEffect(() => { + var chart; + React.useEffect(() => { if (hasData) { const buttonContainer = document.getElementById("syncfusionButtonContainer"); if (buttonContainer) { - ReactDOM.unmountComponentAtNode(buttonContainer); - } - } - }, [hasData]); - const SAMPLE_CSS = ` -#noDataTemplateContainer { - height: inherit; - width: inherit; -} + ReactDOM.unmountComponentAtNode(buttonContainer); + } + } + }, [hasData]); + const SAMPLE_CSS = ` + #noDataTemplateContainer { + height: inherit; + width: inherit; + } -.light-bg { - background-color: #fafafa; - color: #000000; -} + .light-bg { + background-color: #fafafa; + color: #000000; + } -.template-align img { - max-width: 150px; - /* Adjust size as needed */ - max-height: 150px; - margin-top: 55px; -} + .template-align img { + max-width: 150px; + /* Adjust size as needed */ + max-height: 150px; + margin-top: 55px; + } -.load-data-btn { - border-radius: 4px; -} + .load-data-btn { + border-radius: 4px; + } -.template-align { - display: flex; - align-items: center; - justify-content: center; - text-align: center; - flex-direction: column; -} + .template-align { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + flex-direction: column; + } -#syncfusionButtonContainer { - margin-top: 5px; -}`; - const noDataTemplate = ` + #syncfusionButtonContainer { + margin-top: 5px; + }`; + const noDataTemplate = `
    No Data @@ -61,61 +62,60 @@ function App() {
    `; - - // Function to load data when button is clicked - const loadData = () => { - if (chartInstance.current) { - chartInstance.current.series[0].dataSource = chartData; - chartInstance.current.refresh(); - } - }; - // Function to load data when button is clicked - const loadedChartData = () => { - if (!hasData) { - const buttonContainer = document.getElementById("syncfusionButtonContainer"); - if (buttonContainer && !buttonContainer.hasChildNodes()) { - // Create the button element using React.createElement - const buttonElement = React.createElement(ButtonComponent, { - id: "loadDataButton", - content: "Load Data", - iconCss: "e-icons e-refresh", - cssClass: "load-data-btn e-outline", - isPrimary: false, - onClick: loadData - }); - - const root = createRoot(buttonContainer); - root.render(buttonElement); - } - } - }; + + // Function to load data when button is clicked + const loadData = () => { + if (chart) { + chart.series[0].dataSource = chartData; + } + }; + // Function to load data when button is clicked + const loadedChartData = () => { + if (!hasData) { + const buttonContainer = document.getElementById("syncfusionButtonContainer"); + if (buttonContainer && !buttonContainer.hasChildNodes()) { + // Create the button element using React.createElement + const buttonElement = React.createElement(ButtonComponent, { + id: "loadDataButton", + content: "Load Data", + iconCss: "e-icons e-refresh", + cssClass: "load-data-btn e-outline", + isPrimary: false, + onClick: loadData + }); + + const root = createRoot(buttonContainer); + root.render(buttonElement); + } + } + }; return ( -
    +
    {/* Custom No Data Template with Button */} - + {/* Chart Component */}
    - - - - - - - -
    + chart = g} loaded={loadedChartData} noDataTemplate={noDataTemplate} primaryXAxis={{ + valueType: 'DateTime', + majorGridLines: { width: 0 }, majorTickLines: { color: 'transparent' }, + crosshairTooltip: { enable: true } + }} primaryYAxis={{ + labelFormat: 'n0', + lineStyle: { width: 0 }, rangePadding: 'None', + majorTickLines: { width: 0 } + }} title='Sales Analysis' bearFillColor='#2ecd71' bullFillColor='#e74c3d' height='350'> + + + + + +
    - ); +
    + ); } ; export default App; diff --git a/ej2-react/code-snippet/stock-chart/working-with-data-cs4/app/index.tsx b/ej2-react/code-snippet/stock-chart/working-with-data-cs4/app/index.tsx index d0ad02eee..4a3fe8968 100644 --- a/ej2-react/code-snippet/stock-chart/working-with-data-cs4/app/index.tsx +++ b/ej2-react/code-snippet/stock-chart/working-with-data-cs4/app/index.tsx @@ -4,7 +4,7 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; -import { useEffect, useRef, useState } from 'react';import { createRoot } from 'react-dom/client'; +import { useEffect, useRef, useState } from 'react'; import { createRoot } from 'react-dom/client'; import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, ITooltipRenderEventArgs, IStockChartEventArgs, ChartTheme, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines @@ -13,52 +13,52 @@ import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export } from '@syncfusion/ej2-react-charts'; -import { chartData } from 'datasource.ts'; +import { chartData } from '../datasource.ts'; function App() { -let chartInstance = React.useRef(null); const [hasData, setHasData] = React.useState(false); - useEffect(() => { - if (hasData) { - const buttonContainer = document.getElementById("syncfusionButtonContainer"); - if (buttonContainer) { - ReactDOM.unmountComponentAtNode(buttonContainer); - } - } - }, [hasData]); - const SAMPLE_CSS = ` -#noDataTemplateContainer { - height: inherit; - width: inherit; -} -.light-bg { - background-color: #fafafa; - color: #000000; -} + var chart: StockChartComponent | null; + React.useEffect(() => { + if (hasData) { + const buttonContainer = document.getElementById("syncfusionButtonContainer"); + if (buttonContainer) { + ReactDOM.unmountComponentAtNode(buttonContainer); + } + } + }, [hasData]); + const SAMPLE_CSS = ` + #noDataTemplateContainer { + height: inherit; + width: inherit; + } + .light-bg { + background-color: #fafafa; + color: #000000; + } -.template-align img { - max-width: 150px; - /* Adjust size as needed */ - max-height: 150px; - margin-top: 55px; -} + .template-align img { + max-width: 150px; + /* Adjust size as needed */ + max-height: 150px; + margin-top: 55px; + } -.load-data-btn { - border-radius: 4px; -} + .load-data-btn { + border-radius: 4px; + } -.template-align { - display: flex; - align-items: center; - justify-content: center; - text-align: center; - flex-direction: column; -} + .template-align { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + flex-direction: column; + } -#syncfusionButtonContainer { - margin-top: 5px; -}`; - const noDataTemplate = ` + #syncfusionButtonContainer { + margin-top: 5px; + }`; + const noDataTemplate = `
    No Data @@ -71,69 +71,68 @@ let chartInstance = React.useRef(null);
    `; - - // Function to load data when button is clicked - const loadData = () => { - if (chartInstance.current) { - chartInstance.current.series[0].dataSource = chartData; - chartInstance.current.refresh(); - } - }; - // Function to load data when button is clicked - const loadedChartData = () => { - if (!hasData) { - const buttonContainer = document.getElementById("syncfusionButtonContainer"); - if (buttonContainer && !buttonContainer.hasChildNodes()) { - // Create the button element using React.createElement - const buttonElement = React.createElement(ButtonComponent, { - id: "loadDataButton", - content: "Load Data", - iconCss: "e-icons e-refresh", - cssClass: "load-data-btn e-outline", - isPrimary: false, - onClick: loadData - }); - - const root = createRoot(buttonContainer); - root.render(buttonElement); - } - } - }; - return ( + + // Function to load data when button is clicked + const loadData = () => { + if (chart) { + (chart as StockChartComponent).series[0].dataSource = chartData; + } + }; + // Function to load data when button is clicked + const loadedChartData = () => { + if (!hasData) { + const buttonContainer = document.getElementById("syncfusionButtonContainer"); + if (buttonContainer && !buttonContainer.hasChildNodes()) { + // Create the button element using React.createElement + const buttonElement = React.createElement(ButtonComponent, { + id: "loadDataButton", + content: "Load Data", + iconCss: "e-icons e-refresh", + cssClass: "load-data-btn e-outline", + isPrimary: false, + onClick: loadData + }); + + const root = createRoot(buttonContainer); + root.render(buttonElement); + } + } + }; + return (
    {/* Custom No Data Template with Button */} - + {/* Chart Component */}
    - - - - - - - + chart = g} loaded={loadedChartData} noDataTemplate={noDataTemplate} + primaryXAxis={{ + valueType: 'DateTime', + majorGridLines: { width: 0 }, majorTickLines: { color: 'transparent' }, + crosshairTooltip: { enable: true } + }} + primaryYAxis={{ + labelFormat: 'n0', + lineStyle: { width: 0 }, rangePadding: 'None', + majorTickLines: { width: 0 } + }} + title='Sales Analysis' + bearFillColor='#2ecd71' + bullFillColor='#e74c3d' + height='350' + > + + + + + +
    - - ) + + ) }; export default App; ReactDOM.render(, document.getElementById("charts")); diff --git a/ej2-react/pivotview/getting-started.md b/ej2-react/pivotview/getting-started.md index 6d35df4f5..c3a78165f 100644 --- a/ej2-react/pivotview/getting-started.md +++ b/ej2-react/pivotview/getting-started.md @@ -10,19 +10,21 @@ domainurl: ##DomainURL## # Getting started in React Pivotview component -This section explains you the steps required to create a simple [**Pivot Table**](https://www.syncfusion.com/react-components/react-pivot-table) and demonstrate the basic usage of the Pivot Table component in React environment. +This section guides you through the steps to create a simple [Pivot Table](https://www.syncfusion.com/react-components/react-pivot-table) in a React application. It demonstrates how to set up and use the Pivot Table component to display and analyze data effectively. -To get start quickly with React Pivot Table, you can check on this video: +To get started quickly with the React [Pivot Table](https://www.syncfusion.com/react-components/react-pivot-table), watch this video: {% youtube "https://www.youtube.com/watch?v=vwoijhliTAI" %} ## Prerequisites -[System requirements for Syncfusion® React UI components](../system-requirement) +Before you begin, ensure your system meets the requirements for using Syncfusion® React UI components. You need a compatible browser and a supported React version to work with the Pivot Table component. For details on supported browsers and React versions, refer to the [system requirements](../system-requirement). ## Dependencies -The following list of dependencies are required to use the pivot table component in your application. +Understanding the dependency structure helps you identify the required packages for implementing the Pivot Table component effectively in your React application. The Pivot Table component relies on a structured hierarchy of dependencies that provide essential functionality for data processing, user interface elements, and export capabilities. + +The following dependency tree shows the required packages for the React Pivot Table component: ```javascript |-- @syncfusion/ej2-react-pivotview @@ -48,25 +50,31 @@ The following list of dependencies are required to use the pivot table component |-- @syncfusion/ej2-react-base ``` +The main package `@syncfusion/ej2-react-pivotview` serves as the primary React wrapper for the Pivot Table component. This package automatically includes all the necessary sub-dependencies shown in the tree structure above. When you install the main package, npm will automatically resolve and install these dependencies, ensuring your Pivot Table component functions properly with all its supported operations, including data binding, user interactions, and export options. + ## Setup for Local Development -To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production. +To set up a React application for using the Pivot Table component, use `create-vite-app`. This tool offers a fast and efficient development environment with smaller bundle sizes and optimized builds compared to other tools like `create-react-app`. For detailed steps, refer to the Vite [installation guide](https://vitejs.dev/guide/). By following these steps, you can create a React application ready for development and production. -> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. +> **Note:** To create a React application using `create-react-app`, refer to this [guide](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. -To create a new React application, run the following command. +To create a new React application, open your terminal and run the following command: ```bash npm create vite@latest my-app ``` -To set-up a React application in TypeScript environment, run the following command. + +To set up a React application with TypeScript, use this command: ```bash npm create vite@latest my-app -- --template react-ts cd my-app npm run dev ``` -To set-up a React application in JavaScript environment, run the following command. + +This command creates a TypeScript-based React application, navigates to the project folder, and starts the development server. + +To set up a React application with JavaScript, use this command: ```bash npm create vite@latest my-app -- --template react @@ -74,20 +82,21 @@ cd my-app npm run dev ``` +This command creates a JavaScript-based React application, navigates to the project folder, and starts the development server. ## Adding Syncfusion® packages -All the available Essential® JS 2 packages are published in [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. To install pivot table component, use the following command. +To use the Pivot Table component in your React project, you need to install the required Syncfusion® packages. These packages are available in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. Run the following command to install the Pivot Table package: -``` +```bash npm install @syncfusion/ej2-react-pivotview --save ``` -> The **--save** will instruct NPM to include the pivot table package inside the `dependencies` section of the `package.json`. +> The `--save` option ensures that the Pivot Table package is added to the `dependencies` section of your `package.json` file. ## Adding CSS reference -Add pivot table and its [dependent](#dependencies) components styles as given below in **src/App.css** file. In this illustration, we have referred **material** theme. +To style the [Pivot Table](https://www.syncfusion.com/react-components/react-pivot-table), include the necessary CSS files for the Pivot Table and its [dependent](#dependencies) components in the **src/App.css** file. For this example, we use the **material** theme to ensure a consistent and modern appearance. Add the following code to import the required styles: ```css @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @@ -98,29 +107,34 @@ Add pivot table and its [dependent](#dependencies) components styles as given be @import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css"; +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; @import '../node_modules/@syncfusion/ej2-react-pivotview/styles/material.css'; ``` -> You can also refer other themes like bootstrap, fabric, high-contrast etc. To know about individual component CSS, please refer [here](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). +These styles ensure the [Pivot Table](https://www.syncfusion.com/react-components/react-pivot-table) and its related components, such as buttons and dropdowns, display correctly. You can also use other themes like **bootstrap**, **fabric**, or **high-contrast** to match your application's look. For details on individual component styles, refer to the [Syncfusion theme documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). -Next we need to refer **App.css** in the application by importing it in the **src/App.js** file as follows. +Next, import the **App.css** file into your application by adding the following line in the **src/App.js** file: ```js import './App.css'; ``` +This import applies the CSS styles to your React application, enabling the [Pivot Table](https://www.syncfusion.com/react-components/react-pivot-table) to render with the **material** theme. + ## Browser compatibility -Polyfills are required to use the Pivot Table in Internet Explorer 11 browser. Refer the [documentation](https://ej2.syncfusion.com/react/documentation/browser/?no-cache=1#browser-support) for more details. +The Pivot Table works smoothly across modern browsers. For Internet Explorer 11, you need to include polyfills to ensure proper functionality. For more details, refer to the [browser support documentation](https://ej2.syncfusion.com/react/documentation/browser/?no-cache=1#browser-support). -## Adding pivot table component +## Adding Pivot Table Component -You can initialize pivot table component in the application using following steps. +To integrate the Pivot Table component into your React application, follow these steps to initialize it and populate it with sample data for meaningful data analysis. -* Import the **PivotViewComponent** (aka, PivotTable) component from the **@syncfusion/ej2-react-pivotview** package in **App.js** file. -* Then you can initialize pivot table component (``) using following code. +### 1. Import the Pivot Table Component +In your `App.js` file, import the `PivotViewComponent` from the `@syncfusion/ej2-react-pivotview` package. + +### 2. Initialize the Component +Set up the `` in your application using the following code: ```js import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview'; @@ -134,7 +148,12 @@ function App() { export default App; ``` -After initialization, add the the following code in **src/App.jsx** file to populate pivot table with a sample relational data source. Refer [here](./data-binding) to know the more details about relational data binding. +### 3. Populate with Sample Data +To enable users to perform meaningful analysis and generate actionable insights, the Pivot Table component requires a well-structured data source. This data source contains the information you want to analyze and visualize. + +For demonstration purposes, we'll use a collection of objects containing sales details for various products across different periods and regions. This sample data is assigned to the Pivot Table component through the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#datasource) property under the [`dataSourceSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/) configuration. For more details on relational data binding, refer [here](./data-binding). + +Here’s the complete code to initialize the Pivot Table with sample data: ```js import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview'; @@ -168,27 +187,28 @@ function App() { export default App; ``` -## Adding fields to row, column, value and filter axes - -Now that pivot table is initialized and assigned with sample data, will further move to showcase the component by organizing appropriate fields in row, column, value and filter axes. +## Adding fields to row, column, value, and filter axes -In [`dataSourceSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/), four major axes - [`rows`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#rows), [`columns`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#columns), [`values`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#values) and [`filters`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#filters) plays a vital role in defining and organizing fields from the bound data source, to render the entire pivot table component in a desired format. +Organizing fields into appropriate axes transforms raw data into a structured, meaningful Pivot Table that enables users to analyze patterns and trends effectively. With the Pivot Table now initialized and populated with sample data, the next logical step involves organizing the appropriate fields into row, column, value, and filter axes to create a functional data analysis tool. -[`rows`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#rows) – Collection of fields that needs to be displayed in row axis of the pivot table. +In the [`dataSourceSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/) configuration, four primary axes play a crucial role in defining and organizing fields from the bound data source to render the Pivot Table component in the desired format. -[`columns`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#columns) – Collection of fields that needs to be displayed in column axis of the pivot table. +**Understanding the four axes:** -[`values`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#values) – Collection of fields that needs to be displayed as aggregated numeric values in the pivot table. +- [`rows`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#rows) – Collection of fields that will be displayed along the row axis of the Pivot Table. +- [`columns`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#columns) – Collection of fields that will be displayed along the column axis of the Pivot Table. +- [`values`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#values) – Collection of fields that will be displayed as aggregated numeric values within the Pivot Table. +- [`filters`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#filters) – Collection of fields that act as master filters over the data bound to the row, column, and value axes of the Pivot Table. -[`filters`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#filters) - Collection of fields that would act as master filter over the data bound in row, column and value axes of the pivot table. +**Essential field properties:** -In-order to define each field in the respective axis, the following basic properties should be set. +To define each field in its respective axis, configure the following basic properties: -* [`name`](https://ej2.syncfusion.com/react/documentation/api/pivotview/fieldOptionsModel/#name): It allows to set the field name from the bound data source. It’s casing should match exactly like in the data source and if not set properly, the pivot table will not be rendered. -* [`caption`](https://ej2.syncfusion.com/react/documentation/api/pivotview/fieldOptions/#caption): It allows to set the field caption, which is the alias name of the field that needs to be displayed in the pivot table. -* [`type`](https://ej2.syncfusion.com/react/documentation/api/pivotview/fieldOptionsModel/#type): It allows to set the summary type of the field. By default, **Sum** is applied. +* [`name`](https://ej2.syncfusion.com/react/documentation/api/pivotview/fieldOptionsModel/#name): Sets the field name from the bound data source. The casing must match exactly as it appears in the data source, otherwise the Pivot Table will not render correctly. +* [`caption`](https://ej2.syncfusion.com/react/documentation/api/pivotview/fieldOptionsModel/#caption): Sets the field caption, which serves as the display name for the field in the Pivot Table. +* [`type`](https://ej2.syncfusion.com/react/documentation/api/pivotview/fieldOptionsModel/#type): Sets the summary type for the field. By default, the **Sum** aggregation is applied. -In this illustration, "Year" and "Quarter" are added in column, "Country" and "Products" in row, and "Sold" and "Amount" in value section respectively. +In this example, "Date" and "Product" are positioned in the column axis, "Country" and "State" are placed in the row axis, and "Sold" and "Quantity" are configured as values respectively. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -207,11 +227,15 @@ In this illustration, "Year" and "Quarter" are added in column, "Country" and "P {% previewsample "page.domainurl/code-snippet/pivot-table/getting-started-cs1" %} -## Applying formatting to a value field +## Applying Formatting to a Value Field -Formatting defines a way in which values should be displayed. For example, format **"C"** denotes the values should be displayed in currency pattern. To do so, define the [`formatSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/formatSettings/) with its [`name`](https://ej2.syncfusion.com/react/documentation/api/pivotview/formatSettings/#name) and [`format`](https://ej2.syncfusion.com/react/documentation/api/pivotview/formatSettings/#format) properties and add it to [`formatSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/formatSettings/#formatsettings). In this illustration, the [`name`](https://ej2.syncfusion.com/react/documentation/api/pivotview/formatSettings/#name) property is set as **Amount**, a field from value section and its format is set as currency. Likewise, we can set format for other value fields as well and add it to [`formatSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/formatSettings/#formatsettings). +Formatting enhances the readability and presentation of numerical data in a Pivot Table, making it more user-friendly and professional. For instance, you can display values with currency symbols or control the number of decimal places for better clarity. -> Only fields from value section, which is in the form of numeric data values are applicable for formatting. +To apply formatting to value fields in the Pivot Table, use the [`formatSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/formatSettings/) property. This property accepts an array of format objects, where each object defines formatting rules for a specific field in your data. + +Within each format object in the [`formatSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/formatSettings/) array, set the [`name`](https://ej2.syncfusion.com/react/documentation/api/pivotview/formatSettings/#name) property to match the exact field name from your value section. Then, specify the desired display format using the [`format`](https://ej2.syncfusion.com/react/documentation/api/pivotview/formatSettings/#format) property. In the example below, the **Amount** field is configured to display values in currency format using the "C0" pattern, which shows currency symbols without decimal places. + +> **Note:** Formatting can only be applied to numeric fields in the value section of the Pivot Table. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -230,25 +254,43 @@ Formatting defines a way in which values should be displayed. For example, forma {% previewsample "page.domainurl/code-snippet/pivot-table/getting-started-cs2" %} +This approach allows you to apply different formatting patterns to multiple value fields by adding additional objects to the [`formatSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/formatSettings/) array. Each object in the array can target a different field, providing complete control over how numerical data is displayed in the Pivot Table. + ## Module Injection -To create pivot table with additional features, inject the required modules. The modules that are available with basic functionality are as follows. +Module injection enhances the Pivot Table by enabling additional functionality through specialized modules. To incorporate specific features into your Pivot Table, inject the required modules into your React application. -* `GroupingBar` - Inject this module to access grouping bar. -* `FieldList` - Inject this module to access pivot field list. -* `CalculatedField` - Inject this module to access calculated field. +The following modules are available to extend the basic Pivot Table functionality: -These modules should be injected into the PivotView using the `Inject` method within the `app.tsx` file as shown below. On doing so, only the injected views will be loaded and displayed along with pivot table. +* `GroupingBar` - Inject this module to enable the grouping bar, which allows users to drag and drop fields between different axes of the Pivot Table. +* `FieldList` - Inject this module to enable the field list, providing an interactive interface for users to add, remove, and rearrange fields dynamically. +* `CalculatedField` - Inject this module to enable calculated fields, allowing users to create custom formulas and expressions for data analysis. + +To make these modules available, inject them into the PivotView using the `Inject` component within your `App.tsx` file, as shown below. By injecting only the modules you need, your application loads faster and uses fewer resources, as unnecessary module code is excluded from the final bundle. ```ts - +import * as React from 'react'; +import { PivotViewComponent, Inject, GroupingBar, FieldList, CalculatedField } from '@syncfusion/ej2-react-pivotview'; + +function App() { + return ( + + + + ); +} +export default App; ``` +> **Note:** Only inject the modules that you plan to use in your application. This approach helps maintain optimal bundle size and application performance. + ## Enable Field List -The field list allows to add or remove fields and also rearrange the fields between different axes, including column, row, value, and filter along with filter and sort options dynamically at runtime. It can be enabled by setting the [`showFieldList`](https://ej2.syncfusion.com/react/documentation/api/pivotview/pivotViewModel/#showfieldlist) property to **true** and by injecting the **FieldList** module as follows. To know more about field list, [`refer`](./field-list) here. +The field list enhances user interaction by allowing you to dynamically add, remove, and rearrange fields across different axes **including column, row, value, and filter axes**. This user-friendly interface also provides sorting and filtering options that can be applied at runtime without requiring code changes. + +To enable the field list, set the [`showFieldList`](https://ej2.syncfusion.com/react/documentation/api/pivotview/pivotViewModel/#showfieldlist) property to **true** and inject the `FieldList` module into your component. This combination activates the field list interface, making it accessible to users to modify PivotTable report settings. For comprehensive details about field list functionality, [`refer`](./field-list) to the dedicated field list documentation. -> If the **FieldList** module is not injected, the Field List will not be rendered with the pivot table component. +> The `FieldList` module must be injected for the field list to render properly with the Pivot Table component. Without this module, the field list will not be available. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -269,9 +311,11 @@ The field list allows to add or remove fields and also rearrange the fields betw ## Enable Grouping Bar -The grouping bar feature automatically populates fields from the bound data source and allows end users to drag fields between different axes such as columns, rows, values, and filters, and alter pivot table at runtime. It also provides option to sort, filter and remove fields. It can be enabled by setting the [`showGroupingBar`](https://ej2.syncfusion.com/react/documentation/api/pivotview/pivotViewModel/#showgroupingbar) property to **true** and by injecting the **GroupingBar** module as follows. To know more about grouping bar, [`refer`](./grouping-bar) here. +The grouping bar allows users to easily manage and modify the report settings of the Pivot Table directly through the user interface. With the grouping bar, users can instantly move fields between columns, rows, values, and filters by dragging them, allowing for quick arrangement and analysis of the data. -> If the **GroupingBar** module is not injected, the grouping bar will not be rendered with the pivot table component. +Users can also use the grouping bar to sort, filter, or remove fields quickly without needing to write any code. To enable the grouping bar, set the [`showGroupingBar`](https://ej2.syncfusion.com/react/documentation/api/pivotview/pivotViewModel/#showgroupingbar) property to **true**, and make sure to inject the `GroupingBar` module in your application. For more details about using the grouping bar, see the [Grouping Bar documentation](./grouping-bar). + +> The `GroupingBar` module must be injected for the grouping bar to render properly with the Pivot Table component. Without this module, the grouping bar will not be available. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -292,7 +336,9 @@ The grouping bar feature automatically populates fields from the bound data sour ## Exploring Filter Axis -The filter axis contains collection of fields that would act as master filter over the data bound in [`rows`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#rows), [`columns`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#columns) and [`values`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#values) axes of the pivot table. The fields along with filter members could be set to filter axis either through report via code behind or by dragging and dropping fields from other axes to filter axis via grouping bar or field list at runtime. +The filter axis helps users display only the most relevant information in the Pivot Table for easier analysis. Users can add fields to the filter axis, which act as a master filter over the data displayed in the [`rows`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#rows), [`columns`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#columns), and [`values`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#values) axes. You can set these fields and their filter items in two ways: by configuring them in your [`dataSourceSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/) through code, or by simply dragging and dropping fields from other axes to the filter axis using the grouping bar or the field list at runtime. This makes it easier to analyze targeted subsets of data without modifying the underlying structure of the Pivot Table. + +The following example shows how to add fields to the filter axis in a React Pivot Table: {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -313,10 +359,17 @@ The filter axis contains collection of fields that would act as master filter ov ## Calculated Field -The calculated field feature allows user to insert or add a new calculated field based on the available fields from the bound data source using basic arithmetic operators. The calculated field can be included in pivot table using the [`CalculatedFieldSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/calculatedFieldSettings/) from code behind. Or else, calculated fields can be added at run time through the built-in dialog by just setting the [`allowCalculatedField`](https://ej2.syncfusion.com/react/documentation/api/pivotview/pivotViewModel/#allowcalculatedfield) property to **true** and by injecting the **CalculatedField** module as follows in pivot table. You will see a button enabled in the Field List UI automatically to invoke the calculated field dialog and perform necessary operation. To know more about calculated field, [`refer`](./calculated-field) here. +The calculated field feature enables users to create custom value fields using mathematical formulas and existing fields from their data source. Users can perform complex calculations with basic arithmetic operators and seamlessly integrate these custom fields into their pivot table for enhanced data visualization and reporting. + +Users can add calculated fields in two ways: +- **Using code:** Set up calculated fields through the [`CalculatedFieldSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/calculatedFieldSettings/) property when configuring the Pivot Table. +- **Using the user interface:** Alternatively, calculated fields can be added at runtime through a built-in dialog by setting the [`allowCalculatedField`](https://ej2.syncfusion.com/react/documentation/api/pivotview/pivotViewModel/#allowcalculatedfield) property to **true** and by injecting the **CalculatedField** module. When enabled, a button appears in the Field List UI. Clicking this button opens a dialog that allows users to create, edit, or remove calculated fields at runtime. To learn more about calculated fields, [`refer`](./calculated-field) here. + +> To use the calculated field dialog, make sure the **CalculatedField** module is injected. If it is not injected, the popup dialog will not be shown with the Pivot Table. -> If the **CalculatedField** module is not injected, the calculated field dialog will not appear within the pivot table component. By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the pivot table UI, it must be added to the [`values`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#values) -property, as shown in the code below. Additionally, calculated fields can only be added to the value axis. +> By default, calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display a calculated field in the Pivot Table UI, you must add it to the [`values`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#values) property, as shown in the code below. Additionally, calculated fields can only be added to the value axis. + +Below is a sample code that shows how to set up calculated fields both through code-behind and using the popup dialog: {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -337,9 +390,11 @@ property, as shown in the code below. Additionally, calculated fields can only b ## Run the application -Now run the `npm run dev` command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser. +Running the Pivot Table application allows you to see your changes and data in real time directly in the browser, making it easy to check your results. -``` +To start the application, open a command prompt in your project folder and run the following command. This will compile the project and automatically open it in your browser. + +```sh npm run dev ``` diff --git a/ej2-react/pivotview/how-to/add-custom-aggregation-type-in-menu.md b/ej2-react/pivotview/how-to/add-custom-aggregation-type-in-menu.md index 5c5e0dab7..8111835b5 100644 --- a/ej2-react/pivotview/how-to/add-custom-aggregation-type-in-menu.md +++ b/ej2-react/pivotview/how-to/add-custom-aggregation-type-in-menu.md @@ -12,9 +12,24 @@ domainurl: ##DomainURL## # Add custom aggregation type to the menu in React Pivotview component -By using the [`dataBound`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#databound) event, you can add your own custom aggregate type(s) to the pivot table's aggregate menu. +The React Pivot Table component allows you to extend its functionality by adding custom aggregation types to the built-in aggregation menu. This enables you to implement specific calculation methods beyond the standard options like Sum, Average, Min, and Max. -In the following example, we have added the aggregation types **CustomAggregateType 1** and **CustomAggregateType 2** to the aggregate menu. The calculation for those aggregated types can be done using the [`aggregateCellInfo`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#aggregatecellinfo) event. +## Adding custom aggregation types + +You can use the [`dataBound`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#databound) event to add your own custom aggregate types to the pivot table's aggregate menu. This event fires after the pivot table has been fully rendered, making it the perfect spot to modify the component's UI elements. + +In the following example, we have added two custom aggregation types **CustomAggregateType 1** (which calculates a weighted average) and **CustomAggregateType 2** (which calculates the percentage of total) to the aggregate menu. + +The calculation logic for these custom aggregation types is implemented using the [`aggregateCellInfo`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#aggregatecellinfo) event. This event provides parameters including: +- [`fieldName`](https://ej2.syncfusion.com/react/documentation/api/pivotview/aggregateEventArgs/#fieldname) - Holds the current cell's field name. +- [`row`](https://ej2.syncfusion.com/react/documentation/api/pivotview/aggregateEventArgs/#row) - Holds the current cell's row value. +- [`column`](https://ej2.syncfusion.com/react/documentation/api/pivotview/aggregateEventArgs/#column) - Holds the current cell's column value. +- [`value`](https://ej2.syncfusion.com/react/documentation/api/pivotview/aggregateEventArgs/#value) - Holds the value of the current cell. +- [`cellSets`](https://ej2.syncfusion.com/react/documentation/api/pivotview/aggregateEventArgs/#cellsets) - Holds raw data for the aggregated value cell. +- [`rowCellType`](https://ej2.syncfusion.com/react/documentation/api/pivotview/aggregateEventArgs/#rowcelltype) - Holds the row cell type value. +- [`columnCellType`](https://ej2.syncfusion.com/react/documentation/api/pivotview/aggregateEventArgs/#columncelltype) - Holds the column cell type value. +- [`aggregateType`](https://ej2.syncfusion.com/react/documentation/api/pivotview/aggregateEventArgs/#aggregatetype) - Holds the aggregate type of the cell. +- [`skipFormatting`](https://ej2.syncfusion.com/react/documentation/api/pivotview/aggregateEventArgs/#skipformatting) - Boolean property that allows skipping formatting if applied. {% tabs %} {% highlight js tabtitle="App.jsx" %} diff --git a/ej2-react/pivotview/how-to/apply-condition-based-hyper-link-for-specific-row-or-column.md b/ej2-react/pivotview/how-to/apply-condition-based-hyper-link-for-specific-row-or-column.md index f4fb98552..78571027f 100644 --- a/ej2-react/pivotview/how-to/apply-condition-based-hyper-link-for-specific-row-or-column.md +++ b/ej2-react/pivotview/how-to/apply-condition-based-hyper-link-for-specific-row-or-column.md @@ -10,12 +10,17 @@ domainurl: ##DomainURL## # Apply condition based hyper link for specific row or column in React -You can apply conditions for specific row or column using `label` option to show hyperlink option in the pivot table. It can be configured using the `conditionalSettings` option through code behind, during initial rendering. The required settings are: +In the Pivot Table, you can display hyperlinks in specific rows or columns by setting up certain conditions. This can be done using the [`conditionalSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/hyperlinkSettingsModel/#conditionalsettings) property, which is available within the [`hyperlinkSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/hyperlinkSettings/) object. -* `label`: Specifies the header name to get visibility of hyperlink option for row or column. -* `conditions`: Specifies the operator type such as equals, greater than, less than, etc. -* `value1`: Specifies the start value. -* `value2`: Specifies the end value. +The following options are available under the [`conditionalSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/hyperlinkSettingsModel/#conditionalsettings) to configure the hyperlinks: + +* [`label`](https://ej2.syncfusion.com/react/documentation/api/pivotview/conditionalSettingsModel/#label): Defines the specific row or column header where the hyperlink should appear. +* [`conditions`](https://ej2.syncfusion.com/react/documentation/api/pivotview/conditionalSettingsModel/#conditions): Sets the condition type, such as `Equals`, `GreaterThan`, or `LessThan`. +* [`value1`](https://ej2.syncfusion.com/react/documentation/api/pivotview/conditionalSettingsModel/#value1): Sets the starting value for the condition. +* [`value2`](https://ej2.syncfusion.com/react/documentation/api/pivotview/conditionalSettingsModel/#value2): Sets the ending value for the condition (used for `Between` and `NotBetween` conditions). +* [`measure`](https://ej2.syncfusion.com/react/documentation/api/pivotview/conditionalSettingsModel/#measure): Defines the measure, or value field, to which the hyperlink should be applied. + +In the following example, the [`hyperlinkSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/hyperlinkSettings/) property is configured to show a hyperlink for cells under the **Germany** header. The hyperlink will only appear if the cell's value is greater than 500. This is achieved by setting the [`label`](https://ej2.syncfusion.com/react/documentation/api/pivotview/conditionalSettingsModel/#label) to **Germany**, the [`conditions`](https://ej2.syncfusion.com/react/documentation/api/pivotview/conditionalSettingsModel/#conditions) to **GreaterThan**, and [`value1`](https://ej2.syncfusion.com/react/documentation/api/pivotview/conditionalSettingsModel/#value1) to **500**. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -26,4 +31,4 @@ You can apply conditions for specific row or column using `label` option to show {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/pivot-table/default-cs153" %} +{% previewsample "page.domainurl/code-snippet/pivot-table/default-cs153" %} diff --git a/ej2-react/pivotview/how-to/apply-conditional-formatting-for-specific-row-or-column.md b/ej2-react/pivotview/how-to/apply-conditional-formatting-for-specific-row-or-column.md index 3e8eb92d0..2aabb3bad 100644 --- a/ej2-react/pivotview/how-to/apply-conditional-formatting-for-specific-row-or-column.md +++ b/ej2-react/pivotview/how-to/apply-conditional-formatting-for-specific-row-or-column.md @@ -10,16 +10,24 @@ domainurl: ##DomainURL## # Apply conditional formatting for specific row or column in React -You can apply conditional formatting for specific row or column using `label` option in the pivot table. It can be configured using the `conditionalFormatSettings` option through code behind, during initial rendering. The required settings are: +Conditional formatting allows you to visually highlight important data and identify patterns in your React Pivot Table by applying formatting to specific rows or columns based on certain conditions. This feature helps to emphasize particular data values that meet defined criteria. -* `label`: Specifies the header name to apply conditions for row or column. -* `conditions`: Specifies the operator type such as equals, greater than, less than, etc. -* `value1`: Specifies the start value. -* `value2`: Specifies the end value. -* `style`: Specifies the style for the cell. +## Implementing Conditional Formatting + +You can apply conditional formatting to specific rows or columns using the [`label`](https://ej2.syncfusion.com/react/documentation/api/pivotview/conditionalFormatSettingsModel/#label) option in the Pivot Table. The formatting is configured through the [`conditionalFormatSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettingsModel/#conditionalformatsettings) option during initial rendering. + +The following configuration options are required: + +* [`label`](https://ej2.syncfusion.com/react/documentation/api/pivotview/conditionalFormatSettingsModel/#label): Specifies the header name to apply conditions for a specific row or column +* [`conditions`](https://ej2.syncfusion.com/react/documentation/api/pivotview/conditionalFormatSettingsModel/#conditions): Defines the type of comparison operator such as `Equals`, `GreaterThan`, or `LessThan`. +* [`value1`](https://ej2.syncfusion.com/react/documentation/api/pivotview/conditionalFormatSettingsModel/#value1): Sets the comparison start value +* [`value2`](https://ej2.syncfusion.com/react/documentation/api/pivotview/conditionalFormatSettingsModel/#value2): Sets the comparison end value (used for `Between` and `NotBetween` conditions). +* [`style`](https://ej2.syncfusion.com/react/documentation/api/pivotview/conditionalFormatSettingsModel/#style): Defines the CSS styling to apply when the condition is met (background color, font color, etc.) To use the conditional formatting feature, You need to inject the `ConditionalFormatting` module in pivot table. +The code example below shows how to apply conditional formatting to the **Germany** row, highlighting cells with values between 500 and 50,000 in a specific style. + {% tabs %} {% highlight js tabtitle="App.jsx" %} {% include code-snippet/pivot-table/default-cs154/app/App.jsx %} @@ -29,4 +37,4 @@ To use the conditional formatting feature, You need to inject the `ConditionalFo {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/pivot-table/default-cs154" %} +{% previewsample "page.domainurl/code-snippet/pivot-table/default-cs154" %} \ No newline at end of file diff --git a/ej2-react/pivotview/how-to/apply-custom-styles-to-pivot-cells.md b/ej2-react/pivotview/how-to/apply-custom-styles-to-pivot-cells.md index 559dd1e10..b3ffc9b18 100644 --- a/ej2-react/pivotview/how-to/apply-custom-styles-to-pivot-cells.md +++ b/ej2-react/pivotview/how-to/apply-custom-styles-to-pivot-cells.md @@ -10,9 +10,22 @@ domainurl: ##DomainURL## # Apply custom style to pivot cells in React Pivotview component -The [`queryCellInfo`](https://ej2.syncfusion.com/react/documentation/api/grid/#querycellinfo) event in [`gridSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/gridSettings) can be used to apply custom style to row and value cells, and the [`headerCellInfo`](https://ej2.syncfusion.com/react/documentation/api/grid/#headercellinfo) event in [`gridSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/gridSettings) can be used to apply custom styles to column cells. +The React Pivot Table component allows you to alter the appearance of pivot cells using event handlers. This guide demonstrates how to apply custom styling to specific cells in your pivot table. -In the following example, a custom style has been applied to the column header **"Sold Amount"** under **"FY 2016"** via the [`headerCellInfo`](https://ej2.syncfusion.com/react/documentation/api/grid/#headercellinfo) event and to the row header **"Germany"** and its aggregated value via the [`queryCellInfo`](https://ej2.syncfusion.com/react/documentation/api/grid/#querycellinfo) event by adding the **"e-custom"** class to the cell element. +## Overview + +You can apply custom styles to different types of cells in the pivot table: +- Use the [`queryCellInfo`](https://ej2.syncfusion.com/react/documentation/api/grid/#querycellinfo) event to style row headers and value cells. +- Use the [`headerCellInfo`](https://ej2.syncfusion.com/react/documentation/api/grid/#headercellinfo) event to style column headers. + +Both events are available through the [`gridSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/gridSettings/) property of the Pivot Table component. + +## Implementation example + +The following example shows how to apply styles to: +- The column header **"Sold Amount"** under **"FY 2016"** using the [`headerCellInfo`](https://ej2.syncfusion.com/react/documentation/api/grid/#headercellinfo) event. +- The row header **"Germany"** and its aggregated values using the [`queryCellInfo`](https://ej2.syncfusion.com/react/documentation/api/grid/#querycellinfo) event. +- Styles are applied by adding the **"e-custom"** CSS class to the cell elements. {% tabs %} {% highlight js tabtitle="App.jsx" %} diff --git a/ej2-react/pivotview/how-to/bind-complex-data-to-the-pivot-table.md b/ej2-react/pivotview/how-to/bind-complex-data-to-the-pivot-table.md index 300a37fbe..2b0aa7d67 100644 --- a/ej2-react/pivotview/how-to/bind-complex-data-to-the-pivot-table.md +++ b/ej2-react/pivotview/how-to/bind-complex-data-to-the-pivot-table.md @@ -12,9 +12,59 @@ domainurl: ##DomainURL## # Complex JSON to flat JSON in React Pivotview component -By default, flat JSON can only bind to the pivot table. However, you can connect complex JSON to the pivot table by converting it to flat JSON via code-behind and binding it to the pivot table using the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#datasource) property in the [`load`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#load) event. +## Overview -In the following example, the **complexToFlatJson()** method is used to convert complex JSON to flat JSON and bind it to the pivot table using the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#datasource) property, then modifying the field names in the [`rows`](https://ej2.syncfusion.com/vue/documentation/api/pivotview/dataSourceSettings/#rows) and [`columns`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettingsModel/#columns) based on the converted flat JSON under [`dataSourceSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview#datasourcesettings) in the [`load`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#load) event. +The React Pivot Table component requires data in flat JSON format for proper binding. This guide explains how to convert complex, nested JSON structures to flat JSON format and bind it to the pivot table. + +## Understanding complex vs flat JSON + +Complex JSON contains nested objects and arrays, making it difficult to directly bind to the pivot table. For example: + +```json +{ + "CustomerID": "VINET", + "Freight": 32.38, + "OrderDetails": [ + { + "OrderID": 10248, + "OrderDate": "1996-07-04T10:10:00.000Z" + } + ], + "ShipDetails": [ + { + "ShipName": "Vins et alcools Chevalier", + "ShipAddress": "59 rue de l'Abbaye", + "ShipCity": "Reims", + "ShipRegion": null, + "ShipCountry": "France", + "ShippedDate": "1996-07-16T12:20:00.000Z" + } + ] +} +``` + +Flat JSON has a simple key-value structure without nesting, which is suitable for pivot table binding: + +```json +{ + "CustomerID": "VINET", + "Freight": 32.38, + "OrderID": 10248, + "OrderDate": "1996-07-04T10:10:00.000Z", + "ShipName": "Vins et alcools Chevalier", + "ShipAddress": "59 rue de l'Abbaye", + "ShipCity": "Reims", + "ShipRegion": null, + "ShipCountry": "France", + "ShippedDate": "1996-07-16T12:20:00.000Z" +} +``` + +## Implementation + +You can convert complex JSON to flat JSON programmatically and bind it to the pivot table using the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#datasource) property in the [`load`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#load) event. + +In the following example, the **complexToFlatJson()** method is used to convert complex JSON to flat JSON and bind it to the pivot table using the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#datasource) property, then modifying the field names in the [`rows`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettingsModel/#rows) and [`columns`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettingsModel/#columns) based on the converted flat JSON under [`dataSourceSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#datasourcesettings) in the [`load`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#load) event. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -25,4 +75,4 @@ In the following example, the **complexToFlatJson()** method is used to convert {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/pivot-table/default-cs318" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/pivot-table/default-cs318" %} \ No newline at end of file diff --git a/ej2-react/pivotview/how-to/change-load-limited-data-in-member-editor.md b/ej2-react/pivotview/how-to/change-load-limited-data-in-member-editor.md index 41b8e9d81..852cff35a 100644 --- a/ej2-react/pivotview/how-to/change-load-limited-data-in-member-editor.md +++ b/ej2-react/pivotview/how-to/change-load-limited-data-in-member-editor.md @@ -10,13 +10,24 @@ domainurl: ##DomainURL## # Change load limited data in member editor in React -In the filter dialog, you can set the limit to display the field values while loading large data. Based on this limit, the initial loading will complete quickly without any performance constraint. You can use the search option to refine the field values from the exceeded limit and refine the data further. A message with the remaining data count will be displayed in the member editor. The data limit can be set in the `maxNodeLimitInMemberEditor` property. +## Overview -By default, the property holds the value 1000. +When working with large datasets in the React Pivotview component, loading all field values in the filter dialog's member editor can cause performance issues. The [`maxNodeLimitInMemberEditor`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#maxnodelimitinmembereditor) property allows you to set a limit on the number of field values displayed initially, improving the loading performance while still providing access to all data through search functionality. -> The property is available in both pivot table and field list components. +## Setting the data limit -In the following example, the limit of data in the member editor is set to 100. So, the member editor of the `ProductID` field shows only its first 100 members from its 1000 members. +The [`maxNodeLimitInMemberEditor`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#maxnodelimitinmembereditor) property determines how many field values are loaded initially in the member editor. By default, this property is set to 1000 items. + +When the number of field values exceeds this limit: +- Only the specified number of values will load initially +- A message appears indicating how many additional values are available +- Users can use the search option to find specific values from the complete dataset + +> This property is available in both pivot table and field list components. + +## Implementation example + +In the following example, the limit of data in the member editor is set to 100. As a result, the member editor for the `ProductID` field displays only its first 100 members out of 1000 total members. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -27,4 +38,4 @@ In the following example, the limit of data in the member editor is set to 100. {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/pivot-table/default-cs155" %} +{% previewsample "page.domainurl/code-snippet/pivot-table/default-cs155" %} \ No newline at end of file diff --git a/ej2-react/pivotview/how-to/changing-the-pivotview-component-minimum-height.md b/ej2-react/pivotview/how-to/changing-the-pivotview-component-minimum-height.md index af50d0ab5..167cb9e79 100644 --- a/ej2-react/pivotview/how-to/changing-the-pivotview-component-minimum-height.md +++ b/ej2-react/pivotview/how-to/changing-the-pivotview-component-minimum-height.md @@ -10,7 +10,9 @@ domainurl: ##DomainURL## # Changing the pivotview component minimum height in React -The `minHeight` property allows you to change the minimum height for the pivot table control. For the pivot table control, the default minimum height is **300px**. +The `minHeight` property allows you to set the minimum height for the React Pivot Table component. By default, the component maintains a minimum height of **300px**. This property ensures the component remains visible and functional even when the container height is smaller than the specified minimum value. + +When the content exceeds the minimum height, the component automatically adjusts to accommodate the data. This property is particularly useful for responsive layouts where the component needs to maintain usability across different screen sizes. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -27,4 +29,4 @@ The `minHeight` property allows you to change the minimum height for the pivot t {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/pivot-table/default-cs156" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/pivot-table/default-cs156" %} \ No newline at end of file diff --git a/ej2-react/pivotview/how-to/chart-based-on-pivot-table-selection.md b/ej2-react/pivotview/how-to/chart-based-on-pivot-table-selection.md index 5cf9ffef6..665411ea7 100644 --- a/ej2-react/pivotview/how-to/chart-based-on-pivot-table-selection.md +++ b/ej2-react/pivotview/how-to/chart-based-on-pivot-table-selection.md @@ -10,7 +10,15 @@ domainurl: ##DomainURL## # Chart based on pivot table selection in React Pivotview component -The cell selection support is enabled using the [`allowSelection`](https://ej2.syncfusion.com/react/documentation/api/pivotview/gridSettings/#allowselection) property and its type and mode are configured using the [`selectionSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/pivotSelectionSettings/) property. The [`cellSelected`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#cellselected) event gets fired on every selection operation performed in the pivot table. This event returns the selected cell informations, like row header name, column header name, measure name, and value. Based on this information, the [`chart`](https://ej2.syncfusion.com/react/documentation/chart/getting-started/) control will be plotted. +The React Pivot Table component supports creating charts based on cell selections within the pivot table. This customization allows charts to be plotted dynamically using data from selected cells, providing visual representation of specific data segments. + +## Configuration + +Cell selection is enabled using the [`allowSelection`](https://ej2.syncfusion.com/react/documentation/api/pivotview/gridSettings/#allowselection) property. The selection behavior is configured through the [`selectionSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/pivotSelectionSettings/) property to define selection type and mode. + +## Implementation + +The [`cellSelected`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#cellselected) event triggers when cells are selected in the pivot table. This event provides selected cell information including row header name, column header name, measure name, and values. Using this data, the [`chart`](https://ej2.syncfusion.com/react/documentation/chart/getting-started) control can be plotted accordingly. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -27,4 +35,4 @@ The cell selection support is enabled using the [`allowSelection`](https://ej2.s {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/pivot-table/default-cs157" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/pivot-table/default-cs157" %} \ No newline at end of file diff --git a/ej2-react/pivotview/how-to/customize-cells-elements.md b/ej2-react/pivotview/how-to/customize-cells-elements.md index 67d1f3efa..8ef20f2b6 100644 --- a/ej2-react/pivotview/how-to/customize-cells-elements.md +++ b/ej2-react/pivotview/how-to/customize-cells-elements.md @@ -10,10 +10,11 @@ domainurl: ##DomainURL## # Customize cells elements in React Pivotview component -You can customize the pivot table cell element by using the `cellTemplate` property. -The cellTemplate property accepts either an HTML string or the element's ID, which can be used to append additional HTML elements to showcase each cell with custom format. +You can customize each cell in the Pivot Table by using the [`cellTemplate`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#celltemplate) property. The [`cellTemplate`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#celltemplate) option accepts either an HTML string or the ID of an HTML element. You can use this to append extra HTML and show custom content or styles for every cell. -In this demo, the revenue cost for each year is represented with trend icons. +## Implementation example + +The following example demonstrates how to customize pivot table cells by displaying revenue trends with visual indicators. Each cell shows the actual value along with trend icons that represent performance direction. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -24,4 +25,4 @@ In this demo, the revenue cost for each year is represented with trend icons. {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/pivot-table/default-cs159" %} +{% previewsample "page.domainurl/code-snippet/pivot-table/default-cs159" %} diff --git a/ej2-react/pivotview/how-to/customize-empty-value-cells.md b/ej2-react/pivotview/how-to/customize-empty-value-cells.md index dd9b54d1c..881383ef5 100644 --- a/ej2-react/pivotview/how-to/customize-empty-value-cells.md +++ b/ej2-react/pivotview/how-to/customize-empty-value-cells.md @@ -10,7 +10,15 @@ domainurl: ##DomainURL## # Customize empty value cells in React Pivotview component -You can customize empty value cells to display with custom text using `emptyCellsTextContent` option under `dataSourceSettings` in the pivot table. It can be configured through code behind, during initial rendering. +When working with pivot table, certain combinations of row and column headers may not have corresponding data values, resulting in empty cells. The React Pivot Table component allows you to display custom text in these empty cells instead of leaving them blank, thereby improving the visual presentation and enhancing the user experience of your pivot table. + +## Configuration + +Use the [`emptyCellsTextContent`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettingsModel/#emptycellstextcontent) property under [`dataSourceSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#datasourcesettings) in the pivot table to define custom text for empty cells. This string option accepts any text value and applies it consistently across all empty cells in the pivot table. + +### Basic Implementation + +The following example demonstrates how to configure custom text for empty value cells during the initial rendering of the Pivot Table component: {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -21,4 +29,4 @@ You can customize empty value cells to display with custom text using `emptyCell {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/pivot-table/default-cs160" %} +{% previewsample "page.domainurl/code-snippet/pivot-table/default-cs160" %} diff --git a/ej2-react/pivotview/how-to/perform-cell-selection-and-get-selected-cells-information.md b/ej2-react/pivotview/how-to/perform-cell-selection-and-get-selected-cells-information.md index e9c96cfe7..02b6c9932 100644 --- a/ej2-react/pivotview/how-to/perform-cell-selection-and-get-selected-cells-information.md +++ b/ej2-react/pivotview/how-to/perform-cell-selection-and-get-selected-cells-information.md @@ -1,6 +1,6 @@ --- layout: post -title: Perform cell selection and get selected cells information in React Pivotview component | Syncfusion +title: Select cells and get selection info in React Pivotview | Syncfusion description: Learn here all about Perform cell selection and get selected cells information in Syncfusion React Pivotview component of Syncfusion Essential JS 2 and more. control: Perform cell selection and get selected cells information platform: ej2-react @@ -8,29 +8,33 @@ documentation: ug domainurl: ##DomainURL## --- -# Perform cell selection and get selected cells information in React Pivotview component +# Select cells and get selection info in React Pivotview component -You can select any cell/row by setting the property `gridSettings.allowSelection` as `true` where the selected cells can be highlighted. It can be done through mouse down or arrow keys. +The React Pivot Table component allows users to select cells or rows by enabling the [allowSelection](https://ej2.syncfusion.com/react/documentation/api/pivotview/gridSettings/#allowselection) property in the [gridSettings](https://ej2.syncfusion.com/react/documentation/api/pivotview/gridSettings/) configuration. Once enabled, users can highlight selected cells using a mouse click or arrow keys. This guide explains how to configure selection modes, types, and handle the [cellSelected](https://ej2.syncfusion.com/react/documentation/api/pivotview/#cellselected) event to retrieve selected cell information. -## Selection mode +## Selection modes -It supports four types of selection mode that can be set by the property `gridSettings.selectionSettings.mode`. They are, +The Pivot Table supports four selection modes, which can be set using the [mode](https://ej2.syncfusion.com/react/documentation/api/pivotview/selectionSettings/#mode) property in [gridSettings.selectionSettings](https://ej2.syncfusion.com/react/documentation/api/pivotview/selectionSettings/). These modes determine what parts of the table can be selected: -* **`Row`**: The `Row` value is set by default, and allows you to select only rows. -* **`Column`**: Allows you to select only columns. -* **`Cell`**: Allows you to select only cells. -* **`Both`**: Allows you to select rows and columns at the same time. +- **Row**: This is the default mode. It allows users to select entire rows only. +- **Column**: This mode allows users to select entire columns only. +- **Cell**: This mode allows users to select individual cells only. +- **Both**: This mode allows users to select both rows and columns simultaneously. -## Selection type +## Selection types -It supports two types of selection that can be set by the property `gridSettings.selectionSettings.type`. They are, +The Pivot Table offers two selection types, configurable through the [type](https://ej2.syncfusion.com/react/documentation/api/pivotview/selectionSettings/#type) property in [gridSettings.selectionSettings](https://ej2.syncfusion.com/react/documentation/api/pivotview/selectionSettings/). These types define how many items can be selected: -* **`Single`**: The `Single` value is set by default, and it only allows selection of a single row or a column or a cell. -* **`Multiple`**: Allows you to select multiple rows or cells. To perform the multi-selection, press and hold CTRL key and click the desired rows or columns or cells. To select range of rows or cells, press and hold the SHIFT key and click the rows or columns or cells. +- **Single**: This is the default type. It allows users to select only one row, column, or cell at a time. +- **Multiple**: This type allows users to select multiple rows, columns, or cells. To select multiple items, hold the **Ctrl** key and click the desired rows, columns, or cells. To select a range, hold the **Shift** key and click the start and end rows, columns, or cells. -## Event +## Handling the cellSelected event -The event `cellSelected` fires on every cell/row/column on selected/deselected operations and it provides the selected cells information with its corresponding column and row headers. +The [`cellSelected`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#cellselected) event triggers whenever a cell, row, or column is selected or deselected. This event provides details about the selected cells, including their corresponding row and column headers, through the [`selectedCellsInfo`](https://ej2.syncfusion.com/react/documentation/api/pivotview/pivotCellSelectedEventArgs/#selectedcellsinfo) property. Additionally, the [`pivotValues`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#pivotvalues) property provides access to the Pivot Table's data structure. + +## Code example + +The following example demonstrates how to enable multiple cell selection in the Pivot Table and handle the [cellSelected](https://ej2.syncfusion.com/react/documentation/api/pivotview/#cellselected) event to retrieve selected cell information. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -41,4 +45,4 @@ The event `cellSelected` fires on every cell/row/column on selected/deselected o {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/pivot-table/default-cs166" %} +{% previewsample "page.domainurl/code-snippet/pivot-table/default-cs166" %} \ No newline at end of file diff --git a/ej2-react/pivotview/how-to/show-hide-tool-tip.md b/ej2-react/pivotview/how-to/show-hide-tool-tip.md index 5b8d980cb..566fa81bd 100644 --- a/ej2-react/pivotview/how-to/show-hide-tool-tip.md +++ b/ej2-react/pivotview/how-to/show-hide-tool-tip.md @@ -8,11 +8,13 @@ documentation: ug domainurl: ##DomainURL## --- -# Show hide tool tip in React Pivotview component +# Show or hide tooltip in React Pivotview component -You can set the visibility of tooltip using `showTooltip` in the pivot table. +The React Pivot Table component displays a tooltip by default, providing additional information when users hover over cells. Users can control the visibility of this tooltip using the [`showTooltip`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#showtooltip) property. Setting this property to **false** hides the tooltip, while **true** enables it. -> By Default, tooltip enabled in the pivot table. +## Code example + +The following example demonstrates how to configure the Pivot Table to hide the tooltip by setting the [`showTooltip`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#showtooltip) property to **false**. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -23,4 +25,4 @@ You can set the visibility of tooltip using `showTooltip` in the pivot table. {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/pivot-table/default-cs169" %} +{% previewsample "page.domainurl/code-snippet/pivot-table/default-cs169" %} diff --git a/ej2-react/pivotview/nextjs-getting-started.md b/ej2-react/pivotview/nextjs-getting-started.md index 7cf847b90..4fe4fbabb 100644 --- a/ej2-react/pivotview/nextjs-getting-started.md +++ b/ej2-react/pivotview/nextjs-getting-started.md @@ -9,9 +9,9 @@ domainurl: ##DomainURL## --- -# Creating a Next.js Application Using Syncfusion® React Components +# Creating a Next.js Application Using Syncfusion React Components -This section provides a step-by-step guide for setting up a Next.js application and integrating the Syncfusion® React Pivot Table component. +This section explains how to set up a Next.js application and add the Syncfusion® React [Pivot Table](https://www.syncfusion.com/react-components/react-pivot-table) component. Follow these steps to create a user-friendly web application with the Pivot Table for data analysis. ## What is Next.js? @@ -19,15 +19,14 @@ This section provides a step-by-step guide for setting up a Next.js application ## Prerequisites -Before getting started with the Next.js application, ensure the following prerequisites are met: +To begin building a Next.js application with the Syncfusion® React [Pivot Table](https://ej2.syncfusion.com/react/documentation/pivotview/getting-started), ensure the following requirements are met: -* [Node.js 16.8](https://nodejs.org/en) or later. - -* The application is compatible with macOS, Windows, and Linux operating systems. +- [Node.js 16.8](https://nodejs.org/en) or a later version installed on your system. +- A compatible operating system, such as macOS, Windows, or Linux. ## Create a Next.js application -To create a new `Next.js` application, use one of the commands that are specific to either NPM or Yarn. +To start a new Next.js application, run one of the following commands using either NPM or Yarn. These commands set up a new project with the necessary files and structure. {% tabs %} {% highlight bash tabtitle="NPM" %} @@ -42,9 +41,9 @@ yarn create next-app {% endhighlight %} {% endtabs %} -Using one of the above commands will lead you to set up additional configurations for the project as below: +After running the command, you will be prompted to configure your project with the following steps: -1.Define the project name: Users can specify the name of the project directly. Let's specify the name of the project as `ej2-nextjs-pivotview`. +1. **Name your project**: Users can specify the name of the project directly. Let's specify the name of the project as `ej2-nextjs-pivotview`. {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -54,7 +53,7 @@ Using one of the above commands will lead you to set up additional configuration {% endhighlight %} {% endtabs %} -2.Select the required packages. +2. **Choose project settings**: Select options to customize your project setup. The prompts will ask about using TypeScript, ESLint, Tailwind CSS, a `src/` directory, App Router, and import alias customization. {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -71,7 +70,7 @@ Creating a new Next.js app in D:\ej2-nextjs-pivotview. {% endhighlight %} {% endtabs %} -3.Once complete the above mentioned steps to create `ej2-nextjs-pivotview`, navigate to the directory using the below command: +3. **Navigate to the project folder**: Once the setup is complete, move to the project directory using the command below: {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -81,18 +80,16 @@ cd ej2-nextjs-pivotview {% endhighlight %} {% endtabs %} -The application is ready to run with default settings. Now, let's add Syncfusion® components to the project. +Your Next.js application is now set up and ready to include Syncfusion® React components, such as the Pivot Table. ## Install Syncfusion® React packages -Syncfusion® React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion® React components in the project, install the corresponding npm package. - -Here, the [React Pivot Table component](https://www.syncfusion.com/react-components/react-pivot-table) is used in the project. To install the React Pivot Table component, use the following command: +To use the Syncfusion® React Pivot Table component, you need to install its npm package. The package is available on [npmjs.com](https://www.npmjs.com/search?q=ej2-react) and provides the necessary files to add the [Pivot Table component](https://www.syncfusion.com/react-components/react-pivot-table) to your Next.js application. Run one of the following commands to install the package: {% tabs %} {% highlight bash tabtitle="NPM" %} - npm install @syncfusion/ej2-react-pivotview --save +npm install @syncfusion/ej2-react-pivotview --save {% endhighlight %} {% highlight bash tabtitle="YARN" %} @@ -102,11 +99,11 @@ yarn add @syncfusion/ej2-react-pivotview {% endhighlight %} {% endtabs %} -## Import Syncfusion® CSS styles +The provided code installs the Syncfusion React Pivot Table package. The `--save` flag in the npm command ensures the package is added to your project's dependencies. Using yarn achieves the same result with a different package manager. -Syncfusion® React components come with [built-in themes](https://ej2.syncfusion.com/react/documentation/appearance/theme/), which are available in the installed packages. It’s easy to adapt the Syncfusion® React components to match the style of your application by referring to one of the built-in themes. +## Import Syncfusion® CSS styles -Import the `Material` theme into the **src/app/globals.css** file and removed the existing styles in that file, as shown below: +Syncfusion® React components include [built-in themes](https://ej2.syncfusion.com/react/documentation/appearance/theme) that you can easily apply to style your Pivot Table. These themes are available in the installed Syncfusion packages and can be imported to match your application's look. To use the Material theme, import its CSS files into the **src/app/globals.css** file after removing any existing styles, as shown below: {% tabs %} {% highlight css tabtitle="globals.css" %} @@ -119,20 +116,20 @@ Import the `Material` theme into the **src/app/globals.css** file and removed th @import '../../node_modules/@syncfusion/ej2-lists/styles/material.css'; @import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css'; @import '../../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css"; +@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; @import '../../node_modules/@syncfusion/ej2-calendars/styles/material.css'; @import '../../node_modules/@syncfusion/ej2-react-pivotview/styles/material.css'; {% endhighlight %} {% endtabs %} -> To know more about built-in themes and CSS reference for individual components, refer to the [themes](https://ej2.syncfusion.com/react/documentation/appearance/theme/) section. +> To know more about built-in themes and CSS reference for individual components, refer to the [themes](https://ej2.syncfusion.com/react/documentation/appearance/theme) section. ## Add Syncfusion® React component -Follow the below steps to add the React Pivot Table component to the Next.js project: +This section guides you through adding the Syncfusion® React Pivot Table component to your Next.js project. Follow these steps to set up the data and display the component in your application. -1.Before adding the Pivot Table component to your markup, create a `datasource.tsx` file within the **src/app/** folder and add the Pivot Table component data. +1. First, create a file named `datasource.tsx` in the **src/app/** folder. This file will hold the data for the Pivot Table component. Add the following sample data to populate the table: {% tabs %} {% highlight ts tabtitle="datasource.tsx" %} @@ -154,7 +151,7 @@ export let pivotData: object[] = [ {% endhighlight %} {% endtabs %} -2.Then, import and define the Pivot Table component in the **src/app/page.tsx** file, as shown below: +2. Next, update the **src/app/page.tsx** file to import and set up the Pivot Table component. This step connects the data and configures the table’s report settings. Use the following code to define the component: {% tabs %} {% highlight ts tabtitle="page.tsx" %} @@ -190,7 +187,7 @@ export default function Home() { ## Run the application -To run the application, use the following command: +To start your Next.js application with the Syncfusion React Pivot Table, run the following command in your project directory: {% tabs %} {% highlight bash tabtitle="NPM" %} From db5416e06022eebf5386ef668cd723081f1ee838 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Mon, 15 Sep 2025 20:53:19 +0530 Subject: [PATCH 06/34] Integrated latest changes at 09-15-2025 7:34:19 PM --- ej2-react-toc.html | 23 +- .../treegrid/refresh-cs12/app/App.jsx | 33 + .../treegrid/refresh-cs12/app/App.tsx | 38 + .../treegrid/refresh-cs12/app/datasource.jsx | 191 ++++ .../treegrid/refresh-cs12/app/datasource.tsx | 196 ++++ .../treegrid/refresh-cs12/app/index.tsx | 5 + .../treegrid/refresh-cs12/index.css | 9 + .../treegrid/refresh-cs12/index.html | 33 + .../treegrid/refresh-cs12/systemjs.config.js | 57 ++ .../treegrid/refresh-cs13/app/App.jsx | 38 + .../treegrid/refresh-cs13/app/App.tsx | 45 + .../treegrid/refresh-cs13/app/datasource.jsx | 191 ++++ .../treegrid/refresh-cs13/app/datasource.tsx | 196 ++++ .../treegrid/refresh-cs13/app/index.tsx | 5 + .../treegrid/refresh-cs13/index.css | 9 + .../treegrid/refresh-cs13/index.html | 33 + .../treegrid/refresh-cs13/systemjs.config.js | 57 ++ .../treegrid/refresh-cs5/app/App.jsx | 17 +- .../treegrid/refresh-cs5/app/App.tsx | 20 +- .../treegrid/refresh-cs7/app/App.jsx | 20 +- .../treegrid/refresh-cs7/app/App.tsx | 27 +- ej2-react/gantt/events.md | 849 +++++++++--------- ej2-react/treegrid/cell/auto-wrap.md | 34 - ej2-react/treegrid/cell/cell.md | 71 +- ej2-react/treegrid/cell/clip-mode.md | 32 - ej2-react/treegrid/cell/content.md | 24 - .../treegrid/columns/auto-fit-columns.md | 26 - ej2-react/treegrid/columns/column-menu.md | 31 +- ej2-react/treegrid/columns/columns.md | 36 +- .../treegrid/columns/foreign-key-column.md | 32 + ej2-react/treegrid/columns/headers.md | 116 ++- .../treegrid/columns/responsive-columns.md | 24 - .../treegrid/data-binding/data-binding.md | 50 ++ ej2-react/treegrid/data-binding/local-data.md | 40 +- ej2-react/treegrid/editing/dialog-editing.md | 75 +- ej2-react/treegrid/editing/edit.md | 23 + .../excel-cell-style-customization.md | 47 - .../excel-export/excel-export-options.md | 75 +- .../treegrid/excel-export/excel-export.md | 26 + .../how-to/change-header-text-dynamically.md | 56 -- .../change-orientation-of-header-text.md | 77 -- .../how-to/customize-the-edit-dialog.md | 34 - .../customize-the-icon-for-column-menu.md | 40 - ...disable-editing-for-particular-row-cell.md | 34 - .../display-foreignKey-values-in-treegrid.md | 34 - .../how-to/display-null-values-at-bottom.md | 34 - .../how-to/exporting-selected-data.md | 34 - .../passing-parameter-to-server-exporting.md | 34 - .../how-to/refresh-the-data-source.md | 59 -- .../how-to/use-wizard-like-dialog-editing.md | 34 - .../using-tab-inside-the-dialog-editing.md | 34 - ej2-react/treegrid/immutable-mode.md | 47 - .../exporting-treegrid-in-server.md | 27 +- .../pdf-cell-style-customization.md | 47 - .../treegrid/pdf-export/pdf-export-options.md | 75 +- ej2-react/treegrid/row/row-height.md | 43 - ej2-react/treegrid/row/row.md | 36 + ej2-react/treegrid/sorting.md | 23 + .../get-or-set-local-storage-value.md | 30 - .../state-persistence/state-persistence.md | 15 + 60 files changed, 2324 insertions(+), 1377 deletions(-) create mode 100644 ej2-react/code-snippet/treegrid/refresh-cs12/app/App.jsx create mode 100644 ej2-react/code-snippet/treegrid/refresh-cs12/app/App.tsx create mode 100644 ej2-react/code-snippet/treegrid/refresh-cs12/app/datasource.jsx create mode 100644 ej2-react/code-snippet/treegrid/refresh-cs12/app/datasource.tsx create mode 100644 ej2-react/code-snippet/treegrid/refresh-cs12/app/index.tsx create mode 100644 ej2-react/code-snippet/treegrid/refresh-cs12/index.css create mode 100644 ej2-react/code-snippet/treegrid/refresh-cs12/index.html create mode 100644 ej2-react/code-snippet/treegrid/refresh-cs12/systemjs.config.js create mode 100644 ej2-react/code-snippet/treegrid/refresh-cs13/app/App.jsx create mode 100644 ej2-react/code-snippet/treegrid/refresh-cs13/app/App.tsx create mode 100644 ej2-react/code-snippet/treegrid/refresh-cs13/app/datasource.jsx create mode 100644 ej2-react/code-snippet/treegrid/refresh-cs13/app/datasource.tsx create mode 100644 ej2-react/code-snippet/treegrid/refresh-cs13/app/index.tsx create mode 100644 ej2-react/code-snippet/treegrid/refresh-cs13/index.css create mode 100644 ej2-react/code-snippet/treegrid/refresh-cs13/index.html create mode 100644 ej2-react/code-snippet/treegrid/refresh-cs13/systemjs.config.js delete mode 100644 ej2-react/treegrid/cell/auto-wrap.md delete mode 100644 ej2-react/treegrid/cell/clip-mode.md delete mode 100644 ej2-react/treegrid/cell/content.md delete mode 100644 ej2-react/treegrid/columns/auto-fit-columns.md create mode 100644 ej2-react/treegrid/columns/foreign-key-column.md delete mode 100644 ej2-react/treegrid/columns/responsive-columns.md delete mode 100644 ej2-react/treegrid/excel-export/excel-cell-style-customization.md delete mode 100644 ej2-react/treegrid/how-to/change-header-text-dynamically.md delete mode 100644 ej2-react/treegrid/how-to/change-orientation-of-header-text.md delete mode 100644 ej2-react/treegrid/how-to/customize-the-edit-dialog.md delete mode 100644 ej2-react/treegrid/how-to/customize-the-icon-for-column-menu.md delete mode 100644 ej2-react/treegrid/how-to/disable-editing-for-particular-row-cell.md delete mode 100644 ej2-react/treegrid/how-to/display-foreignKey-values-in-treegrid.md delete mode 100644 ej2-react/treegrid/how-to/display-null-values-at-bottom.md delete mode 100644 ej2-react/treegrid/how-to/exporting-selected-data.md delete mode 100644 ej2-react/treegrid/how-to/passing-parameter-to-server-exporting.md delete mode 100644 ej2-react/treegrid/how-to/refresh-the-data-source.md delete mode 100644 ej2-react/treegrid/how-to/use-wizard-like-dialog-editing.md delete mode 100644 ej2-react/treegrid/how-to/using-tab-inside-the-dialog-editing.md delete mode 100644 ej2-react/treegrid/immutable-mode.md delete mode 100644 ej2-react/treegrid/pdf-export/pdf-cell-style-customization.md delete mode 100644 ej2-react/treegrid/row/row-height.md delete mode 100644 ej2-react/treegrid/state-persistence/get-or-set-local-storage-value.md diff --git a/ej2-react-toc.html b/ej2-react-toc.html index 28b611ee3..c41c5e526 100644 --- a/ej2-react-toc.html +++ b/ej2-react-toc.html @@ -2734,26 +2734,23 @@
  • Remote Data
    • -
  • Immutable Mode
  • Feature Modules
  • Columns
  • Row
    • Row
      • -
    • Row Height
    • Row Template
    • Detail Template
    • Row Drag and Drop
      • @@ -2763,9 +2760,6 @@
    • Cell
    • Editing @@ -2818,7 +2812,6 @@
    • State Persistence
    • Tool Bar @@ -2831,7 +2824,6 @@ @@ -2840,7 +2832,6 @@ @@ -2852,32 +2843,20 @@
    • Styling and appearance
    • How To diff --git a/ej2-react/code-snippet/treegrid/refresh-cs12/app/App.jsx b/ej2-react/code-snippet/treegrid/refresh-cs12/app/App.jsx new file mode 100644 index 000000000..52b104563 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/refresh-cs12/app/App.jsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { projectData } from './datasource'; +import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from '@syncfusion/ej2-react-treegrid'; +import { Toolbar, Page, ExcelExport } from '@syncfusion/ej2-react-treegrid'; +/* tslint:disable */ +function App() { + const toolbarOptions = ['ExcelExport']; + let treegrid; + const pageOptions = { pageSize: 5, pageCount: 5 }; + const selectionOptions = { type: 'Multiple' }; + const toolbarClick = (args) => { + if (treegrid && args.item.text === 'Excel Export') { + const selectedRecords = treegrid.getSelectedRecords(); + const exportProperties = { + dataSource: selectedRecords, + }; + treegrid.excelExport(exportProperties); + } + }; + return ( treegrid = g} allowExcelExport={true} selectionSettings={selectionOptions}> + + + + + + + + + + ); +} +; +export default App; diff --git a/ej2-react/code-snippet/treegrid/refresh-cs12/app/App.tsx b/ej2-react/code-snippet/treegrid/refresh-cs12/app/App.tsx new file mode 100644 index 000000000..c12353beb --- /dev/null +++ b/ej2-react/code-snippet/treegrid/refresh-cs12/app/App.tsx @@ -0,0 +1,38 @@ +import * as React from 'react'; +import { projectData } from './datasource'; +import { ClickEventArgs } from '@syncfusion/ej2-navigations'; +import { ExcelExportProperties } from '@syncfusion/ej2-react-grids'; +import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject, SelectionSettingsModel } from '@syncfusion/ej2-react-treegrid'; +import { Toolbar, ToolbarItems, Page, TreeGrid, ExcelExport, PageSettingsModel } from '@syncfusion/ej2-react-treegrid'; +/* tslint:disable */ +function App() { + + const toolbarOptions: ToolbarItems[] = ['ExcelExport']; + let treegrid: TreeGridComponent | null; + const pageOptions: PageSettingsModel = {pageSize:5, pageCount:5}; + const selectionOptions: SelectionSettingsModel = {type: 'Multiple'}; + const toolbarClick = (args: ClickEventArgs) => { + if (treegrid && args.item.text === 'Excel Export') { + const selectedRecords = treegrid.getSelectedRecords(); + const exportProperties: ExcelExportProperties = { + dataSource: selectedRecords, + }; + treegrid.excelExport(exportProperties); + } + } + + return ( + treegrid = g} allowExcelExport={true} selectionSettings={selectionOptions}> + + + + + + + + + + + ); +}; +export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/refresh-cs12/app/datasource.jsx b/ej2-react/code-snippet/treegrid/refresh-cs12/app/datasource.jsx new file mode 100644 index 000000000..a79c00ec4 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/refresh-cs12/app/datasource.jsx @@ -0,0 +1,191 @@ +export let sampleData = [ + { + taskID: 1, + taskName: 'Planning', + startDate: new Date('02/03/2017'), + endDate: new Date('02/07/2017'), + progress: 100, + duration: 5, + priority: 'Normal', + approved: false, + subtasks: [ + { taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'), + endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false }, + { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'), + endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Low', approved: true }, + { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'), + endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false }, + { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'), + endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true } + ] + }, + { + taskID: 6, + taskName: 'Design', + startDate: new Date('02/10/2017'), + endDate: new Date('02/14/2017'), + duration: 3, + progress: 86, + priority: 'High', + approved: false, + subtasks: [ + { taskID: 7, taskName: 'Software Specification', startDate: new Date('02/10/2017'), + endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false }, + { taskID: 8, taskName: 'Develop prototype', startDate: new Date('02/10/2017'), + endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false }, + { taskID: 9, taskName: 'Get approval from customer', startDate: new Date('02/13/2017'), + endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'Low', approved: true }, + { taskID: 10, taskName: 'Design Documentation', startDate: new Date('02/13/2017'), + endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'High', approved: true }, + { taskID: 11, taskName: 'Design complete', startDate: new Date('02/14/2017'), + endDate: new Date('02/14/2017'), duration: 0, progress: 0, priority: 'Normal', approved: true } + ] + }, + { + taskID: 12, + taskName: 'Implementation Phase', + startDate: new Date('02/17/2017'), + endDate: new Date('02/27/2017'), + priority: 'Normal', + approved: false, + duration: 11, + progress: 66, + subtasks: [ + { + taskID: 13, + taskName: 'Phase 1', + startDate: new Date('02/17/2017'), + endDate: new Date('02/27/2017'), + priority: 'High', + approved: false, + progress: 50, + duration: 11, + subtasks: [{ + taskID: 14, + taskName: 'Implementation Module 1', + startDate: new Date('02/17/2017'), + endDate: new Date('02/27/2017'), + priority: 'Normal', + duration: 11, + progress: 10, + approved: false, + subtasks: [ + { taskID: 15, taskName: 'Development Task 1', startDate: new Date('02/17/2017'), + endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'High', approved: false }, + { taskID: 16, taskName: 'Development Task 2', startDate: new Date('02/17/2017'), + endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true }, + { taskID: 17, taskName: 'Testing', startDate: new Date('02/20/2017'), + endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true }, + { taskID: 18, taskName: 'Bug fix', startDate: new Date('02/24/2017'), + endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'Critical', approved: false }, + { taskID: 19, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'), + endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'High', approved: false }, + { taskID: 20, taskName: 'Phase 1 complete', startDate: new Date('02/27/2017'), + endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Low', approved: true } + ] + }] + }, + { + taskID: 21, + taskName: 'Phase 2', + startDate: new Date('02/17/2017'), + endDate: new Date('02/28/2017'), + priority: 'High', + approved: false, + duration: 12, + progress: 60, + subtasks: [{ + taskID: 22, + taskName: 'Implementation Module 2', + startDate: new Date('02/17/2017'), + endDate: new Date('02/28/2017'), + priority: 'Critical', + approved: false, + duration: 12, + progress: 90, + subtasks: [ + { taskID: 23, taskName: 'Development Task 1', startDate: new Date('02/17/2017'), + endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Normal', approved: true }, + { taskID: 24, taskName: 'Development Task 2', startDate: new Date('02/17/2017'), + endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Critical', approved: true }, + { taskID: 25, taskName: 'Testing', startDate: new Date('02/21/2017'), + endDate: new Date('02/24/2017'), duration: 2, progress: '0', priority: 'High', approved: false }, + { taskID: 26, taskName: 'Bug fix', startDate: new Date('02/25/2017'), + endDate: new Date('02/26/2017'), duration: 2, progress: '0', priority: 'Low', approved: false }, + { taskID: 27, taskName: 'Customer review meeting', startDate: new Date('02/27/2017'), + endDate: new Date('02/28/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true }, + { taskID: 28, taskName: 'Phase 2 complete', startDate: new Date('02/28/2017'), + endDate: new Date('02/28/2017'), duration: 0, progress: '50', priority: 'Normal', approved: false } + ] + }] + }, + { + taskID: 29, + taskName: 'Phase 3', + startDate: new Date('02/17/2017'), + endDate: new Date('02/27/2017'), + priority: 'Normal', + approved: false, + duration: 11, + progress: 30, + subtasks: [{ + taskID: 30, + taskName: 'Implementation Module 3', + startDate: new Date('02/17/2017'), + endDate: new Date('02/27/2017'), + priority: 'High', + approved: false, + duration: 11, + progress: 60, + subtasks: [ + { taskID: 31, taskName: 'Development Task 1', startDate: new Date('02/17/2017'), + endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true }, + { taskID: 32, taskName: 'Development Task 2', startDate: new Date('02/17/2017'), + endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Normal', approved: false }, + { taskID: 33, taskName: 'Testing', startDate: new Date('02/20/2017'), + endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true }, + { taskID: 34, taskName: 'Bug fix', startDate: new Date('02/24/2017'), + endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'High', approved: false }, + { taskID: 35, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'), + endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true }, + { taskID: 36, taskName: 'Phase 3 complete', startDate: new Date('02/27/2017'), + endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Critical', approved: false }, + ] + }] + } + ] + } +]; +export let projectData = [ + { 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new Date('02/23/2017'), 'Duration': 3, 'Priority': 'Normal', + 'EndDate': new Date('02/27/2017'), 'Progress': '40' }, + { 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new Date('02/23/2017'), 'Duration': 4, 'Priority': 'Low', + 'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 }, + { 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new Date('02/23/2017'), 'Duration': 2, 'Priority': 'Normal', + 'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 }, + { 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new Date('02/23/2017'), 'Duration': 2, 'Priority': 'Low', + 'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 }, + { 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new Date('03/14/2017'), 'Duration': 6, 'Priority': 'Normal', + 'EndDate': new Date('03/18/2017'), 'Progress': '40' }, + { 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new Date('03/02/2017'), 'Duration': 11, 'Priority': 'High', + 'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 }, + { 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new Date('03/02/2017'), 'Duration': 7, 'Priority': 'Critical', + 'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 }, + { 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new Date('03/02/2017'), 'Duration': 10, 'Priority': 'Breaker', + 'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 }, + { 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new Date('03/02/2017'), 'Duration': 15, 'Priority': 'High', + 'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 }, + { 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new Date('03/09/2017'), 'Duration': 17, 'Priority': 'Breaker', + 'EndDate': new Date('03/13/2017'), 'Progress': '40' }, + { 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new Date('03/9/2017'), 'Duration': 0, 'Priority': 'Low', + 'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }, + { 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new Date('03/9/2017'), 'Duration': 10, 'Priority': 'Breaker', + 'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }, + { 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new Date('03/9/2017'), 'Duration': 11, 'Priority': 'Normal', + 'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }, + { 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new Date('03/9/2017'), 'Duration': 1, 'Priority': 'Normal', + 'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }, + { 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new Date('03/9/2017'), 'Duration': 14, 'Priority': 'Critical', + 'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 } +]; +export let adventProFont = 'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4AAAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAAANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QBRAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAcAAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAABAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAEAAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxAAIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAABTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQGaAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQAGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAAdALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwEoAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPMALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0ABOAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgHRAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjYASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwAkAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcIAIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gBOAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVsAPQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgAAAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADwCJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhEADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQ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ACAATgBhAG0AZQAgACIAQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgBkAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEwAaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQByAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHYAZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIABvAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACAAbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIABGAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGgAaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAAgAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGwALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwByAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKIArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QBoAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwEUARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASwBLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAFFAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwFwAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYwBjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbUBtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2VudAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWNjZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3JvbgdJb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWNjZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW50Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHVuZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW50DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWNyb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmdhcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2NlbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXBzaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2lsb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQNSaG8FU2ln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'; diff --git a/ej2-react/code-snippet/treegrid/refresh-cs12/app/datasource.tsx b/ej2-react/code-snippet/treegrid/refresh-cs12/app/datasource.tsx new file mode 100644 index 000000000..a8356963a --- /dev/null +++ b/ej2-react/code-snippet/treegrid/refresh-cs12/app/datasource.tsx @@ -0,0 +1,196 @@ +export let sampleData: Object[] = [ + { + taskID: 1, + taskName: 'Planning', + startDate: new Date('02/03/2017'), + endDate: new Date('02/07/2017'), + progress: 100, + duration: 5, + priority: 'Normal', + approved: false, + subtasks: [ + { taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'), + endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false }, + { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'), + endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Low', approved: true }, + { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'), + endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false }, + { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'), + endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true } + ] + }, + { + taskID: 6, + taskName: 'Design', + startDate: new Date('02/10/2017'), + endDate: new Date('02/14/2017'), + duration: 3, + progress: 86, + priority: 'High', + approved: false, + subtasks: [ + { taskID: 7, taskName: 'Software Specification', startDate: new Date('02/10/2017'), + endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false }, + { taskID: 8, taskName: 'Develop prototype', startDate: new Date('02/10/2017'), + endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false }, + { taskID: 9, taskName: 'Get approval from customer', startDate: new Date('02/13/2017'), + endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'Low', approved: true }, + { taskID: 10, taskName: 'Design Documentation', startDate: new Date('02/13/2017'), + endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'High', approved: true }, + { taskID: 11, taskName: 'Design complete', startDate: new Date('02/14/2017'), + endDate: new Date('02/14/2017'), duration: 0, progress: 0, priority: 'Normal', approved: true } + ] + }, + { + taskID: 12, + taskName: 'Implementation Phase', + startDate: new Date('02/17/2017'), + endDate: new Date('02/27/2017'), + priority: 'Normal', + approved: false, + duration: 11, + progress: 66, + subtasks: [ + { + taskID: 13, + taskName: 'Phase 1', + startDate: new Date('02/17/2017'), + endDate: new Date('02/27/2017'), + priority: 'High', + approved: false, + progress: 50, + duration: 11, + subtasks: [{ + taskID: 14, + taskName: 'Implementation Module 1', + startDate: new Date('02/17/2017'), + endDate: new Date('02/27/2017'), + priority: 'Normal', + duration: 11, + progress: 10, + approved: false, + subtasks: [ + { taskID: 15, taskName: 'Development Task 1', startDate: new Date('02/17/2017'), + endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'High', approved: false }, + { taskID: 16, taskName: 'Development Task 2', startDate: new Date('02/17/2017'), + endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true }, + { taskID: 17, taskName: 'Testing', startDate: new Date('02/20/2017'), + endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true }, + { taskID: 18, taskName: 'Bug fix', startDate: new Date('02/24/2017'), + endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'Critical', approved: false }, + { taskID: 19, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'), + endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'High', approved: false }, + { taskID: 20, taskName: 'Phase 1 complete', startDate: new Date('02/27/2017'), + endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Low', approved: true } + + ] + }] + }, + { + taskID: 21, + taskName: 'Phase 2', + startDate: new Date('02/17/2017'), + endDate: new Date('02/28/2017'), + priority: 'High', + approved: false, + duration: 12, + progress: 60, + subtasks: [{ + taskID: 22, + taskName: 'Implementation Module 2', + startDate: new Date('02/17/2017'), + endDate: new Date('02/28/2017'), + priority: 'Critical', + approved: false, + duration: 12, + progress: 90, + subtasks: [ + { taskID: 23, taskName: 'Development Task 1', startDate: new Date('02/17/2017'), + endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Normal', approved: true }, + { taskID: 24, taskName: 'Development Task 2', startDate: new Date('02/17/2017'), + endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Critical', approved: true }, + { taskID: 25, taskName: 'Testing', startDate: new Date('02/21/2017'), + endDate: new Date('02/24/2017'), duration: 2, progress: '0', priority: 'High', approved: false }, + { taskID: 26, taskName: 'Bug fix', startDate: new Date('02/25/2017'), + endDate: new Date('02/26/2017'), duration: 2, progress: '0', priority: 'Low', approved: false }, + { taskID: 27, taskName: 'Customer review meeting', startDate: new Date('02/27/2017'), + endDate: new Date('02/28/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true }, + { taskID: 28, taskName: 'Phase 2 complete', startDate: new Date('02/28/2017'), + endDate: new Date('02/28/2017'), duration: 0, progress: '50', priority: 'Normal', approved: false } + + ] + }] + }, + + { + taskID: 29, + taskName: 'Phase 3', + startDate: new Date('02/17/2017'), + endDate: new Date('02/27/2017'), + priority: 'Normal', + approved: false, + duration: 11, + progress: 30, + subtasks: [{ + taskID: 30, + taskName: 'Implementation Module 3', + startDate: new Date('02/17/2017'), + endDate: new Date('02/27/2017'), + priority: 'High', + approved: false, + duration: 11, + progress: 60, + subtasks: [ + { taskID: 31, taskName: 'Development Task 1', startDate: new Date('02/17/2017'), + endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true }, + { taskID: 32, taskName: 'Development Task 2', startDate: new Date('02/17/2017'), + endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Normal', approved: false }, + { taskID: 33, taskName: 'Testing', startDate: new Date('02/20/2017'), + endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true }, + { taskID: 34, taskName: 'Bug fix', startDate: new Date('02/24/2017'), + endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'High', approved: false }, + { taskID: 35, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'), + endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true }, + { taskID: 36, taskName: 'Phase 3 complete', startDate: new Date('02/27/2017'), + endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Critical', approved: false }, + ] + }] + } + ] + } +]; + +export let projectData: object[] = [ + { 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new Date('02/23/2017'), 'Duration': 3, 'Priority' : 'Normal', + 'EndDate': new Date('02/27/2017'), 'Progress': '40' }, + { 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new Date('02/23/2017'), 'Duration': 4, 'Priority' : 'Low', + 'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 }, + { 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Normal', + 'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 }, + { 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Low', + 'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 }, + { 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new Date('03/14/2017'), 'Duration': 6, 'Priority' : 'Normal', + 'EndDate': new Date('03/18/2017'), 'Progress': '40' }, + { 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new Date('03/02/2017'), 'Duration': 11, 'Priority' : 'High', + 'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 }, + { 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new Date('03/02/2017'), 'Duration': 7, 'Priority' : 'Critical', + 'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 }, + { 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new Date('03/02/2017'), 'Duration': 10, 'Priority' : 'Breaker', + 'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 }, + { 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new Date('03/02/2017'), 'Duration': 15, 'Priority' : 'High', + 'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 }, + { 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new Date('03/09/2017'), 'Duration': 17, 'Priority' : 'Breaker', + 'EndDate': new Date('03/13/2017'), 'Progress': '40' }, + { 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new Date('03/9/2017'), 'Duration': 0, 'Priority' : 'Low', + 'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }, + { 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new Date('03/9/2017'), 'Duration': 10, 'Priority' : 'Breaker', + 'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }, + { 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new Date('03/9/2017'), 'Duration': 11, 'Priority' : 'Normal', + 'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }, + { 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new Date('03/9/2017'), 'Duration': 1, 'Priority' : 'Normal', + 'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }, + { 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new Date('03/9/2017'), 'Duration': 14, 'Priority' : 'Critical', + 'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 } +]; + +export let adventProFont: string = 'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4AAAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAAANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QBRAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAcAAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAABAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAEAAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxAAIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAABTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQGaAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQAGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAAdALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwEoAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPMALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0ABOAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgHRAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjYASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwAkAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcIAIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gBOAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVsAPQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgAAAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADwCJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhEADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQ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ACAATgBhAG0AZQAgACIAQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgBkAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEwAaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQByAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHYAZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIABvAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACAAbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIABGAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGgAaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAAgAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGwALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwByAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKIArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QBoAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwEUARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASwBLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAFFAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwFwAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYwBjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbUBtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2VudAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWNjZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3JvbgdJb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWNjZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW50Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHVuZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW50DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWNyb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmdhcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2NlbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXBzaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2lsb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQNSaG8FU2ln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'; \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/refresh-cs12/app/index.tsx b/ej2-react/code-snippet/treegrid/refresh-cs12/app/index.tsx new file mode 100644 index 000000000..80b1b6ab0 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/refresh-cs12/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(, document.getElementById('root')); \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/refresh-cs12/index.css b/ej2-react/code-snippet/treegrid/refresh-cs12/index.css new file mode 100644 index 000000000..e2de99fc9 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/refresh-cs12/index.css @@ -0,0 +1,9 @@ +.e-grid .custom { + background-color: #f48fb1 !important;/* csslint allow: important */ + color: white; +} + +.e-grid .custom { + background-color: #fce4ec; + color: white; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/refresh-cs12/index.html b/ej2-react/code-snippet/treegrid/refresh-cs12/index.html new file mode 100644 index 000000000..819180592 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/refresh-cs12/index.html @@ -0,0 +1,33 @@ + + + + + Syncfusion React Grid + + + + + + + + + + + + + + + + + + + + + + + +
      +
      Loading....
      +
      + + \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/refresh-cs12/systemjs.config.js b/ej2-react/code-snippet/treegrid/refresh-cs12/systemjs.config.js new file mode 100644 index 000000000..985954cb4 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/refresh-cs12/systemjs.config.js @@ -0,0 +1,57 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "system", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/30.2.4/" + }, + 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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-grids": "syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-treegrid": "syncfusion:ej2-react-treegrid/dist/ej2-react-treegrid.umd.min.js", +"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", +"react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/code-snippet/treegrid/refresh-cs13/app/App.jsx b/ej2-react/code-snippet/treegrid/refresh-cs13/app/App.jsx new file mode 100644 index 000000000..503af7a64 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/refresh-cs13/app/App.jsx @@ -0,0 +1,38 @@ +import * as React from 'react'; +import { projectData } from './datasource'; +import { Query } from '@syncfusion/ej2-data'; +import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from '@syncfusion/ej2-react-treegrid'; +import { Toolbar, Page, PdfExport} from '@syncfusion/ej2-react-treegrid'; +/* tslint:disable */ +function App() { + const toolbarOptions = ['PdfExport']; + let treegrid; + let queryClone; + const pageOptions = { pageSize: 5, pageCount: 5 }; + const toolbarClick = (args) => { + if (treegrid && args.item.text === 'PDF Export') { + queryClone = treegrid.query; + treegrid.query = new Query().addParams("recordcount", "12"); + treegrid.pdfExport(); + } + }; + const pdfExportComplete = () => { + if (treegrid) { + treegrid.query = queryClone; + } + }; + + return ( treegrid = g} allowPdfExport={true} pdfExportComplete={pdfExportComplete} > + + + + + + + + + + ); +} +; +export default App; diff --git a/ej2-react/code-snippet/treegrid/refresh-cs13/app/App.tsx b/ej2-react/code-snippet/treegrid/refresh-cs13/app/App.tsx new file mode 100644 index 000000000..7c8933dd8 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/refresh-cs13/app/App.tsx @@ -0,0 +1,45 @@ +import * as React from 'react'; +import { projectData } from './datasource'; +import { Query } from '@syncfusion/ej2-data'; +import { ClickEventArgs } from '@syncfusion/ej2-navigations'; +import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from '@syncfusion/ej2-react-treegrid'; +import { Toolbar, ToolbarItems, Page, TreeGrid, PdfExport, PageSettingsModel } from '@syncfusion/ej2-react-treegrid'; +/* tslint:disable */ +function App() { + + const toolbarOptions: ToolbarItems[] = ['PdfExport']; + let treegrid: TreeGridComponent | null; + let queryClone: Query; + const pageOptions: PageSettingsModel = {pageSize:5, pageCount:5}; + const toolbarClick = (args: ClickEventArgs) => { + if (treegrid && args.item.text === 'PDF Export') { + queryClone = treegrid.query; + treegrid.query = new Query().addParams("recordcount", "12"); + treegrid.pdfExport(); + } + } + + const pdfExportComplete = (): void => { + if (treegrid) { + treegrid.query = queryClone; + } + } + + return ( + treegrid = g} allowPdfExport={true} pdfExportComplete={pdfExportComplete} > + + + + + + + + + + + ); +}; +export default App; + + diff --git a/ej2-react/code-snippet/treegrid/refresh-cs13/app/datasource.jsx b/ej2-react/code-snippet/treegrid/refresh-cs13/app/datasource.jsx new file mode 100644 index 000000000..a79c00ec4 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/refresh-cs13/app/datasource.jsx @@ -0,0 +1,191 @@ +export let sampleData = [ + { + taskID: 1, + taskName: 'Planning', + startDate: new Date('02/03/2017'), + endDate: new Date('02/07/2017'), + progress: 100, + duration: 5, + priority: 'Normal', + approved: false, + subtasks: [ + { taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'), + endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false }, + { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'), + endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Low', approved: true }, + { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'), + endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false }, + { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'), + endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true } + ] + }, + { + taskID: 6, + taskName: 'Design', + startDate: new Date('02/10/2017'), + endDate: new Date('02/14/2017'), + duration: 3, + progress: 86, + priority: 'High', + approved: false, + subtasks: [ + { taskID: 7, taskName: 'Software Specification', startDate: new Date('02/10/2017'), + endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false }, + { taskID: 8, taskName: 'Develop prototype', startDate: new Date('02/10/2017'), + endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false }, + { taskID: 9, taskName: 'Get approval from customer', startDate: new Date('02/13/2017'), + endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'Low', approved: true }, + { taskID: 10, taskName: 'Design Documentation', startDate: new Date('02/13/2017'), + endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'High', approved: true }, + { taskID: 11, taskName: 'Design complete', startDate: new Date('02/14/2017'), + endDate: new Date('02/14/2017'), duration: 0, progress: 0, priority: 'Normal', approved: true } + ] + }, + { + taskID: 12, + taskName: 'Implementation Phase', + startDate: new Date('02/17/2017'), + endDate: new Date('02/27/2017'), + priority: 'Normal', + approved: false, + duration: 11, + progress: 66, + subtasks: [ + { + taskID: 13, + taskName: 'Phase 1', + startDate: new Date('02/17/2017'), + endDate: new Date('02/27/2017'), + priority: 'High', + approved: false, + progress: 50, + duration: 11, + subtasks: [{ + taskID: 14, + taskName: 'Implementation Module 1', + startDate: new Date('02/17/2017'), + endDate: new Date('02/27/2017'), + priority: 'Normal', + duration: 11, + progress: 10, + approved: false, + subtasks: [ + { taskID: 15, taskName: 'Development Task 1', startDate: new Date('02/17/2017'), + endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'High', approved: false }, + { taskID: 16, taskName: 'Development Task 2', startDate: new Date('02/17/2017'), + endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true }, + { taskID: 17, taskName: 'Testing', startDate: new Date('02/20/2017'), + endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true }, + { taskID: 18, taskName: 'Bug fix', startDate: new Date('02/24/2017'), + endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'Critical', approved: false }, + { taskID: 19, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'), + endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'High', approved: false }, + { taskID: 20, taskName: 'Phase 1 complete', startDate: new Date('02/27/2017'), + endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Low', approved: true } + ] + }] + }, + { + taskID: 21, + taskName: 'Phase 2', + startDate: new Date('02/17/2017'), + endDate: new Date('02/28/2017'), + priority: 'High', + approved: false, + duration: 12, + progress: 60, + subtasks: [{ + taskID: 22, + taskName: 'Implementation Module 2', + startDate: new Date('02/17/2017'), + endDate: new Date('02/28/2017'), + priority: 'Critical', + approved: false, + duration: 12, + progress: 90, + subtasks: [ + { taskID: 23, taskName: 'Development Task 1', startDate: new Date('02/17/2017'), + endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Normal', approved: true }, + { taskID: 24, taskName: 'Development Task 2', startDate: new Date('02/17/2017'), + endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Critical', approved: true }, + { taskID: 25, taskName: 'Testing', startDate: new Date('02/21/2017'), + endDate: new Date('02/24/2017'), duration: 2, progress: '0', priority: 'High', approved: false }, + { taskID: 26, taskName: 'Bug fix', startDate: new Date('02/25/2017'), + endDate: new Date('02/26/2017'), duration: 2, progress: '0', priority: 'Low', approved: false }, + { taskID: 27, taskName: 'Customer review meeting', startDate: new Date('02/27/2017'), + endDate: new Date('02/28/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true }, + { taskID: 28, taskName: 'Phase 2 complete', startDate: new Date('02/28/2017'), + endDate: new Date('02/28/2017'), duration: 0, progress: '50', priority: 'Normal', approved: false } + ] + }] + }, + { + taskID: 29, + taskName: 'Phase 3', + startDate: new Date('02/17/2017'), + endDate: new Date('02/27/2017'), + priority: 'Normal', + approved: false, + duration: 11, + progress: 30, + subtasks: [{ + taskID: 30, + taskName: 'Implementation Module 3', + startDate: new Date('02/17/2017'), + endDate: new Date('02/27/2017'), + priority: 'High', + approved: false, + duration: 11, + progress: 60, + subtasks: [ + { taskID: 31, taskName: 'Development Task 1', startDate: new Date('02/17/2017'), + endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true }, + { taskID: 32, taskName: 'Development Task 2', startDate: new Date('02/17/2017'), + endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Normal', approved: false }, + { taskID: 33, taskName: 'Testing', startDate: new Date('02/20/2017'), + endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true }, + { taskID: 34, taskName: 'Bug fix', startDate: new Date('02/24/2017'), + endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'High', approved: false }, + { taskID: 35, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'), + endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true }, + { taskID: 36, taskName: 'Phase 3 complete', startDate: new Date('02/27/2017'), + endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Critical', approved: false }, + ] + }] + } + ] + } +]; +export let projectData = [ + { 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new Date('02/23/2017'), 'Duration': 3, 'Priority': 'Normal', + 'EndDate': new Date('02/27/2017'), 'Progress': '40' }, + { 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new Date('02/23/2017'), 'Duration': 4, 'Priority': 'Low', + 'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 }, + { 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new Date('02/23/2017'), 'Duration': 2, 'Priority': 'Normal', + 'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 }, + { 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new Date('02/23/2017'), 'Duration': 2, 'Priority': 'Low', + 'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 }, + { 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new Date('03/14/2017'), 'Duration': 6, 'Priority': 'Normal', + 'EndDate': new Date('03/18/2017'), 'Progress': '40' }, + { 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new Date('03/02/2017'), 'Duration': 11, 'Priority': 'High', + 'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 }, + { 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new Date('03/02/2017'), 'Duration': 7, 'Priority': 'Critical', + 'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 }, + { 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new Date('03/02/2017'), 'Duration': 10, 'Priority': 'Breaker', + 'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 }, + { 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new Date('03/02/2017'), 'Duration': 15, 'Priority': 'High', + 'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 }, + { 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new Date('03/09/2017'), 'Duration': 17, 'Priority': 'Breaker', + 'EndDate': new Date('03/13/2017'), 'Progress': '40' }, + { 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new Date('03/9/2017'), 'Duration': 0, 'Priority': 'Low', + 'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }, + { 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new Date('03/9/2017'), 'Duration': 10, 'Priority': 'Breaker', + 'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }, + { 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new Date('03/9/2017'), 'Duration': 11, 'Priority': 'Normal', + 'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }, + { 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new Date('03/9/2017'), 'Duration': 1, 'Priority': 'Normal', + 'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }, + { 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new Date('03/9/2017'), 'Duration': 14, 'Priority': 'Critical', + 'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 } +]; +export let adventProFont = 'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4AAAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAAANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QBRAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAcAAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAABAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAEAAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxAAIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAABTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQGaAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQAGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAAdALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwEoAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPMALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0ABOAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgHRAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjYASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwAkAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcIAIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gBOAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVsAPQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgAAAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADwCJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhEADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQ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ACAATgBhAG0AZQAgACIAQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgBkAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEwAaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQByAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHYAZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIABvAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACAAbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIABGAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGgAaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAAgAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGwALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwByAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKIArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QBoAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwEUARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASwBLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAFFAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwFwAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYwBjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbUBtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2VudAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWNjZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3JvbgdJb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWNjZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW50Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHVuZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW50DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWNyb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmdhcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2NlbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXBzaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2lsb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQNSaG8FU2ln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'; diff --git a/ej2-react/code-snippet/treegrid/refresh-cs13/app/datasource.tsx b/ej2-react/code-snippet/treegrid/refresh-cs13/app/datasource.tsx new file mode 100644 index 000000000..a8356963a --- /dev/null +++ b/ej2-react/code-snippet/treegrid/refresh-cs13/app/datasource.tsx @@ -0,0 +1,196 @@ +export let sampleData: Object[] = [ + { + taskID: 1, + taskName: 'Planning', + startDate: new Date('02/03/2017'), + endDate: new Date('02/07/2017'), + progress: 100, + duration: 5, + priority: 'Normal', + approved: false, + subtasks: [ + { taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'), + endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false }, + { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'), + endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Low', approved: true }, + { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'), + endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false }, + { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'), + endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true } + ] + }, + { + taskID: 6, + taskName: 'Design', + startDate: new Date('02/10/2017'), + endDate: new Date('02/14/2017'), + duration: 3, + progress: 86, + priority: 'High', + approved: false, + subtasks: [ + { taskID: 7, taskName: 'Software Specification', startDate: new Date('02/10/2017'), + endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false }, + { taskID: 8, taskName: 'Develop prototype', startDate: new Date('02/10/2017'), + endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false }, + { taskID: 9, taskName: 'Get approval from customer', startDate: new Date('02/13/2017'), + endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'Low', approved: true }, + { taskID: 10, taskName: 'Design Documentation', startDate: new Date('02/13/2017'), + endDate: new Date('02/14/2017'), duration: 2, progress: 100, priority: 'High', approved: true }, + { taskID: 11, taskName: 'Design complete', startDate: new Date('02/14/2017'), + endDate: new Date('02/14/2017'), duration: 0, progress: 0, priority: 'Normal', approved: true } + ] + }, + { + taskID: 12, + taskName: 'Implementation Phase', + startDate: new Date('02/17/2017'), + endDate: new Date('02/27/2017'), + priority: 'Normal', + approved: false, + duration: 11, + progress: 66, + subtasks: [ + { + taskID: 13, + taskName: 'Phase 1', + startDate: new Date('02/17/2017'), + endDate: new Date('02/27/2017'), + priority: 'High', + approved: false, + progress: 50, + duration: 11, + subtasks: [{ + taskID: 14, + taskName: 'Implementation Module 1', + startDate: new Date('02/17/2017'), + endDate: new Date('02/27/2017'), + priority: 'Normal', + duration: 11, + progress: 10, + approved: false, + subtasks: [ + { taskID: 15, taskName: 'Development Task 1', startDate: new Date('02/17/2017'), + endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'High', approved: false }, + { taskID: 16, taskName: 'Development Task 2', startDate: new Date('02/17/2017'), + endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true }, + { taskID: 17, taskName: 'Testing', startDate: new Date('02/20/2017'), + endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true }, + { taskID: 18, taskName: 'Bug fix', startDate: new Date('02/24/2017'), + endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'Critical', approved: false }, + { taskID: 19, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'), + endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'High', approved: false }, + { taskID: 20, taskName: 'Phase 1 complete', startDate: new Date('02/27/2017'), + endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Low', approved: true } + + ] + }] + }, + { + taskID: 21, + taskName: 'Phase 2', + startDate: new Date('02/17/2017'), + endDate: new Date('02/28/2017'), + priority: 'High', + approved: false, + duration: 12, + progress: 60, + subtasks: [{ + taskID: 22, + taskName: 'Implementation Module 2', + startDate: new Date('02/17/2017'), + endDate: new Date('02/28/2017'), + priority: 'Critical', + approved: false, + duration: 12, + progress: 90, + subtasks: [ + { taskID: 23, taskName: 'Development Task 1', startDate: new Date('02/17/2017'), + endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Normal', approved: true }, + { taskID: 24, taskName: 'Development Task 2', startDate: new Date('02/17/2017'), + endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Critical', approved: true }, + { taskID: 25, taskName: 'Testing', startDate: new Date('02/21/2017'), + endDate: new Date('02/24/2017'), duration: 2, progress: '0', priority: 'High', approved: false }, + { taskID: 26, taskName: 'Bug fix', startDate: new Date('02/25/2017'), + endDate: new Date('02/26/2017'), duration: 2, progress: '0', priority: 'Low', approved: false }, + { taskID: 27, taskName: 'Customer review meeting', startDate: new Date('02/27/2017'), + endDate: new Date('02/28/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true }, + { taskID: 28, taskName: 'Phase 2 complete', startDate: new Date('02/28/2017'), + endDate: new Date('02/28/2017'), duration: 0, progress: '50', priority: 'Normal', approved: false } + + ] + }] + }, + + { + taskID: 29, + taskName: 'Phase 3', + startDate: new Date('02/17/2017'), + endDate: new Date('02/27/2017'), + priority: 'Normal', + approved: false, + duration: 11, + progress: 30, + subtasks: [{ + taskID: 30, + taskName: 'Implementation Module 3', + startDate: new Date('02/17/2017'), + endDate: new Date('02/27/2017'), + priority: 'High', + approved: false, + duration: 11, + progress: 60, + subtasks: [ + { taskID: 31, taskName: 'Development Task 1', startDate: new Date('02/17/2017'), + endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true }, + { taskID: 32, taskName: 'Development Task 2', startDate: new Date('02/17/2017'), + endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Normal', approved: false }, + { taskID: 33, taskName: 'Testing', startDate: new Date('02/20/2017'), + endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true }, + { taskID: 34, taskName: 'Bug fix', startDate: new Date('02/24/2017'), + endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'High', approved: false }, + { taskID: 35, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'), + endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true }, + { taskID: 36, taskName: 'Phase 3 complete', startDate: new Date('02/27/2017'), + endDate: new Date('02/27/2017'), duration: 0, progress: '50', priority: 'Critical', approved: false }, + ] + }] + } + ] + } +]; + +export let projectData: object[] = [ + { 'TaskID': 1, 'TaskName': 'Parent Task 1', 'StartDate': new Date('02/23/2017'), 'Duration': 3, 'Priority' : 'Normal', + 'EndDate': new Date('02/27/2017'), 'Progress': '40' }, + { 'TaskID': 2, 'TaskName': 'Child Task 1', 'StartDate': new Date('02/23/2017'), 'Duration': 4, 'Priority' : 'Low', + 'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 }, + { 'TaskID': 3, 'TaskName': 'Child Task 2', 'StartDate': new Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Normal', + 'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 }, + { 'TaskID': 4, 'TaskName': 'Child Task 3', 'StartDate': new Date('02/23/2017'), 'Duration': 2, 'Priority' : 'Low', + 'EndDate': new Date('02/27/2017'), 'Progress': '40', 'parentID': 1 }, + { 'TaskID': 5, 'TaskName': 'Parent Task 2', 'StartDate': new Date('03/14/2017'), 'Duration': 6, 'Priority' : 'Normal', + 'EndDate': new Date('03/18/2017'), 'Progress': '40' }, + { 'TaskID': 6, 'TaskName': 'Child Task 1', 'StartDate': new Date('03/02/2017'), 'Duration': 11, 'Priority' : 'High', + 'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 }, + { 'TaskID': 7, 'TaskName': 'Child Task 2', 'StartDate': new Date('03/02/2017'), 'Duration': 7, 'Priority' : 'Critical', + 'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 }, + { 'TaskID': 8, 'TaskName': 'Child Task 3', 'StartDate': new Date('03/02/2017'), 'Duration': 10, 'Priority' : 'Breaker', + 'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 }, + { 'TaskID': 9, 'TaskName': 'Child Task 4', 'StartDate': new Date('03/02/2017'), 'Duration': 15, 'Priority' : 'High', + 'EndDate': new Date('03/06/2017'), 'Progress': '40', 'parentID': 5 }, + { 'TaskID': 10, 'TaskName': 'Parent Task 3', 'StartDate': new Date('03/09/2017'), 'Duration': 17, 'Priority' : 'Breaker', + 'EndDate': new Date('03/13/2017'), 'Progress': '40' }, + { 'TaskID': 11, 'TaskName': 'Child Task 1', 'StartDate': new Date('03/9/2017'), 'Duration': 0, 'Priority' : 'Low', + 'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }, + { 'TaskID': 12, 'TaskName': 'Child Task 2', 'StartDate': new Date('03/9/2017'), 'Duration': 10, 'Priority' : 'Breaker', + 'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }, + { 'TaskID': 13, 'TaskName': 'Child Task 3', 'StartDate': new Date('03/9/2017'), 'Duration': 11, 'Priority' : 'Normal', + 'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }, + { 'TaskID': 14, 'TaskName': 'Child Task 4', 'StartDate': new Date('03/9/2017'), 'Duration': 1, 'Priority' : 'Normal', + 'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 }, + { 'TaskID': 15, 'TaskName': 'Child Task 5', 'StartDate': new Date('03/9/2017'), 'Duration': 14, 'Priority' : 'Critical', + 'EndDate': new Date('03/13/2017'), 'Progress': '40', 'parentID': 10 } +]; + +export let adventProFont: string = 'AAEAAAARAQAABAAQRFNJRwAAAAEAALa8AAAACEZGVE1fekHUAACnZAAAABxHREVGACgBwQAAp4AAAAAoR1BPU0UutbcAAKeoAAAO8EdTVUK49LjmAAC2mAAAACRPUy8yegjc7gAAAZgAAABgY21hcP/iHw8AAAhoAAADdmdhc3AAAAAQAACnXAAAAAhnbHlm1UxHIQAADyQAAIfEaGVhZPyoXpQAAAEcAAAANmhoZWEK6QfqAAABVAAAACRobXR4CMZdfQAAAfgAAAZwbG9jYWAAPVIAAAvoAAADOm1heHAB5QBRAAABeAAAACBuYW1lvYEfIwAAlugAAAbGcG9zdL7lSo8AAJ2wAAAJqXByZXBoBoyFAAAL4AAAAAcAAQAAAAIAg2XnRcRfDzz1AAsD6AAAAADK+KMLAAAAAMttdz//xP8lB14DvQAAAAgAAgAAAAAAAAABAAADxP8YAAAHfP/E/7kHXgABAAAAAAAAAAAAAAAAAAABnAABAAABnABOAAcAAAAAAAIAAAABAAEAAABAAAAAAAAAAAIBggEsAAUAAAKKAlgAAABLAooCWAAAAV4AMgD6AAACAAUGBAAAAgAEgAAArxAAIEoAAAAAAAAAAEFEQkUAAAAg+wQDxP8YAAADwgDoAAAAmwAAAAAB9QK8AAAAIAACAfQAAAHKAAABTQAAARYAAADWAE4BqgBzAmUAIgIcACICngAmAiIAIwCqAC4BFgBOARYATgFgABoBgQAiAKUAEQGaAC0AewARAaYAGgIlAD8A0gAaAZMAGgG6ABoB6gAaAboAGgHdABoBvgAaAdoAGgHdABoAawAaAJQAGgFpABoBdAAaAWkAGgGXABoCxwAaAg8ADAIiAE4BsgBCAkAATgHRAE4BvwBOAhkAQQJMAE4AxAAdALL//gHcAE8BuABOArYATgKKAE4CJQA/AiMATgIlAD8CNABOAjEAJQGSAAACNgBKAk8ATgMpAE4CSwAtAiwAPAImAB8BPwBOAeMATgE/AE4BkwBOAgIATADeAC4BygAlAeIATgF/ACQB2wBHAbIAIwEoAE4BwAAlAe0AQADVAE4Awv/6AbMAQwDLAE4C4QBOAfQAQAHHAC8B6gBOAcAAJQFNAD0BrwAkAPMALAG/ACQBqgASAr4AEgHhADoB3gAlAeAATgE0AE4AywBOATQATgICAE4A1gBOAbMATgHZAE4B0ABOAjAANQJMAE4A3gAEAyAAGQF+AE4B8gAqAZoALQMgABkBTgBOAZEATgG1AE4A3gAuAd0AJQKfAE4BmgBMAgIABAHUAE8CDwAMAg8ADAIPAAwCDwAMAg8ADAIPAAwDLgBOAbIAQgHRAE4B0QBOAdEATgHRAE4BGABTAVgATgHAAE4BFABOAoAATgKKAE4CJQA/AiUAPwIlAD8CJQA/AiUAPwGGAE4CFQBOAjYASgI2AEoCNgBKAjYASgIsADwB6gBOAgAATgHyAE4B8gBOAfIATgHyAE4B8gBOAfIATgMuAE4BfwAkAdkATgHZAE4B4gBOAcIAIwDnAE4A4wBRAJ//xACO/98B4gBOAeYATgHmAE4B5gBOAeYATgHmAE4BsABOAe8ATgHmAE4B5gBOAeYATgHmAE4CCABOAeoATgIIAE4CDwAMAfIATgIPAAwB8gBOApYATgH2ACUBsgBCAbMATgGyAEIB0wBOAbIAQgGzAE4BsgBCAbQATgJAAE4CYABOAkAATgIfAE4B0QBOAcIAIwHRAE4B2QBOAfsATgGyACMB0QBOAdkATgIZAEEB6wBOAhkAQQHqAE4CNgBKAeoATgIZAEEB6gBOAkwATgJDAB8CrQBOAiAATgHoAE4BuwBOAXYATgFKAE4BWwBOAQn/+gEYAE4AgQApAQT//gGTAE4B3ABPAb4AQwHiAE4BuABOARIAUQG4AE4A/wBOAb//3gDN/9oCVQBOAaYATgKKAE4B4gBOAooATgH0AEACigBOAeIATgKLAE4B9QBAAiUAPwHmAE4CJQA/AeYATgM2AE4DFwBOAjQATgFrAE4CNABOAVsAPQI0AE4BkwBOAjEAJQG8ADECMQAlAdkATgGvACQCMQAlAdkATgGSAAABCwAsAZIAAAFu/+sBkgAAAWcATgI2AEoB5gBOAjYASgHmAE4CNgBKAeYATgI2AEoB5gBOAjYASgHmAE4CNgBKAeIAJAIsADwCJgAfAeAATgImAB8B4ABOAiYAHwHgAE4CMQAlAa8AJAGTAC4BiwAuAVMALgA/AAQByv/+AX8ATAG7AE4Bxf/+AUYATgJqAE4CZgBOAsgATgGCAE4CigBOAs8ATgLRAE4A+wAPAhsADAIiAE4BvwBOAhEADAG/AE4CWABOAkAAUAIVAE4BKwBQAf4ATgIVAAwCtwBQ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ACAATgBhAG0AZQAgACIAQQBkAHYAZQBuAHQAIABQAHIAbwAiAEEAZAB2AGUAbgB0ACAAUAByAG8ATABpAGcAaAB0AEEAbgBkAHIAZQBhAHMASwBhAGwAcABhAGsAaQBkAGkAcwA6ACAAQQBkAHYAZQBuAHQAIABQAHIAbwAgAEwAaQBnAGgAdAA6ACAAMgAwADAAOABBAGQAdgBlAG4AdAAgAFAAcgBvACAATABpAGcAaAB0AFYAZQByAHMAaQBvAG4AIAAyAC4AMAAwADMAQQBkAHYAZQBuAHQAUAByAG8ALQBMAGkAZwBoAHQAQQBkAHYAZQBuAHQAIABQAHIAbwAgAFQAaABpAG4AIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIABvAGYAIABJAE4ARABFACAAQQBuAGQAcgBlAGEAcwAgAEsAYQBsAHAAYQBrAGkAZABpAHMALgBBAG4AZAByAGUAYQBzACAASwBhAGwAcABhAGsAaQBkAGkAcwB3AHcAdwAuAGkAbgBkAGUAcgBlAHMAdABpAG4AZwAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACAAbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIABGAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGgAaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAAgAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGwALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwByAGcALwBPAEYATAAAAAIAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAABnAAAAAEAAgADAAQABQAGAAcACAAJAAoACwAMAA0ADgAPABAAEQASABMAFAAVABYAFwAYABkAGgAbABwAHQAeAB8AIAAhACIAIwAkACUAJgAnACgAKQAqACsALAAtAC4ALwAwADEAMgAzADQANQA2ADcAOAA5ADoAOwA8AD0APgA/AEAAQQBCAEMARABFAEYARwBIAEkASgBLAEwATQBOAE8AUABRAFIAUwBUAFUAVgBXAFgAWQBaAFsAXABdAF4AXwBgAGEAowCEAIUAvQCWAIYAjgCLAJ0AqQECAIoA2gCDAJMAjQCXAIgA3gCqAKIArQDJAMcArgBiAGMAkABkAMsAZQDIAMoAzwDMAM0AzgDpAGYA0wDQANEArwBnAPAAkQDWANQA1QBoAOsA7QCJAGoAaQBrAG0AbABuAKAAbwBxAHAAcgBzAHUAdAB2AHcAeAB6AHkAewB9AHwAuAChAH8AfgCAAIEA7ADuALoBAwEEAQUBBgEHAQgA/QD+AQkBCgELAQwA/wEAAQ0BDgEPAQEBEAERARIBEwEUARUBFgEXARgBGQD4APkBGgEbARwBHQEeAR8BIAEhASIBIwEkASUBJgEnAPoA1wEoASkBKgErASwBLQEuAS8BMAExATIA4gDjATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+ALAAsQE/AUABQQFCAUMBRAFFAUYBRwFIAPwA5ADlAUkBSgFLAUwBTQFOAU8BUAFRAVIBUwFUAVUBVgFXAVgBWQFaALsBWwFcAV0BXgDmAOcBXwFgANgA4QDbANwA3QDgANkA3wFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwFwAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYwBjQGOAY8BkAGRAZIBkwGUAZUBlgCbAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAC2ALcAxAC0ALUAxQCHAKsAxgC+AL8AvAGlAIwAnwCoAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbUBtgG3AbgBuQG6AbsBvAG9B3VuaTAwQUQHQW1hY3JvbgdhbWFjcm9uBkFicmV2ZQZhYnJldmUHQW9nb25lawdhb2dvbmVrC0NjaXJjdW1mbGV4C2NjaXJjdW1mbGV4CkNkb3RhY2NlbnQKY2RvdGFjY2VudAZEY2Fyb24GZGNhcm9uBkRjcm9hdAdFbWFjcm9uB2VtYWNyb24KRWRvdGFjY2VudAplZG90YWNjZW50B0VvZ29uZWsHZW9nb25lawZFY2Fyb24GZWNhcm9uC0djaXJjdW1mbGV4C2djaXJjdW1mbGV4Ckdkb3RhY2NlbnQKZ2RvdGFjY2VudAxHY29tbWFhY2NlbnQMZ2NvbW1hYWNjZW50C0hjaXJjdW1mbGV4C2hjaXJjdW1mbGV4BEhiYXIEaGJhcgZJdGlsZGUGaXRpbGRlB0ltYWNyb24HaW1hY3JvbgdJb2dvbmVrB2lvZ29uZWsLSmNpcmN1bWZsZXgLamNpcmN1bWZsZXgMS2NvbW1hYWNjZW50DGtjb21tYWFjY2VudAxrZ3JlZW5sYW5kaWMGTGFjdXRlBmxhY3V0ZQxMY29tbWFhY2NlbnQMbGNvbW1hYWNjZW50BkxjYXJvbgZsY2Fyb24GTmFjdXRlBm5hY3V0ZQxOY29tbWFhY2NlbnQMbmNvbW1hYWNjZW50Bk5jYXJvbgZuY2Fyb24DRW5nA2VuZwdPbWFjcm9uB29tYWNyb24NT2h1bmdhcnVtbGF1dA1vaHVuZ2FydW1sYXV0BlJhY3V0ZQZyYWN1dGUMUmNvbW1hYWNjZW50DHJjb21tYWFjY2VudAZSY2Fyb24GcmNhcm9uBlNhY3V0ZQZzYWN1dGULU2NpcmN1bWZsZXgLc2NpcmN1bWZsZXgMVGNvbW1hYWNjZW50DHRjb21tYWFjY2VudAZUY2Fyb24GdGNhcm9uBFRiYXIEdGJhcgZVdGlsZGUGdXRpbGRlB1VtYWNyb24HdW1hY3JvbgZVYnJldmUGdWJyZXZlBVVyaW5nBXVyaW5nDVVodW5nYXJ1bWxhdXQNdWh1bmdhcnVtbGF1dAdVb2dvbmVrB3VvZ29uZWsGWmFjdXRlBnphY3V0ZQpaZG90YWNjZW50Cnpkb3RhY2NlbnQMU2NvbW1hYWNjZW50DHNjb21tYWFjY2VudA1kaWVyZXNpc3Rvbm9zCkFscGhhdG9ub3MMRXBzaWxvbnRvbm9zCEV0YXRvbm9zCUlvdGF0b25vcwxPbWljcm9udG9ub3MMVXBzaWxvbnRvbm9zCk9tZWdhdG9ub3MRaW90YWRpZXJlc2lzdG9ub3MFQWxwaGEEQmV0YQVHYW1tYQd1bmkwMzk0B0Vwc2lsb24EWmV0YQNFdGEFVGhldGEESW90YQVLYXBwYQZMYW1iZGECTXUCTnUCWGkHT21pY3JvbgJQaQNSaG8FU2ln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'; \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/refresh-cs13/app/index.tsx b/ej2-react/code-snippet/treegrid/refresh-cs13/app/index.tsx new file mode 100644 index 000000000..80b1b6ab0 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/refresh-cs13/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(, document.getElementById('root')); \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/refresh-cs13/index.css b/ej2-react/code-snippet/treegrid/refresh-cs13/index.css new file mode 100644 index 000000000..e2de99fc9 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/refresh-cs13/index.css @@ -0,0 +1,9 @@ +.e-grid .custom { + background-color: #f48fb1 !important;/* csslint allow: important */ + color: white; +} + +.e-grid .custom { + background-color: #fce4ec; + color: white; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/refresh-cs13/index.html b/ej2-react/code-snippet/treegrid/refresh-cs13/index.html new file mode 100644 index 000000000..e869e10c8 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/refresh-cs13/index.html @@ -0,0 +1,33 @@ + + + + + Syncfusion React Grid + + + + + + + + + + + + + + + + + + + + + + +
      +
      Loading....
      +
      + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/refresh-cs13/systemjs.config.js b/ej2-react/code-snippet/treegrid/refresh-cs13/systemjs.config.js new file mode 100644 index 000000000..985954cb4 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/refresh-cs13/systemjs.config.js @@ -0,0 +1,57 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "system", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/30.2.4/" + }, + 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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-grids": "syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-treegrid": "syncfusion:ej2-react-treegrid/dist/ej2-react-treegrid.umd.min.js", +"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", +"react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/code-snippet/treegrid/refresh-cs5/app/App.jsx b/ej2-react/code-snippet/treegrid/refresh-cs5/app/App.jsx index d8c8ef84f..963da0740 100644 --- a/ej2-react/code-snippet/treegrid/refresh-cs5/app/App.jsx +++ b/ej2-react/code-snippet/treegrid/refresh-cs5/app/App.jsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { projectData } from './datasource'; import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from '@syncfusion/ej2-react-treegrid'; -import { Toolbar, Page, PdfExport, ExcelExport } from '@syncfusion/ej2-react-treegrid'; +import { Toolbar, Page, PdfExport } from '@syncfusion/ej2-react-treegrid'; /* tslint:disable */ function App() { - const toolbarOptions = ['PdfExport', 'ExcelExport']; + const toolbarOptions = ['PdfExport']; let treegrid; const pageOptions = { pageSize: 5, pageCount: 5 }; const selectionOptions = { type: 'Multiple' }; @@ -16,15 +16,8 @@ function App() { }; treegrid.current.pdfExport(exportProperties); } - else if (treegrid && args.item.text === 'Excel Export') { - const selectedRecords = treegrid.getSelectedRecords(); - const exportProperties = { - dataSource: selectedRecords, - }; - treegrid.excelExport(exportProperties); - } }; - return ( treegrid = g} allowPdfExport={true} allowExcelExport={true} selectionSettings={selectionOptions}> + return ( treegrid = g} allowPdfExport={true} selectionSettings={selectionOptions}> @@ -33,8 +26,8 @@ function App() { - + ); } ; -export default App; +export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/refresh-cs5/app/App.tsx b/ej2-react/code-snippet/treegrid/refresh-cs5/app/App.tsx index 10ba5f73c..bfa683570 100644 --- a/ej2-react/code-snippet/treegrid/refresh-cs5/app/App.tsx +++ b/ej2-react/code-snippet/treegrid/refresh-cs5/app/App.tsx @@ -4,15 +4,15 @@ import * as React from 'react'; import { projectData } from './datasource'; import { ClickEventArgs } from '@syncfusion/ej2-navigations'; -import { PdfExportProperties, ExcelExportProperties } from '@syncfusion/ej2-react-grids'; +import { PdfExportProperties } from '@syncfusion/ej2-react-grids'; import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject, SelectionSettingsModel } from '@syncfusion/ej2-react-treegrid'; -import { Toolbar, ToolbarItems, Page, TreeGrid, PdfExport, ExcelExport, PageSettingsModel } from '@syncfusion/ej2-react-treegrid'; +import { Toolbar, ToolbarItems, Page, TreeGrid, PdfExport, PageSettingsModel } from '@syncfusion/ej2-react-treegrid'; /* tslint:disable */ function App() { - const toolbarOptions: ToolbarItems[] = ['PdfExport', 'ExcelExport']; + const toolbarOptions: ToolbarItems[] = ['PdfExport']; let treegrid: TreeGridComponent | null; const pageOptions: PageSettingsModel = {pageSize:5, pageCount:5}; const selectionOptions: SelectionSettingsModel = {type: 'Multiple'}; @@ -23,20 +23,12 @@ function App() { dataSource: selectedRecords, }; (treegrid.current as any).pdfExport(exportProperties); - } else if (treegrid && args.item.text === 'Excel Export') { - const selectedRecords = treegrid.getSelectedRecords(); - const exportProperties: ExcelExportProperties = { - dataSource: selectedRecords, - }; - treegrid.excelExport(exportProperties); - } + } } return ( treegrid = g} allowPdfExport={true} allowExcelExport={true} - selectionSettings={selectionOptions}> + toolbarClick={toolbarClick} toolbar={toolbarOptions} allowPaging={true} ref={g => treegrid = g} allowPdfExport={true} selectionSettings={selectionOptions}> @@ -45,7 +37,7 @@ function App() { - + ); }; diff --git a/ej2-react/code-snippet/treegrid/refresh-cs7/app/App.jsx b/ej2-react/code-snippet/treegrid/refresh-cs7/app/App.jsx index cb0d6a850..6d5ba4626 100644 --- a/ej2-react/code-snippet/treegrid/refresh-cs7/app/App.jsx +++ b/ej2-react/code-snippet/treegrid/refresh-cs7/app/App.jsx @@ -2,36 +2,26 @@ import * as React from 'react'; import { projectData } from './datasource'; import { Query } from '@syncfusion/ej2-data'; import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from '@syncfusion/ej2-react-treegrid'; -import { Toolbar, Page, PdfExport, ExcelExport } from '@syncfusion/ej2-react-treegrid'; +import { Toolbar, Page, ExcelExport } from '@syncfusion/ej2-react-treegrid'; /* tslint:disable */ function App() { - const toolbarOptions = ['PdfExport', 'ExcelExport']; + const toolbarOptions = ['ExcelExport']; let treegrid; let queryClone; const pageOptions = { pageSize: 5, pageCount: 5 }; const toolbarClick = (args) => { - if (treegrid && args.item.text === 'PDF Export') { - queryClone = treegrid.query; - treegrid.query = new Query().addParams("recordcount", "12"); - treegrid.pdfExport(); - } - else if (treegrid && args.item.text === 'Excel Export') { + if (treegrid && args.item.text === 'Excel Export') { queryClone = treegrid.query; treegrid.query = new Query().addParams("recordcount", "12"); treegrid.excelExport(); } }; - const pdfExportComplete = () => { - if (treegrid) { - treegrid.query = queryClone; - } - }; const excelExportComplete = () => { if (treegrid) { treegrid.query = queryClone; } }; - return ( treegrid = g} allowPdfExport={true} allowExcelExport={true} pdfExportComplete={pdfExportComplete} excelExportComplete={excelExportComplete}> + return ( treegrid = g} allowExcelExport={true} excelExportComplete={excelExportComplete}> @@ -40,7 +30,7 @@ function App() { - + ); } ; diff --git a/ej2-react/code-snippet/treegrid/refresh-cs7/app/App.tsx b/ej2-react/code-snippet/treegrid/refresh-cs7/app/App.tsx index e0521e9bb..cc5f09ca8 100644 --- a/ej2-react/code-snippet/treegrid/refresh-cs7/app/App.tsx +++ b/ej2-react/code-snippet/treegrid/refresh-cs7/app/App.tsx @@ -6,33 +6,24 @@ import { projectData } from './datasource'; import { Query } from '@syncfusion/ej2-data'; import { ClickEventArgs } from '@syncfusion/ej2-navigations'; import { ColumnsDirective, ColumnDirective, TreeGridComponent, Inject } from '@syncfusion/ej2-react-treegrid'; -import { Toolbar, ToolbarItems, Page, TreeGrid, PdfExport, ExcelExport, PageSettingsModel } from '@syncfusion/ej2-react-treegrid'; +import { Toolbar, ToolbarItems, Page, TreeGrid, ExcelExport, PageSettingsModel } from '@syncfusion/ej2-react-treegrid'; /* tslint:disable */ function App() { - const toolbarOptions: ToolbarItems[] = ['PdfExport', 'ExcelExport']; + const toolbarOptions: ToolbarItems[] = ['ExcelExport']; let treegrid: TreeGridComponent | null; let queryClone: Query; const pageOptions: PageSettingsModel = {pageSize:5, pageCount:5}; const toolbarClick = (args: ClickEventArgs) => { - if (treegrid && args.item.text === 'PDF Export') { - queryClone = treegrid.query; - treegrid.query = new Query().addParams("recordcount", "12"); - treegrid.pdfExport(); - } else if (treegrid && args.item.text === 'Excel Export') { + if (treegrid && args.item.text === 'Excel Export') { queryClone = treegrid.query; treegrid.query = new Query().addParams("recordcount", "12"); treegrid.excelExport(); } } - const pdfExportComplete = (): void => { - if (treegrid) { - treegrid.query = queryClone; - } - } const excelExportComplete = (): void => { if (treegrid) { treegrid.query = queryClone; @@ -40,10 +31,8 @@ function App() { } return ( - treegrid = g} allowPdfExport={true} allowExcelExport={true} - pdfExportComplete={pdfExportComplete} excelExportComplete={excelExportComplete}> + treegrid = g} allowExcelExport={true} excelExportComplete={excelExportComplete}> @@ -52,10 +41,8 @@ function App() { - + ); }; -export default App; - - +export default App; \ No newline at end of file diff --git a/ej2-react/gantt/events.md b/ej2-react/gantt/events.md index a6e1e631e..52fed54c0 100644 --- a/ej2-react/gantt/events.md +++ b/ej2-react/gantt/events.md @@ -18,87 +18,87 @@ The [actionBegin](https://ej2.syncfusion.com/react/documentation/api/gantt/#acti The event argument structure varies based on the operation type. The following tables describe the supported argument types and their properties. -**[ActionBeginArgs](https://ej2.syncfusion.com/react/documentation/api/gantt/actionBeginArgs/)** - -| **Property** | **Type** | **Description** | -|--------------------------|----------------|-----------------| -| `action` | `string` | Defines the type of action being performed. | -| `fromItem` | `IGanttData` | Specifies the predecessor task in a dependency relationship. | -| `isValidLink` | `boolean` | Indicates whether the dependency link is valid. | -| `mergeSegmentIndexes` | `Object[]` | Contains indexes of segments to be merged during a context click action. | -| `newPredecessorString` | `string` | Represents the updated predecessor string. | -| `newTaskData` | `object` | Holds the newly added task data, excluding custom Gantt properties. | -| `predecessor` | `IPredecessor` | Defines the predecessor object involved in the action. | -| `recordIndex` | `number` | Specifies the index of the record being acted upon. | -| `splitDate` | `Date` | Indicates the date at which a task is split during a context click action. | -| `target` | `Element` | Refers to the target HTML element involved in the action. | -| `toItem` | `IGanttData` | Specifies the successor task in a dependency relationship. | -| `type` | `string` | Defines the type of event triggered. | - -**[ITimeSpanEventArgs](https://ej2.syncfusion.com/react/documentation/api/gantt/iTimeSpanEventArgs/) (Taskbar editing)** - -| **Property** | **Type** | **Description** | -|------------------------|------------|-----------------| -| `cancel` | `boolean` | Set to **true** to cancel the current action before it is processed. | -| `isTimelineRoundOff` | `boolean` | Indicates whether timeline rounding is applied during taskbar editing. | -| `projectStartDate` | `Date` | Start date of the overall project. Useful for validating task boundaries. | -| `projectEndDate` | `Date` | End date of the overall project. Useful for validating task boundaries. | -| `requestType` | `string` | Describes the type of request. For taskbar editing, values include **taskbarEditing**. | - -**[ITaskAddedEventArgs](https://ej2.syncfusion.com/react/documentation/api/gantt/iTaskAddedEventArgs/) (Adding/Editing/Deleting tasks)** - -| **Property** | **Type** | **Description** | -|---------------------|--------------|-----------------| -| `action` | `string` | Specifies the type of action, such as **beforeAdd** or **beforeDelete**. | -| `cancel` | `boolean` | Set to **true** to cancel the current action. | -| `data` | `object` | Contains the original task data before modification. | -| `modifiedRecords` | `object[]` | Array of records that were modified during the action. | -| `modifiedTaskData` | `object[]` | Array of task data after modification. | -| `newTaskData` | `object` | Data of the newly added task (if applicable). | -| `recordIndex` | `number` | Index of the record being modified or added. | -| `requestType` | `string` | Describes the type of request, such as **beforeSave**, **beforeDelete**. | -| `rowPosition` | `string` | Indicates the position where the new row is added. Possible values: **Top**, **Bottom**, **Above**, **Below**. | - -**[FilterEventArgs](https://ej2.syncfusion.com/react/documentation/api/grid/filterEventArgs/) (Filtering)** - -| **Property** | **Type** | **Description** | -|--------------------------|--------------|-----------------| -| `cancel` | `boolean` | Set to **true** to cancel the filtering action. | -| `columns` | `object[]` | Array of columns involved in filtering. | -| `currentFilterObject` | `object` | Filter object representing the current filter condition. | -| `currentFilteringColumn` | `string` | Name of the column currently being filtered. | -| `requestType` | `string` | Describes the type of request, typically **filtering**. | -| `type` | `string` | Event type identifier. | - -**[SortEventArgs](https://ej2.syncfusion.com/react/documentation/api/grid/sortEventArgs/) (Sorting)** - -| **Property** | **Type** | **Description** | -|------------------|------------|-----------------| -| `cancel` | `boolean` | Set to **true** to cancel the sorting action. | -| `columnName` | `string` | Name of the column being sorted. | -| `direction` | `string` | Sort direction: **Ascending** or **Descending**. | -| `requestType` | `string` | Describes the type of request, typically **sorting**. | -| `type` | `string` | Event type identifier. | - -**[IDependencyEventArgs](https://ej2.syncfusion.com/react/documentation/api/gantt/iDependencyEventArgs/) (Dependency editing)** - -| **Property** | **Type** | **Description** | -|---------------------------|------------|-----------------| -| `fromItem` | `object` | Source task object in the dependency link. | -| `isValidLink` | `boolean` | Indicates whether the new dependency link is valid. | -| `newPredecessorString` | `string` | New predecessor string after editing. | -| `predecessor` | `string` | Original predecessor string before editing. | -| `requestType` | `string` | Describes the type of request, typically **validateDependency** or **updateDependency**. | -| `toItem` | `object` | Target task object in the dependency link. | - -**[ZoomEventArgs](https://ej2.syncfusion.com/react/documentation/api/gantt/zoomEventArgs/) (Zooming)** - -| **Property** | **Type** | **Description** | -|------------------|------------|-----------------| -| `cancel` | `boolean` | Set to **true** to cancel the zoom action. | -| `name` | `string` | Describes the name for the event. | -| `requestType` | `string` | Describes the type of request, typically **zooming**. | -| `timeline` | `object` | Timeline settings after zoom is applied. | +**1. [ActionBeginArgs](https://ej2.syncfusion.com/react/documentation/api/gantt/actionBeginArgs/)** + +| **Property** | **Type** | **Description** | +|--------------------------|----------------|---------------------------------------------------------------------------------| +| `action` | string | Defines the type of action being performed. | +| `fromItem` | IGanttData | Specifies the predecessor task in a dependency relationship. | +| `isValidLink` | boolean | Indicates whether the dependency link is valid. | +| `mergeSegmentIndexes` | Object[] | Contains indexes of segments to be merged during a context click action. | +| `newPredecessorString` | string | Represents the updated predecessor string. | +| `newTaskData` | object | Holds the newly added task data, excluding custom Gantt properties. | +| `predecessor` | IPredecessor | Defines the predecessor object involved in the action. | +| `recordIndex` | number | Specifies the index of the record being acted upon. | +| `splitDate` | Date | Indicates the date at which a task is split during a context click action. | +| `target` | Element | Refers to the target HTML element involved in the action. | +| `toItem` | IGanttData | Specifies the successor task in a dependency relationship. | +| `type` | string | Defines the type of event triggered. | + +**2. [ITimeSpanEventArgs](https://ej2.syncfusion.com/react/documentation/api/gantt/iTimeSpanEventArgs/) (Taskbar editing)** + +| **Property** | **Type** | **Description** | +|------------------------|------------|---------------------------------------------------------------------------------| +| `cancel` | boolean | Set to **true** to cancel the current action before it is processed. | +| `isTimelineRoundOff` | boolean | Indicates whether timeline rounding is applied during taskbar editing. | +| `projectStartDate` | Date | Start date of the overall project. Useful for validating task boundaries. | +| `projectEndDate` | Date | End date of the overall project. Useful for validating task boundaries. | +| `requestType` | string | Describes the type of request. For taskbar editing, values include **taskbarEditing**. | + +**3. [ITaskAddedEventArgs](https://ej2.syncfusion.com/react/documentation/api/gantt/iTaskAddedEventArgs/) (Adding/Editing/Deleting tasks)** + +| **Property** | **Type** | **Description** | +|---------------------|--------------|---------------------------------------------------------------------------------| +| `action` | string | Specifies the type of action, such as **beforeAdd** or **beforeDelete**. | +| `cancel` | boolean | Set to **true** to cancel the current action. | +| `data` | object | Contains the original task data before modification. | +| `modifiedRecords` | object[] | Array of records that were modified during the action. | +| `modifiedTaskData` | object[] | Array of task data after modification. | +| `newTaskData` | object | Data of the newly added task, if applicable. | +| `recordIndex` | number | Index of the record being modified or added. | +| `requestType` | string | Describes the type of request, such as **beforeAdd** or **beforeDelete**. | +| `rowPosition` | string | Indicates the position where the new row is added. Possible values: **Top**, **Bottom**, **Above**, **Below**. | + +**4. [FilterEventArgs](https://ej2.syncfusion.com/react/documentation/api/grid/filterEventArgs/) (Filtering)** + +| **Property** | **Type** | **Description** | +|--------------------------|--------------|---------------------------------------------------------------------------------| +| `cancel` | boolean | Set to **true** to cancel the filtering action. | +| `columns` | object[] | Array of columns involved in filtering. | +| `currentFilterObject` | object | Filter object representing the current filter condition. | +| `currentFilteringColumn` | string | Name of the column currently being filtered. | +| `requestType` | string | Describes the type of request, typically **filtering**. | +| `type` | string | Event type identifier. | + +**5. [SortEventArgs](https://ej2.syncfusion.com/react/documentation/api/grid/sortEventArgs/) (Sorting)** + +| **Property** | **Type** | **Description** | +|------------------|------------|---------------------------------------------------------------------------------| +| `cancel` | boolean | Set to **true** to cancel the sorting action. | +| `columnName` | string | Name of the column being sorted. | +| `direction` | string | Sort direction: **Ascending** or **Descending**. | +| `requestType` | string | Describes the type of request, typically **sorting**. | +| `type` | string | Event type identifier. | + +**6. [IDependencyEventArgs](https://ej2.syncfusion.com/react/documentation/api/gantt/iDependencyEventArgs/) (Dependency editing)** + +| **Property** | **Type** | **Description** | +|---------------------------|------------|---------------------------------------------------------------------------------| +| `fromItem` | object | Source task object in the dependency link. | +| `isValidLink` | boolean | Indicates whether the new dependency link is valid. | +| `newPredecessorString` | string | New predecessor string after editing. | +| `predecessor` | string | Original predecessor string before editing. | +| `requestType` | string | Describes the type of request, typically **validateDependency** or **updateDependency**. | +| `toItem` | object | Target task object in the dependency link. | + +**7. [ZoomEventArgs](https://ej2.syncfusion.com/react/documentation/api/gantt/zoomEventArgs/) (Zooming)** + +| **Property** | **Type** | **Description** | +|------------------|------------|---------------------------------------------------------------------------------| +| `cancel` | boolean | Set to **true** to cancel the zoom action. | +| `name` | string | Name of the event. | +| `requestType` | string | Describes the type of request, typically **zooming**. | +| `timeline` | object | Timeline settings after zoom is applied. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -339,60 +339,60 @@ The [actionComplete](https://ej2.syncfusion.com/react/documentation/api/gantt/#a Below are detailed descriptions of each argument type's properties, and their purposes. -**[ActionCompleteArgs](https://ej2.syncfusion.com/react/documentation/api/gantt/actionCompleteArgs/)** +**1. [ActionCompleteArgs](https://ej2.syncfusion.com/react/documentation/api/gantt/actionCompleteArgs/)** -| **Property** | **Type** | **Description** | -|--------------------|-------------------------|-------------------------------------------------------| -| `action` | `string` | Defines the action performed during the event. | -| `keyEvent` | `Event` | Defines the key event triggered. | -| `newTaskData` | `object` | Specifies the newly added task data without custom Gantt properties. | -| `recordIndex` | `number` | Defines the index of the record involved in the event. | -| `timeline` | `ZoomTimelineSettings` | Defines the settings applied to the Zoom timeline. | -| `type` | `string` | Defines the type of the event. | +| **Property** | **Type** | **Description** | +|--------------------|-------------------------|---------------------------------------------------------------------------------| +| `action` | string | Defines the action performed during the event. | +| `keyEvent` | Event | Defines the key event triggered. | +| `newTaskData` | object | Specifies the newly added task data without custom Gantt properties. | +| `recordIndex` | number | Defines the index of the record involved in the event. | +| `timeline` | ZoomTimelineSettings | Defines the settings applied to the Zoom timeline. | +| `type` | string | Defines the type of the event. | -**[FilterEventArgs](https://ej2.syncfusion.com/react/documentation/api/grid/filterEventArgs/)(Filtering)** +**2. [FilterEventArgs](https://ej2.syncfusion.com/react/documentation/api/grid/filterEventArgs/) (Filtering)** | **Property** | **Type** | **Description** | |--------------------------|--------------|-----------------| -| `cancel` | `boolean` | Set to **true** to cancel the filtering action. | -| `columns` | `object[]` | Array of columns involved in filtering. | -| `currentFilterObject` | `object` | Filter object representing the current filter condition. | -| `currentFilteringColumn` | `string` | Name of the column currently being filtered. | -| `requestType` | `string` | Describes the type of request like **filtering**, **filterAfterOpen**. | -| `type` | `string` | Event type identifier. | +| `cancel` | boolean | Set to **true** to cancel the filtering action. | +| `columns` | object[] | Array of columns involved in filtering. | +| `currentFilterObject` | object | Filter object representing the current filter condition. | +| `currentFilteringColumn` | string | Name of the column currently being filtered. | +| `requestType` | string | Describes the type of request like **filtering**, **filterAfterOpen**. | +| `type` | string | Event type identifier. | -**[SortEventArgs](https://ej2.syncfusion.com/react/documentation/api/grid/sortEventArgs/) (Sorting)** +**3. [SortEventArgs](https://ej2.syncfusion.com/react/documentation/api/grid/sortEventArgs/) (Sorting)** | **Property** | **Type** | **Description** | |------------------|------------|-----------------| -| `cancel` | `boolean` | Set to **true** to cancel the sorting action. | -| `columnName` | `string` | Name of the column being sorted. | -| `direction` | `string` | Sort direction: **Ascending** or **Descending**. | -| `requestType` | `string` | Describes the type of request, typically **sorting**. | -| `type` | `string` | Event type identifier. | +| `cancel` | boolean | Set to **true** to cancel the sorting action. | +| `columnName` | string | Name of the column being sorted. | +| `direction` | string | Sort direction: **Ascending** or **Descending**. | +| `requestType` | string | Describes the type of request, typically **sorting**. | +| `type` | string | Event type identifier. | -**[ITaskAddedEventArgs](https://ej2.syncfusion.com/react/documentation/api/gantt/iTaskAddedEventArgs/) (Adding/Editing/Deleting tasks)** +**4. [ITaskAddedEventArgs](https://ej2.syncfusion.com/react/documentation/api/gantt/iTaskAddedEventArgs/) (Adding/Editing/Deleting tasks)** | **Property** | **Type** | **Description** | |---------------------|--------------|-----------------| -| `action` | `string` | Specifies the type of action, such as **add** or **delete**. | -| `cancel` | `boolean` | Set to **true** to cancel the current action. | -| `data` | `object` | Contains the original task data before modification. | -| `modifiedRecords` | `object[]` | Array of records that were modified during the action. | -| `modifiedTaskData` | `object[]` | Array of task data after modification. | -| `newTaskData` | `object` | Data of the newly added task (if applicable). | -| `recordIndex` | `number` | Index of the record being modified or added. | -| `requestType` | `string` | Describes the type of request, such as **beforeSave**, **beforeDelete**. | -| `rowPosition` | `string` | Indicates the position where the new row is added. Possible values: **Top**, **Bottom**, **Above**, **Below**. | - -**[ZoomEventArgs](https://ej2.syncfusion.com/react/documentation/api/gantt/zoomEventArgs/) (Zooming)** +| `action` | string | Specifies the type of action, such as **add** or **delete**. | +| `cancel` | boolean | Set to **true** to cancel the current action. | +| `data` | object | Contains the original task data before modification. | +| `modifiedRecords` | object[] | Array of records that were modified during the action. | +| `modifiedTaskData` | object[] | Array of task data after modification. | +| `newTaskData` | object | Data of the newly added task (if applicable). | +| `recordIndex` | number | Index of the record being modified or added. | +| `requestType` | string | Describes the type of request, such as **beforeSave**, **beforeDelete**. | +| `rowPosition` | string | Indicates the position where the new row is added. Possible values: **Top**, **Bottom**, **Above**, **Below**. | + +**5. [ZoomEventArgs](https://ej2.syncfusion.com/react/documentation/api/gantt/zoomEventArgs/) (Zooming)** | **Property** | **Type** | **Description** | |------------------|------------|-----------------| -| `cancel` | `boolean` | Set to **true** to cancel the zoom action. | -| `name` | `string` | Describes the name for the event. | -| `requestType` | `string` | Describes the type of request, typically **zooming**. | -| `timeline` | `object` | Timeline settings after zoom is applied. | +| `cancel` | boolean | Set to **true** to cancel the zoom action. | +| `name` | string | Name of the event | +| `requestType` | string | Describes the type of request, typically **zooming**. | +| `timeline` | object | Timeline settings after zoom is applied. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -697,13 +697,11 @@ ReactDOM.render(, document.getElementById('root')); ## actionFailure -The [actionFailure](https://ej2.syncfusion.com/react/documentation/api/gantt/#actionfailure) event is triggered when an operation in the Gantt encounters an error due to configuration issues, invalid data, or missing modules. It returns a [FailureEventArgs](https://ej2.syncfusion.com/react/documentation/api/grid/failureEventArgs/#failureeventargs/) object containing detailed information about the failure. - -**[FailureEventArgs](https://ej2.syncfusion.com/react/documentation/api/grid/failureEventArgs/#failureeventargs/)** +The [actionFailure](https://ej2.syncfusion.com/react/documentation/api/gantt/#actionfailure) event is triggered when an operation in the Gantt encounters an error due to configuration issues, invalid data, or missing modules. It returns a [FailureEventArgs](https://ej2.syncfusion.com/react/documentation/api/grid/failureEventArgs/#failureeventargs/) object containing detailed information about the failure, including the following property: | **Property** | **Type** | **Description** | |------------------|------------|-----------------| -| `error` | `Error` |Defines the error information. | +| `error` | Error |Defines the error information. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -897,9 +895,9 @@ The event argument is an `object` containing the following properties: | **Property** | **Type** | **Description** | |--------------|------------|-------------------------------------------------------------------| -| `cancel` | `boolean` | Set to **true** to cancel the export. | -| `isCsv` | `boolean` | Indicates if the export is CSV (**true**) or Excel (**false**). | -| `name` | `string` | Event name, typically **beforeExcelExport**. | +| `cancel` | boolean | Set to **true** to cancel the export. | +| `isCsv` | boolean | Indicates if the export is CSV (**true**) or Excel (**false**). | +| `name` | string | Event name, typically **beforeExcelExport**. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -1123,10 +1121,10 @@ The event provides an argument of type `object` with the following properties: | **Property** | **Type** | **Description** | |----------------|------------|------------------------------------------------------------------| -| `cancel` | `boolean` | Set **true** to cancel PDF export. | -| `ganttObject` | `Object` | Reference to the Gantt Chart instance. | -| `name` | `string` | Event name, typically **beforePdfExport**. | -| `requestType` | `string` | Type of request, typically **beforePdfExport**. | +| `cancel` | boolean | Set **true** to cancel PDF export. | +| `ganttObject` | Object | Reference to the Gantt Chart instance. | +| `name` | string | Event name, typically **beforePdfExport**. | +| `requestType` | string | Type of request, typically **beforePdfExport**. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -1280,7 +1278,6 @@ function App() { const projectEndDate = new Date('05/30/2024'); const toolbarClick = (args: ClickEventArgs) => { - debugger; if (args.item.id === 'gantt_pdfexport') { (ganttInstance as React.RefObject).current.pdfExport(); } @@ -1348,10 +1345,10 @@ The event provides an argument of type [BeforeTooltipRenderEventArgs](https://ej | **Property** | **Type** | **Description** | |--------------|------------|-------------------------------------------------------------------| -| `args` | `Object` | Context info like target element and interaction type. | -| `content` | `string` | Tooltip content before rendering. | -| `cancel` | `boolean` | Set **true** to prevent tooltip display. | -| `data` | `Object` | Related Gantt data, such as task or header info. | +| `args` | Object | Context info like target element and interaction type. | +| `content` | string | Tooltip content before rendering. | +| `cancel` | boolean | Set **true** to prevent tooltip display. | +| `data` | Object | Related Gantt data, such as task or header info. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -1570,16 +1567,16 @@ ReactDOM.render(, document.getElementById('root')); ## cellDeselected -The [cellDeselected](https://ej2.syncfusion.com/angular/documentation/api/gantt/#celldeselected) event is triggered when a selected cell in the Gantt component is deselected. This occurs when the selection is cleared by clicking outside the cell, selecting a different cell or row, or through programmatic control. This event is typically used to validate cell data after deselection, synchronize external state, or trigger updates based on cell-level interactions. +The [cellDeselected](https://ej2.syncfusion.com/react/documentation/api/gantt/#celldeselected) event is triggered when a selected cell in the Gantt component is deselected. This occurs when the selection is cleared by clicking outside the cell, selecting a different cell or row, or through programmatic control. This event is typically used to validate cell data after deselection, synchronize external state, or trigger updates based on cell-level interactions. The event provides an argument of type [CellDeselectEventArgs](https://ej2.syncfusion.com/react/documentation/api/grid/cellDeselectEventArgs/) with the following properties: -| **Property** | **Type** | **Description** | +| **Property** | **Type** | **Description** | |-----------------|----------------|---------------------------------------------| -| `cancel` | `boolean` | Set to **true** to cancel the deselection. | -| `cellIndexes` | `object[]` | Row and column indices of deselected cells. | -| `cells` | `NodeList` | DOM elements of the deselected cells. | -| `data` | `Object` | Row data associated with the deselected cell.| +| `cancel` | boolean | Set to **true** to cancel the deselection. | +| `cellIndexes` | object[] | Row and column indices of deselected cells. | +| `cells` | NodeList | DOM elements of the deselected cells. | +| `data` | Object | Row data associated with the deselected cell.| {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -1789,16 +1786,16 @@ ReactDOM.render(, document.getElementById('root')); ## cellDeselecting -The [cellDeselecting](https://ej2.syncfusion.com/angular/documentation/api/gantt/#celldeselecting) event is triggered when a previously selected cell in the Gantt component is deselected. This occurs when the selection is cleared either through user interaction or programmatic control. This event is typically used to validate cell data after deselection, synchronize external state, or trigger updates based on cell-level interactions. +The [cellDeselecting](https://ej2.syncfusion.com/react/documentation/api/gantt/#celldeselecting) event is triggered when a previously selected cell in the Gantt component is deselected. This occurs when the selection is cleared either through user interaction or programmatic control. This event is typically used to validate cell data after deselection, synchronize external state, or trigger updates based on cell-level interactions. The event provides an argument of type [CellDeselectEventArgs](https://ej2.syncfusion.com/react/documentation/api/grid/cellDeselectEventArgs/) with the following properties: | **Property** | **Type** | **Description** | |----------------|--------------|-------------------------------------------------------------------| -| `cancel` | `boolean` | Set to **true** to cancel the deselection action. | -| `cellIndexes` | `object[]` | Row and column indices of the cells being deselected. | -| `cells` | `NodeList` | DOM elements representing the deselecting cells. | -| `data` | `Object` | Row data associated with the deselecting cell. | +| `cancel` | boolean | Set to **true** to cancel the deselection action. | +| `cellIndexes` | object[] | Row and column indices of the cells being deselected. | +| `cells` | NodeList | DOM elements representing the deselecting cells. | +| `data` | Object | Row data associated with the deselecting cell. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -2020,18 +2017,18 @@ The event provides an argument of type [CellEditArgs](https://ej2.syncfusion.com | **Property** | **Type** | **Description** | |--------------------|------------------|------------------------------------------| -| `cancel` | `boolean` | Set to **true** to cancel the cell edit action.| -| `cell` | `Element` | Cell element currently being edited. | -| `columnName` | `string` | Field name of the edited column. | -| `columnObject` | `Object` | Metadata of the edited column. | -| `foreignKeyData` | `Object` | Foreign key data, if applicable. | -| `isForeignKey` | `boolean` | Indicates if column is a foreign key. | -| `primaryKey` | `string` | Primary key field in the data source. | -| `row` | `HTMLElement` | Row element containing the edited cell. | -| `rowData` | `Object` | Data of the row associated with the edited cell.| -| `type` | `string` | Type of edit action (e.g., **edit**). | -| `validationRules` | `Object` | Validation rules applied to the cell, if any. | -| `value` | `any` | The current value of the cell before editing starts.| +| `cancel` | boolean | Set to **true** to cancel the cell edit action.| +| `cell` | Element | Cell element currently being edited. | +| `columnName` | string | Field name of the edited column. | +| `columnObject` | Object | Metadata of the edited column. | +| `foreignKeyData` | Object | Foreign key data, if applicable. | +| `isForeignKey` | boolean | Indicates if column is a foreign key. | +| `primaryKey` | string | Primary key field in the data source. | +| `row` | HTMLElement | Row element containing the edited cell. | +| `rowData` | Object | Data of the row associated with the edited cell.| +| `type` | string | Type of edit action (e.g., **edit**). | +| `validationRules` | Object | Validation rules applied to the cell, if any. | +| `value` | any | The current value of the cell before editing starts.| {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -2245,20 +2242,20 @@ ReactDOM.render(, document.getElementById('root')); ## cellSelected -The [cellSelected](https://ej2.syncfusion.com/angular/documentation/api/gantt/#cellselected) event is triggered after a cell in the Gantt component is selected. This event provides access to the selected cell’s context and enables interaction logic based on cell-level selection. This event is commonly used to apply conditional styling, display contextual information, or trigger logic based on the selected task or field. +The [cellSelected](https://ej2.syncfusion.com/react/documentation/api/gantt/#cellselected) event is triggered after a cell in the Gantt component is selected. This event provides access to the selected cell’s context and enables interaction logic based on cell-level selection. This event is commonly used to apply conditional styling, display contextual information, or trigger logic based on the selected task or field. The event provides an argument of type [CellSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/grid/cellSelectEventArgs/) with the following properties: | **Property** | **Type** | **Description** | |----------------------------|------------------|----------------------------------------------| -| `cancel` | `boolean` | Cancel selection if set to **true**. | -| `cellIndex` | `object` | Index of the selected cell. | -| `cells` | `Element[]` | DOM elements of selected/deselected cells. | -| `currentCell` | `Element` | Currently selected cell element. | -| `data` | `Object` | Row data for the selected cell. | -| `previousRowCell` | `Element` | Previously selected cell element. | -| `previousRowCellIndex` | `number` | Index of previously selected cell. | -| `selectedRowCellIndex` | `object[]` | Indices of selected row and column. | +| `cancel` | boolean | Cancel selection if set to **true**. | +| `cellIndex` | object | Index of the selected cell. | +| `cells` | Element[] | DOM elements of selected/deselected cells. | +| `currentCell` | Element | Currently selected cell element. | +| `data` | Object | Row data for the selected cell. | +| `previousRowCell` | Element | Previously selected cell element. | +| `previousRowCellIndex` | number | Index of previously selected cell. | +| `selectedRowCellIndex` | object[] | Indices of selected row and column. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -2470,14 +2467,14 @@ The event provides an argument of type [CellSelectingEventArgs](https://ej2.sync | **Property** | **Type** | **Description** | |--------------------------|------------------|----------------------------------------------| -| `cancel` | `boolean` | Cancel selection if set to **true**. | -| `cellIndex` | `object` | Index of the cell being selected. | -| `cells` | `Element[]` | DOM elements of selected/deselected cells. | -| `currentCell` | `Element` | Cell element currently being selected. | -| `data` | `Object` | Row data for the selected cell. | -| `previousRowCell` | `Element` | Previously selected cell element. | -| `previousRowCellIndex` | `number` | Index of previously selected cell. | -| `selectedRowCellIndex` | `object[]` | Indices of selected row and column. | +| `cancel` | boolean | Cancel selection if set to **true**. | +| `cellIndex` | object | Index of the cell being selected. | +| `cells` | Element[] | DOM elements of selected/deselected cells. | +| `currentCell` | Element | Cell element currently being selected. | +| `data` | Object | Row data for the selected cell. | +| `previousRowCell` | Element | Previously selected cell element. | +| `previousRowCellIndex` | number | Index of previously selected cell. | +| `selectedRowCellIndex` | object[] | Indices of selected row and column. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -2696,9 +2693,9 @@ The event provides an argument of type [ColumnDragEventArgs](https://ej2.syncfus | **Property** | **Type** | **Description** | |--------------------|----------------|----------------------------------------------| -| `column` | `Object` | Column object currently being dragged. | -| `target` | `Element` | Element where column is dragged over. | -| `draggableType` | `string` | Type of draggable element (e.g., column). | +| `column` | Object | Column object currently being dragged. | +| `target` | Element | Element where column is dragged over. | +| `draggableType` | string | Type of draggable element (e.g., column). | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -2906,9 +2903,9 @@ The event provides an argument of type [ColumnDragEventArgs](https://ej2.syncfus | **Property** | **Type** | **Description** | |--------------------|----------------|----------------------------------------------| -| `column` | `Object` | Column object where drag started. | -| `target` | `Element` | Element where drag operation began. | -| `draggableType` | `string` | Type of draggable element (e.g., headercell).| +| `column` | Object | Column object where drag started. | +| `target` | Element | Element where drag operation began. | +| `draggableType` | string | Type of draggable element (e.g., headercell).| {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -3109,15 +3106,15 @@ ReactDOM.render(, document.getElementById('root')); ## columnDrop -The [columnDrop](https://ej2.syncfusion.com/angular/documentation/api/gantt/#columndrop) is triggered when a column header is dropped after a drag operation in the Gantt component. It provides drop context and supports post-reorder logic such as validation or UI updates. +The [columnDrop](https://ej2.syncfusion.com/react/documentation/api/gantt/#columndrop) is triggered when a column header is dropped after a drag operation in the Gantt component. It provides drop context and supports post-reorder logic such as validation or UI updates. The event provides an argument of type [ColumnDragEventArgs](https://ej2.syncfusion.com/react/documentation/api/grid/columnDragEventArgs/) with the following properties: | **Property** | **Type** | **Description** | |--------------------|----------------|-----------------------------------------------| -| `column` | `Object` | Column object being dropped. | -| `target` | `Element` | Element where column is dropped. | -| `draggableType` | `string` | Type of draggable element (e.g., row, column).| +| `column` | Object | Column object being dropped. | +| `target` | Element | Element where column is dropped. | +| `draggableType` | string | Type of draggable element (e.g., row, column).| {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -3330,10 +3327,10 @@ The event provides an argument of type [ColumnMenuClickEventArgs](https://ej2.sy | **Property** | **Type** | **Description** | |--------------|------------|------------------------------------------| -| `name` | `string` | Name of the clicked menu item. | -| `column` | `Object` | Column object linked to the menu item. | -| `element` | `Element` | DOM element of the clicked menu item. | -| `item` | `Object` | The menu item object that was clicked. | +| `name` | string | Name of the clicked menu item. | +| `column` | Object | Column object linked to the menu item. | +| `element` | Element | DOM element of the clicked menu item. | +| `item` | Object | The menu item object that was clicked. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -3544,15 +3541,15 @@ The event provides an argument of type [ColumnMenuOpenEventArgs](https://ej2.syn | **Property** | **Type** | **Description** | |--------------------|--------------------|-------------------------------------------------| -| `cancel` | `boolean` | Set **true** to cancel menu opening. | -| `name` | `string` | Event name: **columnMenuOpen**. | -| `column` | `Object` | Column object linked to the opened menu. | -| `element` | `Element` | Header element where menu was opened. | -| `items` | `Object[]` | List of available column menu items. | -| `left` | `number` | Left position of menu in viewport. | -| `top` | `number` | Top position of menu in viewport. | -| `parentItem` | `Object` | Parent item in nested menu structure. | -| `showSubMenuOn` | `MenuOpenType` | Submenu trigger type: click or hover. | +| `cancel` | boolean | Set **true** to cancel menu opening. | +| `name` | string | Event name: **columnMenuOpen**. | +| `column` | Object | Column object linked to the opened menu. | +| `element` | Element | Header element where menu was opened. | +| `items` | Object[] | List of available column menu items. | +| `left` | number | Left position of menu in viewport. | +| `top` | number | Top position of menu in viewport. | +| `parentItem` | Object | Parent item in nested menu structure. | +| `showSubMenuOn` | MenuOpenType | Submenu trigger type: click or hover. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -3764,12 +3761,12 @@ The event provides an argument of type [ContextMenuClickEventArgs](https://ej2.s | **Property** | **Type** | **Description** | |----------------|------------------|----------------------------------------------| -| `name` | `string` | Event name: **contextMenuClick**. | -| `element` | `Element` | DOM element that triggered the menu. | -| `event` | `PointerEvent` | Pointer event with interaction details. | -| `item` | `Object` | Clicked menu item with properties. | -| `type` | `string` | Type of menu item (e.g., **Content**). | -| `rowData` | `Object` | Data object of the related row. | +| `name` | string | Event name: **contextMenuClick**. | +| `element` | Element | DOM element that triggered the menu. | +| `event` | PointerEvent | Pointer event with interaction details. | +| `item` | Object | Clicked menu item with properties. | +| `type` | string | Type of menu item (e.g., **Content**). | +| `rowData` | Object | Data object of the related row. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -3936,17 +3933,17 @@ The event provides an argument of type [ContextMenuOpenEventArgs](https://ej2.sy | **Property** | **Type** | **Description** | |--------------------|------------------|----------------------------------------------| -| `name` | `string` | Event name: **contextMenuOpen**. | -| `element` | `Element` | DOM element that triggered the menu. | -| `event` | `PointerEvent` | Pointer event with interaction details. | -| `item` | `Object` | Menu item object with properties. | -| `type` | `string` | Type of menu item (e.g., **Content**). | -| `rowData` | `Object` | Data object of the related row. | -| `items` | `Object[]` | List of available context menu items. | -| `left` | `number` | Left position of menu in viewport. | -| `top` | `number` | Top position of menu in viewport. | -| `parentItem` | `Object` | Parent item in nested menu structure. | -| `showSubMenuOn` | `MenuOpenType` | Submenu trigger type: click or hover. | +| `name` | string | Event name: **contextMenuOpen**. | +| `element` | Element | DOM element that triggered the menu. | +| `event` | PointerEvent | Pointer event with interaction details. | +| `item` | Object | Menu item object with properties. | +| `type` | string | Type of menu item (e.g., **Content**). | +| `rowData` | Object | Data object of the related row. | +| `items` | Object[] | List of available context menu items. | +| `left` | number | Left position of menu in viewport. | +| `top` | number | Top position of menu in viewport. | +| `parentItem` | Object | Parent item in nested menu structure. | +| `showSubMenuOn` | MenuOpenType | Submenu trigger type: click or hover. | {% tabs %} @@ -4446,8 +4443,8 @@ The event provides an argument of type `object` with the following properties: | **Property** | **Type** | **Description** | |-------------------|-----------------|--------------------------------------------| -| `name` | `string` | Identifies event as **destroyed**. | -| `cancel` | `boolean` | Prevents destruction when set to **true**. | +| `name` | string | Identifies event as **destroyed**. | +| `cancel` | boolean | Prevents destruction when set to **true**. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -4675,9 +4672,9 @@ The event provides an argument of type [ITaskbarEditedEventArgs](https://ej2.syn | **Property** | **Type** | **Description** | |----------------------|----------------|------------------------------------------------------| -| `action` | `string` | Specifies type of task edit action. | -| `data` | `IGanttData` | Contains updated data for the task. | -| `name` | `string` | Identifies event as **endEdit** | +| `action` | string | Specifies type of task edit action. | +| `data` | IGanttData | Contains updated data for the task. | +| `name` | string | Identifies event as **endEdit** | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -4895,7 +4892,7 @@ The event provides an argument of type [ExcelExportCompleteArgs](https://ej2.syn | **Property** | **Type** | **Description** | |----------------------|----------------|------------------------------------------------------| -| `promise` | `Promise` | Represents blob data for exported file. | +| `promise` | Promise | Represents blob data for exported file. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -5131,12 +5128,12 @@ The event provides an argument of type [ExcelHeaderQueryCellInfoEventArgs](https | **Property** | **Type** | **Description** | |----------------|------------------|--------------------------------------------------------| -| `name` | `string` | Identifies event as **excelExportHeaderQueryCellInfo**.| -| `cell` | `ExcelCell` | Represents current Excel header cell. | -| `gridCell` | `Cell` \| `ExcelCell` | Refers to related Grid header cell. | -| `hyperLink` | `Hyperlink` | Contains hyperlink details for header cell. | -| `image` | `Image` | Contains image details for header cell. | -| `style` | `ExcelStyle` | Defines style settings for header cell. | +| `name` | string | Identifies event as **excelExportHeaderQueryCellInfo**.| +| `cell` | ExcelCell | Represents current Excel header cell. | +| `gridCell` | Cell \| ExcelCell | Refers to related Grid header cell. | +| `hyperLink` | Hyperlink | Contains hyperlink details for header cell. | +| `image` | Image | Contains image details for header cell. | +| `style` | ExcelStyle | Defines style settings for header cell. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -5370,14 +5367,14 @@ The event provides an argument of type [ExcelQueryCellInfoEventArgs](https://ej2 | **Property** | **Type** | **Description** | |----------------|------------------|------------------------------------------------------| -| `cell` | `object` | Represents current Excel cell being customized. | -| `column` | `object` | Metadata of column linked to cell. | -| `data` | `object` | Row data for the current cell. | -| `value` | `string` | Original value before export. | -| `style` | `object` | Style settings like font and alignment. | -| `colspan` | `number` | Specifies number of columns to span. | -| `hyperLink` | `Hyperlink` | Hyperlink details if cell includes a link. | -| `image` | `Image` | Image details if cell includes an image. | +| `cell` | object | Represents current Excel cell being customized. | +| `column` | object | Metadata of column linked to cell. | +| `data` | object | Row data for the current cell. | +| `value` | string | Original value before export. | +| `style` | object | Style settings like font and alignment. | +| `colspan` | number | Specifies number of columns to span. | +| `hyperLink` | Hyperlink | Hyperlink details if cell includes a link. | +| `image` | Image | Image details if cell includes an image. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -5614,10 +5611,10 @@ The event provides an argument of type [ICollapsingEventArgs](https://ej2.syncfu | **Property** | **Type** | **Description** | |----------------|------------------|------------------------------------------------------| -| `data` | `object` | Data object of the expanded row | -| `row` | `HTMLElement` | DOM element of the expanded row | -| `name` | `string` | Identifies event as **expanded** | -| `cancel` | `boolean` | Prevents expansion when set to **true** | +| `data` | object | Data object of the expanded row | +| `row` | HTMLElement | DOM element of the expanded row | +| `name` | string | Identifies event as **expanded** | +| `cancel` | boolean | Prevents expansion when set to **true** | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -5817,11 +5814,11 @@ The event provides an argument of type [ICollapsingEventArgs](https://ej2.syncfu | **Property** | **Type** | **Description** | |----------------|------------------|----------------------------------------------------| -| `data` | `object` | Data object of the row being expanded | -| `gridRow` | `HTMLElement` | DOM element of the Grid row | -| `chartRow` | `HTMLElement` | DOM element of the Chart row | -| `name` | `string` | Identifies event as **expanding** | -| `cancel` | `boolean` | Prevents expansion when set to **true** | +| `data` | object | Data object of the row being expanded | +| `gridRow` | HTMLElement | DOM element of the Grid row | +| `chartRow` | HTMLElement | DOM element of the Chart row | +| `name` | string | Identifies event as **expanding** | +| `cancel` | boolean | Prevents expansion when set to **true** | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -6030,9 +6027,9 @@ The event provides an object of type [HeaderCellInfoEventArgs](https://ej2.syncf | **Property** | **Type** | **Description** | |----------------|------------------|------------------------------------------------------| -| `cell` | `HTMLElement` | Represents the header cell element being rendered. | -| `node` | `Element` | Refers to the inner content element of the header cell, used to update text or insert icons. | -| `name` | `string` | Identifies the event as **headerCellInfo**. | +| `cell` | HTMLElement | Represents the header cell element being rendered. | +| `node` | Element | Refers to the inner content element of the header cell, used to update text or insert icons. | +| `name` | string | Identifies the event as **headerCellInfo**. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -6493,13 +6490,13 @@ The event provides an argument of type [IMouseMoveEventArgs](https://ej2.syncfus | **Property** | **Type** |**Description** | |-----------------|-----------------------|---------------------------------------------------------| -| `column` | `Object` | Column metadata at the cursor location. | -| `data` | `IGanttData` | Task or row data under the cursor. | -| `date` | `Date` | Timeline date corresponding to the cursor position. | -| `eventMarkers` | `EventMarkerModel` | Event markers present at the current position. | -| `indicator` | `IIndicator` | Indicator element such as milestone or status icon under the cursor. | -| `originalEvent` | `Object` | Native mouse event object (**MouseEvent**). | -| `predecessor` | `PredecessorTooltip` | Tooltip data for predecessor relationships, if available.| +| `column` | Object | Column metadata at the cursor location. | +| `data` | IGanttData | Task or row data under the cursor. | +| `date` | Date | Timeline date corresponding to the cursor position. | +| `eventMarkers` | EventMarkerModel | Event markers present at the current position. | +| `indicator` | IIndicator | Indicator element such as milestone or status icon under the cursor. | +| `originalEvent` | Object | Native mouse event object (**MouseEvent**). | +| `predecessor` | PredecessorTooltip | Tooltip data for predecessor relationships, if available.| {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -6720,11 +6717,11 @@ The event provides an argument of type [ITaskbarClickEventArgs](https://ej2.sync | **Property** | **Type** | **Description** | |------------------|---------------|-------------------------------------------------| -| `data` | `IGanttData` | Task data associated with the clicked taskbar. | -| `rowIndex` | `number` | Index of the row where the taskbar was clicked. | -| `target` | `Element` | DOM element where the click occurred. | -| `taskbarElement` | `HTMLElement` | Taskbar element that was clicked. | -| `name` | `string` | Name of the event (**onTaskbarClick**). | +| `data` | IGanttData | Task data associated with the clicked taskbar. | +| `rowIndex` | number | Index of the row where the taskbar was clicked. | +| `target` | Element | DOM element where the click occurred. | +| `taskbarElement` | HTMLElement | Taskbar element that was clicked. | +| `name` | string | Name of the event (**onTaskbarClick**). | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -6946,13 +6943,13 @@ The event provides an argument of type [PdfColumnHeaderQueryCellInfoEventArgs](h | **Property** | **Type** | **Description** | |------------------|------------------------|------------------------------------------------ | -| `cell` | `PdfTreeGridCell` | Represents the PDF cell being exported. Supports content and style updates. | -| `column` | `ColumnModel` | Provides column configuration details such as field name and header text. | -| `headerTemplate` | `ITemplateDetails` | Contains template content including text or image for the header cell. | -| `image` | `PdfImage` | Specifies an image to be rendered in the header cell. | -| `style` | `PdfGanttCellStyle` | Defines visual styles such as font, background color, and borders. | -| `value` | `string \| Object` | Value to be displayed in the header cell. Can be customized. | -| `name` | `string` | Identifies the event as **pdfColumnHeaderQueryCellInfo**. | +| `cell` | PdfTreeGridCell | Represents the PDF cell being exported. Supports content and style updates. | +| `column` | ColumnModel | Provides column configuration details such as field name and header text. | +| `headerTemplate` | ITemplateDetails | Contains template content including text or image for the header cell. | +| `image` | PdfImage | Specifies an image to be rendered in the header cell. | +| `style` | PdfGanttCellStyle | Defines visual styles such as font, background color, and borders. | +| `value` | string \| Object | Value to be displayed in the header cell. Can be customized. | +| `name` | string | Identifies the event as **pdfColumnHeaderQueryCellInfo**. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -7197,7 +7194,7 @@ The event provides an `object` with the following property: | **Property** | **Type** | **Description** | |--------------|-------------|--------------------------------------------------| -| `name` | `string` | Identifies the event as **pdfExportComplete** | +| `name` | string | Identifies the event as **pdfExportComplete** | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -7440,13 +7437,13 @@ The event provides an argument of type [PdfExportCompleteArgs](https://ej2.syncf | **Property** | **Type** | **Description** | |---------------|--------------------|-----------------------------------------------------| -| `data` | `object` | Task and Gantt data for the current row. | -| `value` | `Date \| string \| number \| boolean \| PdfTextWebLink \| PdfImage` | Value displayed in the cell during PDF export. | -| `column` | `Column` | Column configuration for the current cell. | -| `style` | `PdfGanttCellStyle`| Style settings like font, color, and padding. | -| `cell` | `PdfTreeGridCell` | PDF cell object being rendered and customized. | -| `hyperLink` |`Hyperlink` | Hyperlink details if the cell includes a link. | -| `image` | `Image` | Image details if the cell includes an image. | +| `data` | object | Task and Gantt data for the current row. | +| `value` | Date \| string \| number \| boolean \| PdfTextWebLink \| PdfImage | Value displayed in the cell during PDF export. | +| `column` | Column | Column configuration for the current cell. | +| `style` | PdfGanttCellStyle| Style settings like font, color, and padding. | +| `cell` | PdfTreeGridCell | PDF cell object being rendered and customized. | +| `hyperLink` | Hyperlink | Hyperlink details if the cell includes a link. | +| `image` | Image | Image details if the cell includes an image. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -7692,11 +7689,11 @@ The event provides an argument of type [PdfQueryTaskbarInfoEventArgs](https://ej | **Property** | **Type** | **Description** | |------------------ | ---------------------|----------------------------------------------------------| -| `data ` | `IGanttData` | Task data for the current taskbar being exported. | -| `indicators` | `IIndicator[]` | Indicators displayed on the taskbar during PDF export. | -| `labelSettings` | `ILabel` | Custom content or image for taskbar labels. | -| `taskbar` | `ITaskbarStyle` | Style settings like color, border, and progress bar. | -| `taskbarTemplate` | `ITemplateDetails` | Template for taskbar appearance including text or image. | +| `data ` | IGanttData | Task data for the current taskbar being exported. | +| `indicators` | IIndicator[] | Indicators displayed on the taskbar during PDF export. | +| `labelSettings` | ILabel | Custom content or image for taskbar labels. | +| `taskbar` | ITaskbarStyle | Style settings like color, border, and progress bar. | +| `taskbarTemplate` | ITemplateDetails | Template for taskbar appearance including text or image. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -7941,8 +7938,8 @@ The event provides an argument of type [pdfQueryTimelineCellInfoEventArgs](https | **Property** | **Type** | **Description** | |----------------|---------------------|------------------------------------------------------| -| `timelineCell` | `PdfGanttCellStyle` | Style settings for the timeline cell being rendered. | -| `value` | `string` | Text content displayed in the timeline cell. | +| `timelineCell` | PdfGanttCellStyle | Style settings for the timeline cell being rendered. | +| `value` | string | Text content displayed in the timeline cell. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -8182,13 +8179,13 @@ The event provides an argument of type [QueryCellInfoEventArgs](https://ej2.syn | **Property** | **Type** | **Description** | |--------------------|------------------|---------------------------------------------------| -| `cell` | `HTMLElement` | Represents the cell element being rendered. | -| `column` | `Column` | Configuration object for the current column. | -| `data` | `object` | Data object for the row associated with the cell. | -| `foreignKeyData` | `object` | Foreign key data for the cell, if applicable. | -| `rowIndex` | `number` | Index of the row containing the cell. | -| `colIndex` | `number` | Index of the column containing the cell. | -| `colspan` | `number` | Number of columns the cell spans across. | +| `cell` | HTMLElement | Represents the cell element being rendered. | +| `column` | Column | Configuration object for the current column. | +| `data` | object | Data object for the row associated with the cell. | +| `foreignKeyData` | object | Foreign key data for the cell, if applicable. | +| `rowIndex` | number | Index of the row containing the cell. | +| `colIndex` | number | Index of the column containing the cell. | +| `colspan` | number | Number of columns the cell spans across. | {% tabs %} @@ -8438,18 +8435,18 @@ The event provides an argument of type [IQueryTaskbarInfoEventArgs](https://ej2. | **Property** | **Type** | **Description** | |-------------------------|-----------------|------------------------------------------------------| -| `baselineColor` | `string` | Color applied to the baseline indicator. | -| `data` | `IGanttData` | Task data associated with the taskbar. | -| `leftLabelColor` | `string` | Color of the left-side label. | -| `milestoneColor` | `string` | Color used for milestone taskbars. | -| `progressBarBgColor` | `string` | Background color of the progress bar. | -| `rightLabelColor` | `string` | Color of the right-side label. | -| `rowElement` | `Element` | Row element containing the taskbar. | -| `taskLabelColor` | `string` | Color of the task label text. | -| `taskbarBgColor` | `string` | Background color of the taskbar. | -| `taskbarBorderColor` | `string` | Border color of the taskbar. | -| `taskbarElement` | `Element` | Defines the taskbar element. | -| `taskbarType` | `string` | Defines the taskbar type. | +| `baselineColor` | string | Color applied to the baseline indicator. | +| `data` | IGanttData | Task data associated with the taskbar. | +| `leftLabelColor` | string | Color of the left-side label. | +| `milestoneColor` | string | Color used for milestone taskbars. | +| `progressBarBgColor` | string | Background color of the progress bar. | +| `rightLabelColor` | string | Color of the right-side label. | +| `rowElement` | Element | Row element containing the taskbar. | +| `taskLabelColor` | string | Color of the task label text. | +| `taskbarBgColor` | string | Background color of the taskbar. | +| `taskbarBorderColor` | string | Border color of the taskbar. | +| `taskbarElement` | Element | Defines the taskbar element. | +| `taskbarType` | string | Defines the taskbar type. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -8700,15 +8697,15 @@ The event provides an argument of type [RecordDoubleClickEventArgs](https://ej2. | **Property** | **Type** | **Description** | |----------------------|------------------|-------------------------------------------------------| -| `cell` | `Element` | The cell element that was double-clicked. | -| `cellIndex` | `number` | Index of the clicked cell within the row. | -| `column` | `Column` | Column configuration for the clicked cell. | -| `foreignKeyData` | `Object` | Foreign key data linked to the column, if applicable. | -| `name` | `string` | Name of the event (**recordDoubleClick**). | -| `row` | `Element` | The row element that was double-clicked. | -| `rowData` | `IGanttData` | Data object representing the selected task. | -| `rowIndex` | `number` | Index of the row in the data source. | -| `target` | `Element` | DOM element that initiated the double-click. | +| `cell` | Element | The cell element that was double-clicked. | +| `cellIndex` | number | Index of the clicked cell within the row. | +| `column` | Column | Column configuration for the clicked cell. | +| `foreignKeyData` | Object | Foreign key data linked to the column, if applicable. | +| `name` | string | Name of the event (**recordDoubleClick**). | +| `row` | Element | The row element that was double-clicked. | +| `rowData` | IGanttData | Data object representing the selected task. | +| `rowIndex` | number | Index of the row in the data source. | +| `target` | Element | DOM element that initiated the double-click. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -8953,8 +8950,8 @@ The event provides an argument of type [ResizeArgs](https://ej2.syncfusion.com/r | **Property** | **Type** | **Description** | |--------------|-------------|--------------------------------------------------| -| `cancel` | `boolean` | Prevents column resizing when set to **true**. | -| `column` | `Column` | Details of the column being resized initially. | +| `cancel` | boolean | Prevents column resizing when set to **true**. | +| `column` | Column | Details of the column being resized initially. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -9187,8 +9184,8 @@ The event provides an argument of type [ResizeArgs](https://ej2.syncfusion.com/r | **Property** | **Type** | **Description** | |--------------|-------------|--------------------------------------------------| -| `cancel` | `boolean` | Cancels the resize operation when set to **true**. | -| `column` | `Column` | Provides information about the resized column. | +| `cancel` | boolean | Cancels the resize operation when set to **true**. | +| `column` | Column | Provides information about the resized column. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -9413,8 +9410,8 @@ The event provides an argument of type [ResizeArgs](https://ej2.syncfusion.com/r | **Property** | **Type** | **Description** | |--------------|-------------|--------------------------------------------------| -| `cancel` | `boolean` | Stops resizing dynamically during interaction. | -| `column` | `Column` | Current column details during resizing process. | +| `cancel` | boolean | Stops resizing dynamically during interaction. | +| `column` | Column | Current column details during resizing process. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -9639,10 +9636,10 @@ The event provides an argument of type [RowDataBoundEventArgs](https://ej2.syncf | **Property** | **Type** | **Description** | |------------------|------------------|---------------------------------------------------------------| -| `data` | `IGanttData` | Task data bound to the current row. | -| `isSelectable` | `boolean` | Indicates if the row is selectable or not. | -| `row` | `Element` | Row element rendered in the Gantt Chart. | -| `rowHeight` | `number` | Height of the row being rendered. | +| `data` | IGanttData | Task data bound to the current row. | +| `isSelectable` | boolean | Indicates if the row is selectable or not. | +| `row` | Element | Row element rendered in the Gantt Chart. | +| `rowHeight` | number | Height of the row being rendered. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -9869,14 +9866,14 @@ The event provides an argument of type [RowDeselectEventArgs](https://ej2.syncfu | **Property** | **Type** | **Description** | |---------------------------|---------------------------|----------------------------------------------| -| `data` | `IGanttData[]` | Data for the row(s) that were deselected. | -| `foreignKeyData` | `Object` \| `Object[]` | Foreign key data linked to deselected row(s).| -| `isHeaderCheckboxClicked`| `boolean` | **True** if header checkbox triggered deselection. | -| `isInteracted` | `boolean` | **True** if deselection was triggered by interaction. | -| `row` | `Element` | Row element that was deselected. | -| `rowIndex` | `number` | Index of the deselected row. | -| `rowIndexes` | `number[]` | Indexes of all deselected rows. | -| `target` | `Element` | Target element that triggered the deselection.| +| `data` | IGanttData[] | Data for the row(s) that were deselected. | +| `foreignKeyData` | Object \| Object[] | Foreign key data linked to deselected row(s).| +| `isHeaderCheckboxClicked` | boolean | **True** if header checkbox triggered deselection. | +| `isInteracted` | boolean | **True** if deselection was triggered by interaction. | +| `row` | Element | Row element that was deselected. | +| `rowIndex` | number | Index of the deselected row. | +| `rowIndexes` | number[] | Indexes of all deselected rows. | +| `target` | Element | Target element that triggered the deselection.| {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -10098,14 +10095,14 @@ The event provides an argument of type [RowDeselectEventArgs](https://ej2.syncfu | **Property** | **Type** | **Description** | |----------------------------|-------------------------|------------------------------------------| -| `data` | `IGanttData[]` | Data for the row(s) being deselected. | -| `foreignKeyData` | `Object` \| `Object[]` | Foreign key data linked to deselected row(s). | -| `isHeaderCheckboxClicked` | `boolean` | **True** if header checkbox triggered deselection. | -| `isInteracted` | `boolean` | **True** if deselection was triggered by interaction.| -| `row` | `Element` | Row element being deselected. | -| `rowIndex` | `number` | Index of the row being deselected. | -| `rowIndexes` | `number[]` | Indexes of all rows being deselected. | -| `target` | `Element` | Target element that triggered the deselection.| +| `data` | IGanttData[] | Data for the row(s) being deselected. | +| `foreignKeyData` | Object \| Object[] | Foreign key data linked to deselected row(s). | +| `isHeaderCheckboxClicked` | boolean | **True** if header checkbox triggered deselection. | +| `isInteracted` | boolean | **True** if deselection was triggered by interaction.| +| `row` | Element | Row element being deselected. | +| `rowIndex` | number | Index of the row being deselected. | +| `rowIndexes` | number[] | Indexes of all rows being deselected. | +| `target` | Element | Target element that triggered the deselection.| {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -10327,12 +10324,12 @@ The event provides an argument of type [RowDragEventArgs](https://ej2.syncfusion | **Property** | **Type** | **Description** | |------------------|-----------------|------------------------------------------------------| -| `data` | `Object[]` | Data for the selected rows being dragged. | -| `dropIndex` | `number` | Index of the target row where the drop is intended. | -| `fromIndex` | `number` | Original index of the dragged row. | -| `originalEvent` | `object` | Mouse event associated with the drag action. | -| `rows` | `Element[]` | DOM elements of the selected rows. | -| `target` | `Element` | Target element where the drag started. | +| `data` | Object[] | Data for the selected rows being dragged. | +| `dropIndex` | number | Index of the target row where the drop is intended. | +| `fromIndex` | number | Original index of the dragged row. | +| `originalEvent` | object | Mouse event associated with the drag action. | +| `rows` | Element[] | DOM elements of the selected rows. | +| `target` | Element | Target element where the drag started. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -10562,12 +10559,12 @@ The event provides an argument of type [RowDragEventArgs](https://ej2.syncfusion | **Property** | **Type** | **Description** | |------------------|-----------------|--------------------------------------------| -| `data` | `Object[]` | Selected rows data . | -| `dropIndex` | `number` | Target index for dropping the dragged row. | -| `fromIndex` | `number` | Original index of the dragged row. | -| `originalEvent` | `object` | Native mouse event that started the drag. | -| `rows` | `Element[]` | DOM elements of the dragged rows. | -| `target` | `Element` | Element where the drag was initiated. | +| `data` | Object[] | Selected rows data . | +| `dropIndex` | number | Target index for dropping the dragged row. | +| `fromIndex` | number | Original index of the dragged row. | +| `originalEvent` | object | Native mouse event that started the drag. | +| `rows` | Element[] | DOM elements of the dragged rows. | +| `target` | Element | Element where the drag was initiated. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -10798,12 +10795,12 @@ The event provides an argument of type [RowDragEventArgs](https://ej2.syncfusion | **Property** | **Type** | **Description** | |------------------|---------------|--------------------------------------------------| -| `data` | `Object[]` | Selected rows data objects. | -| `dropIndex` | `number` | Target index for potential drop. | -| `fromIndex` | `number` | Original index of the row being dragged. | -| `originalEvent` | `object` | Native mouse event that initiated the drag. | -| `rows` | `Element[]` | DOM elements of the selected rows. | -| `target` | `Element` | Element where the drag was initiated. | +| `data` | Object[] | Selected rows data objects. | +| `dropIndex` | number | Target index for potential drop. | +| `fromIndex` | number | Original index of the row being dragged. | +| `originalEvent` | object | Native mouse event that initiated the drag. | +| `rows` | Element[] | DOM elements of the selected rows. | +| `target` | Element | Element where the drag was initiated. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -11031,16 +11028,16 @@ The event provides an argument of type [RowDragEventArgs](https://ej2.syncfusion | **Property** | **Type** | **Description** | |-------------------|------------------|---------------------------------------------------| -| `data` | `Object[]` | Selected rows data objects. | -| `dropIndex` | `number` | Target index for the dropped row. | -| `dropPosition` | `string` | Position relative to the target row. | -| `dropRecord` | `IGanttData` | Dropped record after reordering. | -| `fromIndex` | `number` | Original index of the dragged row. | -| `modifiedRecords` | `IGanttData[]` | Records updated after the drop. | -| `originalEvent` | `object` | Native mouse event that completed the drag. | -| `requestType` | `string` | Type of request triggered by the drop. | -| `rows` | `Element[]` | DOM elements of the dragged rows. | -| `target` | `Element` | Element where the drag was initiated. | +| `data` | Object[] | Selected rows data objects. | +| `dropIndex` | number | Target index for the dropped row. | +| `dropPosition` | string | Position relative to the target row. | +| `dropRecord` | IGanttData | Dropped record after reordering. | +| `fromIndex` | number | Original index of the dragged row. | +| `modifiedRecords` | IGanttData[] | Records updated after the drop. | +| `originalEvent` | object | Native mouse event that completed the drag. | +| `requestType` | string | Type of request triggered by the drop. | +| `rows` | Element[] | DOM elements of the dragged rows. | +| `target` | Element | Element where the drag was initiated. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -11268,16 +11265,16 @@ The event provides an argument of type [RowSelectEventArgs](https://ej2.syncfusi | **Property** | **Type** | **Description** | |---------------------------|---------------------------|---------------------------------------------| -| `data` | `IGanttData` | Data for the selected row. | -| `foreignKeyData` | `Object` \| `Object[]` | Foreign key data linked to selected row. | -| `isHeaderCheckboxClicked`| `boolean` | **True** if header checkbox triggered selection.| -| `isInteracted` | `boolean` | **True** if selection was triggered by interaction.| -| `previousRow` | `Element` | Previously selected row element. | -| `previousRowIndex` | `number` | Index of the previously selected row. | -| `row` | `Element` \| `Element[]` | Currently selected row element(s). | -| `rowIndex` | `number` | Index of the selected row. | -| `rowIndexes` | `number[]` | Indexes of all selected rows. | -| `target` | `Element` | Target element that triggered the selection. | +| `data` | IGanttData | Data for the selected row. | +| `foreignKeyData` | Object \| Object[] | Foreign key data linked to selected row. | +| `isHeaderCheckboxClicked`| boolean | **True** if header checkbox triggered selection.| +| `isInteracted` | boolean | **True** if selection was triggered by interaction.| +| `previousRow` | Element | Previously selected row element. | +| `previousRowIndex` | number | Index of the previously selected row. | +| `row` | Element \| Element[] | Currently selected row element(s). | +| `rowIndex` | number | Index of the selected row. | +| `rowIndexes` | number[] | Indexes of all selected rows. | +| `target` | Element | Target element that triggered the selection. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -11515,19 +11512,19 @@ The event provides an argument of type [RowSelectingEventArgs](https://ej2.syncf | **Property** | **Type** | **Description** | |---------------------------|---------------------------|----------------------------------------------| -| `cancel` | `boolean` | Prevents row selection when set to **true**. | -| `data` | `IGanttData` | Data for the row being selected. | -| `foreignKeyData` | `Object` \| `Object[]` | Foreign key data linked to selected row. | -| `isCtrlPressed` | `boolean` | **True** if CTRL key was pressed during selection. | -| `isHeaderCheckboxClicked` | `boolean` | **True** if header checkbox triggered selection. | -| `isInteracted` | `boolean` | **True** if selection was triggered by interaction.| -| `isShiftPressed` | `boolean` | **True** if SHIFT key was pressed during selection.| -| `previousRow` | `Element` | Previously selected row element. | -| `previousRowIndex` | `number` | Index of the previously selected row. | -| `row` | `Element` \| `Element[]` | Row element(s) being selected or deselected. | -| `rowIndex` | `number` | Index of the row being selected. | -| `rowIndexes` | `number[]` | Indexes of all rows being selected. | -| `target` | `Element` | Target element that triggered the selection. | +| `cancel` | boolean | Prevents row selection when set to **true**. | +| `data` | IGanttData | Data for the row being selected. | +| `foreignKeyData` | Object \| Object[] | Foreign key data linked to selected row. | +| `isCtrlPressed` | boolean | **True** if CTRL key was pressed during selection. | +| `isHeaderCheckboxClicked` | boolean | **True** if header checkbox triggered selection. | +| `isInteracted` | boolean | **True** if selection was triggered by interaction.| +| `isShiftPressed` | boolean | **True** if SHIFT key was pressed during selection.| +| `previousRow` | Element | Previously selected row element. | +| `previousRowIndex` | number | Index of the previously selected row. | +| `row` | Element \| Element[] | Row element(s) being selected or deselected. | +| `rowIndex` | number | Index of the row being selected. | +| `rowIndexes` | number[] | Indexes of all rows being selected. | +| `target` | Element | Target element that triggered the selection. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -11763,8 +11760,8 @@ The event provides an argument of type [ResizeArgs](https://ej2.syncfusion.com/r | **Property** | **Type** | **Description** | |------------------|------------------------|------------------------------------------| -| `cancel` | `boolean` | Defines whether the event is cancelable. | -| `column` | `Column` | Defines the resizing column details. | +| `cancel` | boolean | Defines whether the event is cancelable. | +| `column` | Column | Defines the resizing column details. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -11999,13 +11996,13 @@ The event provides an argument of type [ISplitterResizedEventArgs](https://ej2.s | **Property** | **Type** | **Description** | |----------------|------------------------|----------------------------------------------| -| `cancel` | `boolean` | Indicates if the event is cancelable. | -| `element` | `HTMLElement` | Splitter container element. | -| `event` | `Event` | Event that triggered the resize. | -| `index` | `number[]` | Indexes of resized panes. | -| `pane` | `HTMLElement[]` | Pane elements involved in resizing. | -| `paneSize` | `number[]` | Final sizes of the resized panes. | -| `separator` | `HTMLElement` | Splitter bar element that was resized. | +| `cancel` | boolean | Indicates if the event is cancelable. | +| `element` | HTMLElement | Splitter container element. | +| `event` | Event | Event that triggered the resize. | +| `index` | number[] | Indexes of resized panes. | +| `pane` | HTMLElement[] | Pane elements involved in resizing. | +| `paneSize` | number[] | Final sizes of the resized panes. | +| `separator` | HTMLElement | Splitter bar element that was resized. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -12236,13 +12233,13 @@ The event provides an argument of type `ResizingEventArgs` with the following pr | **Property** | **Type** | **Description** | |----------------|------------------|----------------------------------------------| -| `name` | `string` | Event name: **splitterResizing**. | -| `element` | `HTMLElement` | Splitter container element. | -| `event` | `MouseEvent` | Mouse event triggering the resize. | -| `index` | `number[]` | Indexes of panes being resized. | -| `pane` | `HTMLElement[]` | Pane elements involved in resizing. | -| `paneSize` | `number[]` | Current sizes of the panes. | -| `separator` | `HTMLElement` | Splitter bar element being dragged. | +| `name` | string | Event name: **splitterResizing**. | +| `element` | HTMLElement | Splitter container element. | +| `event` | MouseEvent | Mouse event triggering the resize. | +| `index` | number[] | Indexes of panes being resized. | +| `pane` | HTMLElement[] | Pane elements involved in resizing. | +| `paneSize` | number[] | Current sizes of the panes. | +| `separator` | HTMLElement | Splitter bar element being dragged. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -12467,16 +12464,16 @@ The event provides an argument of type [TaskbarEditedEventArgs](https://ej2.sync | **Property** | **Type** | **Description** | |-----------------------|------------------|----------------------------------------------| -| `action` | `string` | Type of taskbar edit action. | -| `cancel` | `boolean` | Indicates if the event is cancelable. | -| `data` | `IGanttData` | Data of the edited task. | -| `editingFields` | `ITaskData` | Fields being edited in the task. | -| `previousData` | `ITaskData` | Task data before the edit. | -| `recordIndex` | `number` | Index of the edited task. | -| `roundOffDuration` | `boolean` | Indicates if duration is rounded off. | -| `segmentIndex` | `number` | Index of the edited segment. | -| `target` | `Element` | Target element of the edit. | -| `taskBarEditAction` | `string` | Type of taskbar edit performed. | +| `action` | string | Type of taskbar edit action. | +| `cancel` | boolean | Indicates if the event is cancelable. | +| `data` | IGanttData | Data of the edited task. | +| `editingFields` | ITaskData | Fields being edited in the task. | +| `previousData` | ITaskData | Task data before the edit. | +| `recordIndex` | number | Index of the edited task. | +| `roundOffDuration` | boolean | Indicates if duration is rounded off. | +| `segmentIndex` | number | Index of the edited segment. | +| `target` | Element | Target element of the edit. | +| `taskBarEditAction` | string | Type of taskbar edit performed. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -12720,16 +12717,16 @@ The event provides an argument of type [ITaskbarEditedEventArgs](https://ej2.syn | **Property** | **Type** | **Description** | |-----------------------|------------------|----------------------------------------------| -| `action` | `string` | Type of taskbar edit in progress. | -| `cancel` | `boolean` | Set **true** to cancel the edit. | -| `data` | `IGanttData` | Data of the task being edited. | -| `editingFields` | `ITaskData` | Fields currently being modified. | -| `previousData` | `ITaskData` | Task data before the edit. | -| `recordIndex` | `number` | Index of the task being edited. | -| `roundOffDuration` | `boolean` | Indicates if duration should be rounded. | -| `segmentIndex` | `number` | Index of the segment being edited. | -| `target` | `Element` | Target element involved in the edit. | -| `taskBarEditAction` | `string` | Specific type of taskbar edit action. | +| `action` | string | Type of taskbar edit in progress. | +| `cancel` | boolean | Set **true** to cancel the edit. | +| `data` | IGanttData | Data of the task being edited. | +| `editingFields` | ITaskData | Fields currently being modified. | +| `previousData` | ITaskData | Task data before the edit. | +| `recordIndex` | number | Index of the task being edited. | +| `roundOffDuration` | boolean | Indicates if duration should be rounded. | +| `segmentIndex` | number | Index of the segment being edited. | +| `target` | Element | Target element involved in the edit. | +| `taskBarEditAction` | string | Specific type of taskbar edit action. | {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -12964,10 +12961,10 @@ The event provides an argument of type [ClickEventArgs](https://ej2.syncfusion.c | **Property** | **Type** | **Description** | |--------------------|------------------|-------------------------------| -| `name` | `string` | Specifies name of the event | -| `item` | `object` | Clicked toolbar item info | -| `originalEvent` | `PointerEvent` | Native DOM event | -| `cancel` | `boolean` | Cancel default action | +| `name` | string | Specifies name of the event | +| `item` | object | Clicked toolbar item info | +| `originalEvent` | PointerEvent | Native DOM event | +| `cancel` | boolean | Cancel default action | {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/treegrid/cell/auto-wrap.md b/ej2-react/treegrid/cell/auto-wrap.md deleted file mode 100644 index 95c3b1e43..000000000 --- a/ej2-react/treegrid/cell/auto-wrap.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -layout: post -title: Auto wrap in React Treegrid component | Syncfusion -description: Learn here all about Auto wrap in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Auto wrap -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Auto wrap in React Treegrid component - -The auto wrap allows the cell content of the treegrid to wrap to the next line when it exceeds the boundary of the cell width. The Cell Content wrapping works based on the position of white space between words. To enable auto wrap, set the [`allowTextWrap`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowtextwrap) property to **true**. You can configure the auto wrap mode by setting the [`textWrapSettings.wrapMode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#textwrapsettings) property. - -There are three types of **wrapMode**. They are: - -* **Both**: This value is set by default. Auto wrap will be enabled for both the content and the header. -* **Header**: Auto wrap will be enabled only for the header. -* **Content**: Auto wrap will be enabled only for the content. - -Note: When a column width is not specified, then auto wrap of columns will be adjusted with respect to the treegrid's width. - -In the following example, the **textWrapSettings.wrapMode** is set to *Content*. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/cell-cs1/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/cell-cs1/app/App.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/cell-cs1" %} \ No newline at end of file diff --git a/ej2-react/treegrid/cell/cell.md b/ej2-react/treegrid/cell/cell.md index 31e60b8a3..0f38ca586 100644 --- a/ej2-react/treegrid/cell/cell.md +++ b/ej2-react/treegrid/cell/cell.md @@ -8,7 +8,51 @@ documentation: ug domainurl: ##DomainURL## --- -# Cell in React Treegrid component +# Cell in React TreeGrid + +In the Syncfusion React TreeGrid, a cell represents the intersection of a row and column, displaying specific data values. Each cell can contain text, numbers, HTML content, or custom templates. The TreeGrid provides comprehensive options to customize cell appearance, behavior, and content rendering to create interactive and visually appealing data presentations. + +## Displaying the HTML content + +Displaying HTML content in a TreeGrid can be useful in scenarios where you want to display formatted content, such as images, links, or tables, in a tabular format. TreeGrid allows you to display HTML tags in the TreeGrid header and content. By default, the HTML content is encoded to prevent potential security vulnerabilities. However, you can enable the [disableHtmlEncode](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#disablehtmlencode) property by setting the value as false to display HTML tags without encoding. This feature is useful when you want to display HTML content in a TreeGrid cell. + +The following example demonstrates how to display HTML content in TreeGrid headers and cells by configuring the `disableHtmlEncode` property: + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/cell-cs5/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/cell-cs5/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/cell-cs5" %} + +## Autowrap the TreeGrid content + +The auto wrap allows the cell content of the TreeGrid to wrap to the next line when it exceeds the boundary of the cell width. The cell content wrapping works based on the position of white space between words. To enable auto wrap, set the [allowTextWrap](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowtextwrap) property to **true**. You can configure the auto wrap mode by setting the [textWrapSettings.wrapMode](https://ej2.syncfusion.com/react/documentation/api/treegrid/#textwrapsettings) property. + +There are three types of **wrapMode**. They are: + +* **Both**: This value is set by default. Auto wrap will be enabled for both the content and the header. +* **Header**: Auto wrap will be enabled only for the header. +* **Content**: Auto wrap will be enabled only for the content. + +> When a column width is not specified, then auto wrap of columns will be adjusted with respect to the TreeGrid's width. + +The following example demonstrates how to set the `allowTextWrap` property to **true** and specify the wrap mode as **Content** by setting the `textWrapSettings.wrapMode` property. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/cell-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/cell-cs1/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/cell-cs1" %} ## Customize cell styles @@ -56,6 +100,31 @@ In the below example, we have customized the cells of *TaskID* and *StartDate* c {% previewsample "page.domainurl/code-snippet/treegrid/cell-attribute-cs1" %} +## Clip mode + +The clip mode feature is useful when you have a long text or content in a TreeGrid cell, which overflows the cell’s width or height. It provides options to display the overflow content by either truncating it, displaying an ellipsis or displaying an ellipsis with a tooltip. You can enable this feature by setting [clipMode](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#clipmode) property to one of the below available options. + +There are three types of `clipMode` available: + +* **Clip**: Truncates the cell content when it overflows its area. +* **Ellipsis**: Displays ellipsis when the cell content overflows its area. +* **EllipsisWithTooltip**: Displays ellipsis when the cell content overflows its area, also it will display the tooltip while hover on ellipsis is applied. + +The following example demonstrates, how to set the `clipMode` property: + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/cell-cs4/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/cell-cs4/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/cell-cs4" %} + +> By default, `columns.clipMode` value is **Ellipsis**. + ## TreeGrid lines The [`gridLines`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#gridlines) have option to display cell border and it can be defined by the [`gridLines`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#gridlines) property. diff --git a/ej2-react/treegrid/cell/clip-mode.md b/ej2-react/treegrid/cell/clip-mode.md deleted file mode 100644 index 8f1a8f74b..000000000 --- a/ej2-react/treegrid/cell/clip-mode.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -layout: post -title: Clip mode in React Treegrid component | Syncfusion -description: Learn here all about Clip mode in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Clip mode -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Clip mode in React Treegrid component - -The clip mode provides options to display its overflow cell content and it can be defined by the [`columns.clipMode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#clipmode) property. - -There are three types of [`clipMode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#clipmode). They are: - -* **Clip**: Truncates the cell content when it overflows its area. -* **Ellipsis**: Displays ellipsis when the cell content overflows its area. -* **EllipsisWithTooltip**: Displays ellipsis when the cell content overflows its area, also it will display the tooltip while hover on ellipsis is applied. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/cell-cs4/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/cell-cs4/app/App.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/cell-cs4" %} - ->By default, [`columns.clipMode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#clipmode) value is `Ellipsis`. \ No newline at end of file diff --git a/ej2-react/treegrid/cell/content.md b/ej2-react/treegrid/cell/content.md deleted file mode 100644 index 91fcdc064..000000000 --- a/ej2-react/treegrid/cell/content.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -layout: post -title: Content in React Treegrid component | Syncfusion -description: Learn here all about Content in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Content -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Content in React Treegrid component - -The HTML tags can be displayed in the TreeGrid header and content by enabling the [`disableHtmlEncode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#disablehtmlencode) property. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/cell-cs5/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/cell-cs5/app/App.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/cell-cs5" %} \ No newline at end of file diff --git a/ej2-react/treegrid/columns/auto-fit-columns.md b/ej2-react/treegrid/columns/auto-fit-columns.md deleted file mode 100644 index b1100bbd4..000000000 --- a/ej2-react/treegrid/columns/auto-fit-columns.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -layout: post -title: Auto fit columns in React Treegrid component | Syncfusion -description: Learn here all about Auto fit columns in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Auto fit columns -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Auto fit columns in React Treegrid component - -The [`autoFitColumns`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#autofitcolumns) method resizes the column to fit the widest cell's content without wrapping. You can autofit a specific column at initial rendering by invoking the [`autoFitColumns`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#autofitcolumns) method in [`dataBound`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#databound) event. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/column-cs1/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/column-cs1/app/App.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/column-cs1" %} - -> You can autofit all columns, by invoking [`autoFitColumns`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#autofitcolumns) method without column name. \ No newline at end of file diff --git a/ej2-react/treegrid/columns/column-menu.md b/ej2-react/treegrid/columns/column-menu.md index 4045e7600..370f51cfa 100644 --- a/ej2-react/treegrid/columns/column-menu.md +++ b/ej2-react/treegrid/columns/column-menu.md @@ -35,4 +35,33 @@ The default items are displayed in following table. {% previewsample "page.domainurl/code-snippet/treegrid/column-cs2" %} -> You can disable column menu for a particular column by defining the [`columns.showColumnMenu`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#showcolumnmenu) as **false**. \ No newline at end of file +> You can disable column menu for a particular column by defining the [`columns.showColumnMenu`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#showcolumnmenu) as **false**. + +## Customize the icon for column menu + +To customize the column menu icon, you need to override the default TreeGrid class **.e-icons.e-columnmenu** with a custom CSS property called **content**. By specifying a Unicode character or an icon font’s CSS class, you can change the icon displayed in the column menu. + +```css + .e-treegrid .e-columnheader .e-icons.e-columnmenu::before { + content: "\e903"; + } +``` + +Here is an example that demonstrates how to customize the column menu icon in the Syncfusion TreeGrid: + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/custom-column-menu-icon-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/custom-column-menu-icon-cs1/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/treegrid/custom-column-menu-icon-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/treegrid/custom-column-menu-icon-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/custom-column-menu-icon-cs1" %} \ No newline at end of file diff --git a/ej2-react/treegrid/columns/columns.md b/ej2-react/treegrid/columns/columns.md index 474d62e8f..4b511dd93 100644 --- a/ej2-react/treegrid/columns/columns.md +++ b/ej2-react/treegrid/columns/columns.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Columns in React Treegrid component -The column definitions are used as the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/treegrid#dataSource) schema in the TreeGrid. This plays a vital role in rendering column values in the required format. The treegrid operations such as sorting, filtering and searching etc. are performed based on column definitions. The [`field`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column#field) property of the [`columns`](https://ej2.syncfusion.com/react/documentation/api/treegrid#column) is necessary to map the data source values in TreeGrid columns. +The column definitions are used as the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#dataSource) schema in the TreeGrid. This plays a vital role in rendering column values in the required format. The treegrid operations such as sorting, filtering and searching etc. are performed based on column definitions. The [`field`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#field) property of the [`columns`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#column) is necessary to map the data source values in TreeGrid columns. > 1. If the column [`field`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#field) is not specified in the dataSource, the column values will be empty. > 2. If the [`field`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#field) name contains “dot” operator, it is considered as complex binding. @@ -125,6 +125,25 @@ It is also possible to select the rows hierarchically using checkboxes in TreeGr > For hierarchy selection between the records, we need to enable the [`autoCheckHierarchy`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#autocheckhierarchy) property. +## Autofit columns + +The [autoFitColumns](https://ej2.syncfusion.com/react/documentation/api/treegrid/#autofitcolumns) method resizes the column to fit the widest cell's content without wrapping. You can autofit a specific column at initial rendering by invoking the `autoFitColumns` method in [dataBound](https://ej2.syncfusion.com/react/documentation/api/treegrid/#databound) event. + +To use `autoFitColumns` method, you need to inject **Resize** module in the TreeGrid. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/column-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/column-cs1/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/column-cs1" %} + +> You can autofit all columns, by invoking `autoFitColumns` method without column name. + ## Controlling TreeGrid actions You can enable or disable treegrid action for a particular column by setting the [`allowFiltering`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#allowfiltering), and [`allowSorting`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#allowsorting) properties. @@ -215,4 +234,19 @@ To render boolean values as checkbox in columns, you need to set [`displayAsChec {% previewsample "page.domainurl/code-snippet/treegrid/column-cs18" %} +## Responsive columns + +The Syncfusion React TreeGrid provides a built-in feature to toggle the visibility of columns based on media queries using the [hideAtMedia](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#hideatmedia) property of the column object. The `hideAtMedia` accepts valid [Media Queries](http://cssmediaqueries.com/what-are-css-media-queries.html). + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/column-cs22/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/column-cs22/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/column-cs22" %} + > You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/bootstrap5/treegrid/treegrid-overview) to knows how to present and manipulate data. diff --git a/ej2-react/treegrid/columns/foreign-key-column.md b/ej2-react/treegrid/columns/foreign-key-column.md new file mode 100644 index 000000000..44729ac14 --- /dev/null +++ b/ej2-react/treegrid/columns/foreign-key-column.md @@ -0,0 +1,32 @@ +--- +layout: post +title: Foreign key column in React TreeGrid | Syncfusion +description: Learn here all about Foreign key column in Syncfusion React TreeGrid of Syncfusion Essential JS 2 and more. +control: Foreign key column +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# Display foreignKey values in TreeGrid + +The TreeGrid uses a hierarchical data binding approach and does not provide built-in support for foreign key datasources. + +To display the foreignKey value at initial rendering, we can use the [queryCellInfo](https://ej2.syncfusion.com/react/documentation/api/treegrid/#querycellinfo) event of the TreeGrid and also by using the [editType](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#edittype) and [columns.edit](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#edit) properties of TreeGrid Column, we can render Dropdownlist with external or foreign dataSource. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/foreignkey-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/foreignkey-cs1/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/treegrid/foreignkey-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/treegrid/foreignkey-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/foreignkey-cs1" %} diff --git a/ej2-react/treegrid/columns/headers.md b/ej2-react/treegrid/columns/headers.md index a12976787..2a0d0ae3f 100644 --- a/ej2-react/treegrid/columns/headers.md +++ b/ej2-react/treegrid/columns/headers.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## ## Header text -By default, column header title is displayed from column [`field`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column#field) value. To override the default header title, you have to define the [`headerText`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column#headertext)value. +By default, column header title is displayed from column [`field`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#field) value. To override the default header title, you have to define the [`headerText`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#headertext)value. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -40,4 +40,116 @@ You can customize the header element by using the [`headerTemplate`](https://ej2 {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/treegrid/column-cs21" %} \ No newline at end of file + {% previewsample "page.domainurl/code-snippet/treegrid/column-cs21" %} + +## Change header text dynamically + +The Syncfusion TreeGrid allows to modify the header text of a corresponding column in real-time based on events or other interactions. This feature is useful in various scenarios, such as displaying custom header text for a specific column or updating the header text dynamically based on user input. Dynamic changes to the header text provide a more flexible and customizable experience. + +You can change the column [headerText](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#headertext) dynamically through an external button. + +Follow the given steps to change the header text dynamically: + +**Step 1**: + +Get the column object corresponding to the field name by using the [getColumnByField](https://ej2.syncfusion.com/react/documentation/api/treegrid/#getcolumnbyfield) method. +Then change the header Text value. + +```ts + /** Get the JSON object of the column corresponding to the field name **/ + const column = treegrid.getColumnByField("Duration"); + /** Assign a new header text to the column **/ + column.headerText = "Changed Text"; +``` + +**Step 2**: + +To reflect the changes in the TreeGrid header, invoke the [refreshColumns](https://ej2.syncfusion.com/react/documentation/api/treegrid/#refreshcolumns) method. + +```ts + treegrid.refreshColumns(); +``` +Here is an example of how to change the header text of a column using the `getColumnByField` method: + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/change-headertext-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/change-headertext-cs1/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/treegrid/change-headertext-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/treegrid/change-headertext-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/change-headertext-cs1" %} + +## Change orientation of header text + +By default, the text in the column headers of the Syncfusion React TreeGrid is oriented horizontally. However, in some cases, you may want to change the orientation of the header text to vertical, diagonal, or at a custom angle. This can be achieved by adding a custom CSS class to the column header cell using the [customAttributes](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#customattributes) property of the TreeGrid columns. + +Follow the below steps to change the orientation of the header text in TreeGrid: + +**Step 1: Create a CSS class with orientation style for TreeGrid header cell** + +To rotate the header text, you can create a CSS class with the transform property that rotates the header text 90 degrees. This class will be added to the header cell using the `customAttributes` property. + +```css + .orientationcss .e-headercelldiv { + transform: rotate(90deg); + } +``` +**Step 2: Add the custom CSS class to the TreeGrid column** + +Once you have created the CSS class, you can add it to the particular column by using the `customAttributes` property. This property allows you to add any custom attribute to the TreeGrid column. + +For example, to add the orientation css class to the **EndDate** column, you can use the following code: + +```ts + +``` + +**Step 3: Resize the header cell height** + +After adding the custom CSS class to a column, you need to resize the header cell height in [create](https://ej2.syncfusion.com/react/documentation/api/treegrid/#create) event so that the rotated header text is fully visible. You can do this by using the following code: + +```ts + const setHeaderHeight = () => { + /** Obtain the width of the headerText content **/ + const textWidth: number = (document.querySelector(".orientationcss > div") as HTMLElement).scrollWidth; + const headerCell: NodeList = document.querySelectorAll(".e-headercell"); + for(let i: number = 0; i < headerCell.length; i++) { + /** Assign the obtained textWidth as the height of the headerCell **/ + ((headerCell as any).item(i)).style.height = textWidth + 'px'; + } + } +``` + +Here’s an example of how to change orientation of header text: + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/header-orientation-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/header-orientation-cs1/app/App.tsx %} +{% endhighlight %} +{% highlight css tabtitle="custom.css" %} +{% include code-snippet/treegrid/header-orientation-cs1/app/custom.css %} +{% endhighlight %} +{% highlight js tabtitle="custom.jsx" %} +{% include code-snippet/treegrid/header-orientation-cs1/app/custom.jsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/treegrid/header-orientation-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/treegrid/header-orientation-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/header-orientation-cs1" %} \ No newline at end of file diff --git a/ej2-react/treegrid/columns/responsive-columns.md b/ej2-react/treegrid/columns/responsive-columns.md deleted file mode 100644 index aeb0217e3..000000000 --- a/ej2-react/treegrid/columns/responsive-columns.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -layout: post -title: Responsive columns in React Treegrid component | Syncfusion -description: Learn here all about Responsive columns in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Responsive columns -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Responsive columns in React Treegrid component - -You can toggle column visibility based on media queries which are defined at the [`hideAtMedia`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#hideatmedia). The [`hideAtMedia`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#hideatmedia) accepts valid [Media Queries]( http://cssmediaqueries.com/what-are-css-media-queries.html ). - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/column-cs22/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/column-cs22/app/App.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/column-cs22" %} \ No newline at end of file diff --git a/ej2-react/treegrid/data-binding/data-binding.md b/ej2-react/treegrid/data-binding/data-binding.md index ad45d6a9d..0a66cdefd 100644 --- a/ej2-react/treegrid/data-binding/data-binding.md +++ b/ej2-react/treegrid/data-binding/data-binding.md @@ -680,5 +680,55 @@ function App() { export default App; ``` +## Refresh the datasource + +Refreshing the datasource in a Syncfusion TreeGrid involves updating the data that the TreeGrid displays dynamically. This operation is essential when you need to reflect changes in the underlying data without reloading the entire page or component. + +You can add/delete the datasource records through an external button. To reflect these changes in the TreeGrid, you must assign the modified data to the dataSource property. + +**Steps to refresh the TreeGrid after datasource change:** + +**Step 1: Modify the datasource** + +You can add or delete records from the datasource using the following code: + +```ts + + const dataSource: object = extendArray(treegridObj.dataSource as object[]); + + // Added a new record. + (dataSource as object[]).unshift({ TaskID: 99, TaskName: "New Data", StartDate: new Date('02/03/2017'), Duration: 10 }); + + // Delete a record. + (dataSource as object[]).splice(selectedRow, 1); + +``` + +**Step 2: Refresh the TreeGrid** + +Refresh the TreeGrid after the datasource change by assign the modified data to dataSource property. + +```ts + treegridObj.dataSource = dataSource; // Refresh the TreeGrid. +``` + +The following example demonstrates how to add and delete records from datasource using an external button: + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/refresh-cs8/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/refresh-cs8/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/treegrid/refresh-cs8/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/treegrid/refresh-cs8/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/refresh-cs8" %} > You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. diff --git a/ej2-react/treegrid/data-binding/local-data.md b/ej2-react/treegrid/data-binding/local-data.md index 9deb75859..bdfbfc24d 100644 --- a/ej2-react/treegrid/data-binding/local-data.md +++ b/ej2-react/treegrid/data-binding/local-data.md @@ -82,4 +82,42 @@ parentUniqueID | Specifies the parent Unique ID of a record checkboxState | Specifies the checkbox state of a record isSummaryRow | Specifies the summary of a record taskData | Specifies the main data -primaryParent | Specifies the Primary data \ No newline at end of file +primaryParent | Specifies the Primary data + +## Immutable mode + +Immutable mode in the Syncfusion TreeGrid is designed to optimize re-rendering performance by utilizing the object reference and [deep compare](https://dmitripavlutin.com/how-to-compare-objects-in-javascript/#4-deep-equality) concept. When performing the TreeGrid actions, it will only re-render the modified or newly added rows and prevent the re-rendering of the unchanged rows. + +To enable this feature, you need to set the [enableImmutableMode](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enableImmutableMode) property as **true**. + +The following example demonstrates how to enable immutable mode in an React component: + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/immutable-mode-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/immutable-mode-cs1/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/treegrid/immutable-mode-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/treegrid/immutable-mode-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/immutable-mode-cs1" %} + +>* This feature uses the primary key value for data comparison. So, you need to provide the [isPrimaryKey](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#isprimarykey) column. + +### Limitations + +The following features are not supported in the immutable mode: + +* Frozen rows and columns +* Row Template +* Detail Template +* Column reorder +* Virtualization +* Infinite scroll \ No newline at end of file diff --git a/ej2-react/treegrid/editing/dialog-editing.md b/ej2-react/treegrid/editing/dialog-editing.md index 8bae6abf8..a4922e378 100644 --- a/ej2-react/treegrid/editing/dialog-editing.md +++ b/ej2-react/treegrid/editing/dialog-editing.md @@ -21,4 +21,77 @@ In Dialog edit mode, when you start editing the currently selected row, data wil {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/treegrid/editing-cs5" %} \ No newline at end of file + {% previewsample "page.domainurl/code-snippet/treegrid/editing-cs5" %} + +## Customize edit dialog + +The edit dialog in the TreeGrid allows you to customize its appearance and behavior based on the type of action being performed, such as editing or adding a record. + +To customize the edit dialog, you need to handle the [actionComplete](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actioncomplete) event of the TreeGrid and perform the necessary modifications based on the **requestType** parameter. The **requestType** parameter identifies the type of action being performed, such as **beginEdit** for editing a record or **add** for adding a new record. + +The following example that demonstrates how to customize the edit dialog using the `actionComplete` event: + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/customizedialog-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/customizedialog-cs1/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/treegrid/customizedialog-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/treegrid/customizedialog-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/customizedialog-cs1" %} + +## Use wizard like dialog editing + +Wizard-like dialog editing is a powerful feature in the TreeGrid that enables the creation of intuitive step-by-step forms. This feature provides a structured approach to form completion or data entry by breaking down the process into manageable steps.This feature is particularly useful when you have complex forms that need to be broken down into smaller sections to guide you through the data entry process. + +To achieve wizard-like dialog editing in the TreeGrid, you can use the dialog template feature. This feature allows you to define your own custom editing template using the [editSettings.mode](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettings/#mode) property set to **Dialog** and the [editSetting.template](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettings/#template) property to specify the template variable that defines the editors for each step of the wizard. + +The following example demonstrate the wizard like editing in the TreeGrid with the unobtrusive validation. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/wizardediting-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/wizardediting-cs1/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/treegrid/wizardediting-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/treegrid/wizardediting-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/wizardediting-cs1" %} + +## Using tab inside the dialog editing + +You can use [tab](../../tab/getting-started) component inside dialog edit UI using dialog template feature. The dialog template feature can be enabled by defining [editSettings.mode](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettings/#mode) as **Dialog** and [editSetting.template](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettings/#template) as a react component. + +The following example demonstrate the usage of tab control inside the dialog template. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/tabediting-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/tabediting-cs1/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/treegrid/tabediting-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/treegrid/tabediting-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/tabediting-cs1" %} \ No newline at end of file diff --git a/ej2-react/treegrid/editing/edit.md b/ej2-react/treegrid/editing/edit.md index d5ed0a9e7..e28667791 100644 --- a/ej2-react/treegrid/editing/edit.md +++ b/ej2-react/treegrid/editing/edit.md @@ -45,6 +45,29 @@ The treegrid toolbar has the built-in items to execute Editing actions. You can {% previewsample "page.domainurl/code-snippet/treegrid/editing-cs9" %} +## Disable editing for particular row cell + +You can disable the editing for a particular row by using the [actionBegin](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actionbegin) event of TreeGrid based on **requestType** as **beginEdit**. + +In the below demo, the rows which are having the value for **Priority** column as **Breaker** is prevented from editing. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/customizedialog-cs2/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/customizedialog-cs2/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/treegrid/customizedialog-cs2/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/treegrid/customizedialog-cs2/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/customizedialog-cs2" %} + ## Adding row position The TreeGrid control provides the support to add the new row in the top, bottom, above selected row, below selected row and child position of tree grid content using [`editSettings.newRowPosition`](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettingsModel/#newrowposition) property. By default, a new row will be added at the top of the treegrid. diff --git a/ej2-react/treegrid/excel-export/excel-cell-style-customization.md b/ej2-react/treegrid/excel-export/excel-cell-style-customization.md deleted file mode 100644 index 5d76eccda..000000000 --- a/ej2-react/treegrid/excel-export/excel-cell-style-customization.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -layout: post -title: Excel cell style customization in React Treegrid component | Syncfusion -description: Learn here all about Excel cell style customization in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Excel cell style customization -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Excel cell style customization in React Treegrid component - -## Conditional cell formatting - -TreeGrid cells in the exported Excel can be customized or formatted using [`excelQueryCellInfo`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#excelQueryCellInfo) event. In this event, we can format the treegrid cells of exported PDF document based on the column cell value. - -In the below sample, we have set the background color for *Duration* column in the exported excel by **args.cell** and **backgroundColor** property. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/excel-export-cs2/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/excel-export-cs2/app/App.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/excel-export-cs2" %} - -## Theme - -The excel export provides an option to include theme for exported excel document. - -To apply theme in exported Excel, define the `theme` in `ExcelExportProperties`. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/excel-export-cs3/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/excel-export-cs3/app/App.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/excel-export-cs3" %} - ->By default, material theme is applied to exported excel document. \ No newline at end of file diff --git a/ej2-react/treegrid/excel-export/excel-export-options.md b/ej2-react/treegrid/excel-export/excel-export-options.md index ba7ec34e1..b50e84281 100644 --- a/ej2-react/treegrid/excel-export/excel-export-options.md +++ b/ej2-react/treegrid/excel-export/excel-export-options.md @@ -14,6 +14,41 @@ domainurl: ##DomainURL## The excel export provides an option to customize mapping of the treegrid to excel document. +### Export selected records + +Exporting only the selected records from the TreeGrid allows generating Excel or CSV document that include only the desired data from the TreeGrid. This feature provides the flexibility to export specific records that are relevant to the needs, enabling more focused and targeted Excel or CSV exports. + +To export only the selected records by utilizing the [exportProperties.dataSource](https://ej2.syncfusion.com/react/documentation/api/grid/excelExportProperties/) property in the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/grid/#toolbarclick) event. + +To export the selected records from the TreeGrid to a Excel or CSV file, you can follow these steps: + +1. Handle the `toolbarClick` event of the TreeGrid. + +2. Retrieve the selected records using the [getSelectedRecords](https://ej2.syncfusion.com/react/documentation/api/treegrid/#getselectedrecords) method. + +3. Assign the selected data to the `exportProperties.dataSource` property. + +4. Trigger the export operation using the [excelExport](https://ej2.syncfusion.com/react/documentation/api/treegrid/#excelExport) or [csvExport](https://ej2.syncfusion.com/react/documentation/api/treegrid/#csvexport) method. + +The following example demonstrates how to export the selected records to a Excel document when a toolbar item is clicked. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/refresh-cs12/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/refresh-cs12/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/treegrid/refresh-cs12/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/treegrid/refresh-cs12/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/refresh-cs12" %} + ### Export hidden columns The excel export provides an option to export hidden columns of treegrid by defining `includeHiddenColumn` as **true**. @@ -63,4 +98,42 @@ You can assign the file name for the exported document by defining `fileName` pr {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/treegrid/excel-export-cs6" %} \ No newline at end of file + {% previewsample "page.domainurl/code-snippet/treegrid/excel-export-cs6" %} + +## Conditional cell formatting + +When exporting data from the TreeGrid, you have an option to conditionally format the cells in the exported Excel document. This allows you to customize the appearance of specific cells based on their values or other criteria. + +To achieve this feature, you need to use the [excelQueryCellInfo](https://ej2.syncfusion.com/react/documentation/api/treegrid/#excelQueryCellInfo) event of the TreeGrid. This event is triggered for each cell during the export process to Excel. Within this event, you can access the cell object using the **args.cell** property and modify its properties, such as the background color, based on your desired conditions. + +The following example demonstrate how to customize the background color of the Freight column in the exported Excel document using the **args.cell** and **backgroundColor** properties of the `excelQueryCellInfo` event. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/excel-export-cs2/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/excel-export-cs2/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/excel-export-cs2" %} + +## Theme + +The excel export provides an option to include theme for exported excel document. + +To apply theme in exported Excel, define the `theme` in `ExcelExportProperties`. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/excel-export-cs3/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/excel-export-cs3/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/excel-export-cs3" %} + +>By default, material theme is applied to exported excel document. \ No newline at end of file diff --git a/ej2-react/treegrid/excel-export/excel-export.md b/ej2-react/treegrid/excel-export/excel-export.md index 0b411d66c..c85645e98 100644 --- a/ej2-react/treegrid/excel-export/excel-export.md +++ b/ej2-react/treegrid/excel-export/excel-export.md @@ -73,4 +73,30 @@ In the provided example, the `customAggregateFn` function computes the item coun {% endtabs %} {% previewsample "page.domainurl/code-snippet/treegrid/excel-export-cs10" %} + +## Passing additional parameters to the server when exporting + +Passing additional parameters to the server when exporting data in the Syncfusion React TreeGrid involves providing flexibility to include extra information or customize the export process based on specific requirements. + +You can achieve this by utilizing the [query](https://ej2.syncfusion.com/react/documentation/api/treegrid/#query) property and the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) event. Within the query property, you can invoke the [addParams](https://ej2.syncfusion.com/documentation/api/data/query/#addparams) method to add parameters to the request. + +The following example demonstrates how to pass additional parameters to the server when Excel exporting within the `toolbarClick` event. Within the event, the additional parameters, specifically **recordcount** as **12**, are passed using the `addParams` method and displayed as a message. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/refresh-cs7/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/refresh-cs7/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/treegrid/refresh-cs7/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/treegrid/refresh-cs7/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/refresh-cs7" %} + > You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/change-header-text-dynamically.md b/ej2-react/treegrid/how-to/change-header-text-dynamically.md deleted file mode 100644 index 8c59c21e6..000000000 --- a/ej2-react/treegrid/how-to/change-header-text-dynamically.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -layout: post -title: Change header text dynamically in React Treegrid component | Syncfusion -description: Learn here all about Change header text dynamically in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Change header text dynamically -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Change header text dynamically in React Treegrid component - -You can change the column [`headerText`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#headertext) dynamically through an external button. - -Follow the given steps to change the header text dynamically: - -**Step 1**: - -Get the column object corresponding to the field name by using the [`getColumnByField`](https://ej2.syncfusion.com/react/documentation/api/treegrid#getcolumnbyfield) method. -Then change the header Text value. - -```ts - /** get the JSON object of the column corresponding to the field name */ - const column = treegrid.getColumnByField("Duration"); - /** assign a new header text to the column */ - column.headerText = "Changed Text"; -``` - -**Step 2**: - -To reflect the changes in the grid header, invoke the [`refreshColumns`](https://ej2.syncfusion.com/react/documentation/api/treegrid#refreshcolumns) method. - -```ts - - treegrid.refreshColumns(); - -``` - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/change-headertext-cs1/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/change-headertext-cs1/app/App.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/treegrid/change-headertext-cs1/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/treegrid/change-headertext-cs1/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/change-headertext-cs1" %} - -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/change-orientation-of-header-text.md b/ej2-react/treegrid/how-to/change-orientation-of-header-text.md deleted file mode 100644 index bf199edbc..000000000 --- a/ej2-react/treegrid/how-to/change-orientation-of-header-text.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -layout: post -title: Change orientation of header text in React Treegrid component | Syncfusion -description: Learn here all about Change orientation of header text in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Change orientation of header text -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Change orientation of header text in React Treegrid component - -You can change the orientation of the header text by using the [`customAttributes`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#customattributes) property. - -Ensure the following steps: - -**Step 1**: - -Create a css class with orientation style for treegrid header cell. - -```css -.orientationcss .e-headercelldiv { - transform: rotate(90deg); -} - -``` - -**Step 2**: - -Add the custom css class to particular column by using [`customAttributes`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#customattributes) property. - -```ts - - -``` - -**Step 3**: - -Resize the header cell height in [`create`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#create) event by using the following code. - -```ts - const setHeaderHeight = () => { - /** Obtain the width of the headerText content */ - const textWidth: number = (document.querySelector(".orientationcss > div") as HTMLElement).scrollWidth; - const headerCell: NodeList = document.querySelectorAll(".e-headercell"); - for(let i: number = 0; i < headerCell.length; i++) { - /** Assign the obtained textWidth as the height of the headerCell */ - ((headerCell as any).item(i)).style.height = textWidth + 'px'; - } - } - -``` - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/header-orientation-cs1/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/header-orientation-cs1/app/App.tsx %} -{% endhighlight %} -{% highlight css tabtitle="custom.css" %} -{% include code-snippet/treegrid/header-orientation-cs1/app/custom.css %} -{% endhighlight %} -{% highlight js tabtitle="custom.jsx" %} -{% include code-snippet/treegrid/header-orientation-cs1/app/custom.jsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/treegrid/header-orientation-cs1/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/treegrid/header-orientation-cs1/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/header-orientation-cs1" %} - -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/customize-the-edit-dialog.md b/ej2-react/treegrid/how-to/customize-the-edit-dialog.md deleted file mode 100644 index 58bf238b7..000000000 --- a/ej2-react/treegrid/how-to/customize-the-edit-dialog.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -layout: post -title: Customize the edit dialog in React Treegrid component | Syncfusion -description: Learn here all about Customize the edit dialog in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Customize the edit dialog -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Customize the edit dialog in React Treegrid component - -You can customize the appearance of the edit dialog in the [`actionComplete`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actioncomplete) event based on **requestType** as **beginEdit** or **add**. - -In the below example, we have changed the dialog's header text for editing and adding records. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/customizedialog-cs1/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/customizedialog-cs1/app/App.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/treegrid/customizedialog-cs1/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/treegrid/customizedialog-cs1/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/customizedialog-cs1" %} - -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/bootstrap5/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/customize-the-icon-for-column-menu.md b/ej2-react/treegrid/how-to/customize-the-icon-for-column-menu.md deleted file mode 100644 index 385443c9d..000000000 --- a/ej2-react/treegrid/how-to/customize-the-icon-for-column-menu.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -layout: post -title: Customize the icon for column menu in React Treegrid component | Syncfusion -description: Learn here all about Customize the icon for column menu in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Customize the icon for column menu -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Customize the icon for column menu in React Treegrid component - -You can customize the column menu icon by overriding the default treegrid class **.e-icons.e-columnmenu** with a custom property **content** as mentioned below, - -```css - .e-treegrid .e-columnheader .e-icons.e-columnmenu::before { - content: "\e903"; - } -``` - -In the below sample, treegrid is rendered with a customized column menu icon. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/custom-column-menu-icon-cs1/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/custom-column-menu-icon-cs1/app/App.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/treegrid/custom-column-menu-icon-cs1/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/treegrid/custom-column-menu-icon-cs1/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/custom-column-menu-icon-cs1" %} - -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/disable-editing-for-particular-row-cell.md b/ej2-react/treegrid/how-to/disable-editing-for-particular-row-cell.md deleted file mode 100644 index 5f1caff7a..000000000 --- a/ej2-react/treegrid/how-to/disable-editing-for-particular-row-cell.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -layout: post -title: Disable editing for particular row cell in React Treegrid component | Syncfusion -description: Learn here all about Disable editing for particular row cell in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Disable editing for particular row cell -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Disable editing for particular row cell in React Treegrid component - -You can disable the editing for a particular row by using the [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actionbegin) event of Grid based on **requestType** as **beginEdit**. - -In the below demo, the rows which are having the value for *Priority* column as *Breaker* is prevented from editing. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/customizedialog-cs2/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/customizedialog-cs2/app/App.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/treegrid/customizedialog-cs2/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/treegrid/customizedialog-cs2/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/customizedialog-cs2" %} - -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/display-foreignKey-values-in-treegrid.md b/ej2-react/treegrid/how-to/display-foreignKey-values-in-treegrid.md deleted file mode 100644 index 749437f5f..000000000 --- a/ej2-react/treegrid/how-to/display-foreignKey-values-in-treegrid.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -layout: post -title: Display foreignKey values in treegrid in React Treegrid component | Syncfusion -description: Learn here all about Display foreignKey values in treegrid in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Display foreignKey values in treegrid -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Display foreignKey values in treegrid in React Treegrid component - -Since TreeGrid Databinding concept is of hierarchy relationship, we do not provide in-built support for foreignkey datasource. - -To display the foreignKey value at initial rendering, we can use the [`queryCellInfo`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#querycellinfo) event of the treegrid and also by using the [`editType`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#edittype) and [`columns.edit`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#edit) properties of TreeGrid Column, we can render Dropdownlist with external or foreign dataSource. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/foreignkey-cs1/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/foreignkey-cs1/app/App.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/treegrid/foreignkey-cs1/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/treegrid/foreignkey-cs1/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/foreignkey-cs1" %} - -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/display-null-values-at-bottom.md b/ej2-react/treegrid/how-to/display-null-values-at-bottom.md deleted file mode 100644 index 50e9aed02..000000000 --- a/ej2-react/treegrid/how-to/display-null-values-at-bottom.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -layout: post -title: Display null values at bottom in React Treegrid component | Syncfusion -description: Learn here all about Display null values at bottom in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Display null values at bottom -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Display null values at bottom in React Treegrid component - -By default the null values are displayed at bottom of the TreeGrid row while perform sorting in ascending order. As well as this values are displayed at top of the TreeGrid row while perform sorting with descending order. But you can customize this default order to display the null values at always bottom row of the TreeGrid by using [`column.sortComparer`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#sortcomparer) method. - -In the below demo we have displayed the null date values at bottom of the Grid row while sorting the **StartDate** column in both ways. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/null-date-value-cs1/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/null-date-value-cs1/app/App.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/treegrid/null-date-value-cs1/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/treegrid/null-date-value-cs1/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/null-date-value-cs1" %} - -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/exporting-selected-data.md b/ej2-react/treegrid/how-to/exporting-selected-data.md deleted file mode 100644 index 9118ff694..000000000 --- a/ej2-react/treegrid/how-to/exporting-selected-data.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -layout: post -title: Exporting selected data in React Treegrid component | Syncfusion -description: Learn here all about Exporting selected data in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Exporting selected data -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Exporting selected data in React Treegrid component - -You can export the selected records data by passing it to [`PdfExportProperties.dataSource`](https://ej2.syncfusion.com/react/documentation/api/grid/pdfExportProperties/) or [`ExcelExportProperties.dataSource`](https://ej2.syncfusion.com/react/documentation/api/grid/excelExportProperties/) property in the [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/grid/#toolbarclick) event. - -In the below exporting demo, we can get the selected records using [`getSelectedRecords`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#getselectedrecords) method and pass the selected data to [`pdfExport`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#pdfexport) or [`excelExport`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#excelExport) methods using respective export properties.. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/refresh-cs5/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/refresh-cs5/app/App.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/treegrid/refresh-cs5/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/treegrid/refresh-cs5/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/refresh-cs5" %} - -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/passing-parameter-to-server-exporting.md b/ej2-react/treegrid/how-to/passing-parameter-to-server-exporting.md deleted file mode 100644 index 8b810b365..000000000 --- a/ej2-react/treegrid/how-to/passing-parameter-to-server-exporting.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -layout: post -title: Passing parameter to server exporting in React Treegrid component | Syncfusion -description: Learn here all about Passing parameter to server exporting in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Passing parameter to server exporting -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Passing parameter to server exporting in React Treegrid component - -You can pass the additional parameter in the [`query`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#query) property by invoking [`addParams`](https://ej2.syncfusion.com/documentation/api/data/query/#addparams) method. In the [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) event, you can define params as key and value pair so it will receive at the server side when exporting. - -In the below example, we have passed *recordcount* as *12* using [`addParams`](https://ej2.syncfusion.com/documentation/api/data/query/#addparams) method. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/refresh-cs7/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/refresh-cs7/app/App.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/treegrid/refresh-cs7/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/treegrid/refresh-cs7/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/refresh-cs7" %} - -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/refresh-the-data-source.md b/ej2-react/treegrid/how-to/refresh-the-data-source.md deleted file mode 100644 index d736e51a0..000000000 --- a/ej2-react/treegrid/how-to/refresh-the-data-source.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -layout: post -title: Refresh the data source in React Treegrid component | Syncfusion -description: Learn here all about Refresh the data source in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Refresh the data source -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Refresh the data source in React Treegrid component - -You can add/delete the datasource records through an external button. To reflect the datasource changes in treegrid, you need to assign the modified data to dataSource property. - -Please follow the below steps to refresh the treegrid after datasource change. - -**Step 1**: - -Add/delete the datasource record by using the following code. - -```ts - - const dataSource: object = extendArray(treegridObj.dataSource as object[]); - - // Added New Record. - (dataSource as object[]).unshift({ TaskID: 99, TaskName: "New Data", StartDate: new Date('02/03/2017'), Duration: 10 }); - - // Delete record. - (dataSource as object[]).splice(selectedRow, 1); - -``` - -**Step 2**: - -Refresh the treegrid after the datasource change by assign the modified data to dataSource property. - -```ts - treegridObj.dataSource = dataSource; // Refresh the TreeGrid. - -``` - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/refresh-cs8/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/refresh-cs8/app/App.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/treegrid/refresh-cs8/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/treegrid/refresh-cs8/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/refresh-cs8" %} - -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. diff --git a/ej2-react/treegrid/how-to/use-wizard-like-dialog-editing.md b/ej2-react/treegrid/how-to/use-wizard-like-dialog-editing.md deleted file mode 100644 index 8c96ecb53..000000000 --- a/ej2-react/treegrid/how-to/use-wizard-like-dialog-editing.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -layout: post -title: Use wizard like dialog editing in React Treegrid component | Syncfusion -description: Learn here all about Use wizard like dialog editing in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Use wizard like dialog editing -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Use wizard like dialog editing in React Treegrid component - -Wizard helps you create intuitive step-by-step forms to fill. You can achieve the wizard like editing by using the dialog template feature. It support your own editing template by defining [`editSettings.mode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettings/#mode) as **Dialog** and [`editSetting.template`](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettings/#template) as a REACT Component. - -The following example demonstrate the wizard like editing in the treegrid with the obtrusive Validation. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/wizardediting-cs1/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/wizardediting-cs1/app/App.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/treegrid/wizardediting-cs1/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/treegrid/wizardediting-cs1/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/wizardediting-cs1" %} - -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/using-tab-inside-the-dialog-editing.md b/ej2-react/treegrid/how-to/using-tab-inside-the-dialog-editing.md deleted file mode 100644 index 38c2024f5..000000000 --- a/ej2-react/treegrid/how-to/using-tab-inside-the-dialog-editing.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -layout: post -title: Using tab inside the dialog editing in React Treegrid component | Syncfusion -description: Learn here all about Using tab inside the dialog editing in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Using tab inside the dialog editing -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Using tab inside the dialog editing in React Treegrid component - -You can use [`tab`](../../../tab) component inside dialog edit UI using dialog template feature. The dialog template feature can be enabled by defining [`editSettings.mode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettings/#mode) as `Dialog` and [`editSetting.template`](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettings/#template) as a REACT Component. - -The following example demonstrate the usage of tab control inside the dialog template. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/tabediting-cs1/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/tabediting-cs1/app/App.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/treegrid/tabediting-cs1/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/treegrid/tabediting-cs1/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/tabediting-cs1" %} - -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. diff --git a/ej2-react/treegrid/immutable-mode.md b/ej2-react/treegrid/immutable-mode.md deleted file mode 100644 index 54a3f66c2..000000000 --- a/ej2-react/treegrid/immutable-mode.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -layout: post -title: Immutable mode in React Treegrid component | Syncfusion -description: Learn here all about Immutable mode in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Immutable mode -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Immutable mode in React Treegrid component - -The immutable mode optimizes the Tree Grid re-rendering performance by using the object reference and [`deep compare`](https://dmitripavlutin.com/how-to-compare-objects-in-javascript/#4-deep-equality) concept. When performing the Grid actions, it will only re-render the modified or newly added rows and prevent the re-rendering of the unchanged rows. - -To enable this feature, you have to set the [`enableImmutableMode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enableImmutableMode) property as **true**. - ->* This feature uses the primary key value for data comparison. So, you need to provide the [`isPrimaryKey`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#isprimarykey) column. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/immutable-mode-cs1/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/immutable-mode-cs1/app/App.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/treegrid/immutable-mode-cs1/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/treegrid/immutable-mode-cs1/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/immutable-mode-cs1" %} - -## Limitations - -The following features are not supported in the immutable mode: - -* Frozen rows and columns -* Row Template -* Detail Template -* Column reorder -* Virtualization -* Infinite scroll - -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/pdf-export/exporting-treegrid-in-server.md b/ej2-react/treegrid/pdf-export/exporting-treegrid-in-server.md index 0eea03651..02d2e1e61 100644 --- a/ej2-react/treegrid/pdf-export/exporting-treegrid-in-server.md +++ b/ej2-react/treegrid/pdf-export/exporting-treegrid-in-server.md @@ -142,4 +142,29 @@ private void PdfHeaderQueryCellInfo(object pdf) name.Headers[0].Height = size.Width * 2; } -``` \ No newline at end of file +``` + +## Passing additional parameters to the server while exporting + +Passing additional parameters to the server when exporting data in the Syncfusion React TreeGrid involves providing flexibility to include extra information or customize the export process based on specific requirements. + +You can achieve this by utilizing the [query](https://ej2.syncfusion.com/react/documentation/api/treegrid/#query) property and the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) event. Within the `query` property, you can invoke the [addParams](https://ej2.syncfusion.com/documentation/api/data/query/#addparams) method to add parameters to the request. + +The following example demonstrates how to pass additional parameters to the server when PDF exporting within the `toolbarClick` event. Within the event, the additional parameters, specifically **recordcount** as **12**, are passed using the `addParams` method and displayed as a message. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/refresh-cs13/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/refresh-cs13/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/treegrid/refresh-cs13/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/treegrid/refresh-cs13/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/refresh-cs13" %} \ No newline at end of file diff --git a/ej2-react/treegrid/pdf-export/pdf-cell-style-customization.md b/ej2-react/treegrid/pdf-export/pdf-cell-style-customization.md deleted file mode 100644 index 396747003..000000000 --- a/ej2-react/treegrid/pdf-export/pdf-cell-style-customization.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -layout: post -title: Pdf cell style customization in React Treegrid component | Syncfusion -description: Learn here all about Pdf cell style customization in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Pdf cell style customization -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Pdf cell style customization in React Treegrid component - -## Conditional cell formatting - -TreeGrid cells in the exported PDF can be customized or formatted using [`pdfQueryCellInfo`](https://ej2.syncfusion.com/react/documentation/api/treegrid#pdfQueryCellInfo) event. In this event, we can format the treegrid cells of exported PDF document based on the column cell value. - -In the below sample, we have set the background color for *Duration* column in the exported document by **args.cell** and *backgroundColor* property. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/pdfexport-cs2/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/pdfexport-cs2/app/App.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/pdfexport-cs2" %} - -## Theme - -PDF export provides an option to include theme for exported PDF document. - -To apply theme in exported PDF, define the `theme` in `PdfExportProperties`. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/pdfexport-cs3/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/pdfexport-cs3/app/App.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/pdfexport-cs3" %} - -> By default, material theme is applied to exported PDF document. \ No newline at end of file diff --git a/ej2-react/treegrid/pdf-export/pdf-export-options.md b/ej2-react/treegrid/pdf-export/pdf-export-options.md index 2a95b39ce..9a4f27328 100644 --- a/ej2-react/treegrid/pdf-export/pdf-export-options.md +++ b/ej2-react/treegrid/pdf-export/pdf-export-options.md @@ -10,6 +10,41 @@ domainurl: ##DomainURL## # Pdf export options in React Treegrid component +## Export selected records + +Exporting only the selected records from the Syncfusion React TreeGrid allows generating PDF document that include only the desired data from the TreeGrid. This feature provides the flexibility to export specific records that are relevant to the needs, enabling more focused and targeted PDF exports. + +To export only the selected records by utilizing the [exportProperties.dataSource](https://ej2.syncfusion.com/react/documentation/api/grid/pdfExportProperties/) property in the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/grid/#toolbarclick) event. + +To export the selected records from the TreeGrid to a PDF file, you can follow these steps: + +1. Handle the `toolbarClick` event of the TreeGrid. + +2. Retrieve the selected records using the [getSelectedRecords](https://ej2.syncfusion.com/react/documentation/api/treegrid/#getselectedrecords) method. + +3. Assign the selected data to the `exportProperties.dataSource` property. + +4. Trigger the export operation using the [pdfExport](https://ej2.syncfusion.com/react/documentation/api/treegrid/#pdfexport) method. + +The following example demonstrates how to export the selected records to a PDF document. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/refresh-cs5/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/refresh-cs5/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/treegrid/refresh-cs5/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/treegrid/refresh-cs5/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/refresh-cs5" %} + ## Export hidden columns PDF export provides an option to export hidden columns of TreeGrid by defining the `includeHiddenColumn` as **true**. @@ -175,4 +210,42 @@ In the following example, we have used Advent Pro font to export the treegrid wi {% previewsample "page.domainurl/code-snippet/treegrid/pdfexport-cs9" %} -> **PdfTrueTypeFont** accepts base 64 format of the Custom Font. \ No newline at end of file +> **PdfTrueTypeFont** accepts base 64 format of the Custom Font. + +## Conditional cell formatting + +When exporting data from the Syncfusion React TreeGrid, you have an option to conditionally format the cells in the exported PDF document. This allows you to customize the appearance of specific cells based on their values or other criteria. + +To implement conditional cell formatting, you can utilize the [pdfQueryCellInfo](https://ej2.syncfusion.com/react/documentation/api/treegrid/#pdfQueryCellInfo) event of the TreeGrid. Within this event, you can access the cell object using the `args.cell` property and modify its properties, such as the background color, based on your desired conditions. + +The following example demonstrate how to customize the background color of the **Freight** column in the exported PDF document using the **args.cell** and **backgroundColor** properties of the `pdfQueryCellInfo` event. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/pdfexport-cs2/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/pdfexport-cs2/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/pdfexport-cs2" %} + +## Theme + +PDF export provides an option to include theme for exported PDF document. + +To apply theme in exported PDF, define the `theme` in `PdfExportProperties`. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/pdfexport-cs3/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/pdfexport-cs3/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/pdfexport-cs3" %} + +> By default, material theme is applied to exported PDF document. \ No newline at end of file diff --git a/ej2-react/treegrid/row/row-height.md b/ej2-react/treegrid/row/row-height.md deleted file mode 100644 index d207944a3..000000000 --- a/ej2-react/treegrid/row/row-height.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -layout: post -title: Row height in React Treegrid component | Syncfusion -description: Learn here all about Row height in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Row height -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Row height in React Treegrid component - -You can customize the row height of treegrid rows through the [`rowHeight`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowheight) property. The **rowHeight** property is used to change the row height of entire treegrid rows. - -In the below example, the **rowHeight** is set as *60px*. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/rows-cs1/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/rows-cs1/app/App.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/rows-cs1" %} - -## Customize row height for particular row - -TreeGrid row height for particular row can be customized using the [`rowDataBound`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdatabound) event by setting the **rowHeight** in arguments for each row based on the requirement. - -In the below example, the row height for the row with Task ID as *3* is set as *90px* using the **rowDataBound** event. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/treegrid/rows-cs2/app/App.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/treegrid/rows-cs2/app/App.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/rows-cs2" %} \ No newline at end of file diff --git a/ej2-react/treegrid/row/row.md b/ej2-react/treegrid/row/row.md index baf498a9a..f22b4764b 100644 --- a/ej2-react/treegrid/row/row.md +++ b/ej2-react/treegrid/row/row.md @@ -53,4 +53,40 @@ Please refer the following example. {% previewsample "page.domainurl/code-snippet/treegrid/alt-row-cs1" %} +## Row height + +The Syncfusion TreeGrid allows you to customize the height of rows based on your needs. This feature can be useful when you need to display more content in a row or when you want to reduce the height of rows to fit its content. You can achieve this by using the [rowHeight](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowheight) property of the TreeGrid. This property allows you to change the height of the entire grid row to your desired value. + +In the below example, the **rowHeight** is set as *60px*. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/rows-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/rows-cs1/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/rows-cs1" %} + +### Customize row height for particular row + +Customizing the row height for a particular row can be useful when you want to display more content in a particular row, reduce the height of a row to fit its content, or make a specific row stand out from the other rows in the TreeGrid. This can be achieved by using the `rowHeight` property of the TreeGrid along with the [rowDataBound](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdatabound) event. + +The `rowHeight` property of the TreeGrid allows you to set the height of all rows in the TreeGrid to a specific value. However, if you want to customize the row height for a specific row based on the row data, you can use the `rowDataBound` event. This event is triggered every time a request is made to access row information, element, or data, and before the row element is appended to the TreeGrid element. + +In the below example, the row height for the row with **TaskID** as **3** is set as **90px** using the **rowDataBound** event. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/rows-cs2/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/rows-cs2/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/rows-cs2" %} + > Refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to know how to present and manipulate data. diff --git a/ej2-react/treegrid/sorting.md b/ej2-react/treegrid/sorting.md index 242c4eb49..67b8c565b 100644 --- a/ej2-react/treegrid/sorting.md +++ b/ej2-react/treegrid/sorting.md @@ -84,6 +84,29 @@ In the following example, custom sort comparer function was defined in the *Cate > The sort comparer function will work only for the local data. +### Display null values at bottom + +By default, null values in a Syncfusion TreeGrid are displayed at the top when sorting in descending order and at the bottom when sorting in ascending order. However, there may be scenarios where you want to always display null values at the bottom of the TreeGrid regardless of the sort direction. This can be achieved by utilizing the [column.sortComparer](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#sortcomparer) method. This feature is particularly useful when working with data sets where null values might need to be clearly separated from actual data entries. + +The example below demonstrates how to display null date values at bottom of the TreeGrid row while sorting the **StartDate** column in both ways. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/null-date-value-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/null-date-value-cs1/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/treegrid/null-date-value-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/treegrid/null-date-value-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/null-date-value-cs1" %} + ## Touch Interaction When you tap the treegrid header on touchscreen devices, the selected column header is sorted. A popup ![Multi column sorting](images/sorting.jpg) is displayed for multi-column sorting. To sort multiple columns, tap the popup![Multi sorting](images/msorting.jpg), and then tap the desired treegrid headers. diff --git a/ej2-react/treegrid/state-persistence/get-or-set-local-storage-value.md b/ej2-react/treegrid/state-persistence/get-or-set-local-storage-value.md deleted file mode 100644 index 0d9956f20..000000000 --- a/ej2-react/treegrid/state-persistence/get-or-set-local-storage-value.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -layout: post -title: Get or set local storage value in React Treegrid component | Syncfusion -description: Learn here all about Get or set local storage value in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Get or set local storage value -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Get or set local storage value in React Treegrid component - -If the [`enablePersistence`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enablepersistence) property is set to true, the treegrid property value is saved in the **window.localStorage** for reference. You can get/set the localStorage value by using the **getItem/setItem** method in the **window.localStorage**. - -```ts - - // get the TreeGrid model. - const value: string = window.localStorage.getItem('treegridTreeGrid') as string; - // "treegridTreeGrid" is component name + component id. - const model: object = JSON.parse(value); - -``` - -```ts - - // set the TreeGrid model. - // "treegridTreeGrid" is component name + component id. - window.localStorage.setItem('treegridTreeGrid', JSON.stringify(model)); - -``` \ No newline at end of file diff --git a/ej2-react/treegrid/state-persistence/state-persistence.md b/ej2-react/treegrid/state-persistence/state-persistence.md index 963046e56..9e33ace8d 100644 --- a/ej2-react/treegrid/state-persistence/state-persistence.md +++ b/ej2-react/treegrid/state-persistence/state-persistence.md @@ -15,3 +15,18 @@ State persistence refers to the TreeGrid's state maintained in the browser's [`l State persistence stores treegrid’s model object in the local storage when the [`enablePersistence`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enablepersistence) is defined as true. > You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. + +## Get or set local storage value + +If the [enablePersistence](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enablepersistence) property is set to true, the treegrid property value is saved in the **window.localStorage** for reference. You can get or set the localStorage value by using the **getItem** and **setItem** method in the **window.localStorage**. + +```ts + // Get the TreeGrid model. + const value: string = window.localStorage.getItem('treegridTreeGrid') as string; //"treegridTreeGrid" is component name + component id. + const model: object = JSON.parse(value); +``` + +```ts + // Set the TreeGrid model. + window.localStorage.setItem('treegridTreeGrid', JSON.stringify(model)); //"treegridTreeGrid" is component name + component id. +``` \ No newline at end of file From e6a8ccb8c4a1b2373d6cb35d98ad46c73ad9bf69 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Tue, 16 Sep 2025 21:39:07 +0530 Subject: [PATCH 07/34] Integrated latest changes at 09-16-2025 7:39:59 PM --- .../palette-contentTemplate/app/index.jsx | 62 ++++++++++++++++++ .../palette-contentTemplate/app/index.tsx | 63 +++++++++++++++++++ .../palette-contentTemplate/index.html | 35 +++++++++++ .../systemjs.config.js | 59 +++++++++++++++++ .../footer-template-cs1/app/index.jsx | 4 +- .../footer-template-cs1/app/index.tsx | 5 +- .../footer-template-cs2/app/index.jsx | 2 +- .../footer-template-cs2/app/index.tsx | 3 +- ej2-react/diagram/symbol-palette.md | 23 +++++++ 9 files changed, 248 insertions(+), 8 deletions(-) create mode 100644 ej2-react/code-snippet/diagram/symbol-palette/palettes/palette-contentTemplate/app/index.jsx create mode 100644 ej2-react/code-snippet/diagram/symbol-palette/palettes/palette-contentTemplate/app/index.tsx create mode 100644 ej2-react/code-snippet/diagram/symbol-palette/palettes/palette-contentTemplate/index.html create mode 100644 ej2-react/code-snippet/diagram/symbol-palette/palettes/palette-contentTemplate/systemjs.config.js diff --git a/ej2-react/code-snippet/diagram/symbol-palette/palettes/palette-contentTemplate/app/index.jsx b/ej2-react/code-snippet/diagram/symbol-palette/palettes/palette-contentTemplate/app/index.jsx new file mode 100644 index 000000000..9ba5ea6d0 --- /dev/null +++ b/ej2-react/code-snippet/diagram/symbol-palette/palettes/palette-contentTemplate/app/index.jsx @@ -0,0 +1,62 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { SymbolPaletteComponent, DiagramComponent } from "@syncfusion/ej2-react-diagrams"; + +// Initializes symbols for the symbol palette. +export function getHTMLShape() { + let HTMLShape = [ + { + id: 'node1', + shape: { + type: 'HTML', + content: '
      🌤 28°C
      Puducherry
      Humidity: 60%
      ' + } + }, + { + id: 'node2', + shape: { + type: 'Native', + scale: 'Stretch', + content: '' + } + } + ]; + return HTMLShape; +}; + +let palettes = [ + { + id: 'palette1', + title: 'HTML and SVG Shapes', + symbols: getHTMLShape(), + expanded: true + } +]; + +let symbolMargin = { + left: 15, + right: 15, + top: 15, + bottom: 15 +}; + +let symbolPreview = { + height: 100, + width: 100, + offset: { + x: 1, + y: 0.5 + } +}; + +// Initializes the symbol palette and Diagram component. +function App() { + return ( +
      + + +
      ); +} + +const root = ReactDOM.createRoot(document.getElementById("container")); +root.render(); diff --git a/ej2-react/code-snippet/diagram/symbol-palette/palettes/palette-contentTemplate/app/index.tsx b/ej2-react/code-snippet/diagram/symbol-palette/palettes/palette-contentTemplate/app/index.tsx new file mode 100644 index 000000000..3b098b987 --- /dev/null +++ b/ej2-react/code-snippet/diagram/symbol-palette/palettes/palette-contentTemplate/app/index.tsx @@ -0,0 +1,63 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { SymbolPaletteComponent, DiagramComponent, NodeModel, PaletteModel, MarginModel, SymbolPreviewModel } from "@syncfusion/ej2-react-diagrams"; + +// Initializes symbols for the symbol palette. +export function getHTMLShape(): NodeModel[] { + const HTMLShape: NodeModel[] = [ + { + id: 'node1', + shape: { + type: 'HTML', + content: '
      🌤 28°C
      Puducherry
      Humidity: 60%
      ' + } + }, + { + id: 'node2', + shape: { + type: 'Native', + scale: 'Stretch', + content: '' + } + } + ]; + return HTMLShape; +}; + +const palettes: PaletteModel[] = [ + { + id: 'palette1', + title: 'HTML and SVG Shapes', + symbols: getHTMLShape(), + expanded: true + } +]; + +const symbolMargin: MarginModel = { + left: 15, + right: 15, + top: 15, + bottom: 15 +}; + +const symbolPreview: SymbolPreviewModel = { + height: 100, + width: 100, + offset: { + x: 1, + y: 0.5 + } +}; + +// Initializes the symbol palette and Diagram component. +function App() { + return ( +
      + + +
      + ); +} + +const root = ReactDOM.createRoot(document.getElementById("container")); +root.render(); diff --git a/ej2-react/code-snippet/diagram/symbol-palette/palettes/palette-contentTemplate/index.html b/ej2-react/code-snippet/diagram/symbol-palette/palettes/palette-contentTemplate/index.html new file mode 100644 index 000000000..62783eb7b --- /dev/null +++ b/ej2-react/code-snippet/diagram/symbol-palette/palettes/palette-contentTemplate/index.html @@ -0,0 +1,35 @@ + + + + + Syncfusion® React Diagram-SymbolPalette + + + + + + + + + + + +
      +
      Loading....
      +
      + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/diagram/symbol-palette/palettes/palette-contentTemplate/systemjs.config.js b/ej2-react/code-snippet/diagram/symbol-palette/palettes/palette-contentTemplate/systemjs.config.js new file mode 100644 index 000000000..d2f0366a1 --- /dev/null +++ b/ej2-react/code-snippet/diagram/symbol-palette/palettes/palette-contentTemplate/systemjs.config.js @@ -0,0 +1,59 @@ +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/20.3.56/" + }, + 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-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js", + "@syncfusion/ej2-react-diagrams": "syncfusion:ej2-react-diagrams/dist/ej2-react-diagrams.umd.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: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/code-snippet/multiselect/footer-template-cs1/app/index.jsx b/ej2-react/code-snippet/multiselect/footer-template-cs1/app/index.jsx index 286deaf2f..0809e294b 100644 --- a/ej2-react/code-snippet/multiselect/footer-template-cs1/app/index.jsx +++ b/ej2-react/code-snippet/multiselect/footer-template-cs1/app/index.jsx @@ -6,12 +6,12 @@ export default class App extends React.Component { sportsData = ["BasketBall", "Cricket", "Football", "Golf"]; // set the value to footer template footerTemplate() { - return (); + return ( Total list items: {this.sportsData.length}); } render() { return ( // specifies the tag for render the MultiSelect component - ); + ); } } ReactDOM.render(, document.getElementById('sample')); diff --git a/ej2-react/code-snippet/multiselect/footer-template-cs1/app/index.tsx b/ej2-react/code-snippet/multiselect/footer-template-cs1/app/index.tsx index 07f001d39..604bddf9b 100644 --- a/ej2-react/code-snippet/multiselect/footer-template-cs1/app/index.tsx +++ b/ej2-react/code-snippet/multiselect/footer-template-cs1/app/index.tsx @@ -1,6 +1,5 @@ - import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; @@ -12,13 +11,13 @@ export default class App extends React.Component<{}, {}> { // set the value to footer template public footerTemplate(): JSX.Element { return ( - + Total list items: {this.sportsData.length} ); } public render() { return ( // specifies the tag for render the MultiSelect component - + ); } } diff --git a/ej2-react/code-snippet/multiselect/footer-template-cs2/app/index.jsx b/ej2-react/code-snippet/multiselect/footer-template-cs2/app/index.jsx index a9c1db417..390f7e07e 100644 --- a/ej2-react/code-snippet/multiselect/footer-template-cs2/app/index.jsx +++ b/ej2-react/code-snippet/multiselect/footer-template-cs2/app/index.jsx @@ -6,7 +6,7 @@ function App() { const sportsData = ["BasketBall", "Cricket", "Football", "Golf"]; // set the value to footer template function footerTemplate() { - return (); + return ( Total list items: {sportsData.length}); } return ( // specifies the tag for render the MultiSelect component diff --git a/ej2-react/code-snippet/multiselect/footer-template-cs2/app/index.tsx b/ej2-react/code-snippet/multiselect/footer-template-cs2/app/index.tsx index e1aa37ac3..061d39433 100644 --- a/ej2-react/code-snippet/multiselect/footer-template-cs2/app/index.tsx +++ b/ej2-react/code-snippet/multiselect/footer-template-cs2/app/index.tsx @@ -1,5 +1,4 @@ - import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; @@ -11,7 +10,7 @@ function App(){ // set the value to footer template function footerTemplate(): JSX.Element { return ( - + Total list items: {sportsData.length} ); } return ( diff --git a/ej2-react/diagram/symbol-palette.md b/ej2-react/diagram/symbol-palette.md index 2c74ef2e7..28ee24a60 100644 --- a/ej2-react/diagram/symbol-palette.md +++ b/ej2-react/diagram/symbol-palette.md @@ -88,6 +88,29 @@ The symbol palette supports adding group nodes. To add group nodes to the palett {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/palettes/palette-grp" %} +## Template-based symbols + +### HTML and SVG node with content template + +The Symbol Palette supports the creation of complex nodes using HTML or SVG templates. This allows developers to incorporate rich, interactive, and visually engaging content within diagram elements. + +* For HTML content, set the node's `shape.type` property to **HTML**. +* For SVG content, set the `shape.type` property to **Native**. + +Templates can be defined as strings and assigned to the node's `content` property. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/diagram/symbol-palette/palettes/palette-contentTemplate/app/index.jsx %} +{% endhighlight %} + +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/diagram/symbol-palette/palettes/palette-contentTemplate/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/palettes/palette-contentTemplate" %} + ## Drag and drop symbols from palette to diagram To drag and drop symbols from the palette to the diagram canvas, mousedown on the desired symbol in the palette, drag it to the desired location on the diagram canvas, and release the mouse button to drop it. From 4f9a08e5ae3f1ae5b5927cc8d2956f9757d0db0e Mon Sep 17 00:00:00 2001 From: vignesh <120713139+vigneshsivaji@users.noreply.github.com> Date: Wed, 17 Sep 2025 13:11:14 +0530 Subject: [PATCH 08/34] 980907: ai tool documents updated --- ej2-react-toc.html | 8 + .../ai-developer-tools/copilot-extension.md | 101 +++++++++ ej2-react/ai-developer-tools/mcp-server.md | 205 ++++++++++++++++++ ej2-react/ai-developer-tools/overview.md | 67 ++++++ 4 files changed, 381 insertions(+) create mode 100644 ej2-react/ai-developer-tools/copilot-extension.md create mode 100644 ej2-react/ai-developer-tools/mcp-server.md create mode 100644 ej2-react/ai-developer-tools/overview.md diff --git a/ej2-react-toc.html b/ej2-react-toc.html index c41c5e526..3f4ab32a8 100644 --- a/ej2-react-toc.html +++ b/ej2-react-toc.html @@ -20,6 +20,14 @@
  • +AI Developer Tools + +
    • +
  • Installation
  • Toolbar items
    • diff --git a/ej2-react/ai-assistview/ai-integrations/gemini-integration.md b/ej2-react/ai-assistview/ai-integrations/gemini-integration.md index 03eb100a5..e20d6105f 100644 --- a/ej2-react/ai-assistview/ai-integrations/gemini-integration.md +++ b/ej2-react/ai-assistview/ai-integrations/gemini-integration.md @@ -76,7 +76,7 @@ const geminiApiKey = 'Place your API key here'; {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/ai-integrations/ai-assistview/gemini-ai" %} +{% previewsample "page.domainurl/code-snippet/ai-assistview/ai-integrations/gemini-ai" %} ## Run and Test diff --git a/ej2-react/ai-assistview/ai-integrations/ollama-llm-integration.md b/ej2-react/ai-assistview/ai-integrations/ollama-llm-integration.md new file mode 100644 index 000000000..ff4a2b4e2 --- /dev/null +++ b/ej2-react/ai-assistview/ai-integrations/ollama-llm-integration.md @@ -0,0 +1,113 @@ +--- +layout: post +title: LLM Model With React AI AssistView component | Syncfusion +description: Checkout and learn about Integration of LLM Model With React AI AssistView component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: AI AssistView +documentation: ug +domainurl: ##DomainURL## +--- + +# Integration of LLM via Ollama With AI AssistView component + +The Syncfusion AI AssistView supports integration with [LLM via Ollama](https://ollama.com), enabling advanced conversational AI features in your applications. The component acts as a UI for a support bot, where user prompts are sent to the selected AI service via API calls. + +## Prerequisites + +* Requires `Node.js` (v16 or higher) and `npm`. +* `Ollama` application should be installed to run and manage LLM models locally. +* Syncfusion AI AssistView for React `@syncfusion/ej2-react-interactive-chat` installed in your react project. + +## Step 1: Getting Started with the AI AssistView component + +Before integrating LLM model, ensure that the Syncfusion AI AssistView control is correctly rendered in your application: + +[ React Getting Started Guide](../getting-started) + +## Step 2: Install Dependencies + +* Install the Syncfusion AI AssistView in your project + +```bash + +npm install @syncfusion/ej2-react-interactive-chat --save + +``` + +* Download and install `Ollama` based on your operating system: + +{% tabs %} +{% highlight ts tabtitle="Windows" %} + +1. Visit [Windows](https://ollama.com/download) +2. Click `Download for Windows` to get the `.exe installer`. +3. Run `OllamaSetup.exe` and follow the wizard to install. + +{% endhighlight %} + +{% highlight ts tabtitle="MAC" %} + +1. Visit [macOS](https://ollama.com/download/mac) +2. Click `Download for macOS` to get `.dmg file` +3. Install it by following the wizard. + +{% endhighlight %} + +{% highlight ts tabtitle="Linux" %} + +1. Visit [Linux](https://ollama.com/download/linux) +2. Run the below command to install Ollama in your system + +```bash + +curl -fsSL https://ollama.com/install.sh | sh + +``` + +{% endhighlight %} +{% endtabs %} + +## Step 3: Install and Run an Ollama Model + +1. Download and run a model using the following command. Replace `deepseek-r1` with your preferred model (e.g., `llama3`, `phi4`). See the [Ollama model](https://ollama.com/search) library for available models + +```bash + +ollama run deepseek-r1 + +``` + +2. Once the model download is complete, start the Ollama server to make the model accessible: + +```bash + +ollama serve + +``` + +## Step 4: Integrate AI AssistView in React + +Create `src/App.js` to connect the Syncfusion AI AssistView to the LLM model: + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/ai-assistview/ai-integrations/llm-model/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/ai-assistview/ai-integrations/llm-model/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/ai-assistview/ai-integrations/llm-model" %} + +## Step 5: Run and Test + +Run the application in the browser using the following command. + +```bash + +npm start + +``` + +Open `http://localhost:3000` to interact with your AI model where you can enter prompts and receive responses from the `Ollama` model. diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx index 2123c619a..c36e0366d 100644 --- a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx @@ -56,7 +56,6 @@ function App() { streamResponse(responseText); }) .catch(error => { - console.error('Error fetching Gemini response:', error); assistInstance.current.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.'); stopStreaming = true; }); diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx index 4c6833b56..9b981514d 100644 --- a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx @@ -61,7 +61,6 @@ function App() { streamResponse(responseText); }) .catch((error: unknown) => { - console.error('Error fetching Gemini response:', error); assistInstance.current?.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.'); stopStreaming = true; }); diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/systemjs.config.js index f8d760b59..f8fd474a2 100644 --- a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/systemjs.config.js @@ -24,6 +24,8 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", @@ -33,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js", diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/app/index.jsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/app/index.jsx new file mode 100644 index 000000000..996167647 --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/app/index.jsx @@ -0,0 +1,91 @@ +import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat'; +import * as React from 'react'; +import * as ReactDOM from "react-dom"; +import { marked } from 'marked'; + +function App() { + const assistInstance = React.useRef(null); + let stopStreaming = false; + const suggestions = [ + 'How do I prioritize my tasks?', + 'How can I improve my time management skills?' + ]; + const bannerTemplate = ''; + + const toolbarItemClicked = (args) => { + if (args.item.iconCss === 'e-icons e-refresh') { + assistInstance.current.prompts = []; + assistInstance.current.promptSuggestions = suggestions; + stopStreaming = true; + } + }; + + const assistViewToolbarSettings = { + items: [{ iconCss: 'e-icons e-refresh', align: 'Right' }], + itemClicked: toolbarItemClicked + }; + + const streamResponse = async (response) => { + let lastResponse = ''; + const responseUpdateRate = 10; + let i = 0; + const responseLength = response.length; + while (i < responseLength && !stopStreaming) { + lastResponse += response[i]; + i++; + if (i % responseUpdateRate === 0 || i === responseLength) { + const htmlResponse = marked.parse(lastResponse); + assistInstance.current.addPromptResponse(htmlResponse, i === responseLength); + assistInstance.current.scrollToBottom(); + } + await new Promise(resolve => setTimeout(resolve, 15)); // Delay for streaming effect + } + assistInstance.current.promptSuggestions = suggestions; + }; + + const onPromptRequest = (args) => { + const defaultResponse = '⚠️ Something went wrong while connecting to the AI service. Please check your Ollama application running background.'; + fetch('http://localhost:11434/api/generate', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + model: 'deepseek-r1', + prompt: `### Instruction:\nRespond in up to 5 lines.\n\n### Input:\n${args.prompt || 'Hi'}`, + stream: false, + }), + }) + .then(response => { + if (!response.ok) { + throw new Error(`HTTP ${response.status}: ${response.statusText}`); + } + return response.json(); + }) + .then(reply => { + const responseText = reply.response?.trim() || 'No response received.'; + stopStreaming = false; + streamResponse(responseText); + }) + .catch(error => { + assistInstance.current.addPromptResponse(defaultResponse, true); + assistInstance.current.promptSuggestions = suggestions; + stopStreaming = true; + }); + }; + + const handleStopResponse = () => { + stopStreaming = true; + }; + + return ( + + ); +} +ReactDOM.render(, document.getElementById('container')); diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/app/index.tsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/app/index.tsx new file mode 100644 index 000000000..021cddf1e --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/app/index.tsx @@ -0,0 +1,92 @@ +import { AIAssistViewComponent,PromptRequestEventArgs,ToolbarItemClickedEventArgs } from '@syncfusion/ej2-react-interactive-chat'; +import * as React from 'react'; +import * as ReactDOM from "react-dom"; +import { marked } from 'marked'; + + +function App() { + const assistInstance = React.useRef(null); + let stopStreaming:boolean = false; + const suggestions: string[] = [ + 'How do I prioritize my tasks?', + 'How can I improve my time management skills?' + ]; + const bannerTemplate = ''; + const toolbarItemClicked = (args:ToolbarItemClickedEventArgs) => { + if (args.item.iconCss === 'e-icons e-refresh') { + assistInstance.current.prompts = []; + assistInstance.current.promptSuggestions = suggestions; + stopStreaming = true; + } + }; + + const assistViewToolbarSettings = { + items: [ { iconCss: 'e-icons e-refresh', align: 'Right' } ], + itemClicked: toolbarItemClicked + }; + + const handleStopResponse = () => { + stopStreaming = true; + }; + + const streamResponse = async (response:string) => { + let lastResponse = ''; + const responseUpdateRate = 10; + let i = 0; + const responseLength = response.length; + while (i < responseLength && !stopStreaming) { + lastResponse += response[i]; + i++; + if (i % responseUpdateRate === 0 || i === responseLength) { + const htmlResponse = marked.parse(lastResponse); + assistInstance.current.addPromptResponse(htmlResponse, i === responseLength); + assistInstance.current.scrollToBottom(); + } + await new Promise(resolve => setTimeout(resolve, 15)); // Delay for streaming effect + } + assistInstance.current.promptSuggestions = suggestions; + }; + + const onPromptRequest = (args:PromptRequestEventArgs) => { + const defaultResponse = '⚠️ Something went wrong while connecting to the AI service. Please check your Ollama application running background.'; + fetch('http://localhost:11434/api/generate', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + model: 'deepseek-r1', + prompt: `### Instruction:\nRespond in up to 5 lines.\n\n### Input:\n${args.prompt || 'Hi'}`, + stream: false, + }), + }) + .then(response => { + if (!response.ok) { + throw new Error(`HTTP ${response.status}: ${response.statusText}`); + } + return response.json(); + }) + .then(reply => { + const responseText = reply.response?.trim() || 'No response received.'; + stopStreaming = false; + streamResponse(responseText); + }) + .catch(error => { + assistInstance.current.addPromptResponse(defaultResponse, true); + assistInstance.current.promptSuggestions = suggestions; + stopStreaming = true; + }); + }; + + return ( + + ); +} + +ReactDOM.render(, document.getElementById('container')); \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/index.css b/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/index.css new file mode 100644 index 000000000..708414b25 --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/index.css @@ -0,0 +1,25 @@ +/* Represents the styles for loader */ +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#container { + margin: 20px auto; +} + +.banner-content { + display: flex; + flex-direction: column; + justify-content: center; + height: 330px; + text-align: center; +} + +.banner-content .e-assistview-icon:before { + font-size: 35px; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/index.html b/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/index.html new file mode 100644 index 000000000..b0eef4cfb --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/index.html @@ -0,0 +1,28 @@ + + + + + Syncfusion React AI AssistView + + + + + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/systemjs.config.js new file mode 100644 index 000000000..f8fd474a2 --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/systemjs.config.js @@ -0,0 +1,49 @@ +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/20.3.56/" + }, + 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-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", + "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js", + "@google/generative-ai": "https://cdn.jsdelivr.net/npm/@google/generative-ai@0.24.1/dist/index.min.js" + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/systemjs.config.js index 3db14f249..a407cba76 100644 --- a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/systemjs.config.js @@ -24,6 +24,8 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", @@ -33,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js" diff --git a/ej2-react/code-snippet/ai-assistview/appearance/cssClass/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/appearance/cssClass/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/appearance/cssClass/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/appearance/cssClass/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/appearance/height/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/appearance/height/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/appearance/height/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/appearance/height/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/appearance/width/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/appearance/width/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/appearance/width/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/appearance/width/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/assist-view/clearbtn/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/assist-view/clearbtn/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/assist-view/clearbtn/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/assist-view/clearbtn/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/assist-view/placeholder/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/assist-view/placeholder/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/assist-view/placeholder/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/assist-view/placeholder/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/assist-view/prompt-icon/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/assist-view/prompt-icon/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/assist-view/prompt-icon/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/assist-view/prompt-icon/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/assist-view/prompt-text/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/assist-view/prompt-text/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/assist-view/prompt-text/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/assist-view/prompt-text/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/assist-view/prompts/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/assist-view/prompts/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/assist-view/prompts/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/assist-view/prompts/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/assist-view/response-icon/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/assist-view/response-icon/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/assist-view/response-icon/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/assist-view/response-icon/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/assist-view/suggestion-header/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/assist-view/suggestion-header/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/assist-view/suggestion-header/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/assist-view/suggestion-header/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/assist-view/suggestions/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/assist-view/suggestions/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/assist-view/suggestions/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/assist-view/suggestions/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/custom-view/active-view/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/custom-view/active-view/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/custom-view/active-view/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/custom-view/active-view/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/custom-view/type/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/custom-view/type/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/custom-view/type/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/custom-view/type/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/custom-view/viewTemplate/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/custom-view/viewTemplate/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/custom-view/viewTemplate/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/custom-view/viewTemplate/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/defaultprompts/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/defaultprompts/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/defaultprompts/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/defaultprompts/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/events/attachment-failure/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/events/attachment-failure/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/events/attachment-failure/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/events/attachment-failure/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/events/attachment-removed/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/events/attachment-removed/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/events/attachment-removed/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/events/attachment-removed/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/events/attachment-success/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/events/attachment-success/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/events/attachment-success/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/events/attachment-success/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/events/before-attachment/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/events/before-attachment/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/events/before-attachment/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/events/before-attachment/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/events/created/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/events/created/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/events/created/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/events/created/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/events/prompt-changed/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/events/prompt-changed/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/events/prompt-changed/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/events/prompt-changed/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/events/promptRequest/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/events/promptRequest/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/events/promptRequest/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/events/promptRequest/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/file-attachments/enable-attachment/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/file-attachments/enable-attachment/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/file-attachments/enable-attachment/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/file-attachments/enable-attachment/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/file-attachments/file-size/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/file-attachments/file-size/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/file-attachments/file-size/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/file-attachments/file-size/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/file-attachments/file-type/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/file-attachments/file-type/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/file-attachments/file-type/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/file-attachments/file-type/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/file-attachments/save-remove-url/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/file-attachments/save-remove-url/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/file-attachments/save-remove-url/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/file-attachments/save-remove-url/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/getting-started-class/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/getting-started-class/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/getting-started-class/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/getting-started-class/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/getting-started/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/getting-started/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/getting-started/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/getting-started/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/methods/execute-prompt/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/methods/execute-prompt/systemjs.config.js index e1c0db382..0d265431d 100644 --- a/ej2-react/code-snippet/ai-assistview/methods/execute-prompt/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/methods/execute-prompt/systemjs.config.js @@ -26,6 +26,7 @@ System.config({ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/methods/object-response/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/methods/object-response/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/methods/object-response/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/methods/object-response/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/methods/string-response/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/methods/string-response/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/methods/string-response/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/methods/string-response/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/template/banner-template/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/template/banner-template/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/template/banner-template/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/template/banner-template/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/template/footer-template/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/template/footer-template/systemjs.config.js index d5c761b39..c1dab4072 100644 --- a/ej2-react/code-snippet/ai-assistview/template/footer-template/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/template/footer-template/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -35,6 +36,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/template/prompt-item-template/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/template/prompt-item-template/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/template/prompt-item-template/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/template/prompt-item-template/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/template/response-item-template/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/template/response-item-template/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/template/response-item-template/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/template/response-item-template/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/template/suggestions-template/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/template/suggestions-template/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/template/suggestions-template/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/template/suggestions-template/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/align/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/align/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/align/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/align/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/cssClass/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/cssClass/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/cssClass/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/cssClass/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/disabled/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/disabled/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/disabled/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/disabled/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/item-type/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/item-type/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/item-type/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/item-type/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/itemClick/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/itemClick/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/itemClick/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/itemClick/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/prompt-itemClick/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/prompt-itemClick/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/prompt-itemClick/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/prompt-itemClick/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/prompt-settings/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/prompt-settings/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/prompt-settings/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/prompt-settings/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/response-itemClick/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/response-itemClick/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/response-itemClick/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/response-itemClick/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/response-settings/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/response-settings/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/response-settings/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/response-settings/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/template/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/template/systemjs.config.js index b8b6bae9a..b92a5dd08 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/template/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/template/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -36,6 +37,7 @@ System.config({ "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/text/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/text/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/text/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/text/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/tooltip/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/tooltip/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/tooltip/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/tooltip/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/ai-assistview/toolbar-items/visible/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/toolbar-items/visible/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/ai-assistview/toolbar-items/visible/systemjs.config.js +++ b/ej2-react/code-snippet/ai-assistview/toolbar-items/visible/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/systemjs.config.js b/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/systemjs.config.js index edbc947bc..7ff017ea1 100644 --- a/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", @@ -33,6 +34,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js", "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", "@google/generative-ai": "https://cdn.jsdelivr.net/npm/@google/generative-ai@0.24.1/dist/index.min.js", "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", diff --git a/ej2-react/code-snippet/chat-ui/ai-integrations/openai/systemjs.config.js b/ej2-react/code-snippet/chat-ui/ai-integrations/openai/systemjs.config.js index 7c1db3033..b984273a0 100644 --- a/ej2-react/code-snippet/chat-ui/ai-integrations/openai/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/ai-integrations/openai/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", @@ -33,6 +34,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js", diff --git a/ej2-react/code-snippet/chat-ui/appearance/cssClass/systemjs.config.js b/ej2-react/code-snippet/chat-ui/appearance/cssClass/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/appearance/cssClass/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/appearance/cssClass/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/appearance/height/systemjs.config.js b/ej2-react/code-snippet/chat-ui/appearance/height/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/appearance/height/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/appearance/height/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/appearance/placeholder/systemjs.config.js b/ej2-react/code-snippet/chat-ui/appearance/placeholder/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/appearance/placeholder/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/appearance/placeholder/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/appearance/width/systemjs.config.js b/ej2-react/code-snippet/chat-ui/appearance/width/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/appearance/width/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/appearance/width/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/defaultMessage/systemjs.config.js b/ej2-react/code-snippet/chat-ui/defaultMessage/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/defaultMessage/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/defaultMessage/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/events/created/systemjs.config.js b/ej2-react/code-snippet/chat-ui/events/created/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/events/created/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/events/created/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/events/messageSend/systemjs.config.js b/ej2-react/code-snippet/chat-ui/events/messageSend/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/events/messageSend/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/events/messageSend/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/events/userTyping/systemjs.config.js b/ej2-react/code-snippet/chat-ui/events/userTyping/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/events/userTyping/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/events/userTyping/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/footer/systemjs.config.js b/ej2-react/code-snippet/chat-ui/footer/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/footer/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/footer/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/getting-started-class/systemjs.config.js b/ej2-react/code-snippet/chat-ui/getting-started-class/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/getting-started-class/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/getting-started-class/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/getting-started/systemjs.config.js b/ej2-react/code-snippet/chat-ui/getting-started/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/getting-started/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/getting-started/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/globalization/localization/systemjs.config.js b/ej2-react/code-snippet/chat-ui/globalization/localization/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/globalization/localization/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/globalization/localization/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/globalization/rtl/systemjs.config.js b/ej2-react/code-snippet/chat-ui/globalization/rtl/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/globalization/rtl/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/globalization/rtl/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/header/align/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/align/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/header/align/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/align/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/header/cssClass/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/cssClass/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/header/cssClass/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/cssClass/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/header/disable/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/disable/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/header/disable/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/disable/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/header/header-icon/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/header-icon/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/header/header-icon/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/header-icon/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/header/header-text/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/header-text/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/header/header-text/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/header-text/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/header/iconCss/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/iconCss/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/header/iconCss/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/iconCss/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/header/itemClick/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/itemClick/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/header/itemClick/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/itemClick/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/header/itemType/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/itemType/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/header/itemType/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/itemType/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/header/showHeader/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/showHeader/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/header/showHeader/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/showHeader/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/header/template/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/template/systemjs.config.js index c73890b01..ca8c67099 100644 --- a/ej2-react/code-snippet/chat-ui/header/template/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/template/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -35,6 +36,7 @@ System.config({ "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/header/text/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/text/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/header/text/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/text/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/header/tooltip/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/tooltip/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/header/tooltip/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/tooltip/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/header/visible/systemjs.config.js b/ej2-react/code-snippet/chat-ui/header/visible/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/header/visible/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/header/visible/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/loadondemand/systemjs.config.js b/ej2-react/code-snippet/chat-ui/loadondemand/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/loadondemand/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/loadondemand/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/mention/mention-message/systemjs.config.js b/ej2-react/code-snippet/chat-ui/mention/mention-message/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/mention/mention-message/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/mention/mention-message/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/mention/mention-select/systemjs.config.js b/ej2-react/code-snippet/chat-ui/mention/mention-select/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/mention/mention-select/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/mention/mention-select/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/mention/mention-trigger/systemjs.config.js b/ej2-react/code-snippet/chat-ui/mention/mention-trigger/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/mention/mention-trigger/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/mention/mention-trigger/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/mention/mention-user/systemjs.config.js b/ej2-react/code-snippet/chat-ui/mention/mention-user/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/mention/mention-user/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/mention/mention-user/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/messages/autoScroll/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/autoScroll/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/messages/autoScroll/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/autoScroll/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/messages/avatar-bgColor/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/avatar-bgColor/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/messages/avatar-bgColor/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/avatar-bgColor/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/messages/avatarUrl/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/avatarUrl/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/messages/avatarUrl/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/avatarUrl/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/messages/compactMode/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/compactMode/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/messages/compactMode/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/compactMode/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/messages/cssClass/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/cssClass/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/messages/cssClass/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/cssClass/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/messages/forwarded/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/forwarded/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/messages/forwarded/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/forwarded/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/messages/iconCss/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/iconCss/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/messages/iconCss/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/iconCss/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/messages/itemClicked/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/itemClicked/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/messages/itemClicked/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/itemClicked/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/messages/items/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/items/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/messages/items/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/items/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/messages/markdown/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/markdown/systemjs.config.js index f13e3dad6..e320f8511 100644 --- a/ej2-react/code-snippet/chat-ui/messages/markdown/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/markdown/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js", diff --git a/ej2-react/code-snippet/chat-ui/messages/pinned/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/pinned/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/messages/pinned/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/pinned/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/messages/replyTo/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/replyTo/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/messages/replyTo/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/replyTo/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/messages/showTimestamp/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/showTimestamp/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/messages/showTimestamp/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/showTimestamp/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/messages/statusIcon/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/statusIcon/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/messages/statusIcon/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/statusIcon/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/messages/suggestions/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/suggestions/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/messages/suggestions/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/suggestions/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/messages/text/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/text/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/messages/text/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/text/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/messages/timestampFormat/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/timestampFormat/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/messages/timestampFormat/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/timestampFormat/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/messages/tooltip/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/tooltip/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/messages/tooltip/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/tooltip/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/messages/width/systemjs.config.js b/ej2-react/code-snippet/chat-ui/messages/width/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/messages/width/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/messages/width/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/methods/addMessageModel/systemjs.config.js b/ej2-react/code-snippet/chat-ui/methods/addMessageModel/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/methods/addMessageModel/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/methods/addMessageModel/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/methods/addMessageString/systemjs.config.js b/ej2-react/code-snippet/chat-ui/methods/addMessageString/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/methods/addMessageString/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/methods/addMessageString/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/methods/editMessage/systemjs.config.js b/ej2-react/code-snippet/chat-ui/methods/editMessage/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/methods/editMessage/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/methods/editMessage/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/methods/scrollToBottom/systemjs.config.js b/ej2-react/code-snippet/chat-ui/methods/scrollToBottom/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/methods/scrollToBottom/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/methods/scrollToBottom/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/templates/emptyChatTemplate/systemjs.config.js b/ej2-react/code-snippet/chat-ui/templates/emptyChatTemplate/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/templates/emptyChatTemplate/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/templates/emptyChatTemplate/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/templates/footerTemplate/systemjs.config.js b/ej2-react/code-snippet/chat-ui/templates/footerTemplate/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/templates/footerTemplate/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/templates/footerTemplate/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/templates/messageTemplate/systemjs.config.js b/ej2-react/code-snippet/chat-ui/templates/messageTemplate/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/templates/messageTemplate/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/templates/messageTemplate/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/templates/suggestionsTemplate/systemjs.config.js b/ej2-react/code-snippet/chat-ui/templates/suggestionsTemplate/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/templates/suggestionsTemplate/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/templates/suggestionsTemplate/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/templates/timebreakTemplate/systemjs.config.js b/ej2-react/code-snippet/chat-ui/templates/timebreakTemplate/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/templates/timebreakTemplate/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/templates/timebreakTemplate/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/templates/typingUsersTemplate/systemjs.config.js b/ej2-react/code-snippet/chat-ui/templates/typingUsersTemplate/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/templates/typingUsersTemplate/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/templates/typingUsersTemplate/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/timebreak/systemjs.config.js b/ej2-react/code-snippet/chat-ui/timebreak/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/timebreak/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/timebreak/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/timestamp/systemjs.config.js b/ej2-react/code-snippet/chat-ui/timestamp/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/timestamp/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/timestamp/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/timestampFormat/systemjs.config.js b/ej2-react/code-snippet/chat-ui/timestampFormat/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/timestampFormat/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/timestampFormat/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, diff --git a/ej2-react/code-snippet/chat-ui/typingUsers/systemjs.config.js b/ej2-react/code-snippet/chat-ui/typingUsers/systemjs.config.js index e1c0db382..520771529 100644 --- a/ej2-react/code-snippet/chat-ui/typingUsers/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/typingUsers/systemjs.config.js @@ -24,6 +24,7 @@ System.config({ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", @@ -34,6 +35,7 @@ System.config({ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", }, From c86a564365a10b5ad26280a65941481b02567ec4 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Thu, 25 Sep 2025 20:27:30 +0530 Subject: [PATCH 18/34] Integrated latest changes at 09-25-2025 7:33:26 PM --- ej2-react/diagram/automatic-layout.md | 11 +- ej2-react/diagram/bpmn-activities.md | 84 +++++---- ej2-react/diagram/bpmn-dataObject.md | 32 +++- ej2-react/diagram/bpmn-dataSource.md | 18 +- ej2-react/diagram/bpmn-events.md | 31 ++-- ej2-react/diagram/bpmn-expandedSubProcess.md | 36 ++-- ej2-react/diagram/bpmn-flows.md | 66 ++++--- ej2-react/diagram/bpmn-gateway.md | 17 +- ej2-react/diagram/bpmn-groups.md | 13 +- ej2-react/diagram/bpmn-shapes.md | 41 ++++- ej2-react/diagram/bpmn-textAnnotation.md | 45 +++-- ej2-react/diagram/complex-layout.md | 39 +++-- ej2-react/diagram/flowchart-layout.md | 164 +++++++++--------- ej2-react/diagram/hierarchical-layout.md | 23 ++- ej2-react/diagram/layout-customization.md | 103 ++++++----- ej2-react/diagram/layout-event.md | 36 ++-- ej2-react/diagram/mindmap-layout.md | 42 +++-- ej2-react/diagram/org-chart.md | 61 ++++--- ej2-react/diagram/radial-layout.md | 25 ++- ej2-react/diagram/symmetric-layout.md | 18 +- .../treegrid/data-binding/data-binding.md | 61 +++---- ej2-react/treegrid/data-binding/local-data.md | 74 ++++---- .../treegrid/data-binding/remote-data.md | 66 +++---- 23 files changed, 619 insertions(+), 487 deletions(-) diff --git a/ej2-react/diagram/automatic-layout.md b/ej2-react/diagram/automatic-layout.md index 97432b321..70c89e012 100644 --- a/ej2-react/diagram/automatic-layout.md +++ b/ej2-react/diagram/automatic-layout.md @@ -1,18 +1,19 @@ --- layout: post -title: Automatic layout in React Diagram component | Syncfusion® -description: Learn here all about Automatic layout in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Automatic layout in React Diagram Component | Syncfusion® +description: Learn here all about Automatic layout in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Automatic layout platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Automatic layout in React Diagram component +# Automatic Layout in React Diagram Component -Diagram provides support to auto-arrange the nodes in the diagram area that is referred as `Layout`. It includes the following layout modes: +The Diagram component provides comprehensive support for automatically arranging nodes in the diagram area through various layout algorithms. These automatic layouts help organize complex diagrams by positioning nodes and connectors according to predefined patterns and relationships, eliminating the need for manual positioning,To enable automatic layout in the React Diagram component, configure the `layout` property of the diagram. -## Layout modes +## Layout Modes +The Diagram component supports multiple layout algorithms, each designed for specific use cases and data structures. Each layout mode provides unique positioning strategies and configuration options. * Hierarchical layout * Complex hierarchical tree layout diff --git a/ej2-react/diagram/bpmn-activities.md b/ej2-react/diagram/bpmn-activities.md index 9195a93c5..4f9911f5f 100644 --- a/ej2-react/diagram/bpmn-activities.md +++ b/ej2-react/diagram/bpmn-activities.md @@ -1,25 +1,25 @@ --- layout: post -title: Bpmn Activity in React Diagram component | Syncfusion® -description: Learn here all about Bpmn shapes in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: BPMN Activity in React Diagram Component | Syncfusion® +description: Learn about BPMN activity shapes including tasks, subprocesses, loops, compensation, and boundaries in Syncfusion® React Diagram Component. control: Bpmn Activity platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# BPMN activity in React Diagram component +# BPMN Activity in React Diagram Component -## Activity +## Overview -The [`activity`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnActivity#BpmnActivity) is the task that is performed in a business process. It is represented by a rounded rectangle. +BPMN (Business Process Model and Notation) activities represent work performed within a business process. An [`activity`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnActivity#BpmnActivity)appears as a rounded rectangle and serves as the fundamental unit of work in process modeling. -There are two types of activities. They are listed as follows: +Activities fall into two main categories: -* Task: Occurs within a process and it is not broken down to a finer level of detail. -* Subprocess: Occurs within a process and it is broken down to a finer level of detail. +* **Task**: A single unit of work that cannot be broken down into smaller components within the process model. +* **Subprocess**: A compound activity that contains other activities and can be expanded to show additional detail. -To create a BPMN activity, set the shape as **activity**. You also need to set the type of the BPMN activity by using the activity property of the node. By default, the type of the activity is set as **task**. The following code example illustrates how to create an activity. +To create a BPMN activity, set the shape property to **activity**. Specify the activity type using the activity property of the node. The default activity type is **task**. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -32,13 +32,9 @@ To create a BPMN activity, set the shape as **activity**. You also need to set t {% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes/es5Activity-cs1" %} -The different activities of BPMN process are listed as follows. - - ### Tasks -The [`task`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnTask#BpmnTask) property of the [`bpmn activity`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnactivitymodel/) allows you to define the type of task such as sending, receiving, user based task, etc. By default, the type property of task is set as **none**. The following code illustrates how to create different types of -BPMN tasks. +The [`task`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnTask#BpmnTask) property of the [`bpmn activity`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnactivitymodel/)defines specific task types such as user tasks, service tasks, or message tasks. The default task type is **none**. Different task types indicate the nature of work being performed and who or what performs it. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -64,10 +60,13 @@ The various types of BPMN tasks are tabulated as follows. | User | ![User Task BPMN Shape](images/User.png) | | Script | ![Script Task BPMN Shape](images/Script.png) | +### Subprocesses -### Collapsed Subprocess +Subprocesses represent activities that contain other processes or activities within them. They provide a way to organize complex processes hierarchically and can be expanded or collapsed to show or hide internal details. -A [`Collapsed Sub-Process`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnSubProcessModel/#collapsed) is a group of tasks, which is used to hide or reveal details of additional levels. The following code explains how to create a Collapsed Sub-Process. +#### Collapsed Subprocess + +A [`Collapsed Sub-Process`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnSubProcessModel/#collapsed)appears as a single activity but contains additional process details that remain hidden. This approach helps maintain process diagram clarity while preserving detailed information. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -82,7 +81,7 @@ A [`Collapsed Sub-Process`](https://ej2.syncfusion.com/react/documentation/api/d #### Loop -[`Loop`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnTask#loop) is a task that is internally being looped. The loop property of task allows you to define the type of loop. The default value for `loop` is **none**.You can define the loop property in subprocess BPMN shape as shown in the following code. +[`Loop`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnTask#loop) characteristics indicate that an activity repeats until a specified condition is met. The loop property of bpmn activity defines the repetition behavior. The default value is **none**. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -95,7 +94,7 @@ A [`Collapsed Sub-Process`](https://ej2.syncfusion.com/react/documentation/api/d {% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes/es5Loop-cs1" %} -The following table contains various types of BPMN loops. +The following table shows the available loop types for both tasks and subprocesses: | Loops | Task | Subprocess | | -------- | -------- | --------| @@ -105,9 +104,7 @@ The following table contains various types of BPMN loops. #### Compensation -[`Compensation`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnTask#compensation) is triggered, when operation is partially failed and enabled it with the compensation property of the `bpmn activity`. -By default, the `compensation` is set to false. - +[`Compensation`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnTask#compensation) indicates that an activity can undo or compensate for work performed by another activity. This becomes relevant when a process fails after partial completion and requires cleanup activities. Enable compensation using the compensation property of the bpmn activity. The default value is **false**. {% tabs %} {% highlight js tabtitle="index.jsx" %} {% include code-snippet/diagram/bpmnShapes/es5Compensation-cs1/app/index.jsx %} @@ -121,8 +118,7 @@ By default, the `compensation` is set to false. #### Call -A [`call`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnTask#call) activity is a global subprocess that is reused at various points of the business flow and set it with the call property of the task. -By default, the call property is false. +A [`call`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnTask#call) activity references a global process or subprocess that exists outside the current process definition. This promotes reusable across multiple processes. Enable call activity behavior using the call property of the task. The default value is **false**. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -135,11 +131,11 @@ By default, the call property is false. {% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes/es5Call-cs1" %} -N> This Property is only applicable for task Type activity. +N> The call property applies only to task-type activities. #### Adhoc -An adhoc subprocess is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and set it with the [`adhoc`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnSubProcess#adhoc) property of subprocess. By default, the adhoc property is false. + An [`adhoc`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnSubProcess#adhoc)subprocess contains activities that performers can execute in any order or skip entirely, provided the overall objective is achieved. Enable ad hoc behavior using the adhoc property of the subprocess. The default value is **false**. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -152,10 +148,9 @@ An adhoc subprocess is a group of tasks that are executed in any order or skippe {% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes/es5Adhoc-cs1" %} -## Boundary - -Boundary represents the type of task that is being processed. The [`boundary`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnSubProcess#boundary) property of subprocess allows you to define the type of boundary. By default, it is set as **default**. +#### Boundary Types +The [`boundary`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnSubProcess#boundary) property defines the visual boundary style of a subprocess, indicating different subprocess characteristics. The default value is **default**. {% tabs %} {% highlight js tabtitle="index.jsx" %} {% include code-snippet/diagram/bpmnShapes/es5Boundary-cs1/app/index.jsx %} @@ -167,25 +162,26 @@ Boundary represents the type of task that is being processed. The [`boundary`](h {% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes/es5Boundary-cs1" %} -The following table contains various types of BPMN boundaries. +The following table shows the available boundary types: | Boundary | Image | | -------- | -------- | -| Call | ![Call Boundary BPMN Shape](images/Call.png) | -| Event | ![Event Boundary BPMN Shape](images/Eventtask.png) | -| Default | ![Default Boundary BPMN Shape](images/DefaultBoundary.png) | +| Call | ![Call activity with thick border](images/Call.png) | +| Event | ![Event subprocess with dashed border](images/Eventtask.png) | +| Default | ![Default subprocess with standard border](images/DefaultBoundary.png) | -#### SubProcess types +#### SubProcess Types -The different types of subprocess are as follows: +BPMN defines two specialized subprocess types for specific business scenarios: * Event subprocess * Transaction -##### Event subprocess +##### Event Subprocess -A subprocess is defined as an event subprocess, when it is triggered by an event. An event subprocess is placed within another subprocess which is not part of the normal flow of its parent process. You can set event to a subprocess with the [`event`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnEvent##BpmnEvent) and [`trigger`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnEvent#trigger) property of the subprocess. The [`type`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnSubProcess#type) property of subprocess allows you to define the type of subprocess whether it should be event subprocess or transaction subprocess. +An event subprocess executes when triggered by a specific event rather than following the normal process flow. Event subprocesses reside within other subprocesses but remain outside the main sequence flow until activated. +Configure an event subprocess using the the [`event`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnEvent##BpmnEvent) and [`trigger`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnEvent#trigger) property of the subprocess. The [`type`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnSubProcess#type)property determines whether the subprocess is an event subprocess or transaction subprocess. {% tabs %} {% highlight js tabtitle="index.jsx" %} {% include code-snippet/diagram/bpmnShapes/es5EventSub-cs1/app/index.jsx %} @@ -197,17 +193,15 @@ A subprocess is defined as an event subprocess, when it is triggered by an event {% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes/es5EventSub-cs1" %} -##### Transaction subprocess - -* [`transaction`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnSubProcess#transaction) is a set of activities that logically belong together, in which all contained activities must complete their parts of the transaction; otherwise the process is undone. The execution result of a transaction is one of Successful Completion, Unsuccessful Completion (Cancel), and Hazard (Exception). The [`events`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnSubProcess#events) property of subprocess allows to represent these results as an event attached to the subprocess. - -* The event object allows you to define the type of event by which the subprocess will be triggered. The name of the event can be defined to identify the event at runtime. - -* The event’s offset property is used to set the fraction/ratio (relative to parent) that defines the position of the event shape. +##### Transaction Subprocess -* The trigger property defines the type of the event trigger. +* [`transaction`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnSubProcess#transaction) is a set of activities that logically belong together, in which all contained activities must complete their parts of the transaction; otherwise the process is undone. The execution result of a transaction is one of Successful Completion, Unsuccessful Completion (Cancel), and Hazard (Exception). The `events` property allows representation of these results as events attached to the subprocess. Configure event properties as follows: -* You can also use define ports and labels to subprocess events by using event’s ports and labels properties. +* **Event type**: Defines the triggering event type for the subprocess. +* **Event name**: Identifies the event during runtime. +* **Offset**: Sets the event shape position relative to the parent (as a fraction/ratio). +* **Trigger**: Specifies the event trigger type. +* **Ports and labels**: Define additional interaction points and descriptive text. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/diagram/bpmn-dataObject.md b/ej2-react/diagram/bpmn-dataObject.md index 32bcf1ef6..57fc2cc49 100644 --- a/ej2-react/diagram/bpmn-dataObject.md +++ b/ej2-react/diagram/bpmn-dataObject.md @@ -1,18 +1,25 @@ --- layout: post -title: Bpmn DataObject in React Diagram component | Syncfusion® -description: Learn here all about Bpmn shapes in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: BPMN DataObject in React Diagram Component | Syncfusion® +description: Learn how to create and configure BPMN data objects including input, output, and collection types in Syncfusion® React Diagram Component. control: Bpmn DataObject platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# BPMN Data object in React Diagram component +# BPMN Data Object in React Diagram Component -## Data Object +## Overview -A data object represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [`data object`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnDataObject), set the shape as **DataObject** and the type property defines whether data is an input or an output. You can create multiple instances of data object with the collection property of data. +A BPMN data object represents information that flows through a business process. Data objects can represent data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. In business process modeling, data objects help visualize how information moves through different process activities. + +## Creating Data Objects +To create a BPMN data object in the React Diagram component, set the shape type as [`data object`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnDataObject). The [`type`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnDataObject/#type) property determines whether the data object represents input data, output data, or a collection of data items. + +### Basic Data Object Configuration + +The following example demonstrates how to create a basic BPMN data object:. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -25,7 +32,20 @@ A data object represents information flowing through the process, such as data p {% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes/es5Data-cs1" %} -The following table contains various representation of BPMN data object. +## Data Object Types + +BPMN data objects support three distinct types, each serving different purposes in process modeling: + +### Collection Data Object +Represents multiple instances of data items. Use this type when the process handles collections of information such as lists, arrays, or multiple documents. + +### Data Input +Represents data that enters the process from external sources. This type indicates information required by the process to execute successfully. + +### Data Output +Represents data generated or modified by the process. This type shows information produced as a result of process execution. + +The following table shows the visual representation of each data object type: | Boundary | Image | | -------- | -------- | diff --git a/ej2-react/diagram/bpmn-dataSource.md b/ej2-react/diagram/bpmn-dataSource.md index 32ba2bfb8..4db02b64b 100644 --- a/ej2-react/diagram/bpmn-dataSource.md +++ b/ej2-react/diagram/bpmn-dataSource.md @@ -1,21 +1,29 @@ --- layout: post -title: Bpmn DataSource in React Diagram component | Syncfusion® -description: Learn here all about Bpmn shapes in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: BPMN DataSource in React Diagram Component | Syncfusion® +description: Learn how to create and configure BPMN data source shapes in Syncfusion® React Diagram Component for business process modeling. control: Bpmn DataSource platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# BPMN Data source in React Diagram component +# BPMN Data Source in React Diagram Component -## Datasource +## Overview -Datasource is used to store or access data associated with a business process. To create a datasource, set the shape as **datasource**. The following code example illustrates how to create a datasource. +BPMN data sources represent information that is required for or produced by business process activities. Data sources are essential elements in business process modeling that indicate where data comes from, how it flows through the process, and where it is stored or accessed. + +## Creating a Data Source + +To create a BPMN data source shape in the React Diagram component, set the shape type as **BpmnShape** and specify the shape property as **DataSource**. Data sources are typically used to represent databases, files, or other data repositories that business processes interact with. ![DataSource BPMN Shape](images/Datasource.png) +### Basic Data Source Implementation + +The following code example demonstrates how to create a basic BPMN data source shape: + {% tabs %} {% highlight js tabtitle="index.jsx" %} {% include code-snippet/diagram/bpmnShapes/es5Datasource-cs1/app/index.jsx %} diff --git a/ej2-react/diagram/bpmn-events.md b/ej2-react/diagram/bpmn-events.md index d20fb75e0..97289307f 100644 --- a/ej2-react/diagram/bpmn-events.md +++ b/ej2-react/diagram/bpmn-events.md @@ -1,28 +1,29 @@ --- layout: post -title: Bpmn Events in React Diagram component | Syncfusion® -description: Learn here all about Bpmn shapes in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: BPMN Events in React Diagram Component | Syncfusion® +description: Learn about BPMN event shapes including start, intermediate, and end events with triggers in Syncfusion® React Diagram Component. control: Bpmn Events platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# BPMN Event in React Diagram component +# BPMN Event in React Diagram Component -## Event +## Overview -An [`event`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnEvent) is a common BPMN process model element that represents something that happens during a business process and is notated with a circle. The type of events are as follows: +An [`event`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnEvent) is a common BPMN process model element that is notated with a circle. Events can occur at the beginning, middle, or end of a process flow. - * Start - * Intermediate - * NonInterruptingStart - * NonInterruptingIntermediate - * ThrowingIntermediate - * End - -The [`event`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnEvent#event-bpmnevents) property of the node allows you to define the type of the event. The default value of the event is **start**. The following code example illustrates how to create a BPMN event. +The types of events are as follows: +* Start +* Intermediate +* NonInterruptingStart +* NonInterruptingIntermediate +* ThrowingIntermediate +* End + +The `event`property of the node allows you to define the type of the event. The default value of the event is **start**. The following code example illustrates how to create a BPMN event. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -35,7 +36,9 @@ The [`event`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnEve {% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes/es5Event-cs1" %} -Event triggers are notated as icons inside the circle and they represent the specific details of the process. The [`trigger`](https://helpej2.syncfusion.com/react/documentation/api/diagram/bpmnEvent/#trigger) property of the node allows you to set the type of trigger and by default, it is set as **none**. The following table illustrates the type of event triggers. +## BPMN Event Trigger + +Event triggers are notated as icons inside the circle and represent the specific circumstances that cause the event to occur. The [`trigger`](https://helpej2.syncfusion.com/react/documentation/api/diagram/bpmnEvent/#trigger) property of the node allows you to set the type of trigger and by default, it is set as **none**. The following table illustrates the types of event triggers available for each event type. | Triggers | Start | Non-Interrupting Start | Intermediate | Non-Interrupting Intermediate | Throwing Intermediate | End | | -------- | -------- | -------- | -------- | -------- | -------- | -------- | diff --git a/ej2-react/diagram/bpmn-expandedSubProcess.md b/ej2-react/diagram/bpmn-expandedSubProcess.md index 9ad771388..54bf4a1bc 100644 --- a/ej2-react/diagram/bpmn-expandedSubProcess.md +++ b/ej2-react/diagram/bpmn-expandedSubProcess.md @@ -1,20 +1,24 @@ --- layout: post -title: Bpmn Expanded subProcess in React Diagram component | Syncfusion® -description: Learn here all about Bpmn shapes in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: BPMN Expanded SubProcess in React Diagram component | Syncfusion® +description: Learn how to create and manage BPMN expanded subprocess shapes with child processes in Syncfusion® React Diagram component of Syncfusion Essential® JS 2. control: Bpmn Expanded subProcess platform: ej2-react documentation: ug domainurl: ##DomainURL## --- +# BPMN Expanded SubProcess -## Expanded SubProcess -An expanded subProcess can contain certain child processess within it. +## Overview -### Create BPMN Expanded subProcess +An expanded subprocess is a BPMN shape that represents a complex process containing multiple child processes within it. Unlike collapsed subprocesses, expanded subprocesses display their internal structure and allow users to view and interact with the child processes directly. This makes them ideal for detailed process modeling where visibility into subprocess components is essential. -To create expanded subProcess, set shape as [`activity`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnActivityModel/) and [`collapsed`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnSubProcessModel/#collapsed) as false. Enable [`AllowDrop`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeConstraints/) constraint for node to allow child to drop inside the expanded subProcess. +The expanded subprocess automatically adjusts its size to accommodate child elements and provides a container-like behavior for organizing related BPMN activities. + +### Create BPMN Expanded SubProcess + +To create an expanded subprocess, configure the shape as[`activity`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnActivityModel/) and [`collapsed`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnSubProcessModel/#collapsed) to false. Enable the [`AllowDrop`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeConstraints/) constraint to allow child nodes to be dropped inside the expanded subprocess container. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -27,11 +31,11 @@ To create expanded subProcess, set shape as [`activity`](https://ej2.syncfusion. {% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes/es5expand-cs1" %} -### Add BPMN nodes into ExpandedSubProcess +### Add BPMN Nodes into Expanded SubProcess -[`Processes`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnSubProcessModel/#processes) is an array collection that defines the children values for BPMN subprocess. +The [`Processes`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnSubProcessModel/#processes)property is an array collection that defines the child node values for the BPMN subprocess. This allows you to programmatically specify which BPMN elements should be contained within the expanded subprocess during initialization. -Please refer the following code example. +The following code example demonstrates how to define child processes within an expanded subprocess: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -44,19 +48,19 @@ Please refer the following code example. {% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes/es5expand-cs2" %} - -### Add BPMN nodes into ExpandedSubProcess at runtime +### Add BPMN Nodes into Expanded SubProcess at Runtime -Drag and drop the BPMN nodes to the BPMN ExpandedSubProcess. -While resizing or dragging the child element, if the child element bounds are within the ExpandedSubProcess bounds, the ExpandedSubProcess size will be updated along with that. +Users can drag and drop BPMN nodes directly onto the expanded subprocess container during runtime. The expanded subprocess automatically maintains proper containment by monitoring the bounds of child elements. When a child element is resized or repositioned within the subprocess boundaries, the expanded subprocess container dynamically adjusts its size to accommodate the changes. -The following image shows how to add BPMNNode into the BPMN ExpandedSubProcess at runtime. +This interactive behavior ensures that the subprocess container always properly encompasses all its child processes while maintaining visual clarity and proper BPMN structure. ![Expanded subProcess BPMN Shape](images/expanded-Gif.gif) -#### Add/remove Process Programmatically +#### Add/Remove Process Programmatically + +The expanded subprocess supports dynamic process management through dedicated methods. Use the [`addProcess`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addprocess) method to add new child processes at runtime, and the [`removeProcess`](https://ej2.syncfusion.com/react/documentation/api/diagram/#removeprocess) method to remove existing processes. These methods provide programmatic control over subprocess content without requiring manual manipulation. -The process for the expanded sub-process can be added at runtime using the [`addProcess`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addprocess) method and removed at runtime using the [`removeProcess`](https://ej2.syncfusion.com/react/documentation/api/diagram/#removeprocess) method. The following example shows how to add and remove a process at runtime. +The following example demonstrates how to implement dynamic process addition and removal: {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/diagram/bpmn-flows.md b/ej2-react/diagram/bpmn-flows.md index 45acb89ad..60796b32f 100644 --- a/ej2-react/diagram/bpmn-flows.md +++ b/ej2-react/diagram/bpmn-flows.md @@ -1,30 +1,36 @@ --- layout: post -title: Bpmn Flows in React Diagram component | Syncfusion® -description: Learn here all about Bpmn shapes in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: BPMN Flows in React Diagram Component | Syncfusion® +description: Learn here all about Bpmn flows in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Bpmn Flows platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# BPMN flows in React Diagram component +# BPMN flows in React Diagram Component -[`BPMN Flows`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnFlow#BpmnFlow) are lines that connects BPMN flow objects. +## Overview -* Association -* Sequence -* Message +[`BPMN Flows`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnFlow#BpmnFlow) are connecting lines that define relationships and information flow between BPMN elements in business process diagrams. These flows are essential for modeling how activities, events, and gateways interact within a process workflow. -## Association flow +BPMN flows are categorized into three main types: -[`BPMN Association`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnFlow#association) flow is used to link flow objects with its corresponding text or artifact. An association is represented as a dotted graphical line with opened arrow. The types of association are as follows: +* **Association** - Links flow objects with supporting text or artifacts. +* **Sequence** - Shows the execution order of activities in a process. +* **Message** - Represents communication between different process participants. -* Directional -* BiDirectional -* Default +## Association Flow -The `association` property allows you to define the type of association. The following code example illustrates how to create an association. +[`BPMN Association`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnFlow#association) flows connect BPMN flow objects with their corresponding text annotations or artifacts. Association flows are represented as dotted lines with open arrowheads and do not affect the sequence or execution of the process. + +The association flow supports three types: + +* **Directional** - Shows a one-way association from source to target. +* **BiDirectional** - Indicates a two-way association between elements. +* **Default** - A simple association without directional emphasis. + +The `association` property allows you to define the type of association. The following code example illustrates how to create an association flow: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -47,15 +53,17 @@ The following table demonstrates the visual representation of association flows. N> The default value for the property `association` is **default**. -## Sequence flow +## Sequence Flow -A [`sequence`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnFlow#sequence) flow shows the order in which the activities are performed in a BPMN process and is represented by a solid graphical line. The types of sequence are as follows: +A [`Sequence`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnFlow#sequence) flow defines the execution order of activities, events, and gateways within a BPMN process. Sequence flows are represented by solid lines with closed arrowheads and control the flow of the process from one element to the next. -* Normal -* Conditional -* Default +The sequence flow supports three types: -The sequence property allows you to define the type of sequence. The following code example illustrates how to create a sequence flow. +* **Normal** - Standard flow path without special conditions. +* **Conditional** - Flow that occurs only when specific conditions are met. +* **Default** - Alternative flow path when conditional flows are not satisfied. + +The `sequence` property allows you to define the type of sequence flow. The following code example illustrates how to create a sequence flow: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -68,7 +76,7 @@ The sequence property allows you to define the type of sequence. The following c {% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes/es5Sequence-cs1" %} -The following table contains various representation of sequence flows. +The following table contains various representations of sequence flows: | Sequence | Image | | -------- | -------- | @@ -76,17 +84,19 @@ The following table contains various representation of sequence flows. | Conditional | ![Conditional Sequence BPMN Shpae](images/Conditional.png) | | Normal | ![Normal Sequence BPMN Shpae](images/Normal.png) | ->Note: The default value for the property `sequence` is **normal**. +N> The default value for the property `sequence` is **normal**. + +## Message Flow -## Message flow +A [`Message`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnFlow#message) flow represents the exchange of messages between different participants or pools in a BPMN process. Message flows are depicted as dashed lines and show communication that crosses organizational boundaries. -A [`message`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnFlow#message) flow shows the flow of messages between two participants and is represented by dashed line. The types of message are as follows: +The message flow supports three types: -* InitiatingMessage -* NonInitiatingMessage -* Default +* **InitiatingMessage** - Message that starts a process or triggers an activity. +* **NonInitiatingMessage** - Message that provides information but does not start a process. +* **Default** - Standard message flow without special initiation properties. -The message property allows you to define the type of message. The following code example illustrates how to define a message flow. +The `message` property allows you to define the type of message flow. The following code example illustrates how to define a message flow: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -99,7 +109,7 @@ The message property allows you to define the type of message. The following cod {% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes/es5Message-cs1" %} -The following table contains various representation of message flows. +The following table contains various representations of message flows: | Message | Image | | -------- | -------- | diff --git a/ej2-react/diagram/bpmn-gateway.md b/ej2-react/diagram/bpmn-gateway.md index 077644273..5aacb31d9 100644 --- a/ej2-react/diagram/bpmn-gateway.md +++ b/ej2-react/diagram/bpmn-gateway.md @@ -1,17 +1,23 @@ --- layout: post -title: Bpmn Gateway in React Diagram component | Syncfusion® -description: Learn here all about Bpmn shapes in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: BPMN Gateway in React Diagram Component | Syncfusion® +description: Learn how to create and configure BPMN gateways in Syncfusion React Diagram Component to control process flows with various gateway types. control: Bpmn Gateway platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# BPMN Gateway in React Diagram component +# BPMN Gateway in React Diagram Component + +## Overview + +BPMN (Business Process Model and Notation) gateways are crucial elements that control the flow of processes in business workflow diagrams. Gateways determine how process flows diverge or converge based on specific conditions, making them essential for modeling complex business logic and decision points. ## Gateway -Gateway is used to control the flow of a process and it is represented as a diamond shape. To create a gateway, the shape property of the node should be set as [`gateway`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnGateways) and the gateway property can be set with any of the appropriate gateways. The following code example illustrates how to create a BPMN Gateway. +A gateway is represented as a diamond shape and serves as a decision point that controls the sequence flow within a process. Gateways can split a single incoming flow into multiple outgoing flows or merge multiple incoming flows into a single outgoing flow. + +To create a gateway in the React Diagram component, set the shape property of the node to "gateway" and configure the [`gateway`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnGateways) property with the appropriate gateway type. The following code example demonstrates how to create a basic BPMN gateway. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -26,8 +32,9 @@ Gateway is used to control the flow of a process and it is represented as a diam N> By default, the `gateway` will be set as **none**. -There are several types of gateways as tabulated: +## Gateway Types +The React Diagram component supports various gateway types, each serving specific process control requirements: | Shape | Image | | -------- | -------- | | Exclusive | ![Exclusive GateWay BPMN Shape](images/Exclusive.png) | diff --git a/ej2-react/diagram/bpmn-groups.md b/ej2-react/diagram/bpmn-groups.md index 540df8d10..d6560048f 100644 --- a/ej2-react/diagram/bpmn-groups.md +++ b/ej2-react/diagram/bpmn-groups.md @@ -1,17 +1,22 @@ --- layout: post -title: Bpmn Group in React Diagram component | Syncfusion® -description: Learn here all about Bpmn shapes in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: BPMN Group in React Diagram Component | Syncfusion® +description: Learn how to create and customize BPMN group shapes for organizing related elements in Syncfusion® React Diagram Component. control: Bpmn Group platform: ej2-react documentation: ug domainurl: ##DomainURL## --- +# BPMN Group in React Diagram Component -## Group +## Overview -A group is used to frame a part of the diagram, shows that elements included in it are logically belong together and does not have any other semantics other than organizing elements. To create a group, the shape property of the node should be set as **group**. The following code example illustrates how to create a BPMN group. +A BPMN group is a visual mechanism used to organize and frame related elements within a business process diagram. Groups indicate that the enclosed elements logically belong together while providing no additional semantic meaning beyond visual organization. Unlike other BPMN constructs, groups serve purely as organizational containers to improve diagram readability and structure. + +## Creating a BPMN Group + +To create a BPMN group, set the [`shape`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnShapes/) property of the node to **group**. The group appears as a rounded rectangle with dashed borders that encompasses the grouped elements. ![BPMN Group Shape](images/Group.png) diff --git a/ej2-react/diagram/bpmn-shapes.md b/ej2-react/diagram/bpmn-shapes.md index a5640f022..0e4a212de 100644 --- a/ej2-react/diagram/bpmn-shapes.md +++ b/ej2-react/diagram/bpmn-shapes.md @@ -1,18 +1,20 @@ --- layout: post -title: Bpmn shapes in React Diagram component | Syncfusion® -description: Learn here all about Bpmn shapes in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: BPMN shapes in React Diagram Component | Syncfusion® +description: Learn to create and configure BPMN shapes in the Syncfusion React Diagram Component for modeling business processes with events, gateways, and tasks. control: Bpmn shapes platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Bpmn shapes in React Diagram component +# BPMN Shapes in React Diagram Component -BPMN shapes are used to represent the internal business procedure in a graphical notation and enable you to communicate the procedures in a standard manner. To create a BPMN shape, in the node property shape, type should be set as “bpmn” and its shape should be set as any one of the built-in shapes. The following code example illustrates how to create a simple business process. +BPMN (Business Process Model and Notation) shapes are standardized graphical elements used to represent business processes in a visual workflow. These shapes enable teams to communicate business procedures clearly and consistently across organizations. The React Diagram component provides comprehensive support for creating BPMN diagrams with all standard shape types. -N> If you want to use BPMN shapes in diagram, you need to inject BpmnDiagrams in the diagram. +To create a BPMN shape, set the node's shape type property to **BPMN** and specify the shape property as one of the available built-in shapes. Each BPMN shape serves a specific purpose in modeling business processes, from representing events and activities to showing data flow and decision points. + +> **Important**: To use BPMN shapes in the diagram, inject the BpmnDiagrams module into the diagram component. This module provides the necessary functionality for rendering and managing BPMN-specific features. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -25,10 +27,11 @@ N> If you want to use BPMN shapes in diagram, you need to inject BpmnDiagrams in {% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes/es5bpmn-cs1" %} ->Note : The default value for the property `shape` is “event”. +>Note : The default value for the property `shape` is **event**. -The list of BPMN shapes are as follows: +## Available BPMN Shapes +The react Diagram component supports the following standard BPMN shapes: | Shape | Image | | -------- | -------- | | Event | ![Event Shape](images/Event.png) | @@ -39,6 +42,26 @@ The list of BPMN shapes are as follows: | DataObject | ![Dataobject Shape](images/Dataobject.png) | | Group | ![Group Shape](images/Group.png) | -The BPMN shapes and its types are explained as follows. +## BPMN Shape Types and Configuration + +Each BPMN shape category includes multiple subtypes that can be configured to represent specific business process elements. The shapes can be customized with various properties to match specific modeling requirements and visual preferences. + +### Events +Events represent specific occurrences that trigger, interrupt, or conclude process flows. They include start events, intermediate events, and end events, each serving different purposes in process modeling. + +### Gateways +Gateways control the sequence flow within a process by determining how paths converge and diverge. They include exclusive, inclusive, parallel, and complex gateway types for different decision-making scenarios. + +### Tasks +Tasks represent atomic work activities that cannot be broken down further. They can be configured as user tasks, service tasks, manual tasks, or other specialized task types depending on the nature of the work. + +### Data Elements +Data objects and data sources represent information that flows through or supports the business process, helping to model how data is created, used, and stored throughout the workflow. + +## Best Practices - +- Use consistent shape sizing and positioning to maintain visual clarity. +- Apply appropriate shape subtypes to accurately represent business logic. +- Ensure proper sequence flow connections between shapes. +- Group related elements using the Group shape for better organization. +- Follow BPMN 2.0 standards for shape usage and process flow modeling. \ No newline at end of file diff --git a/ej2-react/diagram/bpmn-textAnnotation.md b/ej2-react/diagram/bpmn-textAnnotation.md index a8923b39c..8562319b7 100644 --- a/ej2-react/diagram/bpmn-textAnnotation.md +++ b/ej2-react/diagram/bpmn-textAnnotation.md @@ -1,32 +1,30 @@ --- layout: post -title: Bpmn Text annotation in React Diagram component | Syncfusion® -description: Learn here all about Bpmn shapes in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. -control: Bpmn Text annotation +title: BPMN Text Annotation in React Diagram Component | Syncfusion® +description: Learn how to create, configure, and manage BPMN text annotations in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. +control: Bpmn Text annotation platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# BPMN text annotation in React Diagram component +# BPMN Text Annotation in React Diagram Component -## Text annotation +## Overview -* A BPMN object can be associated with a text annotation which does not affect the flow but gives details about objects within a flow. +A BPMN object can be associated with a text annotation that provides additional details about objects within a flow without affecting the actual process flow. Text annotations serve as documentation elements that help explain or clarify specific aspects of the BPMN diagram. -* A TextAnnotation points to or references another BPMN shape, which we call the `textAnnotationTarget` of the textAnnotation. When a target shape is moved or deleted, any TextAnnotations attached to the shape will be moved or deleted too. Thus, the TextAnnotations remain with their target shapes though you can reposition the TextAnnotation to any offset from its target. The `textAnnotationTarget` property of the BpmnTextAnnotation is used to connect an annotation element to the BPMN Node. +A TextAnnotation points to or references another BPMN shape through the [`textAnnotationTarget`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnTextAnnotation/#textannotationtarget) property. When the target shape is moved or deleted, any TextAnnotations attached to the shape will automatically move or be deleted as well. This ensures that TextAnnotations remain associated with their target shapes, though the TextAnnotation can be repositioned to any offset from its target. -* The annotation element can be switched from a BPMN node to another BPMN node simply by dragging the source end of the annotation connector into the other BPMN node. +The annotation element can be switched from one BPMN node to another by simply dragging the source end of the annotation connector to the desired BPMN node. By default, the TextAnnotation shape includes a connection to its target. * By default, the TextAnnotation shape has a connection. -* The `textAnnotationDirection` property is used to set the shape direction of the text annotation. +The [`textAnnotationDirection`](https://helpej2.syncfusion.com/react/documentation/api/diagram/bpmnTextAnnotation/#textannotationdirection) property controls the shape direction of the text annotation. By default, this property is set to **Auto**, which automatically determines the optimal direction based on the target's position. -* By default, the `textAnnotationDirection` is set to a Auto. +To set the size for text annotation, use the [`width`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#height) properties of the node. -* To set the size for text annotation, use the `width` and `height` properties of the node. - -* The `offsetX` and `offsetY` properties are used to set the distance between the BPMN node and the TextAnnotation. +The [`offsetX`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnTextAnnotation/#offsetx) and [`offsetY`](https://ej2.syncfusion.com/react/documentation/api/diagram/bpmnTextAnnotation/#offsety) properties determine the distance between the BPMN node and the TextAnnotation. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -39,9 +37,9 @@ domainurl: ##DomainURL## {% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes/es5Text-cs1" %} -### Text annotation in palette. +### Text Annotation in Palette. -Text annotation node can be rendered in symbol palette like other bpmn shapes. The following example shows how to render Bpmn text annotation node in symbol palette. +Text annotation nodes can be rendered in the symbol palette alongside other BPMN shapes. The following example demonstrates how to render BPMN text annotation nodes in the symbol palette. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -54,18 +52,17 @@ Text annotation node can be rendered in symbol palette like other bpmn shapes. T {% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes/es5Text1-cs1" %} -### Connect the TextAnnotation to BPMN node +### Connect the TextAnnotation to BPMN Node -Drag and drop any bpmn shapes from the palette to diagram and connect the BPMN Node and textAnnotation. +Users can drag and drop any BPMN shapes from the palette to the diagram and establish connections between BPMN nodes and text annotations through interactive manipulation. -The following image shows how to drag a symbol from the palette and connect the textAnnotation to the BPMNNode with interaction. +The following image demonstrates how to drag a symbol from the palette and connect the text annotation to a BPMN node using interaction. ![Text annotation GIF](images/textAnnotationGif.gif) -### Text annotation direction - -There are several types of Text annotation directions as follows: +### Text Annotation Direction +The text annotation supports several directional orientations to optimize the visual layout of the diagram: | Text annotation direction | Image | | -------- | -------- | | Auto | ![BPMN text annotation direction auto](images/bpmn-textannotation-auto.png) | @@ -74,10 +71,10 @@ There are several types of Text annotation directions as follows: | Top | ![BPMN text annotation direction top](images/bpmn-textannotation-top.png) | | Bottom | ![BPMN text annotation direction bottom](images/bpmn-textannotation-bottom.png) | -### Add text annotation at runtime - -Text annotations can be added dynamically using either the [`addTextAnnotation`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addtextannotation) method or the [`add`](https://ej2.syncfusion.com/react/documentation/api/diagram/#add) method of the diagram. The following example shows how to use these methods to add a text annotation node. +### Add Text Annotation at Runtime +Text annotations can be added dynamically using either the [`addTextAnnotation`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addtextannotation) method or the [`add`](https://ej2.syncfusion.com/react/documentation/api/diagram/#add) method of the diagram. The following example shows how to use these methods to add a text annotation node programmatically. + {% tabs %} {% highlight js tabtitle="index.jsx" %} {% include code-snippet/diagram/bpmnShapes/es5Text2-cs1/app/index.jsx %} diff --git a/ej2-react/diagram/complex-layout.md b/ej2-react/diagram/complex-layout.md index 99c249a1b..54849db9a 100644 --- a/ej2-react/diagram/complex-layout.md +++ b/ej2-react/diagram/complex-layout.md @@ -9,15 +9,14 @@ domainurl: ##DomainURL## --- -# Complex hierarchical tree layout in React Diagram control +# Complex Hierarchical Tree Layout in React Diagram Component -Complex hierarchical tree layout arranges nodes in a tree-like structure, where the child node can have more than one parent. This layout is an extended version of the hierarchical tree layout. To create a complex hierarchical tree, the [`type`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#type) property of layout should be set as `ComplexHierarchicalTree`. +Complex hierarchical tree layout arranges nodes in a tree-like structure where child nodes can have multiple parent nodes, creating interconnected relationships beyond traditional single-parent hierarchies. This layout type is ideal for organizational charts with dotted-line relationships, project dependencies, or any structure where entities report to multiple authorities. This layout extends the standard hierarchical tree layout to support these complex relationships. +To create a complex hierarchical tree, set the [`type`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#type) property of layout to **ComplexHierarchicalTree**. +## Complex Hierarchical Tree Layout with Nodes and Connectors -## Complex hierarchical tree layout with nodes and connectors - -The following example demonstrates how to render a complex hierarchical tree layout using nodes and connectors. To achieve this, you need to define the nodes and connectors collections and assign them to the diagram. Additionally, you need to set the layout type to `ComplexHierarchicalTree`. - +This example demonstrates how to create a complex hierarchical tree layout by manually defining nodes and connectors. The layout automatically positions nodes based on their hierarchical relationships while handling multiple parent-child connections. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -31,10 +30,9 @@ The following example demonstrates how to render a complex hierarchical tree lay {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1" %} -## Complex hierarchical tree layout with DataSource - -The following code example illustrates how to create a complex hierarchical tree with DataSource. +## Complex Hierarchical Tree Layout with DataSource +When working with large datasets, binding the layout to a data source provides better maintainability and dynamic content management. The following example shows how to create a complex hierarchical tree using a data source configuration. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -50,12 +48,12 @@ The following code example illustrates how to create a complex hierarchical tree ![Complex hierarchical tree layout](images/complex-2.png) ->Note: In Diagram Layouts, all root nodes will always render at the same level. This default behavior cannot be changed to render different trees at distinct levels. +>Note: In Diagram layouts, all root nodes will always render at the same level. This default behavior cannot be changed to render different trees at distinct levels. ## Line Distribution -Line distribution is used to arrange the connectors without overlapping in automatic layout. In some cases, the automatic layout connectors connecting to the nodes will be overlapped with one another. So user can decide whether the segment of each connector from a single parent node should be same point or different point. The [`connectionPointOrigin`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectionPointOrigin/#connectionpointorigin) property of layout is used to enable or disable the line distribution in layout. By default ConnectionPointOrigin will be `SamePoint`. +Line distribution prevents connector overlap by controlling how multiple connectors from a single parent node are positioned. Without line distribution, connectors may overlap and create visual confusion in complex layouts. The [`connectionPointOrigin`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectionPointOrigin/#connectionpointorigin) property of layout is used to enable or disable the line distribution in layout. By default ConnectionPointOrigin will be **SamePoint**. The following code example illustrates how to create a complex hierarchical tree with line distribution. @@ -79,7 +77,10 @@ The following code example illustrates how to create a complex hierarchical tree ## Linear Arrangement -Linear arrangement is used to linearly arrange the child nodes in layout, which means the parent node is placed in the center corresponding to its children. When line distribution is enabled, linear arrangement is also activated by default. The [`arrangement`](https://ej2.syncfusion.com/react/documentation/api/diagram/childarrangement/) property of layout is used to enable or disable the linear arrangement in layout. By default arrangement will be `Nonlinear`. +Linear arrangement is used to linearly arrange the child nodes in layout, which means the parent node is placed in the center corresponding to its children. When line distribution is enabled, linear arrangement is also activated by default. The [`arrangement`](https://ej2.syncfusion.com/react/documentation/api/diagram/childarrangement/) property provides control over this feature: + +- **Nonlinear (default)**: Child nodes are arranged based on available space +- **Linear**: Child nodes are arranged in a straight line with the parent centered. By default arrangement will be **Nonlinear**. >Note: If you want to use linear arrangement in diagram layout, you need to inject LineDistribution module in the diagram. Linear arrangement is applicable only for complex hierarchical tree layout. @@ -99,11 +100,11 @@ The following code illustrates how to allow a linear arrangement in diagram layo -## Enable routing for layout +## Enable Routing for Layout -In some complex parent-child relationships, connectors may overlap nodes in the layout. To address this issue, you can utilize the enableRouting functionality. This feature finds a connector path that avoids any obstacles. +In complex diagrams with intricate parent-child relationships, connectors may pass through or overlap with nodes, making the diagram difficult to read. Routing functionality automatically calculates connector paths that avoid intersecting with nodes and other obstacles. -To enable routing in the layout, set the [`enableRouting`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#enablerouting) property to true. +Set the [`enableRouting`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#enablerouting) property to **true** to activate intelligent connector routing. The following example shows how to activate enableRouting in the layout: @@ -118,3 +119,11 @@ The following example shows how to activate enableRouting in the layout: {% endtabs %} {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5" %} + +## Best Practices + +- Use data source binding for dynamic content and better maintainability. +- Enable line distribution when dealing with nodes that have multiple connections. +- Consider enabling routing for complex layouts to improve visual clarity. +- Test layout performance with large datasets and optimize as needed. +- Ensure proper module injection for advanced features like line distribution. \ No newline at end of file diff --git a/ej2-react/diagram/flowchart-layout.md b/ej2-react/diagram/flowchart-layout.md index d5133d6f4..2d90d4583 100644 --- a/ej2-react/diagram/flowchart-layout.md +++ b/ej2-react/diagram/flowchart-layout.md @@ -1,57 +1,56 @@ --- layout: post -title: Flowchart layout in React Diagram component | Syncfusion® -description: Learn here all about Flowchart layout in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Flowchart layout in React Diagram Component | Syncfusion® +description: Learn here all about Flowchart layout in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Flowchart layout platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Flowchart layout in React Diagram control +# Flowchart Layout in React Diagram Component The flowchart layout provides a visual representation of processes, workflows, systems, or algorithms in a diagrammatic format. It uses various symbols to depict different actions, with arrows connecting these symbols to indicate the flow or direction of the process. Flowcharts are Essential® tools for illustrating step-by-step sequences, making complex processes easier to understand and communicate. -## Common flowchart symbols +## Common Flowchart Symbols -Different flowchart symbols have different meanings that are used to represent different states in flowchart. The following table describes the most common flowchart symbols that are used in creating flowchart. +Different flowchart symbols have specific meanings used to represent various states and actions in flowcharts. The following table describes the most common flowchart symbols used when creating flowcharts. |Symbol|Shape name|Description| |---|---|---| -|![Ej2 Diagram displays Terminator Symbol](./images/flowchart-images/FlowShapes_Terminator.png)|Terminator|Indicates the beginning and ending of the process.| -|![Ej2 Diagram displays Data Symbol](./images/flowchart-images/FlowShapes_Data.png)|Data|Indicates data input or output for a process.| -|![Ej2 Diagram displays Process Symbol](./images/flowchart-images/FlowShapes_Process.png)|Process|Represents an operation or set of operations and data manipulations.| -|![Ej2 Diagram displays Decision Symbol](./images/flowchart-images/FlowShapes_Decision.png)|Decision|Shows a branching point where the decision is made to choose one of the two paths| -|![Ej2 Diagram displays Document Symbol](./images/flowchart-images/FlowShapes_Document.png)|Document|Represents a single document or report in the process.| -|![Ej2 Diagram displays SubProcess Symbol](./images/flowchart-images/FlowShapes_PreDefinedProcess.png)|PreDefinedProcess|Represents a sequence of actions that combine to perform a specific task that is defined elsewhere.| -|![Ej2 Diagram displays Stored data Symbol](./images/flowchart-images/FlowShapes_StoredData.png)|StoredData|Represents a step where data get stored within a process.| -|![Ej2 Diagram displays internal storage Symbol](./images/flowchart-images/internalStorage.png)|InternalStorage|Represents the internal storage| -|![Ej2 Diagram displays DirectData Symbol](./images/flowchart-images/FlowShapes_DirectData.png)|DirectData|Represents a collection of information that allows searching, sorting, and filtering.| -|![Ej2 Diagram displays SequentialData Symbol](./images/flowchart-images/sequentialData.png)|SequentialData|Represents the data that must be accessed sequentially| -|![Ej2 Diagram displays SequentialData Symbol](./images/flowchart-images/sort.png)|Sort|Represents a step that organizes items list sequentially| -|![Blazor Diagrma displays StoredData Symbol](./images/flowchart-images/paperTap.png)|PaperTap|Represents a step where data get stored within a process.| -|![Ej2 Diagram displays ManualInput Symbol](./images/flowchart-images/FlowShapes_ManualInput.png)|ManualInput|Represents the manual input of data into a field or step in a process.| -|![Ej2 Diagram displays ManualOperation Symbol](./images/flowchart-images/FlowShapes_ManualOperation.png)|ManualOperation|Represents an operation in a process that must be done manually, not automatically.| -|![Ej2 Diagram displays Preparation Symbol](./images/flowchart-images/FlowShapes_Preparation.png)|Preparation|Represents a setup or initialization process to another step in the process.| -|![Ej2 Diagram displays OffPageReference Symbol](./images/flowchart-images/FlowShapes_OffPageReference.png)|OffPageReference|Represents a labeled connector used to link two flowcharts on different pages.| -|![Ej2 Diagram displays MultiDocument Symbol](./images/flowchart-images/FlowShapes_MultiDocument.png)|MultiDocument|Represents multiple documents or reports in the process.| -|![Ej2 Diagram displays card Symbol](./images/flowchart-images/card.png)|Card|Represents a data card or punched card used for data entry or storage | -|![Ej2 Diagram displays SummingJunction Symbol](./images/flowchart-images/summingJunction.png)|SummingJunction|Represents the logical AND (merge multiple inputs into a single output). | -|![Ej2 Diagram displays Or Symbol](./images/flowchart-images/or.png)|Or|Represents the logical OR| -|![Ej2 Diagram displays Merge Symbol](./images/flowchart-images/merge.png)|Merge|Represents a step where two or more sub-lists or sub-processes become one.| -|![Ej2 Diagram displays Extract Symbol](./images/flowchart-images/extract.png)|Extract|Represents retrieving or obtaining data from a source for further processing or analysis in a flowchart.| -|![Ej2 Diagram displays delay Symbol](./images/flowchart-images/delay.png)|Delay|Represents the period of delay in a process| -|![Ej2 Diagram displays Collate Symbol](./images/flowchart-images/collate.png)|Collate|Represents the process of gathering and arranging data or documents from multiple sources into a structured format.| -|![Ej2 Diagram displays Annotation Symbol](./images/flowchart-images/annotation.png)|Annotation|Represents additional information, clarifications, about a process or decision point in the flowchart.| -|![Ej2 Diagram displays Annotation2 Symbol](./images/flowchart-images/annotation2.png)|Annotation2|Represents additional information, or comments about a process in the flowchart.| -|![Ej2 Diagram displays Sequential access storage Symbol](./images/flowchart-images/sequentialAccess.png)|SequentialAccessStorage|Represents information that is stored in a sequence.| -|![Ej2 Diagram displays Display Symbol](./images/flowchart-images/display.png)|Display|Represents that the information, data, or output is being shown on a screen or printed for the user’s review.| -|![Ej2 Diagram displays Loop limit Symbol](./images/flowchart-images/looplimit.png)|LoopLimit|Represents a maximum number of times a particular process or operation can be repeated within a loop.| -|![Ej2 Diagram displays Connector Symbol](./images/flowchart-images/FlowShapes_Connector.png)|Connector|Represents a direction of flow from one step to another. It will get created automatically based on the relationship between the parent and child.| - -## Render Flowchart layout with data source - -To render `flowchart` layout, you need to set the [`layoutType`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#type) property as `Flowchart`. The following code example displays how to render flowchart layout using data source. - +|![Terminator Symbol for flowchart start and end points](./images/flowchart-images/FlowShapes_Terminator.png)|Terminator|Indicates the beginning and ending of the process.| +|![Data Symbol for input and output operations](./images/flowchart-images/FlowShapes_Data.png)|Data|Indicates data input or output for a process.| +|![Process Symbol for operations and data manipulation](./images/flowchart-images/FlowShapes_Process.png)|Process|Represents an operation or set of operations and data manipulations.| +|![Decision Symbol for branching points in flowchart](./images/flowchart-images/FlowShapes_Decision.png)|Decision|Shows a branching point where the decision is made to choose one of the two paths| +|![Document Symbol for single documents in process](./images/flowchart-images/FlowShapes_Document.png)|Document|Represents a single document or report in the process.| +|![PreDefined Process Symbol for defined task sequences](./images/flowchart-images/FlowShapes_PreDefinedProcess.png)|PreDefinedProcess|Represents a sequence of actions that combine to perform a specific task that is defined elsewhere.| +|![Stored Data Symbol for data storage steps](./images/flowchart-images/FlowShapes_StoredData.png)|StoredData|Represents a step where data get stored within a process.| +|![Internal Storage Symbol for internal data storage](./images/flowchart-images/internalStorage.png)|InternalStorage|Represents the internal storage| +|![Direct Data Symbol for searchable data collections](./images/flowchart-images/FlowShapes_DirectData.png)|DirectData|Represents a collection of information that allows searching, sorting, and filtering.| +|![Sequential Data Symbol for sequential data access](./images/flowchart-images/sequentialData.png)|SequentialData|Represents the data that must be accessed sequentially| +|![Sort Symbol for organizing data sequentially](./images/flowchart-images/sort.png)|Sort|Represents a step that organizes items list sequentially| +|![Paper Tape Symbol for data storage process](./images/flowchart-images/paperTap.png)|PaperTap|Represents a step where data get stored within a process.| +|![Manual Input Symbol for manual data entry](./images/flowchart-images/FlowShapes_ManualInput.png)|ManualInput|Represents the manual input of data into a field or step in a process.| +|![Manual Operation Symbol for manual process steps](./images/flowchart-images/FlowShapes_ManualOperation.png)|ManualOperation|Represents an operation in a process that must be done manually, not automatically.| +|![Preparation Symbol for setup and initialization](./images/flowchart-images/FlowShapes_Preparation.png)|Preparation|Represents a setup or initialization process to another step in the process.| +|![Off Page Reference Symbol for cross-page connectionsl](./images/flowchart-images/FlowShapes_OffPageReference.png)|OffPageReference|Represents a labeled connector used to link two flowcharts on different pages.| +|![Multi Document Symbol for multiple documents](./images/flowchart-images/FlowShapes_MultiDocument.png)|MultiDocument|Represents multiple documents or reports in the process.| +|![Card Symbol for data card operations](./images/flowchart-images/card.png)|Card|Represents a data card or punched card used for data entry or storage | +|![Summing Junction Symbol for logical AND operations](./images/flowchart-images/summingJunction.png)|SummingJunction|Represents the logical AND (merge multiple inputs into a single output). | +|![Or Symbol for logical OR operations](./images/flowchart-images/or.png)|Or|Represents the logical OR| +|![Merge Symbol for combining processes](./images/flowchart-images/merge.png)|Merge|Represents a step where two or more sub-lists or sub-processes become one.| +|![Extract Symbol for data retrieval operations](./images/flowchart-images/extract.png)|Extract|Represents retrieving or obtaining data from a source for further processing or analysis in a flowchart.| +|![Delay Symbol for process delays](./images/flowchart-images/delay.png)|Delay|Represents the period of delay in a process| +|![Collate Symbol for data gathering operations](./images/flowchart-images/collate.png)|Collate|Represents the process of gathering and arranging data or documents from multiple sources into a structured format.| +|![Annotation Symbol for additional information](./images/flowchart-images/annotation.png)|Annotation|Represents additional information, clarifications, about a process or decision point in the flowchart.| +|![Annotation2 Symbol for comments and notes](./images/flowchart-images/annotation2.png)|Annotation2|Represents additional information, or comments about a process in the flowchart.| +|![Sequential Access Storage Symbol for sequential storage](./images/flowchart-images/sequentialAccess.png)|SequentialAccessStorage|Represents information that is stored in a sequence.| +|![Display Symbol for output presentation](./images/flowchart-images/display.png)|Display|Represents that the information, data, or output is being shown on a screen or printed for the user’s review.| +|![Loop Limit Symbol for loop constraints](./images/flowchart-images/looplimit.png)|LoopLimit|Represents a maximum number of times a particular process or operation can be repeated within a loop.| +|![Connector Symbol for flow direction](./images/flowchart-images/FlowShapes_Connector.png)|Connector|Represents a direction of flow from one step to another. It will get created automatically based on the relationship between the parent and child.| + +## Render Flowchart layout with Data Source + +To render a flowchart layout, set the [`layoutType`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#type) property to **Flowchart**. The following code example demonstrates how to render a flowchart layout using a data source. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -70,9 +69,9 @@ To render `flowchart` layout, you need to set the [`layoutType`](https://ej2.syn >Note: If you want to convert the data source into flowchart layout, you need to inject DataBinding along with FlowchartLayout module in the diagram. -## Defining data source with appearance configuration +## Configuring Data Source with Appearance Settings -In the flowchart layout, you can define the desired shape, style, and label for each node, as well as the decorator type for connectors, directly within the data source. The data source should be structured as shown in the example below: +In the flowchart layout, you can define the desired shape, style, and label for each node, as well as the decorator type for connectors, directly within the data source. Structure the data source as shown in the example below: ```javascript var Data = [ @@ -103,21 +102,22 @@ In the flowchart layout, you can define the desired shape, style, and label for ``` -### Field Definitions -- `name`: Represents the annotation displayed on the node. -- `shape`: Defines the shape of the node (e.g., Terminator, Process). -- `color`: Specifies the fill color of the node. -- `stroke`: Defines the border color of the node. -- `strokeWidth`: Specifies the border thickness of the node. -- `label`: Adds annotations to the incomming connectors. -- `arrowType`: Determines the arrowhead type (decorator) of the incoming connector (e.g., Diamond, Fletch). +### Data Source Field Definitions + +- **`name`**: Text annotation displayed on the node. +- **`shape`**: Node shape type (e.g., Terminator, Process, Decision). +- **`color`**: Fill color for the node background. +- **`stroke`**: Border color of the node. +- **`strokeWidth`**: Border thickness in pixels. +- **`label`**: Annotations for incoming connectors. +- **`arrowType`**: Arrowhead type for incoming connectors (e.g., Diamond, Fletch). -This structure allows for easy customization of the flowchart's visual elements based on the provided data source. +This structure enables comprehensive customization of the flowchart's visual elements based on the provided data source. -## Render Flowchart layout with nodes and connectors +## Render Flowchart Layout with Nodes and Connectors -The following example demonstrates how to render a flowchart layout using nodes and connectors. To achieve this, you need to define the [`nodes`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeModel/) and [`connectors`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectormodel/) collections and assign them to the diagram. Additionally, you need to set the [`layoutType`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#type) to `Flowchart`. +The following example demonstrates how to render a flowchart layout using nodes and connectors. To achieve this, you need to define the [`nodes`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeModel/) and [`connectors`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectormodel/) collections and assign them to the diagram. Additionally, you need to set the `layoutType` to **Flowchart**. {% tabs %} @@ -132,14 +132,14 @@ The following example demonstrates how to render a flowchart layout using nodes {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/flowchart-cs2" %} -## Customize flowchart layout orientation +## Customize Flowchart Layout Orientation -The sequence of a node's direction can be customized by flowchart's orientation, either vertically from top to bottom or horizontally from left to right. The [orientation](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#orientation) property of the layout class allows you to define the flow direction for the flowchart as either `TopToBottom` or `LeftToRight`. The default orientation is `TopToBottom`. +Customize the flow direction of the flowchart using the [orientation](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#orientation) property of the layout class. The flowchart can flow either vertically from top to bottom or horizontally from left to right. The default orientation is **TopToBottom**. -### TopToBottom orientation +### TopToBottom Orientation -This orientation arranges elements in the layout vertically, flowing from top to bottom. It is commonly used in flowcharts to represent the sequential progression of steps or actions in a process. +This orientation arranges elements vertically, flowing from top to bottom. It is commonly used in flowcharts to represent the sequential progression of steps or actions in a process. ```typescript @@ -163,10 +163,10 @@ export class AppComponent { ``` -![EJ2 Flowchart layout diagram](./images/flowchart-images/Flowchart_Layout.png) +![Flowchart layout with top to bottom orientation](./images/flowchart-images/Flowchart_Layout.png) -### LeftToRight orientation +### LeftToRight Orientation This orientation arranges elements in the layout horizontally, flowing from left to right. It is typically used to represent processes or workflows that move sequentially across the page, emphasizing a linear progression of steps or actions. @@ -192,19 +192,20 @@ export class AppComponent { ``` -![EJ2 Flowchart layout diagram](./images/flowchart-images/Flowchart_LeftToRight.png) +![Flowchart layout with left to right orientation](./images/flowchart-images/Flowchart_LeftToRight.png) -## Customize the decision output directions +## Customize the Decision Output Directions The decision symbol in a flowchart represents a question or condition that leads to different paths based on a binary outcome (Yes/No, True/False). You can customize the output direction of these paths using the [`yesBranchDirection`](https://ej2.syncfusion.com/react/documentation/api/diagram/branchDirection/) and [`noBranchDirection`](https://ej2.syncfusion.com/react/documentation/api/diagram/branchDirection/) properties of the [`flowchartLayoutSettings`](https://ej2.syncfusion.com/react/documentation/api/diagram/flowchartLayoutSettingsModel/) class. -- `LeftInFlow` - Arranges the Yes/No branch to the left of the decision symbol. -- `RightInFlow` - Arranges the Yes/No branch to the right of the decision symbol. -- `SameAsFlow` - Aligns the Yes/No branch in the same direction as the flow of the decision symbol. +### Branch Direction Options -The following example shows flowchart layout with `yesBranchDirection` as `SameAsFlow` and `noBranchDirection` as `LeftInFlow`. +- **`LeftInFlow`** - Arranges the Yes/No branch to the left of the decision symbol. +- **`RightInFlow`** - Arranges the Yes/No branch to the right of the decision symbol. +- **`SameAsFlow`** - Aligns the Yes/No branch in the same direction as the flow of the decision symbol. +The following example shows a flowchart layout with `yesBranchDirection` set to `SameAsFlow` and `noBranchDirection` set to `LeftInFlow`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -218,29 +219,34 @@ The following example shows flowchart layout with `yesBranchDirection` as `SameA {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/flowchart-cs3" %} -The following table will explain the pictorial representation of the behavior: +The following table illustrates the visual behavior of different branch direction combinations: |YesBranchDirection| NoBranchDirection | TopToBottom | LeftToRight | |---|---|---|---| -| Left In Flow |Right In Flow|![EJ2 Diagram displays Decision Output in Vertical](./images/flowchart-images/Flowchart_VerticalLeftAndRightBranches.png)|![EJ2 Diagram displays Decision Output in Horizontal](./images/flowchart-images/Flowchart_HorizontalLeftAndRightBranches.png)| -| Right In Flow |Left In Flow |![EJ2 Diagram displays Decision Output in Vertical](./images/flowchart-images/Flowchart_VerticalRightAndLeftBranches.png)|![EJ2 Diagram displays Decision Output in Horizontal](./images/flowchart-images/Flowchart_HorizontalRightAndLeftBranches.png) | -| Same As Flow |Right In Flow |![EJ2 Diagram displays Decision Output in Vertical](./images/flowchart-images/Flowchart_VerticalSameAndRightBranches.png)|![EJ2 Diagram displays Decision Output in Horizontal](./images/flowchart-images/Flowchart_HorizontalSameAndRightBranches.png) | -| Same As Flow |Left In Flow |![EJ2 Diagram displays Decision Output in Vertical](./images/flowchart-images/Flowchart_YesSame_NoLeft.png)|![EJ2 Diagram displays Decision Output in Horizontal](./images/flowchart-images/Flowchart_YesSame_NoLeft_LTR.png) | -| Right In Flow | Same As Flow |![EJ2 Diagram displays Decision Output in Vertical](./images/flowchart-images/Flowchart_VerticalRightAndSameBranches.png)|![EJ2 Diagram displays Decision Output in Horizontal](./images/flowchart-images/Flowchart_HorizontalRightAndSameBranches.png) | -| Left In Flow | Same As Flow |![EJ2 Diagram displays Decision Output in Vertical](./images/flowchart-images/Flowchart_YesLeft_NoSame.png)|![EJ2 Diagram displays Decision Output in Horizontal](./images/flowchart-images/Flowchart_YesLeft_NoSame_LTR.png) | -|Same As Flow |Same As Flow|![EJ2 Diagram displays Decision Output in Vertical](./images/flowchart-images/Flowchart_VerticalSameBranches.png)|![EJ2 Diagram displays Decision Output in Horizontal](./images/flowchart-images/Flowchart_HorizontalSameBranches.png)| +| Left In Flow |Right In Flow|![Decision output with left yes and right no branches in vertical layout](./images/flowchart-images/Flowchart_VerticalLeftAndRightBranches.png)|![Decision output with left yes and right no branches in horizontal layout](./images/flowchart-images/Flowchart_HorizontalLeftAndRightBranches.png)| +| Right In Flow |Left In Flow |![Decision output with right yes and left no branches in vertical layout](./images/flowchart-images/Flowchart_VerticalRightAndLeftBranches.png)|![Decision output with right yes and left no branches in horizontal layout](./images/flowchart-images/Flowchart_HorizontalRightAndLeftBranches.png) | +| Same As Flow |Right In Flow |![Decision output with same flow yes and right no branches in vertical layout](./images/flowchart-images/Flowchart_VerticalSameAndRightBranches.png)|![Decision output with same flow yes and right no branches in horizontal layout](./images/flowchart-images/Flowchart_HorizontalSameAndRightBranches.png) | +| Same As Flow |Left In Flow |![Decision output with same flow yes and left no branches in vertical layout](./images/flowchart-images/Flowchart_YesSame_NoLeft.png)|![Decision output with same flow yes and left no branches in horizontal layout](./images/flowchart-images/Flowchart_YesSame_NoLeft_LTR.png) | +| Right In Flow | Same As Flow |![Decision output with right yes and same flow no branches in vertical layout](./images/flowchart-images/Flowchart_VerticalRightAndSameBranches.png)|![Decision output with right yes and same flow no branches in horizontal layout](./images/flowchart-images/Flowchart_HorizontalRightAndSameBranches.png) | +| Left In Flow | Same As Flow |![Decision output with left yes and same flow no branches in vertical layout](./images/flowchart-images/Flowchart_YesLeft_NoSame.png)|![Decision output with left yes and same flow no branches in horizontal layout](./images/flowchart-images/Flowchart_YesLeft_NoSame_LTR.png) | +|Same As Flow |Same As Flow|![Decision output with both branches in same flow direction in vertical layout](./images/flowchart-images/Flowchart_VerticalSameBranches.png)|![Decision output with both branches in same flow direction in horizontal layout](./images/flowchart-images/Flowchart_HorizontalSameBranches.png)| + +>Note: When both branch directions are set to the same value, the **Yes** branch takes priority in positioning. ->Note: If both branch directions are same, **Yes** branch will be prioritized. +## Custom Yes and No Branch Values -## Custom Yes and No branch values +The decision symbol produces two output branches: a Yes branch and a No branch. Configure custom text values to determine branch classification using the `yesBranchValues` property of the `flowchartLayoutSettings` class, it will be considered a Yes branch. Similarly, if the connector text value matches any value in the `noBranchValues`. -The decision symbol produces two output branches: a Yes branch and a No branch. If the connector text value matches any value in the [`yesBranchValues`](https://ej2.syncfusion.com/react/documentation/api/diagram/flowchartLayoutSettingsModel/#yesbranchvalues) property of the [`flowchartLayoutSettings`](https://ej2.syncfusion.com/react/documentation/api/diagram/flowchartLayoutSettingsModel/) class, it will be considered a Yes branch. Similarly, if the connector text value matches any value in the [`noBranchValues`](https://ej2.syncfusion.com/react/documentation/api/diagram/flowchartLayoutSettingsModel/#nobranchvalues) property, it will be considered a No branch. By default, the `yesBranchValues` property contains the string values **Yes** and **True**, while the `noBranchValues` property contains **No** and **False**. +By default: +- **`yesBranchValues`** contains: **"Yes"** and **"True"**. +- **`noBranchValues`** contains: **"No"** and **"False"**. -Any text can be used as the connector text to describe the flow. Additionally, custom string values can be assigned to the `yesBranchValues` and `noBranchValues` properties. To direct the flow based on a conditional decision (if/else), the connector text must match a value in either the `yesBranchValues` or `noBranchValues` properties. +### Custom Branch Classification -The following example shows how to set custom text to the yes branch and no branch values. +When a connector's text value matches any value in the `yesBranchValues` array, it is classified as a Yes branch. Similarly, when the connector text matches any value in the `noBranchValues` array, it is classified as a No branch. This enables flexible decision flow control using custom terminology appropriate for your specific use case. +The following example demonstrates how to set custom text values for yes and no branches. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -254,4 +260,4 @@ The following example shows how to set custom text to the yes branch and no bran {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/flowchart-cs4" %} -![EJ2 Flowchart layout diagram](./images/flowchart-images/Flowchart_CustomYesOrNoBranches.png) \ No newline at end of file +![Flowchart layout with custom yes and no branch values](./images/flowchart-images/Flowchart_CustomYesOrNoBranches.png) \ No newline at end of file diff --git a/ej2-react/diagram/hierarchical-layout.md b/ej2-react/diagram/hierarchical-layout.md index 23619ac7b..fb33ab470 100644 --- a/ej2-react/diagram/hierarchical-layout.md +++ b/ej2-react/diagram/hierarchical-layout.md @@ -1,20 +1,20 @@ --- layout: post -title: Hierarchical tree layout in React Diagram component | Syncfusion® -description: Learn here all about Hierarchical tree layout in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Hierarchical tree layout in React Diagram Component | Syncfusion® +description: Learn here all about Hierarchical tree layout in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Hierarchical tree layout platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Hierarchical tree layout in React Diagram control +# Hierarchical Tree Layout in React Diagram Component -The hierarchical tree layout arranges nodes in a tree-like structure, where the nodes in the hierarchical layout may have multiple parents. There is no need to specify the layout root. +The hierarchical tree layout arranges nodes in a tree-like structure where nodes can have multiple parent nodes, creating complex organizational relationships. Unlike traditional tree structures with single parent-child relationships, this layout supports scenarios such as matrix organizations, project dependencies, or any structure where entities report to multiple authorities. The layout automatically determines positioning without requiring a specified root node. -## Hierarchical tree layout with nodes and connectors +## Hierarchical Tree Layout with Nodes and Connectors -To arrange the nodes in a hierarchical structure, specify the layout [`type`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#type) as **HierarchicalTree**. The following example shows how to arrange the nodes in a hierarchical structure. +To arrange nodes in a hierarchical structure, specify the layout [`type`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#type) as **HierarchicalTree**. This approach provides full control over node and connector definitions while leveraging automatic positioning. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -27,12 +27,11 @@ To arrange the nodes in a hierarchical structure, specify the layout [`type`](ht {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs1" %} ->Note: If you want to use hierarchical tree layout in diagram, you need to inject HierarchicalTree in the diagram. +>Note: The HierarchicalTree module must be injected into the diagram to use hierarchical tree layout functionality. -## Hierarchical layout with DataSource - -You can create a hierarchical layout with data Source. The following code demonstrates how to render a Hierarchical layout using DataSource. +## Hierarchical Layout with DataSource +For data-driven scenarios, hierarchical layout can be created using a DataSource, which automatically generates nodes and connectors based on the data relationships. This approach is more efficient for large datasets and dynamic content. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -46,6 +45,6 @@ You can create a hierarchical layout with data Source. The following code demons {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs2" %} ->Note: If you want to convert the data source into layout, you need to inject DataBinding along with HierarchicalTree module in the diagram. +>Note: When using DataSource for layout generation, both DataBinding and HierarchicalTree modules must be injected into the diagram. -![Hierarchical tree](images/hierarchicalTree.png) +![Hierarchical tree layout showing nodes with multiple parent relationships](images/hierarchicalTree.png) diff --git a/ej2-react/diagram/layout-customization.md b/ej2-react/diagram/layout-customization.md index 84570ba99..d201c097f 100644 --- a/ej2-react/diagram/layout-customization.md +++ b/ej2-react/diagram/layout-customization.md @@ -1,26 +1,26 @@ --- layout: post -title: Customizing layout in React Diagram component | Syncfusion® -description: Learn here all about Customizing layout in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Customizing layout in React Diagram Component | Syncfusion® +description: Learn here all about Customizing layout in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Customizing layout platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Customizing layout in React Diagram control +# Customizing layout in React Diagram Component -Orientation, spacings, and alignment of the layout can be customized with a set of properties. +The React Diagram component provides extensive customization options for automatic layouts, allowing developers to control orientation, spacing, alignment, bounds, and visual behavior. These properties enable fine-tuned positioning and appearance of nodes within hierarchical, organizational, and tree-based diagrams. -To explore layout properties, refer to [`Layout Properties`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#properties). +To explore all available layout properties, refer to[`Layout Properties`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#properties). -## Layout bounds +## Layout Bounds +The diagram supports aligning layouts within custom rectangular areas using layout bounds. This feature constrains the layout to a specific region of the canvas, providing precise control over where the layout appears. -Diagram provides support to align the layout within any custom rectangular area. - -The following example shows how to align the layout within the given layout bounds. +Layout bounds define a rectangular area where the entire layout will be positioned. This is particularly useful when integrating diagrams into dashboards or when multiple layouts need to coexist on the same canvas. +The following example shows how to align the layout within specified layout bounds: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -38,12 +38,13 @@ The following example shows how to align the layout within the given layout boun For more information about bounds, refer to [`bounds`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#bounds). -## Layout alignment +## Layout Alignment -The layout can be aligned anywhere over the layout bounds/viewport using the [`horizontalAlignment`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#horizontalalignment) and [`verticalAlignment`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#verticalalignment) properties of the layout. +The layout can be positioned anywhere within the layout bounds using [`horizontalAlignment`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#horizontalalignment) and [`verticalAlignment`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#verticalalignment) properties. These properties determine how the layout is positioned relative to its container. -The following code illustrates how to align the layout and how to change layout horizontal and vertical alignment at runtime. +Available alignment options include Left, Right, Center for horizontal alignment, and Top, Bottom, Center for vertical alignment. These settings work independently, allowing for precise positioning control. +The following code illustrates how to configure layout alignment and modify alignment properties at runtime: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -58,12 +59,13 @@ The following code illustrates how to align the layout and how to change layout {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/layout-alignment-cs1" %} -## Layout spacing +## Layout Spacing -Layout provides support to add space horizontally and vertically between the nodes. The [`horizontalSpacing`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#horizontalspacing) and [`verticalSpacing`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#verticalspacing) properties of the layout allows you to set the space between the nodes in horizontally and vertically. +Layout spacing controls the distance between nodes in the layout. The[`horizontalSpacing`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#horizontalspacing) and [`verticalSpacing`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#verticalspacing) properties define the gaps between nodes horizontally and vertically respectively. -The following code illustrates how to set the initial horizontal and vertical spacing for the layout, as well as how to change these spacing values at runtime +Proper spacing ensures visual clarity and prevents node overlap. Spacing values are measured in pixels and can be adjusted based on node sizes and content density requirements. +The following code illustrates how to set initial horizontal and vertical spacing for the layout and modify these values at runtime: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -77,13 +79,13 @@ The following code illustrates how to set the initial horizontal and vertical sp {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/layout-spacing-cs1" %} +## Layout Margin -## Layout margin - -Layout provides support to add some blank space between the layout bounds/viewport and the layout. The [`margin`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#margin) property of the layout allows you to set the blank space. +Layout margin creates blank space between the layout bounds and the actual layout content. The [`margin`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#margin) property adds padding around the entire layout, ensuring adequate separation from container edges. -The following code demonstrates how to set the initial layout margin and how to modify the layout margin dynamically at runtime. +Margins are particularly useful when layouts are displayed within panels, cards, or other UI containers where visual separation is important for clarity and aesthetics. +The following code demonstrates how to set initial layout margin and modify margin values dynamically at runtime: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -98,20 +100,20 @@ The following code demonstrates how to set the initial layout margin and how to {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/layout-margin-cs1" %} -## Layout orientation +## Layout Orientation -The layout orientation can used to arrange the layout based on the direction. there are different orientation types that are defined in the following table. +The layout orientation determines the primary direction in which the layout flows. Different orientations are suitable for various organizational structures and display requirements. |Orientation|Description| | -------- | ----------- | -|TopToBottom|Aligns the layout from top to bottom. All the roots are placed at top of diagram.| -|LeftToRight|Aligns the layout from left to right. All the roots are placed at left of diagram.| -|BottomToTop|Aligns the layout from bottom to top. All the roots are placed at bottom of the diagram.| -|RightToLeft|Aligns the layout from right to left. All the roots are placed at right of the diagram.| +|TopToBottom|Aligns the layout from top to bottom. All root nodes are placed at the top of the diagram.| +|LeftToRight|Aligns the layout from left to right. All root nodes are placed at the left of the diagram.| +|BottomToTop|Aligns the layout from bottom to top. All root nodes are placed at the bottom of the diagram.| +|RightToLeft|Aligns the layout from right to left. All root nodes are placed at the right of the diagram.| -Diagram provides support to customize the [`orientation`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#orientation) of layout. You can set the desired orientation using layout.orientation. +Diagram provides support to customize the [`orientation`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#orientation) property can be customized to match specific design requirements or cultural reading patterns. ->Note: In the diagram the default orientation is `TopToBottom`. +>Note: In the diagram the default orientation is **TopToBottom**. The following code demonstrates how to set the initial orientation for the layout and how to change it dynamically at runtime. @@ -129,12 +131,13 @@ The following code demonstrates how to set the initial orientation for the layou {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/layout-orientation-cs1" %} -## Exclude from layout +## Exclude From Layout -In some cases, you may need one or two nodes not to be arranged based on the layout algorithm but instead positioned manually. You can exclude these nodes from the layout algorithm by setting the [`excludeFromLayout`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeModel/#excludefromlayout) property to true. +In certain scenarios, specific nodes may need manual positioning rather than automatic arrangement by the layout algorithm. These nodes can be excluded from layout calculations by setting the[`excludeFromLayout`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeModel/#excludefromlayout) property to **true**. -The following code example demonstrates how to exclude a node from the layout and position it manually: +This feature is useful for annotation nodes, floating panels, or special elements that require fixed positioning regardless of the overall layout structure. +The following code example demonstrates how to exclude a node from the layout and position it manually: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -148,11 +151,11 @@ The following code example demonstrates how to exclude a node from the layout an {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/layout-exclude-cs1" %} +## Fixed Node -## Fixed node - -Layout provides support to arrange the nodes with reference to the position of a fixed node and set it to the [`fixedNode`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#fixednode) of the layout property. This is helpful when you try to expand/collapse a node. It might be expected that the position of the double-clicked node should not be changed. +Layout provides support to arrange the nodes with reference to the position of a fixed node and set it to the [`fixedNode`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#fixednode) property. This ensures that the specified node maintains its position while other nodes are arranged around it. +This feature is particularly beneficial during expand/collapse operations, where maintaining the position of the interacted node provides better user experience and visual stability. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -166,11 +169,13 @@ Layout provides support to arrange the nodes with reference to the position of a {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/layout-fixed-cs1" %} +## Expand and Collapse -## Expand and collapse +The diagram supports expanding and collapsing subtrees within layouts. The node's isExpanded property controls the visibility of child nodes, allowing users to focus on specific portions of large hierarchical structures. -Diagram allows to expand/collapse the subtrees of a layout. The node’s isExpanded property allows you to expand/collapse its children. The following code example shows how to expand/collapse the children of a node. +This functionality is essential for managing complex organizational charts, decision trees, and other hierarchical data where progressive disclosure improves usability. +The following code example shows how to expand/collapse the children of a node: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -185,14 +190,15 @@ Diagram allows to expand/collapse the subtrees of a layout. The node’s isExpan {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/layout-expandandcollapse-cs1" %} -For more details about customizing the expand and collapse icon refer [`expand Collapse`](./nodes-expandAndCollapse) +For more details about customizing the expand and collapse icon refer [`expand Collapse`](./nodes-expandAndCollapse). -## Layout animation +## Layout Animation -While performing expand and collapse operations, the layout can be animated by applying a small delay. This can be achieved by setting the [`enableAnimation`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#enableanimation) property of the layout. By default, `enableAnimation` is set to true. +Expand and collapse operations can be animated by applying transitions during layout changes. The[`enableAnimation`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#enableanimation) property controls this behavior, enhancing the visual experience during structural changes. -In the following example, the enableAnimation property ensures that the layout changes are animated, enhancing the visual experience during expand and collapse operations. +Animation provides visual continuity and helps users track changes in the layout structure. By default, `enableAnimation` is set to **true**. +The following example demonstrates how layout animation enhances the visual experience during expand and collapse operations: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -207,14 +213,15 @@ In the following example, the enableAnimation property ensures that the layout c {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/layout-animation-cs1" %} ->Note: To enable layout animation, you need to inject LayoutAnimation module in diagram. +>Note: To enable layout animation, inject the LayoutAnimation module in the diagram. -## Parent - child relation with dropped nodes from symbol palette +## Parent - Child Relation with Dropped Nodes from Symbol Palette -You can create a layout with dropped nodes from symbol palette using the [`drop`](https://ej2.syncfusion.com/react/documentation/api/diagram/#drop) event. In `drop` event, you have to create a connection between the source and target item. +Layouts can be dynamically extended by creating parent-child relationships between existing nodes and items dropped from the symbol palette. The [`drop`](https://ej2.syncfusion.com/react/documentation/api/diagram/#drop) event provides the mechanism to establish these connections programmatically. -Find the code example to create parent - child relation between source and target nodes in drop event. +This functionality enables interactive diagram building, where users can expand existing structures by dragging and dropping new elements from a predefined set of symbols. +The following code example creates parent-child relationships between source and target nodes in the drop event: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -254,14 +261,14 @@ The [`orientation`](https://ej2.syncfusion.com/react/documentation/api/diagram/s {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/layout-setNodeTemplete-cs1" %} -## Refresh layout +## Refresh Layout + +The diagram supports refreshing layouts at runtime to reflect structural or data changes. The [`doLayout`](https://ej2.syncfusion.com/react/documentation/api/diagram/#dolayout) method recalculates and redraws the entire layout based on current data and configuration. -Diagram allows refreshing the layout at runtime. To refresh the layout, you need to call the [`doLayout`](https://ej2.syncfusion.com/react/documentation/api/diagram/#dolayout) method. +This functionality is essential when nodes are added, removed, or modified programmatically, ensuring the layout remains consistent with the updated structure. ```typescript //To refresh layout diagramInstance.doLayout(); - -``` - +``` \ No newline at end of file diff --git a/ej2-react/diagram/layout-event.md b/ej2-react/diagram/layout-event.md index 5b4833b75..6f1cd1986 100644 --- a/ej2-react/diagram/layout-event.md +++ b/ej2-react/diagram/layout-event.md @@ -1,18 +1,23 @@ --- layout: post -title: Layout events in React Diagram component | Syncfusion® -description: Learn here all about Layout events in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Layout events in React Diagram Component | Syncfusion® +description: Learn here all about Layout events in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Layout events platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Layout events in React Diagram control +# Layout events in React Diagram Component +Layout events in the React Diagram component provide developers with hooks to respond to various stages of automatic layout processing. These events are particularly useful when working with hierarchical data structures and need to customize behavior during layout rendering, data loading, or node expansion/collapse operations. -## DataLoaded event +The diagram component supports several layout-specific events that fire during different phases of the layout life cycle, enabling fine-grained control over layout behavior and user interactions. -The [`dataLoaded`](https://ej2.syncfusion.com/react/documentation/api/diagram/idataloadedeventargs/) event is triggered after the diagram is populated from the external data source. +## DataLoaded Event + +The [`dataLoaded`](https://ej2.syncfusion.com/react/documentation/api/diagram/idataloadedeventargs/) event triggers after the diagram successfully populates from an external data source. This event provides access to the loaded data and diagram instance, making it ideal for performing post-load customizations such as applying custom styling, setting initial node states, or configuring layout-specific properties. + +The event fires once the data binding process completes but before the initial layout calculation begins, providing an opportunity to modify nodes or connectors before they are positioned. The following code example explains the data loaded event in the diagram. @@ -35,12 +40,11 @@ The following code example explains the data loaded event in the diagram. ``` -## ExpandStateChange event +## ExpandStateChange Event -The [`expandStateChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExpandStateChangeEventArgs/) will be triggered when the state of the expand and collapse icon change for a node. - -The following code example explains the `expandStateChange` event in the diagram. +The [`expandStateChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExpandStateChangeEventArgs/) event fires when a user clicks the expand or collapse icon of a node in a hierarchical layout. This event occurs before the layout update begins, allowing developers to prevent the state change, modify the expansion behavior, or trigger custom actions based on the node's new state. +The event provides information about the affected node, its current state, and whether the operation can be canceled. This makes it valuable for implementing conditional expansion, loading child data on-demand, or applying custom animations. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -55,10 +59,11 @@ The following code example explains the `expandStateChange` event in the diagram {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/layoutEvent-cs1" %} -## Animation complete event +## Animation Complete Event -The [`animationComplete`](https://ej2.syncfusion.com/react/documentation/api/diagram/#animationcomplete) event is triggered after the animation of the diagram elements is completed. The following example demonstrates how to handle the animation complete event and customize based on the expand state of the root node. +The [`animationComplete`](https://ej2.syncfusion.com/react/documentation/api/diagram/#animationcomplete) event triggers after the diagram finishes animating layout changes, particularly during expand and collapse operations. This event is essential for detecting when visual transitions have completed, enabling developers to perform follow-up actions such as scrolling to specific nodes, updating UI indicators, or triggering additional layout adjustments. +The event fires at the end of the animation cycle, ensuring that all visual updates are complete before any subsequent operations begin. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -72,11 +77,11 @@ The [`animationComplete`](https://ej2.syncfusion.com/react/documentation/api/dia {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/layoutEvent-cs2" %} -## Layout updated event +## Layout Updated Event -The [`layoutUpdated`](https://ej2.syncfusion.com/react/documentation/api/diagram/#layoutupdated) event is triggered when the layout rendering process in the diagram either starts or completes. This event allows users to track the state of the layout rendering process. +The [`layoutUpdated`](https://ej2.syncfusion.com/react/documentation/api/diagram/#layoutupdated) event fires at both the beginning and completion of the layout rendering process. This event enables tracking of layout calculation progress and provides timing information for performance monitoring or progress indication purposes. -The following code example explains the layout updated event in the diagram. +The event includes a state parameter that indicates whether the layout process is starting or finishing, allowing developers to implement loading indicators, measure layout performance, or coordinate with other application components that depend on layout completion. ```javascript function handleLayoutUpdated(args){ @@ -93,4 +98,5 @@ function handleLayoutUpdated(args){ {/* Inject necessary services for the diagram */} -``` \ No newline at end of file +``` +These layout events work together to provide comprehensive control over the automatic layout life cycle, from initial data loading through final rendering completion. They enable developers to create responsive, interactive diagram experiences with proper feedback and customization capabilities. \ No newline at end of file diff --git a/ej2-react/diagram/mindmap-layout.md b/ej2-react/diagram/mindmap-layout.md index 0d78fb167..04844a85d 100644 --- a/ej2-react/diagram/mindmap-layout.md +++ b/ej2-react/diagram/mindmap-layout.md @@ -1,24 +1,23 @@ --- layout: post -title: Mind-map layout in React Diagram component | Syncfusion® -description: Learn here all about Mind-map layout in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Mind-map layout in React Diagram Component | Syncfusion® +description: Learn here all about Mind-map layout in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Mind-map layout platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Mind Map layout in React Diagram control +# Mind Map layout in React Diagram Component -A mind map is a diagram that displays the nodes as a spider diagram organizes information around a central concept. To create mind map, the [`type`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#type) of layout should be set as `MindMap`. +A mind map is a powerful visualization technique that organizes information around a central concept, with related topics branching outward in a tree-like structure. This layout is particularly useful for brainstorming, knowledge mapping, and hierarchical data representation. The React Diagram component supports mind map layouts through the [`type`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#type) property, which should be set to **MindMap**. ## Mind Map Orientation -An [`Orientation`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#orientation) of a `MindMapTreeLayout` is used to arrange the tree layout according to a specific direction. By default, the orientation is set to Horizontal. - -The following code example illustrates how to create an mindmap layout. +An [`Orientation`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#orientation) property determines how the mind map tree structure is arranged spatially. By default, the orientation is set to **Horizontal**, positioning the root node centrally with branches extending left and right. +The following code example demonstrates how to create a mind map layout: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -37,15 +36,17 @@ The following table outlines the various orientation types available: |Orientation Type |Description| | -------- | ----------- | -|Horizontal|Aligns the tree layout from left to right| -|Vertical|Aligns the tree layout from top to bottom| +|Horizontal|Arranges the mind map with the root node centered, branches extending horizontally left and right| +|Vertical|Arranges the mind map with the root node at the top or center, branches extending vertically up and down| >Note: If you want to use mind map layout in diagram, you need to inject MindMap in the diagram. -## Mind Map branch +## Mind Map Branch + +The mind map layout provides flexible branch positioning through the [`getBranch`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#getbranch) method. This method allows you to control which side of the root node each branch appears on, enabling customized layouts based on your specific requirements. -You can also decide the branch for mind map using [`getBranch`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#getbranch) method. The following code demonstrates how to set all branches on the right side for mind map layout using `getBranch` method. +The `getBranch` method receives a node object as a parameter and should return a string value indicating the desired branch position: **Left**, **Right**, or **SubLeft**/'**SubRight** for nested branches. The following code example shows how to position all branches on the right side of the mind map: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -59,4 +60,21 @@ You can also decide the branch for mind map using [`getBranch`](https://ej2.sync {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/mindMap-cs2" %} -![Mind map layout](images/mindmap.png) \ No newline at end of file +![Mind map layout showing branched structure with nodes arranged around a central concept](images/mindmap.png) + +## Common Use Cases + +Mind map layouts are ideal for: +- **Brainstorming sessions**: Visualizing ideas and their relationships. +- **Knowledge mapping**: Organizing complex information hierarchically. +- **Decision trees**: Mapping out decision processes and outcomes. +- **Organizational charts**: Displaying reporting structures with a central focus. +- **Project planning**: Breaking down projects into manageable components. + +## Best Practices + +- Keep the root node content concise and descriptive. +- Use consistent styling for nodes at the same hierarchical level. +- Limit branch depth to maintain readability. +- Consider color coding to differentiate branch categories. +- Ensure adequate spacing between branches to prevent overlap. \ No newline at end of file diff --git a/ej2-react/diagram/org-chart.md b/ej2-react/diagram/org-chart.md index 17b39f29b..bf01fcc50 100644 --- a/ej2-react/diagram/org-chart.md +++ b/ej2-react/diagram/org-chart.md @@ -1,22 +1,21 @@ --- layout: post -title: Org-chart layout in React Diagram component | Syncfusion® -description: Learn here all about Org-chart layout in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Org-chart layout in React Diagram Component | Syncfusion® +description: Learn here all about Org-chart layout in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Org-chart layout platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Organizational Chart layout in React Diagram control +# Organizational Chart Layout in React Diagram Component -An organizational chart is a diagram that displays the structure of an organization and relationships. To create an organizational chart, the [`type`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#type) of layout should be set as an `OrganizationalChart`. +An organizational chart is a diagram that displays the hierarchical structure of an organization, showing reporting relationships and roles within the company. The React Diagram component provides specialized support for creating professional organizational charts through automatic layout algorithms. To create an organizational chart, set the [`type`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#type) of layout should be set as an **OrganizationalChart**. -## Organizational chart with DataSource - -The following code example illustrates how to create an organizational chart with DataSource. +## Organizational Chart with DataSource +This approach is ideal when working with dynamic data from databases, APIs, or when the organizational structure changes frequently. The component automatically generates nodes and connectors based on the provided data structure. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -31,10 +30,10 @@ The following code example illustrates how to create an organizational chart wit {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/organizationalchart-cs1" %} ->Note: If you want to use Organizational chart layout in diagram, you need to inject HierarchicalTree module along with DataBinding module in the diagram. +>Note: When using organizational chart layout, both HierarchicalTree and DataBinding modules must be injected into the diagram component. -## Organizational chart with nodes and connectors +## Organizational Chart with Nodes and Connectors You can render an org-chart layout without using DataSource. The following code demonstrates how to render an org-chart layout without using data source. @@ -53,15 +52,20 @@ You can render an org-chart layout without using DataSource. The following code ![Organizational chart](images/org-chart.png) -## GetLayout info +## Advanced Layout Customization with getLayoutInfo + +Organizational chart layout starts parsing from root and iterate through all its child elements. The [`getLayoutInfo`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#getlayoutinfo) method provides granular control over how each subtree within the organizational chart is arranged. This method is invoked for every node during the layout process, allowing customization of orientation, alignment, spacing, and special node types like assistants. + +The organizational chart layout engine parses the hierarchy starting from the root node and processes each subtree. By overriding the `getLayoutInfo` method, developers can customize the arrangement of child nodes based on specific business requirements. -Organizational chart layout starts parsing from root and iterate through all its child elements. The [`getLayoutInfo`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#getlayoutinfo) method provides necessary information of a node’s children and the way to arrange (direction, orientation, offsets, etc.) them. The arrangements can be customized by overriding this function as explained. +### getLayoutInfo Parameters -Set chart orientations, chart types, and offset to be left between parent and child nodes by overriding the `getLayoutInfo` method. The `getLayoutInfo` method is called to configure every subtree of the organizational chart. It takes the following arguments. +The `getLayoutInfo` method accepts the following parameters: - * node: Parent node to that options are to be customized. - * options: Object to set the customizable properties. +- **node**: The parent node for which layout options are being configured. +- **options**: Configuration object containing customizable layout properties. +### Layout Options Properties The following table illustrates the properties that “options” argument takes. @@ -76,7 +80,9 @@ The following table illustrates the properties that “options” argument takes |options.enableRouting|By default, connections are routed based on the chart type and orientations. This property gets or sets whether default routing is to be enabled or disabled.|true| |options.rows|Sets the number of rows on which the child nodes will be arranged. Applicable only for balanced type horizontal tree.|Number| -The following table illustrates the different chart orientations and chart types. +### Orientation and Alignment Options + +The following table describes the available chart orientations and their corresponding alignment types: |Orientation|Type|Description|Example| | -------- | ----------- | ------------- |------| @@ -89,10 +95,9 @@ The following table illustrates the different chart orientations and chart types ||Alternate|Arranges the children vertically at both left and right sides of the parent.|![Vertical Alternate](images/vAlternate.JPG)| -### SubTree horizontal orientation - -The following example shows how to utilize the `getLayoutInfo` function to customize the sub tree alignment in horizontal orientation. +### Horizontal Subtree Orientation Example +The following example demonstrates customizing subtree alignment for horizontal organizational structures: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -106,11 +111,9 @@ The following example shows how to utilize the `getLayoutInfo` function to custo {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/organizationalchart-cs3" %} +### Vertical Subtree Orientation Example -### SubTree vertical orientation - -The following code example illustrates how to set the vertical arrangement to the leaf level trees. - +This example shows how to implement vertical arrangement for leaf-level organizational trees: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -125,9 +128,9 @@ The following code example illustrates how to set the vertical arrangement to th {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4" %} -### Assistant +### Assistant Nodes -Assistants are child item that have a different relationship with the parent node. They are laid out in a dedicated part of the tree. A node can be specified as an assistant of its parent by adding it to the `assistants` property of the argument “options”. +Assistant nodes represent positions with specialized relationships to their parent, such as executive assistants or advisor's. These nodes are positioned in a dedicated area separate from regular child nodes. To designate a node as an assistant, add it to the **assistants** collection within the `getLayoutInfo` options parameter. The following code example illustrates how to add assistants to layout. @@ -147,4 +150,12 @@ The following code example illustrates how to add assistants to layout. ![Assistant](images/assistant.png) ->Note: An Assistant node cannot have any child nodes +>Note: Assistant nodes cannot have child nodes and serve as terminal positions in the organizational hierarchy. + +## Best Practices + +- Use the DataSource approach for dynamic organizational structures that may change frequently. +- Implement the manual approach when requiring custom node designs or static hierarchies. +- Consider using assistant nodes for specialized roles like executive assistants or advisory positions. +- Apply appropriate orientation and alignment settings based on the size and complexity of the organization. +- Test layout performance with large datasets and consider implementing virtualization for extensive organizational charts. \ No newline at end of file diff --git a/ej2-react/diagram/radial-layout.md b/ej2-react/diagram/radial-layout.md index fbccbb853..f2da63946 100644 --- a/ej2-react/diagram/radial-layout.md +++ b/ej2-react/diagram/radial-layout.md @@ -1,24 +1,24 @@ --- layout: post -title: Radial tree layout in React Diagram component | Syncfusion® -description: Learn here all about Radial tree layout in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Radial tree layout in React Diagram Component | Syncfusion® +description: Learn here all about Radial tree layout in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Radial tree layout platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Radial tree layout in React Diagram control +# Radial Tree Layout in React Diagram Component -A Radial tree layout is a diagram that presents information in a hierarchical structure, with a central node at the core of the diagram. The central node represents the main concept or topic, and branches extend outward in a radial fashion, creating a tree-like structure. The layout [`root`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#root) property can be used to define the root node of the layout. When no root node is set, the algorithm automatically considers the node without any incoming edges (InEdges connector count of 0) as the root node. To create radial tree, the [`type`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#type) of the layout as `RadialTree`. +A radial tree layout is a specialized diagram that presents hierarchical information with a central node at the core, surrounded by branches extending outward in a circular, tree-like structure. This layout is particularly effective for visualizing organizational charts, family trees, mind maps, and network relationships where understanding the relationship distance from a central concept is important. -The RadialTree layout provides support for adding space between the nodes. The [`HorizontalSpacing`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#horizontalspacing )and [`VerticalSpacing`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#verticalspacing) properties of the layout allow you to set the space between the nodes. The arrangement results in an ever-expanding concentric arrangement with radial proximity to the root node indicating the node level in the hierarchy. +The central node represents the main concept or topic, with child nodes arranged in concentric circles based on their hierarchical level. The layout [`root`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#root)property can be used to define the root node of the layout. When no root node is specified, the algorithm automatically identifies the node without any incoming edges (InEdges connector count of 0) as the root node. To create a radial tree, set the [`type`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#type) of the layout to **RadialTree**. +The RadialTree layout provides comprehensive support for controlling node spacing and arrangement. The [`HorizontalSpacing`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#horizontalspacing )and [`VerticalSpacing`](https://ej2.syncfusion.com/react/documentation/api/diagram/layoutModel/#verticalspacing) properties allow precise control over the space between nodes, measured in pixels. The arrangement creates an expanding concentric pattern where radial proximity to the root node indicates the hierarchical level. -## Radial tree with DataSource - -You can create a radial tree layout with DataSource. The following code example illustrates how to create a radial tree layout using a data source. +## Radial Tree with DataSource +Creating a radial tree layout with a data source provides automatic node generation and connection management. This approach is ideal when working with structured data objects that define hierarchical relationships. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -33,13 +33,12 @@ You can create a radial tree layout with DataSource. The following code example {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/radiallayout-cs1" %} ->Note: If you want to convert the data source into layout, you need to inject DataBinding along with RadialTree module in the diagram. - +>Note: When converting a data source into a radial layout, inject both DataBinding and RadialTree modules in the diagram component. -## Radial tree with nodes and connectors -You can render a radial tree layout without using DataSource. The following code demonstrates how to render a radial tree layout without using data source. +## Radial Tree with Nodes and Connectors +For scenarios requiring manual control over node creation and positioning, the radial tree layout can be applied to explicitly defined nodes and connectors. This approach offers greater flexibility for custom node styling and specific layout requirements. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -54,6 +53,6 @@ You can render a radial tree layout without using DataSource. The following code {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout/radiallayout-cs1" %} ->Note: If you want to use radial tree layout in diagram, you need to inject RadialTree in the diagram. +>Note: To use radial tree layout functionality, inject the RadialTree module in the diagram component. ![Radial tree](images/RadialTree.png) \ No newline at end of file diff --git a/ej2-react/diagram/symmetric-layout.md b/ej2-react/diagram/symmetric-layout.md index bf5eebc46..f2d7c4f25 100644 --- a/ej2-react/diagram/symmetric-layout.md +++ b/ej2-react/diagram/symmetric-layout.md @@ -1,24 +1,28 @@ --- layout: post -title: Symmetric layout in React Diagram component | Syncfusion® -description: Learn here all about Symmetric layout in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Symmetric layout in React Diagram Component | Syncfusion® +description: Learn here all about Symmetric layout in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Symmetric layout platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Symmetric layout in React Diagram control +# Symmetric Layout in React Diagram Component -The symmetric layout has been formed using nodes position by closer together or pushing them further apart. This is repeated iteratively until the system comes to an equilibrium state. +The symmetric layout is a force-directed algorithm that positions nodes by simulating physical forces between them. Nodes are repositioned iteratively by moving them closer together or pushing them further apart until the system reaches an equilibrium state, creating a balanced and visually appealing arrangement. +## Understanding Symmetric Layout -## Symmetric layout +Symmetric layout works by applying spring-like forces between connected nodes and repulsion forces between all nodes. This creates a natural, organic layout where strongly connected components cluster together while maintaining proper spacing throughout the diagram. +The layout’s [`springLength`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#springlength)property defines the ideal length that edges should maintain. This serves as the resting length for the springs connecting nodes. -The layout’s [`springLength`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#springlength) defined as how long edges should be, ideally. This will be the resting length for the springs. Edge attraction and vertex repulsion forces to be defined by using layout’s [`springFactor`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#springfactor), the more sibling nodes repel each other. The relative positions do not change any more from one iteration to the next. The number of iterations can be specified by using layout’s [`maxIteration`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#maxiteration). +Edge attraction and vertex repulsion forces are controlled using the layout's [`springFactor`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#springfactor)property. Higher values cause sibling nodes to repel each other more strongly, creating greater separation between unconnected elements. -The following code illustrates how to arrange the nodes in a radial tree structure. +The algorithm continues iterating until node positions stabilize and relative positions no longer change significantly between iterations. You can control the maximum number of iterations using the layout's [`maxIteration`](https://ej2.syncfusion.com/react/documentation/api/diagram/layout/#maxiteration). +## Implementation +The following code demonstrates how to arrange nodes using symmetric layout: {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/treegrid/data-binding/data-binding.md b/ej2-react/treegrid/data-binding/data-binding.md index 0a66cdefd..982a40463 100644 --- a/ej2-react/treegrid/data-binding/data-binding.md +++ b/ej2-react/treegrid/data-binding/data-binding.md @@ -1,27 +1,28 @@ --- layout: post -title: Data binding in React Treegrid component | Syncfusion -description: Learn here all about Data binding in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Data binding in React TreeGrid | Syncfusion +description: Learn about Data binding in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Data binding platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Data binding in React Treegrid component +# Data binding in React TreeGrid -The TreeGrid uses **DataManager**, which supports both RESTful JSON data services binding and local JavaScript object array binding. The [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#dataSource) property can be assigned either with the instance of [`DataManager`](https://ej2.syncfusion.com/documentation/data/data-binding/) or JavaScript object array collection. -It supports two kinds of data binding method: +The TreeGrid uses the **DataManager**, which supports both RESTful JSON data service binding and local JavaScript object array binding. The [dataSource](https://ej2.syncfusion.com/react/documentation/api/treegrid/#datasource/) property can be assigned an instance of [DataManager](https://ej2.syncfusion.com/documentation/data/data-binding/) or a JavaScript object array. + +It supports two kinds of data binding methods: * Local data * Remote data -To get start quickly with Data Binding, you can check on this video: +To get started quickly with data binding, watch this video: {% youtube "https://www.youtube.com/watch?v=6XtJbCG8wAU" %} ## Binding with ajax -You can use TreeGrid [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#datasource) property to bind the data source to TreeGrid from external Fetch request. In the below code we have fetched the data source from the server with the help of Fetch request and provided that to [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#datasource) property by using `onSuccess` event of the Fetch. +Use the TreeGrid [dataSource](https://ej2.syncfusion.com/react/documentation/api/treegrid/#datasource) property to bind data returned from an external Fetch request. In the following example, data is fetched from the server using Fetch and then provided to the [dataSource](https://ej2.syncfusion.com/react/documentation/api/treegrid/#datasource) property by using `onSuccess` event of the Fetch. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -34,13 +35,13 @@ You can use TreeGrid [`dataSource`](https://ej2.syncfusion.com/react/documentati {% previewsample "page.domainurl/code-snippet/treegrid/data-binding-cs1" %} -> If you bind the dataSource from this way, then it acts like a local dataSource. So you cannot perform any server side crud actions. +> When data is bound using this approach, it is treated as a local datasource in the TreeGrid. Server-side CRUD operations are not performed automatically. ## Handling expandStateMapping -To denotes the expand status of parent row, define the [`expandStateMapping`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#expandstatemapping) property of tree grid. +To denote the expanded state of a parent row, define the TreeGrid [expandStateMapping](https://ej2.syncfusion.com/react/documentation/api/treegrid/#expandstatemapping) property. -The `expandStateMapping` property maps the field name in data source, that denotes whether parent record is in expanded or collapsed state and this is useful to renders parent row in expanded or collapsed state based on this mapping property value in data source. +The `expandStateMapping` property maps to a field in the datasource that indicates whether a parent record is expanded or collapsed and this is useful to renders parent row in expanded or collapsed state based on this mapping property value in datasource. ```ts @@ -68,7 +69,7 @@ export default App; ``` -The following code example defines `expandStateMapping` property at server end. +The following example defines the `expandStateMapping` property on the server: ```ts @@ -116,7 +117,7 @@ public class TreeData for (var c = 0; c < 500; c++) { root++; - string val = ((subparent + c + 1) % 3 == 0) ? "Low" : "Critical"; + string val = ((subparent + c + 1) % 3) == 0 ? "Low" : "Critical"; int subchild = subparent + c + 1; string progress = (ran.Next() % 3) == 0 ? "In Progress" : (ran.Next() % 2) == 0 ? "Open" : "Validated"; int childID = root ; @@ -133,9 +134,9 @@ public class TreeData ## Custom binding -It is possible to handle data processing externally and bind the result to the TreeGrid. This helps you to provide your own custom data logic. TreeGrid expects an object as the result of the custom logic and the emitted value should be an object with properties result and count. +Data processing can be handled externally and the result bound to the TreeGrid. This allows providing custom data logic. The TreeGrid expects the result of the custom logic to be an object containing the properties `result` and `count`. ->In this context, we are going to use Fetch from our @syncfusion/ej2-base library for handling remote interaction, you can choose any HTTP client as per your choice. +> In this context, Fetch from the @syncfusion/ej2-base library is used for remote interaction. Any HTTP client can be used. ```ts @@ -219,13 +220,13 @@ export default App; ``` -> We have a limitation for Custom Binding feature of TreeGrid. This feature works only for Self Referential data binding with `pageSizeMode` as `Root`. +> Limitation: The Custom Binding feature works only for self-referential data binding with `pageSizeMode` set to `Root`. ### Handling child data -Using the custom binding feature you can bind the child data for a parent record as per your custom logic. When a parent record is expanded, [`dataStateChange`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#datastatechange) event is triggered in which you can assign your custom data to the `childData` property of the `dataStateChange`](../../api/treegrid/#datastatechange) event arguments.After assigning the child data, `childDataBind` method should be called from the[`dataStateChange`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#datastatechange) event arguments to indicate that the data is bound. +Using the custom binding feature, child data can be loaded for a parent record according to custom logic. When a parent record is expanded, the [dataStateChange](https://ej2.syncfusion.com/react/documentation/api/treegrid/#datastatechange) event is triggered. Assign the child data to the `childData` property of the `dataStateChange` event arguments. After assigning the child data, call the `childDataBind` method from the `dataStateChange` event arguments to indicate that the data is bound. -> In this context, initially we have assigned only the parent records to the treegrid dataSource and fetched the required child records in the [`dataStateChange`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#datastatechange) event. +> In this context, only parent records are assigned to the TreeGrid initially. The required child records are fetched in the `dataStateChange` event. ```ts @@ -334,9 +335,9 @@ export default App; ``` -### Handling Tree Grid actions +### Handling TreeGrid actions -For TreeGrid actions such as paging, sorting, etc dataStateChange event will be invoked. You have to query and resolve data using Fetch in this event based on the state arguments. +For TreeGrid actions such as paging and sorting, the `dataStateChange` event is invoked. Query and resolve data in this event using Fetch based on the state arguments. ```ts @@ -427,7 +428,7 @@ export default App; ### Performing CRUD actions -The [`dataSourceChanged`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#datasourcechanged) event will be triggered for updating the grid data. You can perform the save operation based on the event arguments and call the endEdit method to indicate the completion of save operation. +The [dataSourceChanged](https://ej2.syncfusion.com/react/documentation/api/treegrid/#datasourcechanged) event is triggered when the grid data is updated. Perform the save operation based on the event arguments and call the `endEdit` method to indicate completion. ```ts @@ -578,7 +579,7 @@ export default App; ### Calculate aggregates -The footer aggregate values should be calculated and sent along with the **dataSource** property as follows. The aggregate property of the data source should contain the aggregate value assigned to the property named in the **field – type** format. For example, the **Sum** aggregate value for the **Duration** field should be assigned to the property named as **Duration - sum**. +Footer aggregate values should be calculated and sent along with the `dataSource` result. The `aggregates` property of the datasource response should contain aggregate values using the naming pattern `field - type`. For example, assign the **Sum** aggregate value for the **Duration** field to the property `Duration - sum`. ``` { @@ -588,9 +589,9 @@ The footer aggregate values should be calculated and sent along with the **data } ``` -### Provide excel filter data source +### Provide excel filter datasource -The [`dataStateChange`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#datastatechange) event will be triggered with appropriate arguments when the excel filter requests the filter choice data source. You need to resolve the excel filter data source using the **dataSource** resolver function from the state argument as follows. +The [dataStateChange](https://ej2.syncfusion.com/react/documentation/api/treegrid/#datastatechange) event is triggered with appropriate arguments when the Excel filter requests filter choice data. Resolve the Excel filter data by calling the `dataSource` resolver function from the state arguments, as shown below. ```ts @@ -682,15 +683,15 @@ export default App; ``` ## Refresh the datasource -Refreshing the datasource in a Syncfusion TreeGrid involves updating the data that the TreeGrid displays dynamically. This operation is essential when you need to reflect changes in the underlying data without reloading the entire page or component. +Refreshing the datasource in a Syncfusion TreeGrid updates the data displayed dynamically. This operation reflects changes in the underlying data without reloading the entire page or component. -You can add/delete the datasource records through an external button. To reflect these changes in the TreeGrid, you must assign the modified data to the dataSource property. +Records can be added or deleted through an external button. To reflect these changes in the TreeGrid, assign the modified data to the `dataSource` property. -**Steps to refresh the TreeGrid after datasource change:** +**Steps to refresh the TreeGrid after datasource changes:** **Step 1: Modify the datasource** -You can add or delete records from the datasource using the following code: +Add or delete records from the datasource using the following code: ```ts @@ -706,13 +707,13 @@ You can add or delete records from the datasource using the following code: **Step 2: Refresh the TreeGrid** -Refresh the TreeGrid after the datasource change by assign the modified data to dataSource property. +Assign the modified data to the `dataSource` property to refresh the TreeGrid. ```ts treegridObj.dataSource = dataSource; // Refresh the TreeGrid. ``` -The following example demonstrates how to add and delete records from datasource using an external button: +The following example demonstrates how to add and delete records from the datasource using an external button: {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -731,4 +732,4 @@ The following example demonstrates how to add and delete records from datasource {% previewsample "page.domainurl/code-snippet/treegrid/refresh-cs8" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. +> Refer to our [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for key feature highlights. Explore our [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/data-binding/local-data.md b/ej2-react/treegrid/data-binding/local-data.md index bdfbfc24d..0af745392 100644 --- a/ej2-react/treegrid/data-binding/local-data.md +++ b/ej2-react/treegrid/data-binding/local-data.md @@ -1,31 +1,31 @@ --- layout: post -title: Local data in React Treegrid component | Syncfusion -description: Learn here all about Local data in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Local data in React TreeGrid component | Syncfusion +description: Learn about local data binding in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Local data platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Local data in React Treegrid component +# Local data in React TreeGrid -In Local Data binding, data source for rendering the TreeGrid control is retrieved from the same application locally. +In local data binding, the datasource used to render the TreeGrid is retrieved locally within the same application. -Two types of Data binding are possible with the TreeGrid control. +Two types of data binding are supported by the TreeGrid: -* Hierarchical Datasource binding -* Self-Referential Data binding (Flat Data) +* Hierarchical datasource binding +* Self-referential data binding (flat data) -To bind local data to the treegrid, you can assign a JavaScript object array to the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/treegrid#datasource) property. The local data source can also be provided as an instance of the **DataManager**. +To bind local data to the TreeGrid, assign a JavaScript object array to the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#datasource) property. The local datasource can also be provided as an instance of the **DataManager**. -> By default, **DataManager** uses [`JsonAdaptor`](https://ej2.syncfusion.com/documentation/data/adaptors/#json-adaptor) for local data-binding. +> By default, **DataManager** uses the [JsonAdaptor](https://ej2.syncfusion.com/documentation/data/adaptors/#json-adaptor/) for local data binding. -## Hierarchy data source binding +## Hierarchy datasource binding -The [`childMapping`](https://ej2.syncfusion.com/react/documentation/api/treegrid#childMapping) property is used to map the child records in hierarchy data source. +Use the [childMapping](https://ej2.syncfusion.com/react/documentation/api/treegrid/#childmapping) property to map child records in a hierarchical datasource. -The following code example shows you how to bind the hierarchical local data into the TreeGrid control. +The following example demonstrates how to bind hierarchical local data to the TreeGrid. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -41,14 +41,14 @@ The following code example shows you how to bind the hierarchical local data int {% previewsample "page.domainurl/code-snippet/treegrid/data-binding-cs2" %} -> * Remote data binding is not supported for Hierarchy Data. +> Remote data binding is not supported for hierarchical data. ## Self-Referential data binding (Flat data) -TreeGrid is rendered from Self-Referential data structures by providing two fields, ID field and parent ID field. +The TreeGrid can be rendered from self-referential data structures by providing two fields: an ID field and a parent ID field. -* **ID Field**: This field contains unique values used to identify nodes. Its name is assigned to the [`idMapping`](https://ej2.syncfusion.com/react/documentation/api/treegrid#idMapping) property. -* **Parent ID Field**: This field contains values that indicate parent nodes. Its name is assigned to the [`parentIdMapping`](https://ej2.syncfusion.com/react/documentation/api/treegrid#parentIdMapping) property. +* **ID Field**: Contains unique values that identify nodes. Assign its name to the [idMapping](https://ej2.syncfusion.com/react/documentation/api/treegrid/#idmapping) property. +* **Parent ID Field**: Contains values that indicate parent nodes. Assign its name to the [parentIdMapping](https://ej2.syncfusion.com/react/documentation/api/treegrid/#parentidmapping) property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -64,33 +64,33 @@ TreeGrid is rendered from Self-Referential data structures by providing two fiel {% previewsample "page.domainurl/code-snippet/treegrid/data-binding-cs3" %} -> Herewith we have provided list of reserved properties and the purpose used in TreeGrid. We recommend to avoid these reserved properties for Internal purpose(To get rid of conflicts). +> The following reserved properties are used internally by the TreeGrid. Avoid using these property names in application data to prevent conflicts. Reserved keywords | Purpose -----|----- -childRecords | Specifies the childRecords of a parentData -hasChildRecords | Specifies whether the record contains child records -hasFilteredChildRecords | Specifies whether the record contains filtered child records -expanded | Specifies whether the child records are expanded -parentItem | Specifies the parentItem of childRecords -index | Specifies the index of current record -level | Specifies the hierarchy level of record -filterLevel | Specifies the hierarchy level of filtered record -parentIdMapping | Specifies the parentID +childRecords | Specifies the child records of a parent record +hasChildRecords | Indicates whether the record contains child records +hasFilteredChildRecords | Indicates whether the record contains filtered child records +expanded | Indicates whether child records are expanded +parentItem | References the parent record of a child +index | Specifies the index of the current record +level | Specifies the hierarchy level of the record +filterLevel | Specifies the hierarchy level of a filtered record +parentIdMapping | Specifies the parent ID value uniqueID | Specifies the unique ID of a record -parentUniqueID | Specifies the parent Unique ID of a record +parentUniqueID | Specifies the unique ID of the parent record checkboxState | Specifies the checkbox state of a record -isSummaryRow | Specifies the summary of a record -taskData | Specifies the main data -primaryParent | Specifies the Primary data +isSummaryRow | Indicates that the record is a summary row +taskData | References the original data object +primaryParent | References the primary parent data ## Immutable mode -Immutable mode in the Syncfusion TreeGrid is designed to optimize re-rendering performance by utilizing the object reference and [deep compare](https://dmitripavlutin.com/how-to-compare-objects-in-javascript/#4-deep-equality) concept. When performing the TreeGrid actions, it will only re-render the modified or newly added rows and prevent the re-rendering of the unchanged rows. +Immutable mode in the Syncfusion TreeGrid optimizes re-rendering performance by leveraging object reference and [deep comparison](https://dmitripavlutin.com/how-to-compare-objects-in-javascript/#4-deep-equality). During TreeGrid actions, only added or modified rows are re-rendered, and unchanged rows are preserved. -To enable this feature, you need to set the [enableImmutableMode](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enableImmutableMode) property as **true**. +Enable this feature by setting the [`enableImmutableMode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enableimmutablemode) property to `true`. -The following example demonstrates how to enable immutable mode in an React component: +The following example demonstrates how to enable immutable mode in a React component: {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -109,15 +109,15 @@ The following example demonstrates how to enable immutable mode in an React comp {% previewsample "page.domainurl/code-snippet/treegrid/immutable-mode-cs1" %} ->* This feature uses the primary key value for data comparison. So, you need to provide the [isPrimaryKey](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#isprimarykey) column. +> This feature uses the primary key value for data comparison. Ensure a column has [`isPrimaryKey`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#isprimarykey) set to `true`. ### Limitations -The following features are not supported in the immutable mode: +The following features are not supported in immutable mode: * Frozen rows and columns -* Row Template -* Detail Template +* Row template +* Detail template * Column reorder * Virtualization * Infinite scroll \ No newline at end of file diff --git a/ej2-react/treegrid/data-binding/remote-data.md b/ej2-react/treegrid/data-binding/remote-data.md index bb08a77f8..51b2cc552 100644 --- a/ej2-react/treegrid/data-binding/remote-data.md +++ b/ej2-react/treegrid/data-binding/remote-data.md @@ -1,33 +1,33 @@ --- layout: post -title: Remote data in React Treegrid component | Syncfusion -description: Learn here all about Remote data in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Remote data in React TreeGrid | Syncfusion +description: Learn here all about Remote data in Syncfusion React TreeGrid of Syncfusion Essential JS 2 and more. control: Remote data platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Remote data in React Treegrid component +# Remote data in React TreeGrid -To bind remote data to TreeGrid component, assign service data as an instance of **DataManager** to the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/treegrid#datasource) property. To interact with remote data source, provide the endpoint **url** and define the [`hasChildMapping`](https://ej2.syncfusion.com/react/documentation/api/treegrid#hasChildMapping) property of treegrid. +To bind remote data to the TreeGrid, assign a service endpoint through an instance of **DataManager** to the [dataSource](https://ej2.syncfusion.com/react/documentation/api/treegrid/#datasource) property. To interact with a remote datasource, provide the endpoint `url` and define the [hasChildMapping](https://ej2.syncfusion.com/react/documentation/api/treegrid/#haschildmapping) property of the TreeGrid. -The [`hasChildMapping`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#haschildmapping) property maps the field name in data source, that denotes whether current record holds any child records. This is useful internally to show expand icon while binding child data on demand. +The `hasChildMapping` property maps to a field in the datasource that indicates whether the current record contains child records. This is used internally to display the expand icon and load child data on demand. -The TreeGrid provides **Load on Demand** support for rendering remote data. The Load on demand is considered in TreeGrid for the following actions. +The TreeGrid provides **Load on Demand** support for rendering remote data. Load on demand is applied in the following actions: * Expanding root nodes. -* Navigating pages, with paging enabled in TreeGrid. +* Navigating pages when paging is enabled in the TreeGrid. -When load on demand is enabled, all the root nodes are rendered in collapsed state at initial load. +When load on demand is enabled, all root nodes are rendered in a collapsed state initially. -When load on demand support is enabled in TreeGrid with paging, the current or active page’s root node alone will be rendered in collapsed state. On expanding the root node, the child nodes will be loaded from the remote server. +When load on demand is enabled with paging, only the root nodes of the active page are rendered (collapsed) on initial load. On expanding a root node, the corresponding child nodes are fetched from the remote server. -When a root node is expanded, its child nodes are rendered and are cached locally, such that on consecutive expand/collapse actions on root node, the child nodes are loaded from the cache instead from the remote server. +When a root node is expanded, its child nodes are rendered and cached locally. Subsequent expand/collapse operations on the same root node use the cached child nodes instead of requesting them again from the server. -Similarly, if the user navigates to a new page, the root nodes of that specific page, will be rendered with request to the remote server. +When navigating to a new page, the root nodes for that page are requested from the remote server and rendered accordingly. ->Remote Data Binding supports only Self-Referential Data and by default the `pageSizeMode` for Remote Data is `Root` mode. i.e only root node’s count will be shown in pager while using Remote Data +> Remote data binding supports only self-referential data. By default, the `pageSizeMode` for remote data is `Root`. That is, only the root node count is shown in the pager when using remote data. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -153,17 +153,17 @@ namespace Controllers ``` -> By default, **DataManager** uses [`ODataAdaptor`](https://ej2.syncfusion.com/documentation/data/adaptors/#odata-adaptor) for remote data-binding. -> Based on the RESTful web services, set the corresponding adaptor to DataManager. Refer [`here`](https://ej2.syncfusion.com/documentation/data/adaptors/?no-cache=1) for more details. -> Filtering and searching server-side data operations are not supported in load on demand +> By default, **DataManager** uses the [ODataAdaptor](https://ej2.syncfusion.com/documentation/data/adaptors/#odata-adaptor/) for remote data binding. +> Based on the RESTful web services in use, set the corresponding adaptor on the DataManager. Refer to the [adaptor documentation](https://ej2.syncfusion.com/documentation/data/adaptors/?no-cache=1) for details. +> Filtering and searching as server-side operations are not supported when using load on demand. ## LoadChildOnDemand -While binding remote data to Tree Grid component, by default Tree Grid renders parent rows in collapsed state. Tree Grid provides option to load the child records also during the initial rendering itself for remote data binding by setting [`loadChildOnDemand`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#loadchildondemand) as false. +When binding remote data to the TreeGrid, parent rows are rendered in a collapsed state by default. The TreeGrid provides an option to load child records during initial rendering for remote data binding by setting [loadChildOnDemand](https://ej2.syncfusion.com/react/documentation/api/treegrid/#loadchildondemand) to `false`. -When [`loadChildOnDemand`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#loadchildondemand) is enabled parent records are rendered in collapsed state. +When `loadChildOnDemand` is enabled (true), parent records are rendered in a collapsed state. -The following code example describes the behavior of the loadChildOnDemand feature of Tree Grid. +The following code example describes the behavior of the `loadChildOnDemand` feature of the TreeGrid. ```ts @@ -197,9 +197,9 @@ export default App; ``` ->Also while using **loadChildOnDemand** we need to handle the child records on server end and it is applicable to CRUD operations also. +> Also, when using `loadChildOnDemand`, child records must be handled on the server. This applies to CRUD operations as well. -The following code example describes handling of child records at server end. +The following code example describes handling child records on the server. ```ts @@ -269,7 +269,7 @@ public ActionResult UrlDatasource(DataManagerRequest dm) ## Offline mode -On remote data binding, all treegrid actions such as paging, loading child on-demand, will be processed on server-side. To avoid postback, set the treegrid to load all data on initialization and make the actions process in client-side. To enable this behavior, use the **offline** property of **DataManager**. +With remote data binding, actions such as paging and loading child records on demand are processed on the server. To avoid postback, configure the TreeGrid to load all data during initialization and process actions on the client. Enable this behavior by using the `offline` property of **DataManager**. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -284,7 +284,7 @@ On remote data binding, all treegrid actions such as paging, loading child on-de ## Custom adaptor -You can create your own adaptor by extending the built-in adaptors. The following demonstrates custom adaptor approach and how to add a serial number for the records by overriding the built-in response processing using the `processResponse` method of the `ODataAdaptor`. +Create a custom adaptor by extending the built-in adaptors. The following demonstrates a custom adaptor approach that adds a serial number to records by overriding the built-in response processing through the `processResponse` method of the `ODataAdaptor`. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -305,7 +305,7 @@ You can create your own adaptor by extending the built-in adaptors. The followin ## Sending additional parameters to the server -To add a custom parameter to the data request, use the [`addParams`](https://ej2.syncfusion.com/documentation/api/data/query/#addparams) method of [`Query`](https://ej2.syncfusion.com/documentation/api/data/query/#query) class. Assign the [`Query`](https://ej2.syncfusion.com/documentation/api/data/query/#query) object with additional parameters to the treegrid [`query`](https://ej2.syncfusion.com/react/documentation/api/treegrid#query) property. +To add custom parameters to the data request, use the [addParams](https://ej2.syncfusion.com/documentation/api/data/query/#addparams) method of the [Query](https://ej2.syncfusion.com/documentation/api/data/query/#query) class. Assign the configured `Query` object to the TreeGrid `Query` property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -320,9 +320,9 @@ To add a custom parameter to the data request, use the [`addParams`](https://ej2 ## Handling HTTP error -During server interaction from the treegrid, some server-side exceptions may occur, and you can acquire those error messages or exception details in client-side using the [`actionFailure`](https://ej2.syncfusion.com/react/documentation/api/treegrid#actionfailure) event. +During server interaction, server-side exceptions may occur. Access error messages or exception details on the client by using the [actionFailure](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actionfailure) event. -The argument passed to the [`actionFailure`](https://ej2.syncfusion.com/react/documentation/api/treegrid#actionfailure) event contains the error details returned from the server. +The argument passed to the `actionFailure` event contains the error details returned from the server. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -335,15 +335,15 @@ The argument passed to the [`actionFailure`](https://ej2.syncfusion.com/react/do {% previewsample "page.domainurl/code-snippet/treegrid/data-binding-cs8" %} -> The [`actionFailure`](https://ej2.syncfusion.com/react/documentation/api/treegrid#actionfailure) event will be triggered not only for the server errors, but also when there is an exception while processing the treegrid actions. +> The `actionFailure` event is triggered not only for server errors, but also when exceptions occur during TreeGrid action processing. ## Load on demand with virtualization -While binding remote data to Tree Grid component, by default Tree Grid renders parent rows in collapsed state. When expanding the root node, the child nodes will be loaded from the remote server. +When binding remote data, parent rows are rendered in a collapsed state by default. On expanding a root node, the corresponding child nodes are loaded from the remote server. -When using virtualization with remote data binding, it helps you to improve the tree grid performance while loading a large set of data by setting [`enableVirtualization`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enablevirtualization) as true. The Tree Grid UI virtualization allows it to render only rows and columns visible within the view-port without buffering the entire datasource. +Using virtualization with remote data binding improves performance when loading large datasets. Enable this by setting [enableVirtualization](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enablevirtualization) to `true`. TreeGrid UI virtualization renders only the rows and columns visible within the viewport without buffering the entire datasource. -[`hasChildMapping`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#haschildmapping) property maps the field name in data source, that denotes whether current record holds any child records. This is useful internally to show expand icon while binding child data on demand. +The [hasChildMapping](https://ej2.syncfusion.com/react/documentation/api/treegrid/#haschildmapping) property maps to a field in the datasource that indicates whether the current record contains child records. This is used internally to display the expand icon when binding child data on demand. ```ts @@ -386,7 +386,7 @@ export default App; ``` -The following code example describes handling of Load on demand at server end. +The following code example describes handling load on demand on the server. ```ts @@ -681,9 +681,9 @@ public class TreeData ### Load parent rows in expanded state with virtualization -Tree Grid provides an option to load the child records in the initial rendering itself for remote data binding by setting the [`loadChildOnDemand`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#loadchildondemand) as true. When the `loadChildOnDemand` is enabled, parent records are rendered in expanded state. +The TreeGrid provides an option to load child records during initial rendering for remote data binding by setting [loadChildOnDemand](https://ej2.syncfusion.com/react/documentation/api/treegrid/#loadchildondemand) to true. When `loadChildOnDemand` is enabled, parent records are rendered in an expanded state. -When using virtualization with `loadChildOnDemand` , it helps you to improve the tree grid performance while loading the child records during the initial rendering for remote data binding by setting [`enableVirtualization`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enablevirtualization) as true and `loadChildOnDemand` as true. +When using virtualization together with `loadChildOnDemand`, performance is improved while loading child records during the initial render for remote data binding. Enable this by setting [enableVirtualization](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enablevirtualization) to true and `loadChildOnDemand` to true. ```ts @@ -726,7 +726,7 @@ export default App; ``` -The following code example describes handling of child records at server end. +The following code example describes handling child records on the server. ```ts From e74d18940a1bc9f0e35634a4c2624f02c23c5938 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Fri, 26 Sep 2025 20:26:54 +0530 Subject: [PATCH 19/34] Integrated latest changes at 09-26-2025 7:31:34 PM --- ej2-react-toc.html | 2 +- .../ai-integrations/openai-integration.md | 37 +-- .../ai-integrations/gemini-ai/app/index.tsx | 6 +- .../ai-integrations/open-ai/app/index.jsx | 152 +++++------ .../ai-integrations/open-ai/app/index.tsx | 45 ++-- ej2-react/diagram/connector-labels.md | 40 +-- ej2-react/diagram/export.md | 107 ++++---- ej2-react/diagram/getting-started.md | 237 +++++++++--------- ej2-react/diagram/grid-lines.md | 51 ++-- ej2-react/diagram/group.md | 169 +++++++------ ej2-react/diagram/label-appearance.md | 63 +++-- ej2-react/diagram/label-events.md | 55 ++-- ej2-react/diagram/label-interaction.md | 77 +++--- ej2-react/diagram/labels.md | 40 +-- ej2-react/diagram/node-labels.md | 49 ++-- ej2-react/diagram/nodes-customization.md | 97 ++++--- ej2-react/diagram/nodes-events.md | 80 +++--- ej2-react/diagram/nodes-expandAndCollapse.md | 46 ++-- ej2-react/diagram/nodes-interaction.md | 54 ++-- ej2-react/diagram/nodes-positioning.md | 20 +- ej2-react/diagram/nodes.md | 122 +++++---- 21 files changed, 839 insertions(+), 710 deletions(-) diff --git a/ej2-react-toc.html b/ej2-react-toc.html index f68d84d5c..6d1a8e47a 100644 --- a/ej2-react-toc.html +++ b/ej2-react-toc.html @@ -244,7 +244,7 @@ Integration with Google Gemini
  • - Integration with Open AI + Integration with Azure Open AI
  • Integration with LLM diff --git a/ej2-react/ai-assistview/ai-integrations/openai-integration.md b/ej2-react/ai-assistview/ai-integrations/openai-integration.md index 11ea0e176..8f07cdc2d 100644 --- a/ej2-react/ai-assistview/ai-integrations/openai-integration.md +++ b/ej2-react/ai-assistview/ai-integrations/openai-integration.md @@ -1,7 +1,7 @@ --- layout: post -title: Open AI With React AI AssistView component | Syncfusion -description: Checkout and learn about Integration of Open AI With React AI AssistView component of Syncfusion Essential JS 2 and more details. +title: Azure Open AI With React AI AssistView component | Syncfusion +description: Checkout and learn about Integration of Azure Open AI With React AI AssistView component of Syncfusion Essential JS 2 and more details. platform: ej2-react control: AI AssistView documentation: ug @@ -9,20 +9,20 @@ domainurl: ##DomainURL## --- -# Integration of Open AI With AI AssistView component +# Integration of Azure Open AI With AI AssistView component -The Syncfusion AI AssistView supports integration with [OpenAI](https://platform.openai.com/docs/overview), enabling advanced conversational AI features in your React applications. +The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your React applications. ## Getting Started with the AI AssistView component -Before integrating Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your React app: +Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your React app: [React Getting Started Guide](../getting-started) ## Prerequisites * Requires `Node.js` (v16 or higher) and `npm`. -* OpenAI account to generate an API key for accessing the `OpenAI` API +* An Azure account with access to `Azure Open AI` services and a generated API key. * Syncfusion AI AssistView for React `@syncfusion/ej2-react-interactive-chat` installed in your project. ## Install Dependencies @@ -35,27 +35,30 @@ npm install @syncfusion/ej2-react-interactive-chat --save ``` -## Generate API Key +## Configure Azure Open AI -1. Go to [Open AI](https://platform.openai.com/docs/overview) and sign in with your Google account. If you don’t have one, create a new account. +1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource. -2. Once logged in, click on your profile icon in the top-right corner and select `API Keys` from the dropdown menu. +2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL. -3. Click the `+ Create new secret key` button. You’ll be prompted to name the key (optional). Confirm to generate the key. +3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version (e.g., 2024-07-01-preview) matches your resource configuration. -4. Your API key will be displayed once. Copy it and store it securely, as it won’t be shown again. +4. Store these values securely, as they will be used in your application. -> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production. +> `Security Note`: Never expose your API key in client-side code for production applications. Use a server-side proxy or environment variables to manage sensitive information securely. -## Integration Open AI with AI AssistView +## Integration Azure Open AI with AI AssistView -Create `src/App.js` to integrate the Open AI with AI AssistView component +Create `src/App.js` to integrate the Azure Open AI with AI AssistView component -* Add your generated `API Key` at the line +* Update the following configuration values with your Azure Open AI details: ```bash -const openaiApiKey = 'Place your API key here'; +const azureOpenAIApiKey = 'Your_Azure_OpenAI_API_Key'; +const azureOpenAIEndpoint = 'Your_Azure_OpenAI_Endpoint'; +const azureOpenAIApiVersion = 'Your_Azure_OpenAI_API_Version'; +const azureDeploymentName = 'Your_Deployment_Name'; ``` @@ -80,4 +83,4 @@ npm start ``` -Open `http://localhost:3000` to interact with your Open AI for dynamic response. +Open `http://localhost:3000` to interact with your Azure Open AI for dynamic response. diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx index 9b981514d..cd2a605bc 100644 --- a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx @@ -42,8 +42,8 @@ function App() { i++; if (i % responseUpdateRate === 0 || i === responseLength) { const htmlResponse: string = marked.parse(lastResponse) as string; - assistInstance.current?.addPromptResponse(htmlResponse, i === responseLength); - assistInstance.current?.scrollToBottom(); + assistInstance.current.addPromptResponse(htmlResponse, i === responseLength); + assistInstance.current.scrollToBottom(); } await new Promise(resolve => setTimeout(resolve, 15)); // Delay before the next chunk } @@ -61,7 +61,7 @@ function App() { streamResponse(responseText); }) .catch((error: unknown) => { - assistInstance.current?.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.'); + assistInstance.current.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.'); stopStreaming = true; }); }; diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.jsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.jsx index ad8c9520a..72f83140d 100644 --- a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.jsx +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.jsx @@ -1,92 +1,104 @@ -import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat'; import * as React from 'react'; import * as ReactDOM from "react-dom"; +import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat'; import { marked } from 'marked'; -const openaiApiKey = ''; // Replace with your Open AI API key (WARNING: Do not expose API key in client-side code for production) +const azureOpenAIApiKey = ''; // replace your key +const azureOpenAIEndpoint = ''; // replace your endpoint +const azureOpenAIApiVersion = ''; // replace to match your resource +const azureDeploymentName = ''; // your Azure OpenAI deployment name let stopStreaming = false; function App() { - const assistInstance = React.useRef(null); - const suggestions = [ - 'How do I prioritize my tasks?', - 'How can I improve my time management skills?' - ]; - const bannerTemplate = ''; - const toolbarItemClicked = (args) => { - if (args.item.iconCss === 'e-icons e-refresh') { - assistInstance.current.prompts = []; - assistInstance.current.promptSuggestions = suggestions; - stopStreaming = true; - } - }; + const assistInstance = React.useRef(null); + + const suggestions = [ + 'How do I prioritize my tasks?', + 'How can I improve my time management skills?', + ]; + + const bannerTemplate = + ''; + + const toolbarItemClicked = (args) => { + if (args.item.iconCss === 'e-icons e-refresh' && assistInstance.current) { + assistInstance.current.prompts = []; + assistInstance.current.promptSuggestions = suggestions; + stopStreaming=true; + } + }; + + const assistViewToolbarSettings = { + items: [{ iconCss: 'e-icons e-refresh', align: 'Right' }], + itemClicked: toolbarItemClicked, + }; + + const streamResponse = async (response) => { + let lastResponse = ''; + const responseUpdateRate = 10; + let i = 0; + const responseLength = response.length; + + while (i < responseLength && !stopStreaming) { + lastResponse += response[i]; + i++; + if (i % responseUpdateRate === 0 || i === responseLength) { + const htmlResponse = marked.parse(lastResponse); + assistInstance.current.addPromptResponse(htmlResponse, i === responseLength); + assistInstance.current.scrollToBottom(); + } + await new Promise((resolve) => setTimeout(resolve, 15)); + } + assistInstance.current.promptSuggestions = suggestions; + }; - const assistViewToolbarSettings = { - items: [ { iconCss: 'e-icons e-refresh', align: 'Right' } ], - itemClicked: toolbarItemClicked - }; + const handleStopResponse = () => { + stopStreaming = true; + }; - const streamResponse = async (response) => { - let lastResponse = ""; - const responseUpdateRate = 10; - let i = 0; - const responseLength = response.length; - while (i < responseLength && !stopStreaming) { - lastResponse += response[i]; - i++; - if (i % responseUpdateRate === 0 || i === responseLength) { - const htmlResponse = marked.parse(lastResponse); - assistInstance.current.addPromptResponse(htmlResponse, i === responseLength); - assistInstance.current.scrollToBottom(); - } - await new Promise(resolve => setTimeout(resolve, 15)); - } - assistInstance.current.promptSuggestions = suggestions; - }; + const onPromptRequest = (args) => { + const url = + azureOpenAIEndpoint.replace(/\/$/, '') + + `/openai/deployments/${encodeURIComponent(azureDeploymentName)}/chat/completions` + + `?api-version=${encodeURIComponent(azureOpenAIApiVersion)}`; - const onPromptRequest = (args) => { - fetch('https://api.openai.com/v1/chat/completions', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'Authorization': `Bearer ${openaiApiKey}`, - }, - body: JSON.stringify({ - model: 'gpt-4o-mini', - messages: [{ role: 'user', content: args.prompt }], - max_tokens: 150, - stream: false - }), + fetch(url, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'api-key': azureOpenAIApiKey, + }, + body: JSON.stringify({ + messages: [{ role: 'user', content: args.prompt }], + temperature: 0.7, + max_tokens: 150 + }), }) - .then(response => response.json()) + .then(response => response.json()) .then(reply => { const responseText = reply.choices[0].message.content.trim() || 'No response received.'; stopStreaming = false; streamResponse(responseText); }) - .catch(error => { - assistInstance.current.addPromptResponse( - '⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.' - ); + .catch((error) => { + assistInstance.current.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please check your API key, Deployment model, endpoint or try again later.',true); stopStreaming = true; }); - }; + }; - const handleStopResponse = () => { - stopStreaming = true; - }; - return ( - - ); + return ( + + ); } -ReactDOM.render(, document.getElementById('container')); +ReactDOM.render(, document.getElementById('container')); \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.tsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.tsx index e0a7b863f..df11443ef 100644 --- a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.tsx +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.tsx @@ -3,7 +3,10 @@ import * as React from 'react'; import * as ReactDOM from "react-dom"; import { marked } from 'marked'; -const openaiApiKey = ''; // Replace with your Open AI API key (WARNING: Do not expose API key in client-side code for production) +const azureOpenAIApiKey = ''; // replace your key +const azureOpenAIEndpoint = ''; // replace your endpoint +const azureOpenAIApiVersion = ''; // replace to match your resource +const azureDeploymentName = ''; // your Azure OpenAI deployment name let stopStreaming = false; function App() { @@ -36,8 +39,8 @@ function App() { i++; if (i % responseUpdateRate === 0 || i === responseLength) { const htmlResponse = marked.parse(lastResponse); - assistInstance.current?.addPromptResponse(htmlResponse, i === responseLength); - assistInstance.current?.scrollToBottom(); + assistInstance.current.addPromptResponse(htmlResponse, i === responseLength); + assistInstance.current.scrollToBottom(); } await new Promise(resolve => setTimeout(resolve, 15)); } @@ -47,29 +50,31 @@ function App() { }; const onPromptRequest = (args: any) => { - fetch('https://api.openai.com/v1/chat/completions', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'Authorization': `Bearer ${openaiApiKey}`, - }, - body: JSON.stringify({ - model: 'gpt-4o-mini', - messages: [{ role: 'user', content: args.prompt }], - max_tokens: 150, - stream: false - }), - }) + const url = + azureOpenAIEndpoint.replace(/\/$/, '') + + `/openai/deployments/${encodeURIComponent(azureDeploymentName)}/chat/completions` + + `?api-version=${encodeURIComponent(azureOpenAIApiVersion)}`; + + fetch(url, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'api-key': azureOpenAIApiKey, + }, + body: JSON.stringify({ + messages: [{ role: 'user', content: args.prompt }], + temperature: 0.7, + max_tokens: 150 + }), + }) .then(response => response.json()) .then(reply => { const responseText = reply.choices[0].message.content.trim() || 'No response received.'; stopStreaming = false; streamResponse(responseText); }) - .catch(error => { - assistInstance.current?.addPromptResponse( - '⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.' - ); + .catch((error: unknown) => { + assistInstance.current.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please check your API key, Deployment model, endpoint or try again later.', true); stopStreaming = true; }); }; diff --git a/ej2-react/diagram/connector-labels.md b/ej2-react/diagram/connector-labels.md index c9a41b6f6..d64ca8808 100644 --- a/ej2-react/diagram/connector-labels.md +++ b/ej2-react/diagram/connector-labels.md @@ -8,23 +8,25 @@ documentation: ug domainurl: ##DomainURL## --- -# Connector annotations in React Diagram component +# Connector Annotations in React Diagram Component -Annotations of a connector can be positioned using the following properties of Annotation class. +Connector annotations are text labels that can be positioned along connector paths to provide descriptive information or context. These annotations offer flexible positioning and styling options to enhance diagram readability and communication. -* Offset -* Alignment -* Displacement -* SegmentAngle -* HorizontalAlignment -* VerticalAlignment -* Margin +Annotations on connectors can be precisely positioned and customized using the following properties of the Annotation class: + +* **Offset** - Controls position along the connector path (0 to 1). +* **Alignment** - Aligns annotation relative to connector segments. +* **Displacement** - Moves annotation away from its calculated position. +* **SegmentAngle** - Rotates annotation based on connector direction. +* **HorizontalAlignment** - Controls horizontal positioning. +* **VerticalAlignment** - Controls vertical positioning. +* **Margin** - Adds spacing around the annotation. ## Annotation offset -The [`offset`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pathAnnotationModel/#offset) for [`pathAnnotation`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pathAnnotationModel) is of type number and ranges from 0 to 1, from the source to the target point of the connector. By default, the offset value for a connector annotation is 0.5. +The [`offset`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pathAnnotationModel/#offset) for [`pathAnnotation`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pathAnnotationModel) accepts a number value ranging from 0 to 1, representing the position along the connector path from source to target point. An offset value of 0 positions the annotation at the source point, while 1 positions it at the target point. The default offset value is 0.5, which centers the annotation on the connector. -The following code illustrates, how to set offset for the connector. +The following code example demonstrates how to configure the offset for connector annotations: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -43,7 +45,11 @@ The following image shows the position of the annotation with respect to differe ## Annotation alignment -The connector’s annotation can be aligned over its segment path using the [`alignment`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationAlignment/) property of annotation. +Connector annotations can be aligned relative to their segment path using the [`alignment`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationAlignment/)property. This property offers three alignment options: + +* **Before** - Positions the annotation before the calculated offset point. +* **Center** - Centers the annotation at the offset point (default). +* **After** - Positions the annotation after the calculated offset point. The following code example illustrates how to align connector annotations. @@ -60,7 +66,9 @@ The following code example illustrates how to align connector annotations. ## Displacement of annotation -[`Displacement`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pointModel/) refers displacement of an annotation from its actual position. A connector annotation can be displaced to a particular distance by using a displacement property of the pathAnnotation. The following example shows how to set displacement for the connector annotation. +The [`Displacement`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pointModel/) property allows annotations to be moved away from their calculated position by a specified distance. This feature is particularly useful for avoiding overlaps with connector paths or improving visual clarity. + +The following example shows how to apply displacement to connector annotations: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -73,11 +81,13 @@ The following code example illustrates how to align connector annotations. {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Displacement-cs1" %} -N> Displacement is only applicable when we use alignment as `After` or `Before`. +N> Displacement is only applicable when we use alignment as **After** or **Before**. ## Segment angle for annotation -The [`segmentAngle`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pathAnnotationModel/#segmentangle) property is used to rotate the annotation based on the connectors segment direction. By default, annotation will be rotated in the connector path. When you set `segmentAngle` as true, annotation will be rotated from its position based on the connector segment direction. The following code illustrates, how to set segment angle. +The [`segmentAngle`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pathAnnotationModel/#segmentangle) property controls whether annotations rotate to match the connector segment direction. When set to **true**, annotations automatically rotate based on the angle of the connector segment they are positioned on, creating a more integrated visual appearance. When set to **false** (default), annotations maintain their original orientation regardless of connector direction. + +The following code example demonstrates how to configure segment angle rotation: {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/diagram/export.md b/ej2-react/diagram/export.md index bd302f9ff..92312d06c 100644 --- a/ej2-react/diagram/export.md +++ b/ej2-react/diagram/export.md @@ -1,18 +1,22 @@ --- layout: post -title: Export in React Diagram component | Syncfusion® -description: Learn here all about Export in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Export in React Diagram Component | Syncfusion® +description: Learn here all about Export in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Export platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Export in React Diagram component +# Export in React Diagram Component -Diagram provides support to export its content as image/svg files. The [`exportDiagram`](https://ej2.syncfusion.com/react/documentation/api/diagram/#exportdiagram) method of diagram helps to export the diagram. The following code illustrates how to export the diagram as image. +The React Diagram component provides comprehensive support for exporting diagram content as image files (JPG, PNG) or vector graphics (SVG). This functionality enables users to save diagrams for documentation, presentations, or further processing. The [`exportDiagram`](https://ej2.syncfusion.com/react/documentation/api/diagram/#exportdiagram) method serves as the primary interface for all export operations. ->Note: To Export diagram, you need to inject `PrintAndExport` in the diagram. +>Note: To export diagrams, inject `PrintAndExport` in the diagram component. + +## Basic Export Example + +The following code demonstrates a simple diagram export operation: @@ -42,37 +46,38 @@ To export the React Diagram elements in various formats, refer to below video li {% youtube "https://www.youtube.com/watch?v=IkWXjhRE-o0" %} -## Exporting options +## Export Configuration Options -The diagram provides support to export the desired region of the diagram to various formats. The following table shows the list of [`exportOptions`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExportOptions/) in diagram. +The diagram component supports extensive customization through the [`exportOptions`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExportOptions/) interface. The following table details all available configuration properties: | Name | Type | Description| |-------- | -------- | -------- | -| bounds | object | Sets the bounds that has to be exported | -| region | enum | Sets the region of the diagram to be exported. | -| fileName | string | Sets the file name of the exported image. | -| format | string | Sets the export image format. | -| mode | string | Sets the Mode for the file to be downloaded. | -| margin | object | Sets the margin of the page to be exported. | -| stretch| enum | Sets the aspect ratio of the exported image.| -| multiplePage | boolean | exports the diagram into multiple pages. | -| pageWidth | number | Sets the page width of the diagram while exporting the diagram into multiple pages. | -| pageHeight| number | Sets the page height of the diagram while exporting the diagram into multiple pages.| -| pageOrientation | enum | Sets the orientation of the page. | +| bounds | object | Defines specific bounds for CustomBounds region export | +| region | enum | Specifies the diagram area to export (PageSettings, Content, or CustomBounds) | +| fileName | string | Sets the exported file name (default: "Diagram") | +| format | string | Defines export format (JPG, PNG, or SVG) | +| mode | string | Controls export behavior (Download or Data) | +| margin | object | Adds spacing around the exported content | +| stretch| enum | Adjusts aspect ratio and image quality of exported content | +| multiplePage | boolean | Enables multi-page export for large diagrams | +| pageWidth | number | Sets page width for multi-page exports | +| pageHeight| number | Sets page height for multi-page exports | +| pageOrientation | enum | Controls page orientation (Portrait or Landscape) | +## File Name Configuration -### File Name +[`FileName`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExportOptions/#filename) property specifies the name for downloaded files. When not specified, the default name **Diagram** is used. -[`FileName`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExportOptions/#filename) is the name of the file to be downloaded. By default, the file name is set to **Diagram**. +## Export Formats -### Format +The [`Format`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExportOptions/#format) property determines the output file type. The component supports three formats with distinct characteristics: -[`Format`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExportOptions/#format) specifies the type/format of the exported file. By default, the diagram is exported in .jpg format. You can export the diagram to the following formats: +* **JPG**: Compressed format suitable for photographs and complex diagrams with many colors. +* **PNG**: Lossless format ideal for diagrams with transparency or sharp edges. +* **SVG**: Vector format that maintains quality at any scale and supports text selection. -* JPG -* PNG -* SVG +The default export format is JPG. The following example shows format specification: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -86,12 +91,9 @@ The diagram provides support to export the desired region of the diagram to vari {% previewsample "page.domainurl/code-snippet/diagram/export/export-cs1" %} +## Margin Configuration -### Margin - -The [`margin`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExportOptions/#margin) specifies the amount of space that has to be left around the diagram while exporting. - -The following code example demonstrates how to set margin for the exported image. +The [`margin`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExportOptions/#margin) property adds whitespace around the exported diagram content. This spacing improves presentation and prevents content from appearing cramped. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -105,12 +107,14 @@ The following code example demonstrates how to set margin for the exported image {% previewsample "page.domainurl/code-snippet/diagram/export/export-cs2" %} -### Mode +## Export Modes + +The [`mode`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExportOptions/#mode) property controls how the exported content is delivered: -The [`mode`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExportOptions/#mode) option specifies whether to export the diagram as an image or to return the base64 data of the diagram. The available export modes are: +* **Download**: Automatically downloads the diagram as a file to the user's device. +* **Data**: Returns a base64 string representation for programmatic processing. -* Download: Exports and downloads the diagram as an image or SVG file. -* Data: Returns a base64 string representation of the diagram. +The Data mode is useful for applications that need to process or transmit the exported content programmatically: The following code example demonstrates how to export the diagram as raw data. @@ -142,17 +146,17 @@ root.render(); ``` -### Region +## Region-Based Export Exporting particular region of diagram is possible by using the [`region`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExportOptions/#region) property of the [`exportOptions`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExportOptions/). The available export regions are listed in the table below. | Region | Description | |-------- | -------- | -| PageSettings | The region to be exported will be based on the given page settings | -| Content | Only the content of the diagram control will be exported | -| CustomBounds | The region to be exported will be explicitly defined | +| PageSettings | Exports based on the configured page dimensions and settings. | +| Content | Exports only the visible diagram elements, excluding empty space. | +| CustomBounds | Exports a user-defined rectangular area. | -The following example shows how to export diagram with different regions. +The following example demonstrates different region export options: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -166,13 +170,16 @@ The following example shows how to export diagram with different regions. {% previewsample "page.domainurl/code-snippet/diagram/export/export-cs3" %} ->Note: The [`bounds`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExportOptions/#bounds) property of [`exportOptions`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExportOptions/) should be defined to export the diagram with CustomBounds region. +>Note: The [`bounds`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExportOptions/#bounds) property of `exportOptions` should be defined to export the diagram with CustomBounds region. + +## Multi-Page Export -### MultiplePage +For large diagrams that exceed standard page dimensions, the [`multiplePage`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExportOptions/#multiplepage) option enables export across multiple pages: -When the [`multiplePage`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExportOptions/#multiplepage) option is set to false, the diagram is exported as a single image. When it set to true, the diagram is exported as multiple images based on its width and height. +* **false** (default): Export as a single image regardless of size +* **true**: Split the diagram across multiple pages based on specified dimensions -The following code example demonstrates how to export the diagram as multiple images. +The following example shows multi-page export configuration: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -186,9 +193,9 @@ The following code example demonstrates how to export the diagram as multiple im {% previewsample "page.domainurl/code-snippet/diagram/export/export-cs4" %} -### Export image +## Direct Image Export -You can pass the base64 data of an image to the [`exportImage`](https://ej2.syncfusion.com/react/documentation/api/diagram/#exportimage) method to export it directly. The following example shows how to export base64 data using the `exportImage` method. +The [`exportImage`](https://ej2.syncfusion.com/react/documentation/api/diagram/#exportimage) method allows direct export of base64 image data without requiring a diagram instance. This method is useful for processing pre-existing image data. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -202,9 +209,9 @@ You can pass the base64 data of an image to the [`exportImage`](https://ej2.sync {% previewsample "page.domainurl/code-snippet/diagram/export/export-cs5" %} -### Get diagram content +## Diagram Content Retrieval -To get the html diagram content, the [`getDiagramContent`](https://ej2.syncfusion.com/react/documentation/api/diagram/#getdiagramcontent) method is used. the following example shows how to get the diagram content at runtime. +The [`getDiagramContent`](https://ej2.syncfusion.com/react/documentation/api/diagram/#getdiagramcontent) method retrieves the HTML representation of the diagram at runtime. This functionality supports dynamic content analysis and processing. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -218,9 +225,9 @@ To get the html diagram content, the [`getDiagramContent`](https://ej2.syncfusio {% previewsample "page.domainurl/code-snippet/diagram/export/export-cs6" %} -### Export diagram with stretch option +## Stretch Option for Enhanced Quality -Diagram provides support to export the diagram as image for [`stretch`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExportOptions/#stretch) option. The exported images will be clearer but larger in file size. +The [`stretch`](https://ej2.syncfusion.com/react/documentation/api/diagram/iExportOptions/#stretch) property improves exported image quality by adjusting the aspect ratio. Images exported with stretch enabled are clearer but result in larger file sizes. The following code example illustrates how to export the region occupied by the diagram elements. @@ -253,6 +260,6 @@ root.render(); ``` -## Limitations +## Export Limitations Currently, exporting diagram into image format with native and HTML nodes is not supported. To overcome this limitation, we make use of the Syncfusion® Essential® PDF library. This library incorporates the Syncfusion® Essential® HTML converter, which employs the advanced Blink rendering engine. This converter seamlessly transforms HTML content into images. Refer to [`export Html-and-Native node`](https://support.syncfusion.com/kb/article/15530/how-to-print-or-export-the-html-and-native-node-into-image-format-using-react-diagram) kb for more information. diff --git a/ej2-react/diagram/getting-started.md b/ej2-react/diagram/getting-started.md index 79c9836ee..d94176b64 100644 --- a/ej2-react/diagram/getting-started.md +++ b/ej2-react/diagram/getting-started.md @@ -1,16 +1,16 @@ --- layout: post title: Getting Started with React Diagram Component | Syncfusion® -description: Checkout and learn about getting started with Syncfusion Essential® React Diagram component, it's elements, and more. +description: Checkout and learn about getting started with Syncfusion Essential® React Diagram Component, it's elements, and more. control: Getting started platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Getting Started with React Diagram +# Getting Started with React Diagram Component -This section explains the steps required to create a simple diagram and demonstrates the basic usage of the diagram control. +This section explains the steps required to create a simple diagram and demonstrates the basic usage of the diagram control in React applications. ## Prerequisites @@ -34,11 +34,11 @@ The following list of dependencies are required to use the `Diagram` component i |-- @syncfusion/ej2-react-base ``` -## Installation and configuration +## Installation and Configuration To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production. -> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. +> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. To create a new React application, run the following command. @@ -60,19 +60,19 @@ cd my-app npm run dev ``` -### Adding Syncfusion® packages +### Adding Syncfusion® Packages -All the available Essential® JS 2 packages are published in [`Node Package Manager`](https://www.npmjs.com/~syncfusionorg) public registry. You can choose the component that you want to install. For this application, we are going to use `Diagram` component. +All the available Essential® JS 2 packages are published in [`Node Package Manager`](https://www.npmjs.com/~syncfusionorg) public registry. You can choose the component that you want to install. For this application, we are going to use the `Diagram` component. -To install Diagram component, use the following command +To install the Diagram component, use the following command: ```bash npm install @syncfusion/ej2-react-diagrams --save ``` -### Adding Style sheet to the Application +### Adding Style Sheet to the Application -The following CSS files are available in ../node_modules/@syncfusion package folder. This can be added as reference in `src/App.css`. +The following CSS files are available in ../node_modules/@syncfusion package folder. Add these references in `src/App.css`. ```css @import "../node_modules/@syncfusion/ej2-react-diagrams/styles/material.css"; @@ -83,86 +83,11 @@ The following CSS files are available in ../node_modules/@syncfusion package fol ``` N> To refer App.css in the application, import it in the src/App.tsx file. `import './App.css';` +## Adding Diagram Component to the Application -## Module Injection - -The diagram component is divided into individual feature-wise modules. In order to use a particular feature, you need to inject its feature service in the App. The following list describes the module names and their description. - -* `BpmnDiagrams` - Inject this provider to add built-in BPMN Shapes to diagrams. -* `ConnectorBridging` - Inject this provider to add bridges to connectors. -* `ConnectorEditing` - Inject this provider to edit the segments for connector. -* `ComplexHierarchicalTree` - Inject this provider to complex hierarchical tree like structure. -* `DataBinding` - Inject this provider to populate nodes from given data source. -* `DiagramContextMenu` - Inject this provider to manipulate context menu. -* `HierarchicalTree` - Inject this provider to use hierarchical tree like structure. -* `LayoutAnimation` - Inject this provider animation to layouts. -* `MindMap` - Inject this provider to use mind map. -* `PrintAndExport` - Inject this provider to print or export the objects. -* `RadialTree` - Inject this provider to use Radial tree like structure. -* `Snapping` - Inject this provider to Snap the objects. -* `SymmetricLayout` - Inject this provider to render layout in symmetrical method. -* `UndoRedo` - Inject this provider to revert and restore the changes. -* `Ej1Serialization` - Inject this provider to load ej1 diagram json in ej2 diagram. - -These modules should be injected into the diagram using the **Inject** directive. - -```javascript -import * as React from "react"; -import * as ReactDOM from "react-dom"; -import { - DiagramComponent, - HierarchicalTree, - MindMap, - RadialTree, - ComplexHierarchicalTree, - DataBinding, - Snapping, - PrintAndExport, - BpmnDiagrams, - SymmetricLayout, - ConnectorBridging, - UndoRedo, - LayoutAnimation, - DiagramContextMenu, - ConnectorEditing, - Ej1Serialization, - Inject -} from "@syncfusion/ej2-react-diagrams"; - -export default function App() { - return ( - - - - ); -} -const root = ReactDOM.createRoot(document.getElementById("diagram")); -root.render(); -``` +To include the Diagram component in your application, import the `DiagramComponent` from the `ej2-react-diagrams` package. -### Adding Diagram component to the Application - -* To include the Diagram component in application import the `DiagramComponent` from `ej2-react-diagrams` package. - -* Then add the Diagram component as shown in below code example. +Then add the Diagram component as shown in the code example below. `[src/App.jsx]` @@ -185,7 +110,7 @@ export default App; ## Defining Basic Diagram -The below examples shows the basic diagram component which renders an empty diagram. +The example below shows a basic diagram component that renders an empty diagram canvas. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -201,29 +126,31 @@ The below examples shows the basic diagram component which renders an empty diag {% previewsample "page.domainurl/code-snippet/diagram/getting-started/initialize-cs1" %} -Now run the `npm run dev` command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser. +Now run the `npm run dev` command in the console to start the development server. This command compiles your code and serves the application locally,opening it in the browser. ``` npm run dev ``` -## Basic Diagram elements +## Basic Diagram Elements -* `Node`: Visualizes any graphical object using nodes, which can also be arranged and manipulated on a diagram page. -* `Connector`: Represents the relationship between two nodes. Three types of connectors provided as follows: - -``` +Understanding the core elements of a diagram helps you build effective visualizations: -1) Orthogonal -2) Bezier -3) Straight +* **Node**: Visualizes any graphical object using nodes, which can be arranged and manipulated on a diagram page. Use nodes to represent entities, processes, or decision points. +* **Connector**: Represents the relationship between two nodes. Three types of connectors are provided: ``` -* `Port`: Acts as the connection points of node or connector and allows you to create connections with only specific points. -* `Annotation`: Shows additional information by adding text or labels on nodes and connectors. +1) Orthogonal - Right-angled connectors for structured layouts. +2) Bezier - Curved connectors for smooth, organic flows. +3) Straight - Direct linear connections between nodes. +``` +* **Port**: Acts as the connection points of nodes or connectors, allowing you to create connections with only specific points for precise layout control. +* **Annotation**: Shows additional information by adding text or labels on nodes and connectors to provide context and meaning. ## Flow Diagram +This section demonstrates how to create a flowchart by manually adding nodes and connecting them with connectors. + ### Create and Add Node Create and add a `node` (JSON data) with specific position, size, label, and shape. @@ -242,13 +169,12 @@ Create and add a `node` (JSON data) with specific position, size, label, and sha {% previewsample "page.domainurl/code-snippet/diagram/getting-started/addnode-cs1" %} -### Apply shape and style to node - -Syncfusion® diagram control provides support to render many built-in shapes in diagram. -Please refer to [`Shapes`](shapes) to know about built-in Shapes. +### Apply Shape and Style to Node -The appearance of a node can be customized by changing its [`fill`](../api/diagram/shapeStyleModel/#fill-string) color, [`strokeColor`](../api/diagram/shapeStyleModel/#strokecolor-string), [`strokeWidth`](../api/diagram/shapeStyleModel/#strokewidth-number), [`borderColor`](../api/diagram/node/#borderColor-string), [`borderWidth`](../api/diagram/node/#borderWidth-number), [`strokeDashArray`](../api/diagram/shapeStyleModel/#strokeDashArray-number), [`opacity`](../api/diagram/shapeStyleModel/#opacity-number), and [`shadow`](../api/diagram/shapeStyleModel/#shadow-number). +The Syncfusion® diagram control provides support to render many built-in shapes in diagrams. +Please refer to [`Shapes`](https://helpej2.syncfusion.com/react/documentation/api/diagram/shapes/) to know about built-in shapes. +The appearance of a node can be customized by changing its [`fill`](../api/diagram/shapeStyleModel/#fill-string) color, [`strokeColor`](../api/diagram/shapeStyleModel/#strokecolor-string), [`strokeWidth`](../api/diagram/shapeStyleModel/#strokewidth-number), [`borderColor`](../api/diagram/node/#borderColor-string), [`borderWidth`](../api/diagram/node/#borderWidth-number), [`strokeDashArray`](../api/diagram/shapeStyleModel/#strokeDashArray-number), [`opacity`](../api/diagram/shapeStyleModel/#opacity-number), and [`shadow`](../api/diagram/shapeStyleModel/#shadow-number). {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -264,9 +190,9 @@ The appearance of a node can be customized by changing its [`fill`](../api/diagr {% previewsample "page.domainurl/code-snippet/diagram/getting-started/apply-style" %} -### Add other flowchart nodes to the diagram +### Add Other Flowchart Nodes to the Diagram -You can add multiple nodes with different shapes into diagram. +You can add multiple nodes with different shapes to create a complete flowchart diagram. ```Javascript @@ -310,9 +236,9 @@ root.render(); ``` -### Connect flow chart nodes +### Connect Flow Chart Nodes -Connect these nodes by adding a connector using the [`connectors`](../api/diagram/connectorModel/) property of diagram and refer the source and target end by using the [`sourceID`](../api/diagram/connectorModel/#sourceid) and [`targetID`](../api/diagram/connectorModel/#targetid) properties. +Connect these nodes by adding a connector using the [`connectors`](../api/diagram/connectorModel/) property of the diagram and refer to the source and target end by using the [`sourceID`](../api/diagram/connectorModel/#sourceid) and [`targetID`](../api/diagram/connectorModel/#targetid) properties. The required nodes and connectors can be added to form a complete flow diagram. {% tabs %} @@ -332,13 +258,86 @@ The required nodes and connectors can be added to form a complete flow diagram. Default values for all [`nodes`](../api/diagram/nodemodel/) and [`connectors`](../api/diagram/connectorModel/) can be set using the [`getNodeDefaults`](../api/diagram/#getnodedefaults) and [`getConnectorDefaults`](../api/diagram/#getconnectordefaults) properties, respectively. For example, if all nodes have the same width and height, such properties can be moved into `getNodeDefaults`. -## Automatic Organization Chart +## Module Injection + +The diagram component is divided into individual feature-wise modules. To use a particular feature, you need to inject its feature service in the App. For basic diagram functionality, you typically only need `DataBinding` and layout modules like `HierarchicalTree`. The following list describes the module names and their descriptions: + +* `BpmnDiagrams` - Inject this provider to add built-in BPMN Shapes to diagrams. +* `ConnectorBridging` - Inject this provider to add bridges to connectors. +* `ConnectorEditing` - Inject this provider to edit the segments for connectors. +* `ComplexHierarchicalTree` - Inject this provider to use complex hierarchical tree-like structures. +* `DataBinding` - Inject this provider to populate nodes from given data source. +* `DiagramContextMenu` - Inject this provider to manipulate context menu. +* `HierarchicalTree` - Inject this provider to use hierarchical tree-like structures. +* `LayoutAnimation` - Inject this provider to add animation to layouts. +* `MindMap` - Inject this provider to use mind map layouts. +* `PrintAndExport` - Inject this provider to print or export the objects. +* `RadialTree` - Inject this provider to use radial tree-like structures. +* `Snapping` - Inject this provider to snap the objects. +* `SymmetricLayout` - Inject this provider to render layouts in symmetrical method. +* `UndoRedo` - Inject this provider to revert and restore the changes. +* `Ej1Serialization` - Inject this provider to load ej1 diagram json in ej2 diagram. + +These modules should be injected into the diagram using the **Inject** directive. + +```javascript +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { + DiagramComponent, + HierarchicalTree, + MindMap, + RadialTree, + ComplexHierarchicalTree, + DataBinding, + Snapping, + PrintAndExport, + BpmnDiagrams, + SymmetricLayout, + ConnectorBridging, + UndoRedo, + LayoutAnimation, + DiagramContextMenu, + ConnectorEditing, + Ej1Serialization, + Inject +} from "@syncfusion/ej2-react-diagrams"; + +export default function App() { + return ( + + + + ); +} +const root = ReactDOM.createRoot(document.getElementById("diagram")); +root.render(); +``` +## Automatic Organizational Chart -In ‘Flow Diagram’ section we saw how to create a diagram manually, now let us see how to create and position diagram automatically. +While the previous section showed how to create diagrams manually, this section demonstrates how to create and position diagrams automatically using data binding and layout algorithms. -### Create Business object (Employee information) +### Create Business Object (Employee Information) -Define Employee Information as JSON data. The following code example shows an employee array whose, `Name` is used as an unique identifier and `ReportingPerson` is used to identify the person to whom an employee report to, in the organization. +Define Employee Information as JSON data. The following code example shows an employee array where `Name` is used as a unique identifier and `ReportingPerson` is used to identify the person to whom an employee reports in the organization. ```ts const data: Object[] = [ @@ -379,11 +378,12 @@ Define Employee Information as JSON data. The following code example shows an em ]; ``` -### Map data source +### 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 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. +You can configure the above "Employee Information" with the 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 +import { DataManager } from "@syncfusion/ej2-data"; export default function App() { const data: Object[] = [ @@ -442,9 +442,9 @@ const root = ReactDOM.createRoot(document.getElementById("diagram")); root.render(); ``` -### Rendering layout with Datasource +### Rendering Layout with Data Source -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. +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 layouts based on the DataSourceSettings of the Diagram. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -460,8 +460,7 @@ To create an organizational chart, the [`type`](../api/diagram/layoutType/) of l {% previewsample "page.domainurl/code-snippet/diagram/getting-started/orgchart-cs1" %} - -### Customize employee appearance +### Customize Employee Appearance The following code examples indicate how to define the default appearance of nodes and connectors. The [`setNodeTemplate`](../api/diagram/#setnodetemplate) is used to update each node based on employee data. diff --git a/ej2-react/diagram/grid-lines.md b/ej2-react/diagram/grid-lines.md index 826e616cd..304423acf 100644 --- a/ej2-react/diagram/grid-lines.md +++ b/ej2-react/diagram/grid-lines.md @@ -1,20 +1,24 @@ --- layout: post -title: Grid lines in React Diagram component | Syncfusion® -description: Learn here all about Grid lines in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Grid lines in React Diagram Component | Syncfusion® +description: Learn here all about Grid lines in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Grid lines platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Grid lines in EJ2 React Diagram component +# Grid Lines in EJ2 React Diagram Component -Gridlines are crisscross lines drawn in diagram page like the lines on traditional graph paper. It helps to position the diagram elements on the diagram page. +Gridlines are crisscross lines drawn in diagram pages like the lines on traditional graph paper. They help position diagram elements precisely on the diagram page and provide visual reference points for accurate layout design. + +## Prerequisites + +To use gridlines and snapping functionality, ensure that the snapping module is injected into the diagram component. The [`snapSettings`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#snapsettings) property is used to customize the gridlines and control the snapping behavior in the diagram. -## Customize the gridlines visibility +## Customize the Gridlines Visibility The [`snapConstraints`](https://helpej2.syncfusion.com/react/documentation/api/diagram/snapSettings/#constraints) enables you to show/hide the gridlines. The following code example illustrates how to show the gridlines. @@ -35,13 +39,13 @@ To show only horizontal/vertical gridlines or to hide gridlines, refer to [`Cons ## Appearance -The appearance of the gridlines can be customized by using a set of predefined properties. +The appearance of the gridlines can be customized using a set of predefined properties to match your application's design requirements. * The [`horizontalGridLines`](https://helpej2.syncfusion.com/react/documentation/api/diagram/snapSettings/#horizontalgridlines) and the [`verticalGridLines`](https://helpej2.syncfusion.com/react/documentation/api/diagram/snapSettings/#verticalgridlines) properties allow you to customize the appearance of the horizontal and vertical gridlines respectively. * The horizontal gridlines [`lineColor`](https://helpej2.syncfusion.com/react/documentation/api/diagram/gridlines/#linecolor) and [`lineDashArray`](https://helpej2.syncfusion.com/react/documentation/api/diagram/gridlines/#linedasharray) properties are used to customizes the line color and line style of the horizontal gridlines. -* The vertical gridlines [`lineColor`](https://helpej2.syncfusion.com/react/documentation/api/diagram/gridlines/#linecolor) and [`lineDashArray`](https://helpej2.syncfusion.com/react/documentation/api/diagram/gridlines/#linedasharray) properties are used to customizes the line color and line style of the vertical gridlines. +* The vertical gridlines `lineColor` and [`lineDashArray`](https://helpej2.syncfusion.com/react/documentation/api/diagram/gridlines/#linedasharray) properties are used to customizes the line color and line style of the vertical gridlines. The following code example illustrates how to customize the appearance of gridlines. @@ -58,9 +62,9 @@ The following code example illustrates how to customize the appearance of gridli ![Line appearance](./images/line-appearance.png) -## Line intervals +## Line Intervals -Thickness and the space between gridlines can be customized by using horizontal gridlines’s [`linesInterval`](https://helpej2.syncfusion.com/react/documentation/api/diagram/gridlines/#lineintervals) and vertical gridlines’s [`linesInterval`](https://helpej2.syncfusion.com/react/documentation/api/diagram/gridlines/#lineintervals) properties. In the lines interval collections, values at the odd places are referred as the thickness of lines and values at the even places are referred as the space between gridlines. +The thickness and spacing between gridlines can be customized using the horizontal gridlines's [`linesInterval`](https://helpej2.syncfusion.com/react/documentation/api/diagram/gridlines/#lineintervals) and vertical gridlines’s `linesInterval` properties. In the lines interval collections, values at the odd places are referred as the thickness of lines and values at the even places are referred as the space between gridlines. The following code example illustrates how to customize the thickness of lines and the line intervals. @@ -77,11 +81,11 @@ The following code example illustrates how to customize the thickness of lines a ![Line interval](./images/line-interval.png) -## Dot grid patterns +## Dot Grid Patterns -The appearance of the grid lines can be changed into dots by settings [`gridType`](https://helpej2.syncfusion.com/react/documentation/api/diagram/gridType/) of `snapSettings` as Dots. By default, the grid type is **Lines**. +The appearance of the grid lines can be changed into dots by setting the [`gridType`](https://helpej2.syncfusion.com/react/documentation/api/diagram/gridType/) of `snapSettings` as Dots. By default, the grid type is **Lines**.Dot patterns can be particularly useful for creating a less intrusive visual guide while maintaining alignment functionality. -The following code illustrates how to render grid patterns as Dots. +The following code illustrates how to render grid patterns as dots. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -98,13 +102,13 @@ The following code illustrates how to render grid patterns as Dots. ## Snapping -When you draw, resize, or move a diagram element on the page, you can set it to align or snap to the nearest intersection, regardless of whether the grid is visible. +Snapping functionality works in conjunction with gridlines to provide precise alignment capabilities. When you draw, resize, or move a diagram element on the page, you can set it to align or snap to the nearest intersection, regardless of whether the grid is visible. -## Snap to lines +## Snap to Lines This feature allows diagram objects to snap to the nearest intersection of gridlines while being dragged or resized, facilitating easier alignment during layout or design. -Snapping to gridlines can be enabled or disabled using the [`snapConstraints`](https://helpej2.syncfusion.com/react/documentation/api/diagram/snapSettings/#constraints) property of the SnapSettings class. The default value is All. +Snapping to gridlines can be enabled or disabled using the `snapConstraints` property of the SnapSettings class. The default value is **All**. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -119,11 +123,11 @@ Snapping to gridlines can be enabled or disabled using the [`snapConstraints`](h ![Snap to lines](./images/snapToLines.gif) -## Snap to objects +## Snap to Objects The snap-to-object feature provides visual cues to assist with aligning and spacing diagram elements. A node can snap to its neighboring objects based on specific alignments, such as the same size and position. These alignments are visually represented by smart guide lines in a cyan shade, with the color code '#07EDE1'. -The [`snapObjectDistance`](https://helpej2.syncfusion.com/react/documentation/api/diagram/snapSettings/#snapobjectdistance) property allows you to define minimum distance between the selected object and the nearest object. By default, the snap object distance is set to 5. +The [`snapObjectDistance`](https://helpej2.syncfusion.com/react/documentation/api/diagram/snapSettings/#snapobjectdistance) property allows you to define minimum distance between the selected object and the nearest object. By default, the snap object distance is set to **5 pixels**. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -142,7 +146,7 @@ The [`snapObjectDistance`](https://helpej2.syncfusion.com/react/documentation/ap The [`snapAngle`](https://helpej2.syncfusion.com/react/documentation/api/diagram/snapSettings/#snapangle) property defines the increments by which an object can be rotated within a diagram. -For example, if the snapAngle is set to 15 degrees, an object can only be rotated to angles that are multiples of 15 degrees, such as 15°, 30°, 45°, and so on. This ensures precise angule alignment and consistent object positioning, enhancing the overall design accuracy. By default, the snap angle is set to 5" +For example, if the snapAngle is set to 15 degrees, an object can only be rotated to angles that are multiples of 15 degrees, such as 15°, 30°, 45°, and so on. This ensures precise angular alignment and consistent object positioning, enhancing the overall design accuracy. By default, the snap angle is set to 5 degrees. The following code example demonstrates how to set the `snapAngle` property and update it dynamically. @@ -158,7 +162,8 @@ The following code example demonstrates how to set the `snapAngle` property and {% previewsample "page.domainurl/code-snippet/diagram/gridLines/es5SnapAngle-cs1" %} ![Snap Angle](./images/snapAngle.gif) -## Snap line color + +## Snap Line Color The [`snapLineColor`](https://helpej2.syncfusion.com/react/documentation/api/diagram/snapSettings/#snaplinecolor) property allows you to define the color of the snapline used in the diagram. By customizing the snapline color, you can enhance the visual contrast and visibility of these guides, making it easier to achieve accurate alignment. @@ -177,9 +182,9 @@ The following code example demonstrates how to set the `snapLineColor` property {% previewsample "page.domainurl/code-snippet/diagram/gridLines/es5SnapColor-cs1" %} -## Customization of snap intervals +## Customization of Snap Intervals -By default, the objects are snapped towards the nearest gridline. The gridline or position towards where the diagram object snaps can be customized with the horizontal gridlines’s [`snapInterval`](https://helpej2.syncfusion.com/react/documentation/api/diagram/gridlines/#snapintervals) and the vertical gridlines’s [`snapInterval`](https://helpej2.syncfusion.com/react/documentation/api/diagram/gridlines/#snapintervals) properties. +By default, the objects are snapped towards the nearest gridline. The gridline or position towards where the diagram object snaps can be customized with the horizontal gridlines’s [`snapInterval`](https://helpej2.syncfusion.com/react/documentation/api/diagram/gridlines/#snapintervals) and the vertical gridlines’s `snapInterval` properties. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -192,6 +197,6 @@ By default, the objects are snapped towards the nearest gridline. The gridline o {% previewsample "page.domainurl/code-snippet/diagram/gridLines/es5SnapInterval-cs1" %} -## Snap constraints +## Snap Constraints -The [`snapConstraints`](https://helpej2.syncfusion.com/react/documentation/api/diagram/snapSettings/#constraints) property allows you to enable or disable the certain features of the snapping, for detailed information refer to [`constraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/snapConstraints). +The `snapConstraints` property allows you to enable or disable certain features of the snapping functionality. For detailed information refer to [`constraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/snapConstraints). diff --git a/ej2-react/diagram/group.md b/ej2-react/diagram/group.md index 387dbd4fe..15c7618bf 100644 --- a/ej2-react/diagram/group.md +++ b/ej2-react/diagram/group.md @@ -1,20 +1,21 @@ --- layout: post -title: Group in React Diagram component | Syncfusion® -description: Learn here all about Group in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Group in React Diagram Component | Syncfusion® +description: Learn here all about Group in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Group platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Group in React Diagram component +# Group in React Diagram Component +Groups enable developers to cluster multiple nodes and connectors into a single manageable element, acting as a container that maintains relationships between child elements while allowing both collective and individual manipulation. This powerful feature streamlines complex diagram management by treating related elements as cohesive units while preserving the ability to edit individual components when needed. -## Create group +## Create Group -Group is used to cluster multiple nodes and connectors into a single element. It acts like a container for its children (nodes, groups, and connectors). Every change made to the group also affects the children. Child elements can be edited individually. +A group functions as a container for its children (nodes, groups, and connectors). Every change made to the group affects all children proportionally, while child elements remain individually editable. Groups can contain other groups, creating nested hierarchies for complex diagram structures. -## Add group when initializing diagram +## Add Group when Initializing Diagram A group can be added to the diagram model through [`nodes`](https://ej2.syncfusion.com/react/documentation/api/diagram/#nodes) collection. To define an object as group, add the child objects to the [`children`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#children) collection of the group. The following code illustrates how to create a group node. @@ -44,9 +45,11 @@ Connectors can be added to a group. The following code illustrates how to add co {% previewsample "page.domainurl/code-snippet/diagram/group/groupaddconnector-cs1" %} -## Group nodes at runtime +## Runtime Group Operations -Groups can be dynamically created during runtime in the diagram by invoking the [`diagram.group`](https://ej2.syncfusion.com/react/documentation/api/diagram/#group) method. To initiate this process, first, select the nodes that you intend to include within the group. Subsequently, by utilizing the [`diagram.group`](https://ej2.syncfusion.com/react/documentation/api/diagram/#group) method, the selected nodes will be encapsulated within a newly formed group node. +### Group Nodes at Runtime + +Groups can be dynamically created during runtime in the diagram by invoking the [`diagram.group`](https://ej2.syncfusion.com/react/documentation/api/diagram/#group) method. To initiate this process, first, select the nodes that you intend to include within the group. Subsequently, by utilizing the `diagram.group` method will encapsulate the selected nodes within a newly formed group node. The following code illustrates how to group at runtime. @@ -61,9 +64,10 @@ The following code illustrates how to group at runtime. {% previewsample "page.domainurl/code-snippet/diagram/group/group-runtime" %} -## UnGroup nodes at runtime +### Ungroup Nodes at Runtime -Group node can be unGrouped dynamically, by using the [`diagram.unGroup`](https://ej2.syncfusion.com/react/documentation/api/diagram/#ungroup) method. The following code example shows how to unGroup group node at runtime. +Group node can be unGrouped dynamically using the [`diagram.unGroup`](https://ej2.syncfusion.com/react/documentation/api/diagram/#ungroup) method.This operation dissolves the group container while preserving all child elements as individual diagram elements. +The following code example shows how to ungroup a group node at runtime: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -76,11 +80,11 @@ Group node can be unGrouped dynamically, by using the [`diagram.unGroup`](https: {% previewsample "page.domainurl/code-snippet/diagram/group/ungroup-runtime" %} -## Add group node at runtime +### Add Group Node at Runtime -A group node can be added at runtime by using the diagram method [`diagram.add`](https://ej2.syncfusion.com/react/documentation/api/diagram/#add). +A group node can be added at runtime by using the diagram method [`diagram.add`](https://ej2.syncfusion.com/react/documentation/api/diagram/#add).This method allows programmatic addition of predefined group structures to an existing diagram. -The following code illustrates how a group node is added at runtime. +The following code illustrates how a group node is added at runtime: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -93,9 +97,9 @@ The following code illustrates how a group node is added at runtime. {% previewsample "page.domainurl/code-snippet/diagram/group/groupadd-cs1" %} -## Add collection of group nodes at runtime +### Add Collection of Group Nodes at Runtime -* The collection of group nodes can be dynamically added using [`addElements`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addelements) method.Each time an element is added to the diagram canvas, the [`collectionChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/iCollectionChangeEventArgs/) event will be triggered. +The collection of group nodes can be dynamically added using the [`addElements`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addelements) method.Each time an element is added to the diagram canvas, the [`collectionChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/iCollectionChangeEventArgs/) event will be triggered. The following code illustrates how to add group nodes collection at runtime. @@ -110,28 +114,24 @@ The following code illustrates how to add group nodes collection at runtime. {% previewsample "page.domainurl/code-snippet/diagram/group/groupcollection-cs1" %} -## Add/Remove children from group - -### Add children To group at runtime +## Manage Group Children at Runtime -A childNode can be added to the specified Group at runtime by utilizing the diagram method [`diagram.addChildToGroup`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addchildtogroup). +### Add Children to Group at Runtime -This functionality is achieved by passing the group and existing children as arguments to the method. +A child node can be added to a specified group at runtime using the diagram method [`diagram.addChildToGroup`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addchildtogroup). This functionality requires passing the group and the existing child node as arguments to the method. -The following code illustrates how a child node and a group node can be passed as arguments to the method and executed at runtime. +The following code illustrates how a child node can be added to a group node at runtime: ```html diagram.addChildToGroup(groupNode, childNode); ``` -### Remove children from group at runtime - -A specific child from a group node can be removed at runtime by utilizing the diagram method [`diagram.removeChildFromGroup`](https://ej2.syncfusion.com/react/documentation/api/diagram/#removechildfromgroup). +### Remove Children from Group at Runtime -This functionality is achieved by passing the group and its children as arguments to the method. +A specific child from a group node can be removed at runtime by utilizing the diagram method [`diagram.removeChildFromGroup`](https://ej2.syncfusion.com/react/documentation/api/diagram/#removechildfromgroup). This functionality requires passing the group and its child node as arguments to the method. -The following code illustrates how a child node is removed from a group at runtime. +The following code illustrates how a child node is removed from a group at runtime: ```html @@ -149,11 +149,14 @@ diagram.removeChildFromGroup (groupNode, childNode); {% previewsample "page.domainurl/code-snippet/diagram/group/groupchild-cs1" %} -## Group padding +## Group Styling and Layout -The [`Padding`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeModel/#padding) property of a group node defines the spacing between the group node’s edges and its children. +### Group Padding -The following code illustrates how to add Padding to the node group. + +The [`Padding`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeModel/#padding) property of a group node defines the spacing between the group node's edges and its children. This property helps maintain visual separation and improves the overall appearance of grouped elements. + +The following code illustrates how to add padding to a node group: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -166,16 +169,15 @@ The following code illustrates how to add Padding to the node group. {% previewsample "page.domainurl/code-snippet/diagram/group/group-padding" %} -## Group flip - -The flip functionality for a group node works similarly to that of normal nodes. However, when flipping a group node, the flip of its child nodes is combined with the group's flip. This combination ensures that the child nodes inherit the group’s flip while retaining their own individual flips. +### Group Flip -`Example`: +The flip functionality for a group node works similarly to that of normal nodes. When flipping a group node, the child nodes inherit the group's flip transformation while retaining their individual flip settings. The combined effect creates a hierarchical flip behavior where both the group and child transformations are applied. -- If a child node’s flip is set to Vertical and the group node’s flip is set to Horizontal, the resulting flip for the child node will be a combination of Vertical and Horizontal (effectively a "both" flip). -- This ensures that the child nodes’ orientations adapt dynamically based on the group’s flip while maintaining their unique flip settings. +**Example of combined flip behavior:** +- If a child node's flip is set to Vertical and the group node's flip is set to Horizontal, the resulting flip for the child node combines both transformations (effectively a "both" flip). +- This ensures that child nodes adapt dynamically based on the group's flip while maintaining their unique flip settings. -The following example shows how to apply flip for group node. +The following example shows how to apply flip transformations to group nodes: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -188,14 +190,12 @@ The following example shows how to apply flip for group node. {% previewsample "page.domainurl/code-snippet/diagram/group/group-flip" %} -### Group flip mode +### Group Flip Mode -The [`flipMode`](https://ej2.syncfusion.com/angular/documentation/api/diagram/flipMode/) of a group node also behave similarly to those of normal nodes. However,When you apply a flip mode to a group node, it takes precedence over any flip mode set on its child nodes, overriding their individual settings. +The [`flipMode`](https://ej2.syncfusion.com/react/documentation/api/diagram/flipMode/)property of a group node behaves similarly to that of normal nodes. However, when a flip mode is applied to a group node, it takes precedence over any flip mode set on its child nodes, overriding their individual settings. -For example, in the below code, -the flipMode for the child node `Node1` is set to `LabelText`. -The flipMode for the group node is set to `Label`. -As a result, the effective flipMode for both the child node and the group node will be Label, as the group node’s flipMode overrides the child’s. +**Example of flip mode precedence:** +In the code below, the `flipMode` for the child node `Node1` is set to `LabelText`, while the `flipMode` for the group node is set to `Label`. The effective `flipMode` for both the child node and the group node will be `Label`, as the group node's `flipMode` overrides the child's setting. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -210,13 +210,13 @@ As a result, the effective flipMode for both the child node and the group node w -## Nested group +## Nested Group -Nested groups are essentially groups within groups, where a group can contain other groups as its children, creating a hierarchy that helps manage complexity and relationships between different elements. +Nested groups are groups within groups, where a group can contain other groups as its children, creating a hierarchical structure. This feature helps manage complexity and relationships between different elements in sophisticated diagram scenarios. ![Nested Group GIF](images/nestedGroup.gif) - The following code illustrates how to create nested group node. + The following code illustrates how to create nested group nodes: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -229,9 +229,11 @@ Nested groups are essentially groups within groups, where a group can contain ot {% previewsample "page.domainurl/code-snippet/diagram/group/group-nested" %} -## Add Group in palette +### Add Groups to Symbol Palette -Group node can be added in symbol palette like the normal nodes. The following code illustrates how to render group node in palette. +Group nodes can be added to the symbol palette like normal nodes, enabling reusable group templates for consistent diagram creation. This feature allows developers to create standardized group configurations that can be dragged and dropped into diagrams. + +The following code illustrates how to render group nodes in the palette: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -244,9 +246,11 @@ Group node can be added in symbol palette like the normal nodes. The following {% previewsample "page.domainurl/code-snippet/diagram/group/group-palette" %} -## Update group node at runtime +### Update Group Nodes at Runtime + +Groups can be updated dynamically similar to normal nodes, allowing modification of group properties, styling, and behavior during runtime operations. -Group can be updated dynamically similar to the normal nodes. The following code illustrates how to update group node at runtime. +The following code illustrates how to update group nodes at runtime: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -259,23 +263,20 @@ Group can be updated dynamically similar to the normal nodes. The following cod {% previewsample "page.domainurl/code-snippet/diagram/group/group-update" %} -## Container - -Containers are used to automatically measure and arrange the size and position of the child elements in a predefined manner. There are two types of containers available. - -***Canvas*** - -* The canvas panel supports absolute positioning and provides the least layout functionality to its contained diagram elements. - -* Canvas allows you to position its contained elements by using the margin and alignment properties. +## Container Types -* Rendering alone possible in canvas container. +Containers provide automatic measurement and arrangement of child element size and position according to predefined layout behaviors. The diagram supports two container types, each optimized for different layout scenarios. -* It allows elements to be either vertically or horizontally aligned. +### Canvas Container -* Child can be defined with the collection [`canvas.children`](https://ej2.syncfusion.com/react/documentation/api/diagram/canvas/#children) property. +The canvas panel supports absolute positioning and provides minimal layout functionality to its contained diagram elements. This container type offers maximum flexibility for precise element placement. -* Basic element can be defined with the collection of `basicElements`. +**Canvas Container Characteristics:** +- Supports absolute positioning using margin and alignment properties. +- Enables rendering operations independently for each contained element. +- Allows elements to be aligned vertically or horizontally. +- Child elements are defined using the [`canvas.children`](https://ej2.syncfusion.com/react/documentation/api/diagram/canvas/#children) property. +- Basic elements can be defined within the `basicElements` collection. The following code illustrates how to add canvas panel. @@ -290,13 +291,17 @@ The following code illustrates how to add canvas panel. {% previewsample "page.domainurl/code-snippet/diagram/group/es5canvas-cs1" %} -***Stack*** +### Stack Container -* Stack panel is used to arrange its children in a single line or stack order, either vertically or horizontally. +The stack panel arranges its children in a single line or stack order, either vertically or horizontally. This container provides structured layout control through spacing and alignment properties. -* It controls spacing by setting margin properties of child and padding properties of group. By default, a stack panel’s [`orientation`](https://ej2.syncfusion.com/react/documentation/api/diagram/stackPanel/#orientation) is vertical. +**Stack Container Characteristics:** +- Controls spacing using margin properties of child elements and padding properties of the group. +- Default [`orientation`](https://ej2.syncfusion.com/react/documentation/api/diagram/stackPanel/#orientation)is vertical. +- Provides consistent alignment and distribution of child elements. +- Ideal for creating organized, sequential layouts. -The following code illustrates how to add a stack panel. +The following code illustrates how to add a stack panel: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -309,33 +314,33 @@ The following code illustrates how to add a stack panel. {% previewsample "page.domainurl/code-snippet/diagram/group/es5stack-cs1" %} -## Difference between a basic group and containers +### Difference Between Basic Groups and Containers -| Group | Container | +| Basic Group | Container | | -------- | -------- | -| It arranges the child elements based on the child elements position and size properties. | Each container has a predefined behavior to measure and arrange its child elements. Canvas and stack containers are supported in the diagram. | -| The Padding, Min, and Max Size properties are not applicable for basic group. | It is applicable for container. | -| The Children’s margin and alignment properties are not applicable for basic group. | It is applicable for container. | +| Arranges child elements based on the child elements' position and size properties | Each container has predefined behavior to measure and arrange child elements. Canvas and stack containers are supported in the diagram | +| The padding, minimum, and maximum size properties are not applicable for basic groups | These properties are applicable for containers | +| The children's margin and alignment properties are not applicable for basic groups | These properties are applicable for containers | -## Interaction +## Group Interactions -Group node interactions can be performed similarly to normal nodes. Fundamental diagram interactions like selecting, dragging, resizing, and rotating apply equally to group nodes. For more informatation refer to the [`nodes interactions`](./nodes-interaction) +Group node interactions can be performed similarly to normal nodes. Fundamental diagram interactions like selecting, dragging, resizing, and rotating apply equally to group nodes. For more information, refer to the [node interactions](./nodes-interaction) documentation. -### Selecting a Node Group +### Selecting Group Nodes -When a child element within a node group is clicked, the entire contained node group is selected instead of the individual child element. Subsequent clicks on the selected element change the selection from top to bottom within the hierarchy, moving from the parent node group to its children. +When a child element within a node group is clicked, the entire containing node group is selected instead of the individual child element. Subsequent clicks on the selected element change the selection from top to bottom within the hierarchy, moving from the parent node group to its children. ![Group Interactions GIF](images/groupInteractions-Gif.gif) ## Events -The events triggered when interacting with group nodes are similar to those for individual nodes. For more information, refer to the [`nodes events`](./nodes-events) +The events triggered when interacting with group nodes are similar to those for individual nodes. For more information, refer to the [`nodes events`](./nodes-events) documentation. ## See Also -* [How to add annotations to the node](./labels) -* [How to add ports to the node](./ports) -* [How to enable/disable the behavior of the node](./constraints) -* [How to add nodes to the symbol palette](./symbol-palette) -* [How to create diagram nodes using drawing tools](./tools) -* [How to perform the interaction on the group](./interaction#selection) \ No newline at end of file +* [How to add annotations to the node.](./labels) +* [How to add ports to the node.](./ports) +* [How to enable/disable the behavior of the node.](./constraints) +* [How to add nodes to the symbol palette.](./symbol-palette) +* [How to create diagram nodes using drawing tools.](./tools) +* [How to perform the interaction on the group.](./interaction#selection) \ No newline at end of file diff --git a/ej2-react/diagram/label-appearance.md b/ej2-react/diagram/label-appearance.md index 0b6f5dadc..64973ac3d 100644 --- a/ej2-react/diagram/label-appearance.md +++ b/ej2-react/diagram/label-appearance.md @@ -8,16 +8,19 @@ documentation: ug domainurl: ##DomainURL## --- -## Appearance +# Customizing Label Appearance in React Diagram Component -You can change the font style of the annotations with the font specific properties [`fontSize`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#fontsize), [`fontFamily`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#fontfamily), [`color`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#color). -The label’s [`bold`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#bold), [`italic`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#italic), and [`textDecoration`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#textdecoration) properties are used to style the label’s text. +## Overview -The label’s [`fill`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#fill), [`strokeColor`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#strokecolor), and [`strokeWidth`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#strokewidth) properties are used to define the background color and border color of the annotation and the [`opacity`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#opacity) property is used to define the transparency of the annotations. +The React Diagram component provides comprehensive styling options to customize label appearance. Labels can be enhanced with various font properties, colors, decorations, and visual effects to match application requirements. -The [`visible`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationModel/#visibility) property of the annotation enables or disables the visibility of annotation. +Font styling properties such as [`fontSize`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#fontsize), [`fontFamily`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#fontfamily), [`color`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#color) control the basic text appearance. Additional text formatting is available through [`bold`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#bold), [`italic`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#italic), and [`textDecoration`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#textdecoration) properties are used to style the label’s text. -The following code illustrates how to customize the appearance of the annotation. +Background and border styling can be applied using [`fill`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#fill), [`strokeColor`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#strokecolor), and [`strokeWidth`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#strokewidth) properties are used to define the background color and border color of the annotation and the [`opacity`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#opacity) property controls label transparency. + +The [`visible`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationModel/#visibility) property, which enables or disables label display. + +The following code demonstrates comprehensive label appearance customization: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -32,7 +35,7 @@ The following code illustrates how to customize the appearance of the annotation ## Horizontal and vertical alignment -The following tables illustrates all the possible alignments visually with 'offset (0, 0)'. +Label positioning within nodes and connectors can be precisely controlled through horizontal and vertical alignment properties. The following table illustrates all possible alignment combinations with offset (0, 0): | Horizontal Alignment | Vertical Alignment | Output with Offset(0,0) | | -------- | -------- | -------- | @@ -46,7 +49,7 @@ The following tables illustrates all the possible alignments visually with 'offs | Center | Bottom | ![Center Bottom Label Alignment](images/Label8.png) | | Right |Bottom |![Right Bottom Label Alignment](images/Label9.png) | -The following codes illustrates how to align annotations. +The following code example shows how to configure label alignment: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -61,7 +64,9 @@ The following codes illustrates how to align annotations. ## Annotation Margin -[`Margin`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationModel/#margin) is an absolute value used to add some blank space in any one of its four sides. The annotations can be displaced with the margin property. The following code example illustrates how to align a annotation based on its `offset`, `horizontalAlignment`, `verticalAlignment`, and [`margin`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/) values. +The [`Margin`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationModel/#margin) property adds spacing around labels by specifying absolute values for any or all four sides. This property works in conjunction with offset, horizontal alignment, and vertical alignment to achieve precise label positioning. + +The following example demonstrates label positioning using [`margin`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/) values. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -76,12 +81,13 @@ The following codes illustrates how to align annotations. ## Hyperlink -Diagram provides a support to add a [`hyperlink`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationModel/#hyperlink) for the nodes/connectors annotation. It can also be customized with the below properties. +Labels can include interactive [`hyperlink`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationModel/#hyperlink) for both nodes and connectors. Hyperlink behavior and appearance can be customized with several properties. + +The [`hyperlinkOpenState`](https://helpej2.syncfusion.com/react/documentation/api/diagram/hyperlinkModel/#hyperlinkopenstate) property controls how the hyperlink opens - in a new window, the same tab, or a new tab. -A User can open the hyperlink in the new window, the same tab and the new tab by using the [`hyperlinkOpenState`](https://helpej2.syncfusion.com/react/documentation/api/diagram/hyperlinkModel/#hyperlinkopenstate) property. +Hyperlink appearance is controlled through the [`content`](https://helpej2.syncfusion.com/react/documentation/api/diagram/hyperlinkModel/#content) property for display text, [`color`](https://helpej2.syncfusion.com/react/documentation/api/diagram/hyperlinkModel/#color) for text color, and [`textDecoration`](https://helpej2.syncfusion.com/react/documentation/api/diagram/hyperlinkModel/#textdecoration ) for styling effects like **Underline**, **LineThrough**, **Overline**. -The [`content`](https://helpej2.syncfusion.com/react/documentation/api/diagram/hyperlinkModel/#content) property of `hyperlink` is used to display the content of the hyper link display text. The [`color`](https://helpej2.syncfusion.com/react/documentation/api/diagram/hyperlinkModel/#color) property of the `hyperlink` is used to display the color of the hyper link. -The [`textDecoration`](https://helpej2.syncfusion.com/react/documentation/api/diagram/hyperlinkModel/#textdecoration ) property is used to decorate the hyper link text with **Underline**, **LineThrough**, **Overline**. The following example illustrates how to define and customize hyper link in both node and connector. +The following example shows hyperlink implementation and customization: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -96,8 +102,9 @@ The [`textDecoration`](https://helpej2.syncfusion.com/react/documentation/api/di ## Rotate Annotation -Annotation can be rotated by setting the [`rotateAngle`](https://helpej2.syncfusion.com/react/documentation/api/diagram/shapeAnnotationModel/#rotateangle) property of the annotation. The following example shows how to rotate annotation text. +Labels can be rotated to any angle using the [`rotateAngle`](https://helpej2.syncfusion.com/react/documentation/api/diagram/shapeAnnotationModel/#rotateangle) property. This feature is useful for creating dynamic label orientations that match specific design requirements. +The following example demonstrates label rotation: {% tabs %} {% highlight js tabtitle="index.jsx" %} {% include code-snippet/diagram/annotations/es5RotateAngle-cs1/app/index.jsx %} @@ -115,7 +122,7 @@ Diagram provides template support for annotation. You can either define a string ### String template - For string template you should define a SVG/HTML content as string in the annotation's [`template`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationModel/#template) property. + For string template you should define a SVG/HTML content as string in the annotation's `template` property. The following code illustrates how to define a template in annotation. @@ -130,13 +137,13 @@ The following code illustrates how to define a template in annotation. {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5labeltemplate-cs1" %} -N> For the proper alignment of template, we need to mention width and height for the annotation while using template. +N> Specify width and height for labels when using templates to ensure proper alignment and rendering. ### Annotation template -For annotation template you should define a template in html file which you want to render in annotation and assign it to the [`annotationTemplate`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#annotationtemplate) property of diagram. This template can be applied to both nodes and connectors within the diagram. +HTML-based templates provide more complex content structures by defining templates in separate HTML files. Assign the template to the `annotationTemplate` property of the diagram. This template system works with both nodes and connectors. -The following code illustrates how to define a annotationTemplate in annotation for nodes and connectors. +The following code demonstrates HTML template usage for labels: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -168,7 +175,9 @@ The following code illustrates how to define a functional template. ## Text align -The [`textAlign`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#textalign) property of annotation allows you to set how the text should be aligned (left, right, center, or justify) inside the text block. The following codes illustrate how to set textAlign for an annotation. +The [`textAlign`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#textalign) property controls text alignment within the label boundaries. Available alignment options include left, right, center, and justify, providing flexibility for various content layouts. + +The following code demonstrates text alignment configuration: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -192,7 +201,9 @@ The following table shows the different text alignment. ## Text Wrapping -When text overflows node boundaries, you can control it by using [`text wrapping`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#textwrapping). So, it is wrapped into multiple lines. The wrapping property of annotation defines how the text should be wrapped. The following code illustrates how to wrap a text in a node. +When label text exceeds node or connector boundaries, the [`text wrapping`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#textwrapping)property controls how content is handled. Text can be wrapped into multiple lines based on the specified wrapping behavior. + +The following code shows text wrapping implementation: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -209,15 +220,17 @@ When text overflows node boundaries, you can control it by using [`text wrapping | -------- | -------- | -------- | | No Wrap | Text will not be wrapped. | ![Label No Wrap](images/Wrap1.png) | | Wrap | Text-wrapping occurs, when the text overflows beyond the available node width. | ![Label Wrap](images/Wrap2.png) | -| WrapWithOverflow (Default) | Text-wrapping occurs, when the text overflows beyond the available node width. However, the text may overflow beyond the node width in the case of a very long word. | ![Label WrapWith Overflow](images/Wrap3.png) | +| WrapWithOverflow (Default) | Text wrapping occurs with overflow allowed for very long words that cannot be broken. | ![Label WrapWith Overflow](images/Wrap3.png) | ## Text overflow -The label’s [`TextOverflow`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#textoverflow) property is used control whether to display the overflowed content in node or not. +The label’s [`TextOverflow`](https://helpej2.syncfusion.com/react/documentation/api/diagram/textStyleModel/#textoverflow) property manages content display when text exceeds the available label space. This property works in conjunction with text wrapping to provide comprehensive text handling. + +Available overflow options include: -- `Clip` - The text which overflowing node's bounds will be removed. -- `Ellipsis` - The text which overflowing nodes's bounds will be replaced by three dots. -- `Wrap` - Entire text will be rendered overflowing in y-axis and wrapped in x-axis. +- **Clip** - Overflowing content beyond node boundaries is removed. +- **Ellipsis** - Overflowing content is replaced with three dots (...). +- **Wrap** - Content renders with vertical overflow and horizontal wrapping. Types of text overflow are shown in below table. diff --git a/ej2-react/diagram/label-events.md b/ej2-react/diagram/label-events.md index 08e733639..68d18eeba 100644 --- a/ej2-react/diagram/label-events.md +++ b/ej2-react/diagram/label-events.md @@ -1,25 +1,30 @@ --- layout: post title: Label Events in React Diagram component | Syncfusion® -description: Learn here all about Labels in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +description: Learn about annotation events in Syncfusion React Diagram component including keyDown, keyUp, doubleClick, textEdit, and selectionChange events with examples. control: Label Events platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Annotation events. +# Handling Annotation Events in Diagram Component -There are some events which will trigger while interacting with annotation. -* KeyDown. -* KeyUp. -* DoubleClick. -* TextEdit. +Annotations in React Diagram components are text labels that can be added to nodes and connectors to provide additional information. When users interact with these annotations, various events are triggered that allow developers to customize behavior and respond to user actions. -## KeyDown event +The diagram component provides several annotation-related events that fire during different interaction scenarios: +- **KeyDown** - Triggered when any key is pressed while an annotation is focused. +- **KeyUp** - Triggered when a pressed key is released while an annotation is focused. +- **DoubleClick** - Triggered when double-clicking on annotations, nodes, connectors, or diagram surface. +- **TextEdit** - Triggered when annotation text editing is completed and focus is lost. +- **SelectionChange** - Triggered when annotations are selected or deselected. -The [`keyDown`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iKeyEventArgs/) event is triggered whenever any key is pressed. The following example shows how to capture the keyDown event and modify the fill color of a node on each key press: +## KeyDown Event + +The [`keyDown`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iKeyEventArgs/) event triggers whenever any key is pressed while interacting with the diagram. This event provides access to key information and allows modification of diagram elements based on keyboard input. + +The event arguments include details about the pressed key, modifier keys, and the current diagram state. The following example demonstrates capturing the keyDown event to modify a node's fill color with each key press: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -32,9 +37,11 @@ The [`keyDown`](https://helpej2.syncfusion.com/react/documentation/api/diagram/i {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Event-cs1" %} -## KeyUp event +## KeyUp Event -The [`keyUp`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iKeyEventArgs/) event is triggered whenever we press and release any key. The following example shows how to capture the keyUp event and modify the fill color of a node on each key press: +The [`keyUp`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iKeyEventArgs/) event triggers when a pressed key is released. This event is useful for handling scenarios where the complete key press cycle (press and release) needs to be captured, such as implementing keyboard shortcuts or text input validation. + +Unlike the keyDown event, keyUp ensures that the key action has been fully completed. The following example shows how to capture the keyUp event and modify the fill color of a node: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -47,9 +54,11 @@ The [`keyUp`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iKe {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Event-cs2" %} -## Double click event +## Double Click Event + +The [`doubleClick`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iDoubleClickEventArgs/) event triggers when users double-click on nodes, connectors, or the diagram surface. This interaction automatically activates annotation editing mode for the clicked element, allowing users to modify text content directly. -The [`doubleClick`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iDoubleClickEventArgs/) event is triggered when you double-click on a node, connector, or the diagram surface. Double-clicking on a diagram element activates the annotation editing mode. The following code example shows how to capture the [`doubleClick`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iDoubleClickEventArgs/) event: +The event provides information about the clicked element, mouse position, and current selection state. Developers can use this event to implement custom behaviors or prevent default annotation editing when needed: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -62,9 +71,11 @@ The [`doubleClick`](https://helpej2.syncfusion.com/react/documentation/api/diagr {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Event-cs3" %} -## TextEdit event +## TextEdit Event -The [`textEdit`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iTextEditEventArgs/) event triggers when you finish editing the annotation text and the focus is removed from the annotation text. +The [`textEdit`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iTextEditEventArgs/) event triggers when annotation text editing is completed and focus moves away from the text editor. This event occurs after users finish modifying annotation content and provides access to both the old and new text values. + +This event is particularly useful for implementing text validation, formatting, or saving changes to external data sources: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -77,7 +88,9 @@ The [`textEdit`](https://helpej2.syncfusion.com/react/documentation/api/diagram/ {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Event-cs4" %} -You can prevent adding new text to the annotation by setting the `cancel` property of [`textEdit`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iTextEditEventArgs/) to true. +### Preventing Text Changes + +The textEdit event allows prevention of text modifications by setting the `cancel` property to **true**. This is useful for implementing validation rules or maintaining read-only annotations: ``` javascript textEdit: function (args) { @@ -87,11 +100,15 @@ textEdit: function (args) { ``` -## Selection change event +## Selection Change Event + +The [`selectionChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/#selectionchange) event triggers when annotations of nodes or connectors are selected or deselected within the diagram. This event provides detailed information about the selection state changes and affected elements. + +The event is useful for implementing custom selection behaviors, updating property panels, or synchronizing selection state with other application components. -The [`selectionChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/#selectionchange) event is triggered when an annotation of a node or connector is selected in the diagram. +### Preventing Selection -You can prevent selection by setting the `cancel` property of [`SelectionChangeEventArgs`](https://ej2.syncfusion.com/react/documentation/api/diagram/iselectionchangeeventargs/) to true, as shown in the code snippet below. +Selection can be prevented by setting the `cancel` property of [`SelectionChangeEventArgs`](https://ej2.syncfusion.com/react/documentation/api/diagram/iselectionchangeeventargs/) to **true** during the selection change process: ```javascript selectionChange: function (args) { diff --git a/ej2-react/diagram/label-interaction.md b/ej2-react/diagram/label-interaction.md index 46dc8c116..1dd69727b 100644 --- a/ej2-react/diagram/label-interaction.md +++ b/ej2-react/diagram/label-interaction.md @@ -1,16 +1,16 @@ --- layout: post title: Label Interaction in React Diagram component | Syncfusion® -description: Learn here all about Labels in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +description: Learn how to enable interactive label features in Syncfusion® React Diagram including selection, dragging, rotation, resizing, editing, and drag limits. control: Label Interaction platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -## Annotation Interactions +# Interactive Label Features -Diagram allows annotation to be interacted by selecting, dragging, rotating, and resizing. Annotation interaction is disabled, by default. You can enable annotation interaction with the `constraints` property of annotation. You can also curtail the services of interaction by enabling either selecting, dragging, rotating, or resizing individually with the respective constraints property of annotation. The following code illustrates how to enable interactive mode. +The Diagram component allows labels to be interactive through selecting, dragging, rotating, and resizing operations. Label interaction is disabled by default. Enable label interaction using the `constraints` property of the label. You can also control specific interaction types by enabling individual constraints for selecting, dragging, rotating, or resizing. The following code demonstrates how to enable interactive mode. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -25,76 +25,77 @@ Diagram allows annotation to be interacted by selecting, dragging, rotating, and ## Constraints -The [`constraints`](https://ej2.syncfusion.com/react/documentation/diagram/constraints#annotation-constraints) property of annotation allows you to enable/disable certain annotation behaviors. +The [`constraints`](https://ej2.syncfusion.com/react/documentation/diagram/constraints#annotation-constraints) property of labels allows enabling or disabling specific label behaviors. Use these constraints to control which interaction types are available for each label. -## Annotation rotation +## Label Editing -The [`rotationReference`](https://helpej2.syncfusion.com/react/documentation/api/diagram/shapeAnnotationModel/#rotationreference) property of an annotation allows you to control whether the text should rotate relative to its parent node or the Page. The following code examples illustrate how to configure rotationReference for an annotation. +The Diagram component supports editing labels at runtime, both programmatically and interactively. By default, labels are in view mode. Labels can be switched to edit mode using two approaches: + +### Programmatic Editing +By using [`startTextEdit`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#starttextedit) method to programmatically enter edit mode for a specific label. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/diagram/annotations/es5Rotation-cs1/app/index.jsx %} +{% include code-snippet/diagram/annotations/es5Opacity-cs1/app/index.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/diagram/annotations/es5Rotation-cs1/app/index.tsx %} +{% include code-snippet/diagram/annotations/es5Opacity-cs1/app/index.tsx %} {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Rotation-cs1" %} + {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Opacity-cs1" %} -| Value | Description | Image | -| -------- | -------- | -------- | -| Page | When this option is set, the annotation remains fixed in its original orientation even if its parent node is rotated. | ![No_Rotation](images/page_rotationreference.gif) | -| Parent | In this case, the annotation rotates along with its parent node. | ![Rotation](images/parent_rotationreference.gif)| +### Interactive Editing +Labels can be edited interactively through user actions: +1. Double-clicking the label. +2. Selecting the item and pressing the F2 key. + +Double-clicking any label enables editing mode. When the editor loses focus, the label content is updated. The [`doubleClick`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#doubleclick) event triggers when double-clicking on nodes, connectors, or the diagram canvas. -### Read-only annotations +## Label Rotation -Diagram allows to create read-only annotations. You have to set the read-only constraints to the annotation's [`constraints`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationModel/#constraints) property. The following code illustrates how to enable read-only mode. +The [`rotationReference`](https://helpej2.syncfusion.com/react/documentation/api/diagram/shapeAnnotationModel/#rotationreference) property controls whether labels rotate relative to their parent node or remain fixed relative to the page. The following code examples demonstrate how to configure rotationReference for labels. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/diagram/annotations/es5Read-cs1/app/index.jsx %} +{% include code-snippet/diagram/annotations/es5Rotation-cs1/app/index.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/diagram/annotations/es5Read-cs1/app/index.tsx %} +{% include code-snippet/diagram/annotations/es5Rotation-cs1/app/index.tsx %} {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Read-cs1" %} + {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Rotation-cs1" %} -## Edit +| Value | Description | Image | +| -------- | -------- | -------- | +| Page | When this option is set, the annotation remains fixed in its original orientation even if its parent node is rotated. | ![No_Rotation](images/page_rotationreference.gif) | +| Parent | In this case, the annotation rotates along with its parent node. | ![Rotation](images/parent_rotationreference.gif)| -Diagram provides support to edit an annotation at runtime, either programmatically or interactively. By default, annotation is in view mode. But it can be brought to edit mode in two ways; +## Read-only Labels -### Programmatically -By using [`startTextEdit`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#starttextedit) method, edit the text through programmatically. +The Diagram component supports creating read-only labels that cannot be edited by users. Set the read-only constraint in the label's [`constraints`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationModel/#constraints) property. The following code demonstrates how to enable read-only mode. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/diagram/annotations/es5Opacity-cs1/app/index.jsx %} +{% include code-snippet/diagram/annotations/es5Read-cs1/app/index.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/diagram/annotations/es5Opacity-cs1/app/index.tsx %} +{% include code-snippet/diagram/annotations/es5Read-cs1/app/index.tsx %} {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Opacity-cs1" %} - -### Interactively - 1. By double-clicking the annotation. - 2. By selecting the item and pressing the F2 key. - -Double-clicking any annotation will enables editing mode. When the focus of editor is lost, the annotation for the node is updated. When you double-click on the node/connector/diagram model, the [`doubleClick`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#doubleclick) event gets triggered. + {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Read-cs1" %} -## Drag Limit +## Drag Limits -* The diagram control now supports defining the [`dragLimit`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationModel/#draglimit) to the label while dragging from the connector and also update the position to the nearest segment offset. +The diagram control supports defining [`dragLimit`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationModel/#draglimit) properties for connector labels to restrict dragging within specified boundaries. The drag limit automatically updates the label position to the nearest segment offset when dragging. -* You can set the value to dragLimit [`left`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/#left), [`right`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/#right), [`top`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/#top), and [`bottom`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/#bottom) properties which allow the dragging of connector labels to a certain limit based on the user defined values. +Configure drag limit boundaries using the [`left`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/#left), [`right`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/#right), [`top`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/#top), and [`bottom`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/#bottom) properties. These properties limit connector label dragging based on user-defined values. -* By default, drag limit will be disabled for the connector. It can be enabled by setting connector constraints as drag. +Drag limits are disabled by default for connectors. Enable drag limits by setting the connector constraints to include drag functionality. -* The following code illustrates how to set a dragLimit for connector annotations. +The following code demonstrates how to configure dragLimit for connector labels: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -107,9 +108,9 @@ Double-clicking any annotation will enables editing mode. When the focus of edit {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Interaction-cs2" %} -## Multiple annotations +## Multiple Labels -You can add any number of annotations to a node or connector. The following code illustrates how to add multiple annotations to a node and connector. +Nodes and connectors support multiple labels. Each label can have independent properties and constraints. The following code demonstrates how to add multiple labels to nodes and connectors. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/diagram/labels.md b/ej2-react/diagram/labels.md index 9aa4b0396..27bf7cc65 100644 --- a/ej2-react/diagram/labels.md +++ b/ej2-react/diagram/labels.md @@ -8,15 +8,15 @@ documentation: ug domainurl: ##DomainURL## --- -# Labels in React Diagram component +# Labels in React Diagram Component -[`Annotation`](https://ej2.syncfusion.com/react/documentation/api/diagram/annotationModel) is a block of text that can be displayed over a node or connector. Annotation is used to textually represent an object with a string that can be edited at runtime. Multiple annotations can be added to a node/connector. +[`Annotation`](https://ej2.syncfusion.com/react/documentation/api/diagram/annotationModel) is a block of text that can be displayed over a node or connector. Annotations are used to textually represent an object with a string that can be edited at runtime. Multiple annotations can be added to a node or connector. -## Create annotation +## Create Annotations -An annotation can be added to a node/connector by defining the annotation object and adding that to the annotation collection of the node/connector. The [`content`](https://ej2.syncfusion.com/react/documentation/api/diagram/annotationModel#content) property of annotation defines the text to be displayed. The following code illustrates how to create a annotation. +An annotation can be added to a node or connector by defining the annotation object and adding it to the annotations collection of the node or connector. The [`content`](https://ej2.syncfusion.com/react/documentation/api/diagram/annotationModel#content) property of the annotation defines the text to be displayed. The following code illustrates how to create an annotation. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -29,15 +29,13 @@ An annotation can be added to a node/connector by defining the annotation object {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Annotation-cs1" %} -N> When setting a Annotation's ID, ensure that it does not contain white spaces, does not start with numbers or special characters, and does not include special characters like underscores (_) or spaces. - -N> When setting a Annotation's ID, ensure that it does not contain white spaces, does not start with numbers or special characters, and does not include special characters like underscores (_) or spaces. +N> When setting an Annotation's ID, ensure that it does not contain white spaces, does not start with numbers or special characters, and does not include special characters like underscores (_) or spaces. ## Add annotations at runtime -Annotations can be added at runtime by using the diagram method [`addLabels`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addlabels). The following code illustrates how to add a annotation to a node. +Annotations can be added at runtime by using the client-side method [`addLabels`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addlabels). The following code illustrates how to add an annotation to a node. -The annotation's [`id`](https://ej2.syncfusion.com/react/documentation/api/diagram/annotationModel#id) property is used to define the name of the annotation and its further used to find the annotation at runtime and do any customization. +The annotation's [`id`](https://ej2.syncfusion.com/react/documentation/api/diagram/annotationModel#id) property is used to define the name of the annotation and is further used to find the annotation at runtime and perform any customization. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -50,34 +48,36 @@ The annotation's [`id`](https://ej2.syncfusion.com/react/documentation/api/diagr {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Run-cs1" %} -## Remove annotation +## Update annotations at runtime + +Annotations can be updated directly by accessing the annotation from the node's annotations collection property and modifying any annotation properties at runtime. To reflect the changes immediately, call the `dataBind` method. -A collection of annotations can be removed from the node by using diagram method [`removeLabels`](https://ej2.syncfusion.com/react/documentation/api/diagram/#removelabels). The following code illustrates how to remove a annotation to a node. +The following code example illustrates how to change the annotation properties. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/diagram/annotations/es5Update-cs1/app/index.jsx %} +{% include code-snippet/diagram/annotations/es5Update-cs2/app/index.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/diagram/annotations/es5Update-cs1/app/index.tsx %} +{% include code-snippet/diagram/annotations/es5Update-cs2/app/index.tsx %} {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Update-cs1" %} + {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Update-cs2" %} -## Update annotation at runtime -You can get the annotation directly from the node’s annotations collection property and you can change any annotation properties at runtime. To reflect the changes immediately, we need to call `dataBind`. +## Remove annotations -The following code example illustrates how to change the annotation properties. +A collection of annotations can be removed from the node by using the diagram method [`removeLabels`](https://ej2.syncfusion.com/react/documentation/api/diagram/#removelabels). The following code illustrates how to remove an annotation from a node. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/diagram/annotations/es5Update-cs2/app/index.jsx %} +{% include code-snippet/diagram/annotations/es5Update-cs1/app/index.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/diagram/annotations/es5Update-cs2/app/index.tsx %} +{% include code-snippet/diagram/annotations/es5Update-cs1/app/index.tsx %} {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Update-cs2" %} + {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Update-cs1" %} + diff --git a/ej2-react/diagram/node-labels.md b/ej2-react/diagram/node-labels.md index 86d216781..d5d30f744 100644 --- a/ej2-react/diagram/node-labels.md +++ b/ej2-react/diagram/node-labels.md @@ -8,22 +8,28 @@ documentation: ug domainurl: ##DomainURL## --- -# Node annotations in React Diagram component +# Node Annotations in React Diagram Component -Diagram allows you to customize the position and appearance of the annotation efficiently. Annotation can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment properties. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the ShapeAnnotation class. Annotations of a node can be positioned using the following properties of ShapeAnnotation. +The React Diagram component allows precise customization of node annotations (also called labels) for positioning and appearance. Node annotations can be aligned relative to node boundaries using four key positioning properties that work together to provide comprehensive control over annotation placement. -* Offset -* HorizontalAlignment -* VerticalAlignment -* Margin +## Annotation positioning properties + +Node annotations support the following positioning properties through the ShapeAnnotation class: + +* **Offset** - Controls fractional positioning within the node bounds. +* **HorizontalAlignment** - Sets horizontal alignment at the calculated position. +* **VerticalAlignment** - Sets vertical alignment at the calculated position. +* **Margin** - Adds spacing around the annotation. + +These properties can be combined to achieve precise annotation positioning for various design requirements. ## Set annotation offset and size -The [`offset`](https://ej2.syncfusion.com/react/documentation/api/diagram/pointModel/) property of an annotation is used to align annotations based on fractional values. The offset can be customized by modifying the x and y values of the offset property. By default, the annotation offset is set to 0.5 on both the x and y axes. +The [`offset`](https://ej2.syncfusion.com/react/documentation/api/diagram/pointModel/) property positions annotations using fractional values between 0 and 1. The offset represents the relative position within the node boundaries, where (0,0) is the top-left corner and (1,1) is the bottom-right corner. The default offset is (0.5, 0.5), which centers the annotation. -By default, the size of the annotation is calculated based on its content. If you want to set the size externally, you can do so using the [`width`](https://ej2.syncfusion.com/react/documentation/api/diagram/annotationModel/#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/diagram/annotationModel/#height) properties of annotation. +The annotation size is automatically calculated based on its content. To specify custom dimensions, use the [`width`](https://ej2.syncfusion.com/react/documentation/api/diagram/annotationModel/#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/diagram/annotationModel/#height) properties. -The following code shows how to set offset, height and width for the annotation. +The following example demonstrates how to configure offset, width, and height for node annotations: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -38,7 +44,7 @@ The following code shows how to set offset, height and width for the annotation. ### Update annotation offset at runtime -The annotation offset can be updated dynamically at runtime. To update the annotation offset, fetch the annotation you want to update and modify its offset. +Annotation offset values can be modified dynamically during application execution. To update the offset, access the target annotation and modify its offset properties, then call the `dataBind()` method to apply changes immediately. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -51,9 +57,11 @@ The annotation offset can be updated dynamically at runtime. To update the annot {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Update-cs4" %} -N> Call `dataBind()` after property change to reflect the changes instantly. +N> Call `dataBind()` after property changes to reflect updates instantly. -The following table shows the position of annotation with different offsets. +### Annotation offset positions + +The following table demonstrates annotation positioning with different offset values: offset|image| |-----|-----| @@ -69,9 +77,11 @@ offset|image| ## Annotation alignment -The [`horizontalAlignment`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationModel/#horizontalalignment) property of annotation is used to set how the annotation is horizontally aligned at the annotation position determined from the fraction values. The [`verticalAlignment`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationModel/#verticalalignment) property is used to set how annotation is vertically aligned at the annotation position. +After determining the annotation position using offset values, the [`horizontalAlignment`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationModel/#horizontalalignment) property of annotation is used to set how the annotation is horizontally aligned at the annotation position determined from the fraction values. The [`verticalAlignment`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationModel/#verticalalignment) properties control how the annotation aligns at that calculated position. + +The horizontal alignment determines the annotation's horizontal positioning relative to the calculated point, while vertical alignment controls the vertical positioning. This two-step positioning system (offset calculation followed by alignment) provides precise control over annotation placement. -The following codes illustrates how to align annotations. +The following example shows how to configure annotation alignment properties: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -84,7 +94,9 @@ The following codes illustrates how to align annotations. {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Alignment-cs1" %} -The following tables illustrates all the possible alignments visually with 'offset (0, 0)'. +### Alignment combinations + +The following table shows all possible alignment combinations with offset (0,0) to demonstrate the alignment behavior: | Horizontal Alignment | Vertical Alignment | Output with Offset(0,0) | | -------- | -------- | -------- | @@ -100,7 +112,7 @@ The following tables illustrates all the possible alignments visually with 'offs ### Update annotation alignment at runtime -Annotation alignment can be updated dynamically at runtime. The following code example shows how to update annotation alignment at runtime. +Annotation alignment properties can be modified dynamically during application execution. The following example demonstrates updating alignment properties at runtime: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -111,7 +123,4 @@ Annotation alignment can be updated dynamically at runtime. The following code e {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Alignment-cs2" %} - - - + {% previewsample "page.domainurl/code-snippet/diagram/annotations/es5Alignment-cs2" %} \ No newline at end of file diff --git a/ej2-react/diagram/nodes-customization.md b/ej2-react/diagram/nodes-customization.md index 6f7ad0d54..4954be142 100644 --- a/ej2-react/diagram/nodes-customization.md +++ b/ej2-react/diagram/nodes-customization.md @@ -8,17 +8,16 @@ documentation: ug domainurl: ##DomainURL## --- -# Appearence of a nodes in React Diagram control +# Appearance of Nodes in React Diagram Component To customize the appearance and position of nodes in the React Diagram component, refer to the video link below. {% youtube "https://www.youtube.com/watch?v=pn02S_rwupw" %} ## Common values to the node. +The [`getNodeDefaults`](https://ej2.syncfusion.com/react/documentation/api/diagram/#getnodedefaults) property in the React Diagram control allows you to define default settings that apply to all nodes based on specific conditions or requirements. This approach ensures consistency across your diagram and reduces repetitive code. -The [`getNodeDefaults`](https://ej2.syncfusion.com/react/documentation/api/diagram/#getnodedefaults) property in the EJ2 Diagram control allows you to define default settings for nodes based on specific conditions or requirements. - -The following code example shows how to use getNodeDefaults function. +The following code example shows how to use the getNodeDefaults function to apply common styling to all nodes: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -35,11 +34,11 @@ N> The value we set in the getNodeDefaults has the higher priority in rendering. ## Appearance -### Apply style to the node - +### Apply style to nodes + The appearance of a node can be customized by changing its [`fill`](https://ej2.syncfusion.com/react/documentation/api/diagram/shapeStyleModel/#fill) color, [`strokeDashArray`](https://ej2.syncfusion.com/react/documentation/api/diagram/shapeStyleModel/#strokedasharray), ['strokeWidth'](https://ej2.syncfusion.com/react/documentation/api/diagram/shapeStyleModel/#strokewidth), ['strokeColor'](https://ej2.syncfusion.com/react/documentation/api/diagram/shapeStyleModel/#strokecolor) and [`opacity`](https://ej2.syncfusion.com/react/documentation/api/diagram/shapeStyleModel/#opacity). The [`visible`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#visible) property of the node enables or disables the visibility of the node. -The following code illustrates how to customize the appearance of the shape. +The following code illustrates how to customize the appearance of nodes using style properties: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -52,26 +51,23 @@ The following code illustrates how to customize the appearance of the shape. {% previewsample "page.domainurl/code-snippet/diagram/nodes/nCustomization-cs2" %} -## Gradient - -The [`gradient`](https://ej2.syncfusion.com/react/documentation/api/diagram/gradientModel/) property of the node allows you to define and apply the gradient effect to that node. - -The gradient stop property defines the color and a position, where the previous color transition ends and a new color transition starts. - -The gradient stop’s opacity property defines the transparency level of the region. - -There are two types of gradients as follows: +### Apply gradient style to nodes +The [`gradient`](https://ej2.syncfusion.com/react/documentation/api/diagram/gradientModel/) property of the node allows you to define and apply gradient effects to create visually appealing nodes with smooth color transitions. + +The gradient stop property defines the color and position where the previous color transition ends and a new color transition starts. The gradient stop's opacity property defines the transparency level of the region. + +There are two types of gradients available: + * Linear gradient - * Radial gradient + +#### Linear gradient -## Linear gradient - -* [`LinearGradient`](https://ej2.syncfusion.com/react/documentation/api/diagram/lineargradientmodel/) defines a smooth transition between a set of colors (so-called stops) on a line. - -* A linear gradient’s x1, y1, x2, y2 properties are used to define the position (relative to the node) of the rectangular region that needs to be painted. - +* [`LinearGradient`](https://ej2.syncfusion.com/react/documentation/api/diagram/lineargradientmodel/) defines a smooth transition between a set of colors (called stops) along a straight line. This is ideal for creating directional color effects on nodes. + +A linear gradient's x1, y1, x2, y2 properties are used to define the position (relative to the node) of the rectangular region that needs to be painted. + {% tabs %} {% highlight js tabtitle="index.jsx" %} {% include code-snippet/diagram/nodes/nCustomization-cs3/app/index.jsx %} @@ -83,12 +79,12 @@ There are two types of gradients as follows: {% previewsample "page.domainurl/code-snippet/diagram/nodes/nCustomization-cs3" %} -## Radial gradient - -* [`RadialGradient`](https://ej2.syncfusion.com/react/documentation/api/diagram/radialGradientModel/) defines a smooth transition between stops on a circle. - -* A radial gradient’s cx, cy, fx, fy properties are used to define the position (relative to the node) of the outermost or the innermost circle of the radial gradient. - +#### Radial gradient + +* [`RadialGradient`](https://ej2.syncfusion.com/react/documentation/api/diagram/radialGradientModel/) defines a smooth transition between stops that radiates from a central point in a circular pattern. This creates a spotlight or glow effect on nodes. + +A radial gradient's cx, cy, fx, fy properties are used to define the position (relative to the node) of the outermost or innermost circle of the radial gradient. + {% tabs %} {% highlight js tabtitle="index.jsx" %} {% include code-snippet/diagram/nodes/nCustomization-cs4/app/index.jsx %} @@ -104,11 +100,9 @@ There are two types of gradients as follows: ### Customize the style of main node selector indicator -In diagram, multiple nodes can be selected. -While selecting multiple nodes, a highlighter will be rendered to indicate the selection of each nodes. -The border style of the first node in the multiple selection can be customized by using the className [`e-diagram-first-selection-indicator`]. +In the diagram, multiple nodes can be selected simultaneously. When selecting multiple nodes, a highlighter renders to indicate the selection of each node. The border style of the first node in the multiple selection can be customized using the CSS class name [`e-diagram-first-selection-indicator`]. -Use the following CSS to customize the style of main node on multiple selection. +Use the following CSS to customize the style of the main node during multiple selection: ```css @@ -120,15 +114,15 @@ Use the following CSS to customize the style of main node on multiple selection. ``` -## Apply rotate angle and corner radius to the node +## Apply rotate angle and corner radius to nodes -- `Rotate angle`: The [`rotateAngle`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#rotateangle) property allows you to rotate nodes within the diagram. It's particularly useful when you want to represent nodes from different perspectives or angles. +Node appearance can be enhanced using rotation and corner radius properties: -- `Corner radius`: The [`cornerRadius`](https://ej2.syncfusion.com/react/documentation/api/diagram/basicShapeModel/#cornerradius) property allows you to round the corners of nodes in the diagram. -It adds a visual styling effect to the nodes, making them appear softer or more polished. +- **Rotate angle**: The [`rotateAngle`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#rotateangle)property allows you to rotate nodes within the diagram. This is particularly useful when you want to represent nodes from different perspectives or angles to match your design requirements. +- **Corner radius**: The [`cornerRadius`](https://ej2.syncfusion.com/react/documentation/api/diagram/basicShapeModel/#cornerradius) property allows you to round the corners of rectangular nodes in the diagram. It adds a visual styling effect to the nodes, making them appear softer and more polished. -The following code shows how to set the rotate angle and corner radius for the node. +The following code shows how to set the rotate angle and corner radius for nodes: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -141,10 +135,11 @@ The following code shows how to set the rotate angle and corner radius for the n {% previewsample "page.domainurl/code-snippet/diagram/nodes/nCustomization-cs5" %} -## Apply shadow effect to node +## Apply shadow effect to nodes -Diagram provides support to add [`shadow`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#shadow) effect to a node that is disabled, by default. It can be enabled with the -constraints property of the node. The following code illustrates how to drop shadow. +Diagram provides support to add [`shadow`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#shadow) effects to nodes, which is disabled by default. Shadow effects can be enabled using the constraints property of the node to create depth and visual hierarchy in your diagrams. + +The following code illustrates how to apply shadow effects to nodes: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -157,9 +152,11 @@ constraints property of the node. The following code illustrates how to drop sha {% previewsample "page.domainurl/code-snippet/diagram/nodes/nCustomization-cs6" %} -### Customizing shadow effect of the node +### Customizing shadow effects -The angle, distance, and opacity of the shadow can be customized with the shadow property of the node. The following code example illustrates how to customize shadow. +The [`angle`](https://ej2.syncfusion.com/react/documentation/api/diagram/shadowModel/#angle), [`distance`](https://ej2.syncfusion.com/react/documentation/api/diagram/shadowModel/#distance), and [`opacity`](https://ej2.syncfusion.com/react/documentation/api/diagram/shadowModel/#opacity) of the shadow can be customized using the `shadow` property of the node. These properties allow you to control the direction, positioning, and transparency of the shadow effect. + +The following code example illustrates how to customize shadow properties: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -174,9 +171,9 @@ The angle, distance, and opacity of the shadow can be customized with the shadow ## Provide additional information to the node -The [`addInfo`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#addinfo) property of the node allows you to maintain additional information to the node. You can specify either object or string value. +The [`addInfo`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#addinfo) property of the node allows you to maintain additional information with the node. You can specify either object or string values to store custom data that can be retrieved and used in your application logic. -The following code shows how to set the AddInfo value. +The following code shows how to set the addInfo value: ```ts import * as React from "react"; @@ -217,11 +214,11 @@ root.render(); ## Constraints -The [`constraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#constraints) property of the node allows you to enable/disable certain behaviors of the node. For more information about node constraints refer to the [`Node Constraints`](./constraints#node-constraints) +The [`constraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#constraints) property of the node allows you to enable or disable certain behaviors of the node. This provides fine-grained control over node interactions and capabilities. For more information about node constraints, refer to the [`Node Constraints`](./constraints#node-constraints) documentation. ## Stack order -The nodes [`zIndex`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#zindex) property specifies the stack order of the node. A node with greater stack order is always in front of a node with a lower stack order. +The [`zIndex`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#zindex) property of nodes specifies the stack order of the node. A node with a greater stack order is always rendered in front of a node with a lower stack order, allowing you to control the layering of overlapping elements. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -238,9 +235,9 @@ N> By default, the zIndex will be generated automatically based on the order of ## Pivot -Node rotation angle will be based on [`Pivot`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#pivot) values which range from 0 to 1 like offset values. By default, the Pivot values are set to X= 0.5 and Y=0.5. +Node rotation angle will be based on [`Pivot`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#pivot) values which range from 0 to 1, similar to offset values. By default, the pivot values are set to X = 0.5 and Y = 0.5, meaning rotation occurs around the center of the node. -The following table illustrates how pivot relates offset values with node boundaries. +The following table illustrates how pivot relates to offset values with node boundaries: | Pivot | Offset | |-------- | -------- | @@ -263,7 +260,7 @@ The following code illustrates how to change the `pivot` value. ## Get connected connector from node -Node has the InEdges and OutEdges read-only property. In this property, you can find what are all the connectors that are connected to the node, and then you can fetch these connectors by using the [`getObject`](https://ej2.syncfusion.com/react/documentation/api/diagram/#getobject) method in the diagram. +Node has the inEdges and outEdges read-only properties. These properties allow you to identify all connectors that are connected to the node. You can then retrieve these connectors using the [`getObject`](https://ej2.syncfusion.com/react/documentation/api/diagram/#getobject) method in the diagram. ```ts import * as React from "react"; diff --git a/ej2-react/diagram/nodes-events.md b/ej2-react/diagram/nodes-events.md index 596d25ab6..825844ddd 100644 --- a/ej2-react/diagram/nodes-events.md +++ b/ej2-react/diagram/nodes-events.md @@ -1,20 +1,22 @@ --- layout: post title: Events of node interaction in React Diagram component | Syncfusion® -description: Learn here all about Nodes in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +description: Learn about node interaction events in Syncfusion React Diagram including click, selection, position, size, rotate, property and collection events. control: Events of node platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Events of nodes in React Diagram control +# Node Interaction Events in React Diagram Component -Diagram provides some events support for node that triggers when interacting with the node. +The React Diagram component provides comprehensive event support for node interactions, allowing developers to respond to user actions and customize behavior during various interaction scenarios. These events are triggered when users interact with nodes through clicking, dragging, resizing, rotating, and other operations. -## Click event +## Click Event -Triggers when the node is clicked. The following code example explains how to get the [`click`](https://ej2.syncfusion.com/react/documentation/api/diagram/#click) event in the diagram. +Triggered when a user clicks on a node. This event provides access to the clicked node and mouse event details, enabling custom click handling and node-specific actions. + +The following code example demonstrates how to handle the [`click`](https://ej2.syncfusion.com/react/documentation/api/diagram/#click) event in the diagram: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -27,10 +29,11 @@ Triggers when the node is clicked. The following code example explains how to ge {% previewsample "page.domainurl/code-snippet/diagram/nodes/nEvent-cs1" %} -## Selection change event +## Selection Change Event + +Triggered when a node's selection state changes, either when selected or deselected. This event fires during both the selection process and completion, providing control over selection behavior. -Triggers when the node is selected in diagram. -The following code example explains how to get the [`selectionChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/#selectionchange) event in the diagram. +The following code example shows how to handle the [`selectionChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/#selectionchange) event: {% tabs %} @@ -44,8 +47,7 @@ The following code example explains how to get the [`selectionChange`](https://e {% previewsample "page.domainurl/code-snippet/diagram/nodes/nEvent-cs2" %} - You can prevent selection by setting the `cancel` property of [`SelectionChangeEventArgs`](https://ej2.syncfusion.com/react/documentation/api/diagram/iSelectionChangeEventArgs/) to true, as shown in the code snippet below. - +Selection can be prevented by setting the `cancel` property[`SelectionChangeEventArgs`](https://ej2.syncfusion.com/react/documentation/api/diagram/iSelectionChangeEventArgs/) to **true**, as shown in the following code: ```ts selectionChange: function (args: ISelectionChangeEventArgs) { if (args.state == 'Changing') { @@ -56,10 +58,11 @@ The following code example explains how to get the [`selectionChange`](https://e ``` -## Position change event +## Position Change Event -While dragging the node through interaction, the position change event can be used to do the customization. -The following code example explains how to get the [`positionChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/#positionchange) event in the diagram. +Triggered during node dragging operations, providing real-time position updates as users move nodes. This event enables position validation, snap-to-grid functionality, and custom drag behavior. + +The following code example demonstrates how to handle the [`positionChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/#positionchange) event: {% tabs %} @@ -73,7 +76,7 @@ The following code example explains how to get the [`positionChange`](https://ej {% previewsample "page.domainurl/code-snippet/diagram/nodes/nEvent-cs3" %} - You can prevent dragging by setting the `cancel` property of [`DraggingEventArgs`](https://ej2.syncfusion.com/react/documentation/api/diagram/iDraggingEventArgs/) to true, as shown in the code snippet below. +Dragging can be prevented by setting the `cancel` property of [`DraggingEventArgs`](https://ej2.syncfusion.com/react/documentation/api/diagram/iDraggingEventArgs/) to **true**: ```ts positionChange: function (args: IDraggingEventArgs) { @@ -85,10 +88,11 @@ The following code example explains how to get the [`positionChange`](https://ej ``` -## Size change event +## Size Change Event + +Triggered during node resizing operations when users interact with resize handles. This event provides access to the new dimensions and allows for size constraints and validation. -While resizing the node during the interaction, the size change event can be used to do the customization. -The following code example explains how to get the [`sizeChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/#sizechange) event in the diagram. +The following code example shows how to handle the [`sizeChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/#sizechange) event: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -101,7 +105,7 @@ The following code example explains how to get the [`sizeChange`](https://ej2.sy {% previewsample "page.domainurl/code-snippet/diagram/nodes/nEvent-cs4" %} - You can prevent resizing by setting the `cancel` property of [`SizeChangeEventArgs`](https://ej2.syncfusion.com/react/documentation/api/diagram/isizechangeeventargs/) to true, as shown in the code snippet below. +Resizing can be prevented by setting the `cancel` property of[`SizeChangeEventArgs`](https://ej2.syncfusion.com/react/documentation/api/diagram/isizechangeeventargs/) to **true**: ```ts sizeChange: function (args: ISizeChangeEventArgs) { @@ -113,10 +117,11 @@ The following code example explains how to get the [`sizeChange`](https://ej2.sy ``` -## Rotate change event +## Rotate Change Event -While rotating the node during the interaction, the rotate change event can be used to do the customization. -The following code example explains how to get the [`rotateChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/#rotatechange) event in the diagram. +Triggered during node rotation operations when users interact with the rotation handle. This event enables rotation constraints and custom rotation behavior. + +The following code example demonstrates how to handle the [`rotateChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/#rotatechange) event: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -129,7 +134,7 @@ The following code example explains how to get the [`rotateChange`](https://ej2. {% previewsample "page.domainurl/code-snippet/diagram/nodes/nEvent-cs5" %} - You can prevent rotation by setting the `cancel` property of [`RotationEventArgs`](https://ej2.syncfusion.com/react/documentation/api/diagram/irotationeventargs/) to true, as shown in the code snippet below. +Rotation can be prevented by setting the `cancel` property of[`RotationEventArgs`](https://ej2.syncfusion.com/react/documentation/api/diagram/irotationeventargs/) to **true**: ```ts rotateChange: function (args: IRotationEventArgs) { @@ -141,9 +146,11 @@ The following code example explains how to get the [`rotateChange`](https://ej2. ``` -## Property change event +## Property Change Event + +Triggered when any property of a node is modified programmatically or through user interaction. This event is useful for tracking changes and implementing custom validation logic. -Triggers when there is any property change occurred for the node. The following code example explains how to get the [`propertyChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/#propertychange) event in the diagram. +The following code example shows how to handle the [`propertyChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/#propertychange) event: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -156,10 +163,11 @@ Triggers when there is any property change occurred for the node. The following {% previewsample "page.domainurl/code-snippet/diagram/nodes/nEvent-cs6" %} -## Collection change event +## Collection Change Event -Triggers when the node is added or removed in diagram dynamically. -The following code example explains how to get the [`collectionChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/#collectionchange) event in the diagram. +Triggered when nodes are added to or removed from the diagram dynamically. This event provides control over diagram modifications and enables validation before collection changes occur. + +The following code example demonstrates how to handle the [`collectionChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/#collectionchange) event: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -172,7 +180,7 @@ The following code example explains how to get the [`collectionChange`](https:// {% previewsample "page.domainurl/code-snippet/diagram/nodes/nEvent-cs7" %} -You can prevent changes to the diagram collection, such as adding or deleting nodes, by setting the `cancel` property of [`CollectionChangeEventArgs`](https://ej2.syncfusion.com/react/documentation/api/diagram/icollectionchangeeventargs/) to true, as shown in the code snippet below. +Collection changes can be prevented by setting the `cancel` property of[`CollectionChangeEventArgs`](https://ej2.syncfusion.com/react/documentation/api/diagram/icollectionchangeeventargs/) to **true**: ```ts collectionChange: function (args: ICollectionChangeEventArgs) { @@ -186,19 +194,21 @@ You can prevent changes to the diagram collection, such as adding or deleting no ## Mouse Events -### Mouse enter event +The diagram component provides mouse interaction events that trigger when users hover over or move the mouse cursor in relation to node surfaces. + +### Mouse Enter Event -The [`mouseEnter`](https://ej2.syncfusion.com/react/documentation/api/diagram/#mouseenter) is triggered when the mouse enters the node surface. +The [`mouseEnter`](https://ej2.syncfusion.com/react/documentation/api/diagram/#mouseenter) event is triggered when the mouse cursor enters a node's boundary area. -### Mouse over event +### Mouse Over Event -The [`mouseOver`](https://ej2.syncfusion.com/react/documentation/api/diagram/#mouseover) is triggered when the mouse hover over the node surface. +The [`mouseOver`](https://ej2.syncfusion.com/react/documentation/api/diagram/#mouseover) event is triggered when the mouse cursor hovers over a node's surface area. -### Mouse leave event +### Mouse Leave Event -The [`mouseLeave`](https://ej2.syncfusion.com/react/documentation/api/diagram/#mouseleave) is triggered when the mouse leaves the node surface. +The [`mouseLeave`](https://ej2.syncfusion.com/react/documentation/api/diagram/#mouseleave) event is triggered when the mouse cursor leaves a node's boundary area. -The following code example shows how to handle these events in the diagram and change the color of a node based on these events: +The following code example demonstrates how to handle these mouse events and implement visual feedback by changing node colors based on mouse interactions: {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/diagram/nodes-expandAndCollapse.md b/ej2-react/diagram/nodes-expandAndCollapse.md index 113cc54a7..5b85efaea 100644 --- a/ej2-react/diagram/nodes-expandAndCollapse.md +++ b/ej2-react/diagram/nodes-expandAndCollapse.md @@ -1,36 +1,41 @@ --- layout: post title: Expand and collapse nodes in React Diagram component | Syncfusion® -description: Learn here all about Nodes in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +description: Learn how to implement expand and collapse functionality for nodes in Syncfusion® React Diagram component with customizable icons and states. control: Expand and collapse of nodes platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Expand icon and collapse icon in React Diagram control +# Expand and Collapse Nodes in React Diagram Component -Diagram provides support to describe the state of the node. i.e., the node is expanded or collapsed state. The IsExpanded property of node is used to expand or collapse the children nodes.The Expand and Collapse support is used to compress the hierarchy view so that only the roots of each elements are visible. +The React Diagram component provides built-in support for expanding and collapsing nodes, enabling users to create hierarchical views where child nodes can be hidden or shown dynamically. This functionality is particularly useful for organizational charts, mind maps, and tree structures where managing visual complexity is essential. -The following properties of the Node are used to represent the state of the node and allows user to Expand and Collapse the desired Node: +The expand and collapse feature allows users to: +- Compress hierarchical views to show only root elements. +- Toggle visibility of child nodes interactively. +- Customize the appearance of expand and collapse icons. +- Control the initial state of nodes programmatically. -* ExpandIcon +The following properties control the expand and collapse behavior of nodes: -* CollapseIcon +* **expandIcon** - Defines the icon displayed when a node can be expanded. +* **collapseIcon** - Defines the icon displayed when a node can be collapsed. -N> Icon can be created only when the node has outEdges. +N> Icons are only created when the node has outgoing edges (outEdges). -To explore the properties of expand and collapse icon, refer to [`expandIcon`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#expandicon) and [`collapseIcon`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#collapseicon). +For detailed API information, refer to[`expandIcon`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#expandicon) and [`collapseIcon`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#collapseicon). -## Customizing expand and collapse icon +## Customizing expand and collapse icons -### Size and shape +### Size and shape configuration -Set a size for an icon by using [`width`](https://ej2.syncfusion.com/react/documentation/api/diagram/iconShapeModel/#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/diagram/iconShapeModel/#height) properties. +Define the size of icons using the [`width`](https://ej2.syncfusion.com/react/documentation/api/diagram/iconShapeModel/#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/diagram/iconShapeModel/#height) properties. -The expandIcon’s and collapseIcon’s [`shape`](https://ej2.syncfusion.com/react/documentation/api/diagram/iconShapeModel/#shape) property allows to define the shape of the icon. +The [`shape`](https://ej2.syncfusion.com/react/documentation/api/diagram/iconShapeModel/#shape) property of expandIcon and collapseIcon allows customization of the icon appearance. -The following code example illustrates how to create an icon of various shapes. +The following code example demonstrates how to create icons with various shapes: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -43,9 +48,10 @@ The following code example illustrates how to create an icon of various shapes. {% previewsample "page.domainurl/code-snippet/diagram/nodes/nExpandAndCollapse-cs1" %} -### Appearance and alignment of icon +### Styling and appearance -Set the borderColor, borderWidth, and background color for an icon using [`borderColor`](https://ej2.syncfusion.com/react/documentation/api/diagram/iconShapeModel/#bordercolor), [`borderWidth`](https://ej2.syncfusion.com/react/documentation/api/diagram/iconShapeModel/#borderwidth), and [`fill`](https://ej2.syncfusion.com/react/documentation/api/diagram/iconShapeModel/#fill) properties. +Customize the visual appearance of icons using the following properties: + [`borderColor`](https://ej2.syncfusion.com/react/documentation/api/diagram/iconShapeModel/#bordercolor), [`borderWidth`](https://ej2.syncfusion.com/react/documentation/api/diagram/iconShapeModel/#borderwidth), and [`fill`](https://ej2.syncfusion.com/react/documentation/api/diagram/iconShapeModel/#fill) properties. The corner radius can be set using the [`cornerRadius`](https://ej2.syncfusion.com/react/documentation/api/diagram/iconShapeModel/#cornerradius) property of the icon. @@ -53,6 +59,8 @@ The icon can be aligned relative to the node boundaries. It has margin, offset, The [`iconColor`](https://ej2.syncfusion.com/react/documentation/api/diagram/iconShapeModel/#iconcolor) property can be used to set the strokeColor of the Icon. +Icons can be precisely positioned relative to node boundaries using margin, offset, horizontalAlignment, and verticalAlignment settings. While combining all four alignment properties provides maximum control, it requires careful consideration of their interactions. + The following code example illustrates the customization of icons. {% tabs %} @@ -66,9 +74,13 @@ The following code example illustrates the customization of icons. {% previewsample "page.domainurl/code-snippet/diagram/nodes/nExpandAndCollapse-cs2" %} -## IsExpanded +## Managing node expansion state + +The[`isExpanded`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#isexpanded)property controls whether a node displays its child nodes. When set to `true`, child nodes are visible; when **false**, they are hidden. + +**Default value:** **true** -[`isExpanded`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#isexpanded) property is used to defines whether the node is expanded or not. The following example demonstrate node’s `isExpanded` property. The default value of isExpanded property is true. +The following example demonstrates how to configure the expansion state of nodes: ```ts diff --git a/ej2-react/diagram/nodes-interaction.md b/ej2-react/diagram/nodes-interaction.md index aa17c709b..d4b0af6d0 100644 --- a/ej2-react/diagram/nodes-interaction.md +++ b/ej2-react/diagram/nodes-interaction.md @@ -1,27 +1,27 @@ --- layout: post title: Nodes in React Diagram component | Syncfusion® -description: Learn here all about Nodes in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. -control: Nodes +description: Learn about interactive node operations in Syncfusion React Diagram component including selection, dragging, resizing, and rotation. +control: Nodes interaction platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Node Interaction in React Diagram control +# Node Interaction in React Diagram Component -The diagram provides support for selecting, dragging, resizing, and rotating nodes interactively. A node can be selected by simply clicking on it, dragged by dragging it on diagram canvas, resized using the resize handle, and rotated using the rotate handle. Additionally, interactions can be performed using some public methods, which are explained below: +The React Diagram component provides comprehensive support for interactive node operations, enabling users to select, drag, resize, rotate, and flip nodes through both mouse interactions and programmatic methods. These interactions form the foundation of dynamic diagram editing capabilities. ## Select -You can simply click on the node to select it and click on diagram canvas to unselect it like below. +Node selection is fundamental to diagram interaction. Users can select nodes by clicking on them and deselect by clicking on the diagram canvas. ![Select/UnSelect Node](images/Single-node-select.gif) +### Programmatic Node Selection -### To select node programatically - -A node can be selected at runtime by using the [`select`](https://ej2.syncfusion.com/react/documentation/api/diagram/#select) method and the selection can be cleared in the diagram by using the [`clearSelection`](https://ej2.syncfusion.com/react/documentation/api/diagram/#clearselection) or [`unSelect`](https://ej2.syncfusion.com/react/documentation/api/diagram/#unselect) method. The following code explains how to select and clear selection in the diagram. +Nodes can be selected at runtime by using the [`select`](https://ej2.syncfusion.com/react/documentation/api/diagram/#select) method and the selection can be cleared in the diagram by using the [`clearSelection`](https://ej2.syncfusion.com/react/documentation/api/diagram/#clearselection) or [`unSelect`](https://ej2.syncfusion.com/react/documentation/api/diagram/#unselect) method to remove specific objects from selection. + The following code explains how to select and clear selection in the diagram. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -33,6 +33,7 @@ A node can be selected at runtime by using the [`select`](https://ej2.syncfusion {% endtabs %} {% previewsample "page.domainurl/code-snippet/diagram/nodes/nInteraction-cs1" %} +### Selection Methods Reference |Method | Parameter | Description| |----|----|----| @@ -41,13 +42,13 @@ A node can be selected at runtime by using the [`select`](https://ej2.syncfusion ## Drag -You can simply mousedown on a node and drag it anywhere on the diagram canvas like below. +Node dragging allows users to reposition nodes within the diagram canvas. Users can click and hold a node, then drag it to any location on the canvas. ![Drag node](images/drag-single-node.gif) -### To drag node programatically +### Programmatic Node Dragging -A node can be dragged at runtime by using the [`drag`](https://ej2.syncfusion.com/react/documentation/api/diagram/#drag) method. The following code explains how to drag the node by using the drag method. +Nodes can be moved programmatically using the [`drag`](https://ej2.syncfusion.com/react/documentation/api/diagram/#drag) method, which accepts the target object and new position coordinates. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -62,13 +63,13 @@ A node can be dragged at runtime by using the [`drag`](https://ej2.syncfusion.co ## Resize -When we select a node a resize handle will appear on all the sides of the node. We can resize the node by clicking and dragging the resize handle. +When a node is selected, resize handles appear on all sides, allowing users to modify the node's dimensions by clicking and dragging these handles. ![Resize Node](images/resize-Single-node.gif) -### To resize node programatically +### Programmatic Node Resizing -A node can be resized at runtime by using the [`scale`](https://ej2.syncfusion.com/react/documentation/api/diagram/#scale) method. The following code explains how to resize the node by using the scale method. +Node dimensions can be modified at runtime using the [`scale`](https://ej2.syncfusion.com/react/documentation/api/diagram/#scale) method, which applies scaling factors to adjust the node size proportionally. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -83,13 +84,13 @@ A node can be resized at runtime by using the [`scale`](https://ej2.syncfusion.c ## Rotate -A node can be rotated interactively by clicking and dragging the rotate handle of the node. +Node rotation is performed interactively by clicking and dragging the rotate handle that appears when a node is selected. ![Rotate Node](images/rotate-single-node.gif) -### To rotate node programatically +### Programmatic Node Rotation -A node can be rotated at runtime by using the [`rotate`](https://ej2.syncfusion.com/react/documentation/api/diagram/#rotate) method. The following code explains how to rotate the node by using the rotate method. +Nodes can be rotated at runtime using the [`rotate`](https://ej2.syncfusion.com/react/documentation/api/diagram/#rotate) method, which accepts the target object and rotation angle in degrees. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -104,7 +105,9 @@ A node can be rotated at runtime by using the [`rotate`](https://ej2.syncfusion. ## Flip -The diagram Provides support to flip the node. [`flip`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#flip) is performed to +The diagram component supports node flipping operations to create mirrored images of nodes. The [`flip`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#flip) property controls the flip direction and behavior. + +### Flip Directions give the mirrored image of the original element. The flip types are as follows: @@ -117,7 +120,7 @@ The flip types are as follows: * Both [`Both`](https://ej2.syncfusion.com/react/documentation/api/diagram/flipDirection/) which involves both vertical and horizontal changes of the element. -The following code illustrates how to provide the mirror image of the original element. +The following example demonstrates how to apply flip transformations to nodes: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -132,9 +135,10 @@ The following code illustrates how to provide the mirror image of the original e >Note: The flip is also applicable for group and BPMN shapes. -### Update flip at runtime +### Runtime Flip Updates + +Node flip properties can be updated dynamically at runtime using the `^` operator, which allows toggling flip states by applying the same flip direction multiple times. -You can dynamically update the flip for a node at runtime using the `^` operator. This operator allows you to apply the same flip direction multiple times, toggling the node's orientation effectively. The following example demonstrates how to update the flip for a node dynamically: {% tabs %} @@ -149,9 +153,9 @@ The following example demonstrates how to update the flip for a node dynamically {% previewsample "page.domainurl/code-snippet/diagram/nodes/node-cs4-flip" %} -### Flip modes +### Flip Modes -The [`flipMode`](https://ej2.syncfusion.com/angular/documentation/api/diagram/flipMode/) is used to control the behavior of the flip object whether to flip the object along with the port and label. +The [`flipMode`](https://ej2.syncfusion.com/react/documentation/api/diagram/flipMode/) property controls which elements are affected during flip operations, determining whether ports, labels, and label text are flipped along with the node. | FlipMode | Description | | -------- | -------- | @@ -164,7 +168,9 @@ The [`flipMode`](https://ej2.syncfusion.com/angular/documentation/api/diagram/fl |PortAndLabelText| It flips the port and label text along with the object.| |LabelAndLabelText| It flips the label and label text along with the Object.| -Below are examples of a node undergoing various FlipModes in different flip directions. +### Flip Mode Visual Examples + +The following table demonstrates how different flip modes affect node appearance across various flip directions: | Flip Direction | Flip Mode | Default Node | Flipped Node | | -------- | -------- | -------- | -------- | diff --git a/ej2-react/diagram/nodes-positioning.md b/ej2-react/diagram/nodes-positioning.md index a75bafd34..45f719a78 100644 --- a/ej2-react/diagram/nodes-positioning.md +++ b/ej2-react/diagram/nodes-positioning.md @@ -8,12 +8,14 @@ documentation: ug domainurl: ##DomainURL## --- -# Positioning a node in React Diagram control +# Positioning a Node in in React Diagram Component To customize the position of nodes in the React Diagram component, refer to the video link below. {% youtube "https://www.youtube.com/watch?v=pn02S_rwupw" %} +Node positioning in the React Diagram component allows precise control over where nodes appear on the diagram canvas. Understanding positioning fundamentals enables developers to create well-organized diagrams with nodes placed exactly where needed. + ## Position * Position of a node is controlled by using its [`offsetX`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#offsetx) and [`offsetY`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#offsety) properties. By default, these offset properties represent the distance between the origin of the diagram’s page and node’s center point. @@ -25,13 +27,15 @@ To customize the position of nodes in the React Diagram component, refer to the * Rotation of a node is controlled by using its [`rotateAngle`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#rotateangle) property. -The following table illustrates how pivot relates offset values with node boundaries. +### Understanding Pivot Points + +The pivot point determines which part of the node the offset coordinates reference. The following table illustrates how different pivot values affect node positioning: -| Pivot | Offset | +| Pivot | Offset Behavior | |-------- | -------- | | (0.5,0.5)| offsetX and offsetY values are considered as the node’s center point. | -| (0,0) | offsetX and offsetY values are considered as the top-left corner of the node. | -| (1,1) | offsetX and offsetY values are considered as the bottom-right corner of the node. | +| (0,0) | offsetX and offsetY values position the node's top-left corner | +| (1,1) | offsetX and offsetY values position the node's bottom-right corner | The following code illustrates how to change the `pivot` value. @@ -46,9 +50,11 @@ The following code illustrates how to change the `pivot` value. {% previewsample "page.domainurl/code-snippet/diagram/nodes/nPositioning-cs1" %} -## Minimum and maximum size for nodes. +## Minimum and Maximum size for nodes. + +The size constraints ensure nodes maintain appropriate dimensions during resizing operations. The [`minWidth`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#minwidth) and [`minHeight`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#minheight) properties define the smallest allowable size for a node during resize operations. Similarly, the `maxWidth` and `maxHeight` properties define the largest allowable size. -The [`minWidth`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#minwidth) and [`minHeight`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#minheight) properties of node allows you to control the minimum size of the node while resizing. Similarly, the [`maxWidth`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#maxwidth) and [`maxHeight`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#maxheight) properties of node allows you to control the maximum size of the node while resizing. +These constraints are particularly useful when creating diagrams where nodes need to maintain specific size ranges for visual consistency or functional requirements. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/diagram/nodes.md b/ej2-react/diagram/nodes.md index 85fa79c15..3e69c165f 100644 --- a/ej2-react/diagram/nodes.md +++ b/ej2-react/diagram/nodes.md @@ -1,30 +1,35 @@ --- layout: post -title: Nodes in React Diagram component | Syncfusion® -description: Learn here all about Nodes in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Nodes in React Diagram Component | Syncfusion® +description: Learn here all about Nodes in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Nodes platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Nodes in React Diagram component +# Nodes in React Diagram Component -Nodes are graphical objects used to visually represent the geometrical information, process flow, internal business procedure, entity, or any other kind of data, and it represents the functions of a complete system regarding to how it interacts with external entities. +Nodes are graphical objects that visually represent entities, processes, data flow, or any business logic within diagrams. They serve as the fundamental building blocks for creating flowcharts, organizational charts, network diagrams, and other visual representations. Each node can be customized with different shapes, sizes, colors, and interactive behaviors to suit specific diagram requirements. ![Node](images/node.png) -## Create node +## Node Fundamentals -A node can be created and added to the diagram either programmatically or interactively. The [`id`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#id) property of a node is used to define its unique identifier and can later be used to find the node at runtime for customization. Nodes are stacked on the diagram area from bottom to top in the order they are added. +Before creating nodes, understanding their core properties helps in effective diagram development: -N> When setting a Node's ID, ensure that it does not contain white spaces, does not start with numbers or special characters, and does not include special characters like underscores (_) or spaces. +- **Position**: Defined by `offsetX` and `offsetY` properties for precise placement. +- **Size**: Controlled through `width` and `height` properties. +- **Identification**: Each node requires a unique `id` for runtime operations. +- **Stacking**: Nodes are layered from bottom to top based on addition order. -### Add node through nodes collection +## Creating Nodes -To create a node, define the [`node`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/) object and add that to [`nodes`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeModel/) collection of the [`diagram model`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramModel/). The following code example illustrates how to add a node to the diagram. +### Add Nodes through Nodes Collection + +To create a node, define the [`node`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#node) object and add it to the [`nodes`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeModel/) collection of the diagram model. The [`id`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#id) property serves as the unique identifier for runtime operations and customization. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -39,91 +44,96 @@ To create a node, define the [`node`](https://ej2.syncfusion.com/react/documenta N> Node id should not begin with numbers(should begin with a letter). Node Id should be unique for all the shapes and connectors. -### Add/Remove node at runtime - -Nodes can be added at runtime by using public method, [`add`](https://ej2.syncfusion.com/react/documentation/api/diagram/#add) and can be removed at runtime by using public method, [`remove`](https://ej2.syncfusion.com/react/documentation/api/diagram/#remove). On adding node at runtime, the nodes collection is changed and the [`collectionChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/#collectionchange) event will trigger. +### Create Node from Data Source -The following code illustrates how to add a node. +Nodes can be generated automatically using the dataSource property. Default properties for these nodes are retrieved from([`getNodeDefaults`](https://ej2.syncfusion.com/react/documentation/api/diagram/#getnodedefaults)) settings. For detailed information about data binding, refer to [`DataBinding`](./data-binding). {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/diagram/nodes/nodes-cs2/app/index.jsx %} +{% include code-snippet/diagram/nodes/nodes-cs5/app/index.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/diagram/nodes/nodes-cs2/app/index.tsx %} +{% include code-snippet/diagram/nodes/nodes-cs5/app/index.tsx %} {% endhighlight %} {% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/nodes/nodes-cs5" %} - {% previewsample "page.domainurl/code-snippet/diagram/nodes/nodes-cs2" %} - -### Add collection of nodes at runtime - -* The collection of nodes can be dynamically added using [`addElements`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addelements) method.Each time an element is added to the diagram canvas, the [`collectionChange`](https://ej2.syncfusion.com/react/documentation/api/diagram#collectionchange) event will be triggered. +### Add Nodes from Symbol Palette -The following code illustrates how to add nodes collection at run time. +Nodes can be predefined in a symbol palette and dragged into the diagram as needed. This approach provides users with a library of reusable components. For comprehensive guidance on symbol palette integration, refer to [`Symbol Palette`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolPaletteModel). {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/diagram/nodes/nodes-cs3/app/index.jsx %} +{% include code-snippet/diagram/nodes/nodes-cs4/app/index.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/diagram/nodes/nodes-cs3/app/index.tsx %} +{% include code-snippet/diagram/nodes/nodes-cs4/app/index.tsx %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/nodes/nodes-cs3" %} +{% previewsample "page.domainurl/code-snippet/diagram/nodes/nodes-cs4" %} -### Add node from palette -Nodes can be predefined and added to the palette, and can be dropped into the diagram when needed. For more information -about adding nodes from symbol palette, refer to [`Symbol Palette`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolPaletteModel). +### Draw Nodes Interactively + +To enable interactive node drawing, activate the drawing tool by setting `DrawOnce` or `ContinuousDraw` to the [`tool`](https://ej2.syncfusion.com/react/documentation/api/diagram/#tool) property and configure the node template using the [`drawingObject`](https://ej2.syncfusion.com/react/documentation/api/diagram/#drawingobject) property. + +The following code example illustrates how to draw a rectangle at runtime. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/diagram/nodes/nodes-cs4/app/index.jsx %} +{% include code-snippet/diagram/nodes/nodes-cs6/app/index.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/diagram/nodes/nodes-cs4/app/index.tsx %} +{% include code-snippet/diagram/nodes/nodes-cs6/app/index.tsx %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/nodes/nodes-cs4" %} +{% previewsample "page.domainurl/code-snippet/diagram/nodes/nodes-cs6" %} + +## Runtime Node Operations -### Create node through data source +### Add and Remove Individual Nodes -Nodes can be generated automatically with the information provided through dataSource property. The default properties for these nodes are fetched from default settings ([`getNodeDefaults`](https://ej2.syncfusion.com/react/documentation/api/diagram/#getnodedefaults)). For more information about data source, refer to  [`DataBinding`](./data-binding). +Nodes can be dynamically added using the [`add`](https://ej2.syncfusion.com/react/documentation/api/diagram/#add) method and removed using the [`remove`](https://ej2.syncfusion.com/react/documentation/api/diagram/#remove) method. Both operations trigger the [`collectionChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/#collectionchange) event, allowing for custom handling of diagram modifications. + +The following code illustrates how to add a node. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/diagram/nodes/nodes-cs5/app/index.jsx %} +{% include code-snippet/diagram/nodes/nodes-cs2/app/index.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/diagram/nodes/nodes-cs5/app/index.tsx %} +{% include code-snippet/diagram/nodes/nodes-cs2/app/index.tsx %} {% endhighlight %} {% endtabs %} - -{% previewsample "page.domainurl/code-snippet/diagram/nodes/nodes-cs5" %} -### Draw nodes + {% previewsample "page.domainurl/code-snippet/diagram/nodes/nodes-cs2" %} + +### Add Multiple Nodes Simultaneously -Nodes can be interactively drawn by clicking and dragging the diagram surface. +Collections of nodes can be efficiently added using the[`addElements`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addelements) method. This approach is optimal for bulk operations and triggers the `collectionChange` event for each added element. -To draw a shape, you have to activate the drawing tool by setting `DrawOnce` or `ContinuousDraw` to the [`tool`](https://ej2.syncfusion.com/react/documentation/api/diagram/#tool) property and you need to set the `node` object by using the [`drawingObject`](https://ej2.syncfusion.com/react/documentation/api/diagram/#drawingobject) property. The following code example illustrates how to draw a rectangle at runtime. +The following code illustrates how to add nodes collection at run time. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/diagram/nodes/nodes-cs6/app/index.jsx %} +{% include code-snippet/diagram/nodes/nodes-cs3/app/index.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/diagram/nodes/nodes-cs6/app/index.tsx %} +{% include code-snippet/diagram/nodes/nodes-cs3/app/index.tsx %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/nodes/nodes-cs6" %} +{% previewsample "page.domainurl/code-snippet/diagram/nodes/nodes-cs3" %} + -## Update node at runtime -You can modify any node properties at runtime, and the changes will be instantly reflected. For example, here you can change the size and color of the node. + +### Update Node Properties + +Node properties can be modified at runtime with immediate visual updates. Changes take effect instantly, allowing for dynamic diagram manipulation based on user interactions or data updates. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -136,11 +146,11 @@ You can modify any node properties at runtime, and the changes will be instantly {% previewsample "page.domainurl/code-snippet/diagram/nodes/nodes-cs7" %} -N> Once the property is updated, you should call the [`dataBind`](./data-binding) to reflect the changes instantly. +N> Call the [`dataBind`](./data-binding) `dataBind` method after property updates to ensure immediate reflection of changes. -## Clone node at runtime +### Clone Node at Runtime -Cloning a node creates a new node instance with identical properties and attributes. You can clone a node using the [`copy`](https://ej2.syncfusion.com/react/documentation/api/diagram/#copy) and [`paste`](https://ej2.syncfusion.com/react/documentation/api/diagram/#paste) public methods of the diagram model. +Node cloning creates new instances with identical properties and attributes. Use the [`copy`](https://ej2.syncfusion.com/react/documentation/api/diagram/#copy) and [`paste`](https://ej2.syncfusion.com/react/documentation/api/diagram/#paste) methods to duplicate existing nodes programmatically. The following code example illustrates how to clone node at runtime @@ -156,15 +166,17 @@ The following code example illustrates how to clone node at runtime {% previewsample "page.domainurl/code-snippet/diagram/nodes/nodes-cs8" %} -## Add nodes from tree view +## Advanced Node Integration + +### Import Nodes from External Components -By customizing the [`dragEnter`](https://ej2.syncfusion.com/react/documentation/api/diagram/#dragenter) functionality, you can allow elements from other components, such as the tree view, to be converted into nodes based on the data of the dragged element. +Custom [`dragEnter`](https://ej2.syncfusion.com/react/documentation/api/diagram/#dragenter) functionality enables conversion of elements from other components, such as tree views, into diagram nodes based on the dragged element's data properties. ## See Also -* [How to add annotations to the node](./labels) -* [How to add ports to the node](./ports) -* [How to enable/disable the behavior of the node](./constraints) -* [How to add nodes to the symbol palette](./symbol-palette) -* [How to edit the node visual interface](./interaction#selection) -* [How to create diagram nodes using drawing tools](./tools) +* [How to add annotations to the node.](./labels) +* [How to add ports to the node.](./ports) +* [How to enable/disable the behavior of the node.](./constraints) +* [How to add nodes to the symbol palette.](./symbol-palette) +* [How to edit the node visual interface.](./interaction#selection) +* [How to create diagram nodes using drawing tools.](./tools) From f3dabea66ae2907f3e5d29c6fe7e8e764feffe95 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Tue, 30 Sep 2025 20:17:16 +0530 Subject: [PATCH 20/34] Integrated latest changes at 09-30-2025 7:30:31 PM --- ej2-react-toc.html | 2 +- .../ai-integrations/openai-integration.md | 37 ++++---- .../ai-integrations/gemini-ai/app/index.jsx | 2 +- .../ai-integrations/gemini-ai/app/index.tsx | 2 +- .../ai-integrations/gemini/app/index.jsx | 7 +- .../ai-integrations/gemini/app/index.tsx | 7 +- .../ai-integrations/gemini/systemjs.config.js | 1 + .../ai-integrations/openai/app/index.jsx | 91 ++++++++++--------- .../ai-integrations/openai/app/index.tsx | 89 +++++++++--------- .../chat-ui/ai-integrations/openai/index.html | 2 +- .../ai-integrations/openai/systemjs.config.js | 1 + 11 files changed, 122 insertions(+), 119 deletions(-) diff --git a/ej2-react-toc.html b/ej2-react-toc.html index 6d1a8e47a..b3adef95e 100644 --- a/ej2-react-toc.html +++ b/ej2-react-toc.html @@ -606,7 +606,7 @@ Integration with Google Gemini
  • - Integration with Open AI + Integration with Azure Open AI
    • diff --git a/ej2-react/chat-ui/ai-integrations/openai-integration.md b/ej2-react/chat-ui/ai-integrations/openai-integration.md index 3765f1fd3..2d9c7ec01 100644 --- a/ej2-react/chat-ui/ai-integrations/openai-integration.md +++ b/ej2-react/chat-ui/ai-integrations/openai-integration.md @@ -1,27 +1,27 @@ --- layout: post -title: Open AI With React Chat UI component | Syncfusion -description: Checkout and learn about Integration of Open AI With React Chat UI component of Syncfusion Essential JS 2 and more details. +title: Azure Open AI With React Chat UI component | Syncfusion +description: Checkout and learn about Integration of Azure Open AI With React Chat UI component of Syncfusion Essential JS 2 and more details. platform: ej2-react control: Chat UI documentation: ug domainurl: ##DomainURL## --- -# Integration of Open AI With Chat UI component +# Integration of Azure Open AI With Chat UI component -The Syncfusion Chat UI supports integration with [OpenAI](https://platform.openai.com/docs/overview), enabling advanced conversational AI features in your React applications. +The Syncfusion Chat UI supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your React applications. ## Getting Started with the Chat UI component -Before integrating Open AI, ensure that the Syncfusion Chat UI control is correctly rendered in your React app: +Before integrating Azure Open AI, ensure that the Syncfusion Chat UI control is correctly rendered in your React app: [React Getting Started Guide](../getting-started) ## Prerequisites * Requires `Node.js` (v16 or higher) and `npm`. -* OpenAI account to generate an API key for accessing the `OpenAI` API +* An Azure account with access to `Azure Open AI` services and a generated API key. * Syncfusion Chat UI for React `@syncfusion/ej2-react-interactive-chat` installed in your project. ## Install Dependencies @@ -34,27 +34,30 @@ npm install @syncfusion/ej2-react-interactive-chat --save ``` -## Generate API Key +## Configure Azure Open AI -1. Go to [Open AI](https://platform.openai.com/docs/overview) and sign in with your Google account. If you don’t have one, create a new account. +1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource. -2. Once logged in, click on your profile icon in the top-right corner and select `API Keys` from the dropdown menu. +2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL. -3. Click the `+ Create new secret key` button. You’ll be prompted to name the key (optional). Confirm to generate the key. +3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version (e.g., 2024-07-01-preview) matches your resource configuration. -4. Your API key will be displayed once. Copy it and store it securely, as it won’t be shown again. +4. Store these values securely, as they will be used in your application. -> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production. +> `Security Note`: Never expose your API key in client-side code for production applications. Use a server-side proxy or environment variables to manage sensitive information securely. -## Integration Open AI with Chat UI +## Integration Azure Open AI with Chat UI -Create `src/App.jsx` to integrate the Open AI with Chat UI component +Create `src/App.jsx` to integrate the Azure Open AI with Chat UI component -* Add your generated `API Key` at the line +* Update the following configuration values with your Azure Open AI details: ```bash -const openaiApiKey = 'Place your API key here'; +const azureOpenAIApiKey = 'Your_Azure_OpenAI_API_Key'; +const azureOpenAIEndpoint = 'Your_Azure_OpenAI_Endpoint'; +const azureOpenAIApiVersion = 'Your_Azure_OpenAI_API_Version'; +const azureDeploymentName = 'Your_Deployment_Name'; ``` @@ -79,4 +82,4 @@ npm start ``` -Open `http://localhost:3000` to interact with your Open AI for dynamic response. +Open `http://localhost:3000` to interact with your Azure Open AI for dynamic response. diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx index c36e0366d..c8fa5a151 100644 --- a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx @@ -48,7 +48,7 @@ function App() { }; const onPromptRequest = (args) => { - const model = genAI.getGenerativeModel({ model: 'gemini-1.5-flash' }); + const model = genAI.getGenerativeModel({ model: 'gemini-2.5-flash' }); // Replace Your Model Name Here model.generateContent(args.prompt) .then(result => { const responseText = result.response.text().trim() || 'No respons received.'; diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx index cd2a605bc..a6ae30718 100644 --- a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx @@ -53,7 +53,7 @@ function App() { }; const onPromptRequest = (args: { prompt: string }): void => { - const model = genAI.getGenerativeModel({ model: 'gemini-1.5-flash' }); + const model = genAI.getGenerativeModel({ model: 'gemini-2.5-flash' }); // Replace Your Model Name Here model.generateContent(args.prompt) .then((result: GenerateContentResult) => { const responseText: string = result.response.text().trim() || 'No response received.'; diff --git a/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/app/index.jsx b/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/app/index.jsx index 3b372208e..cb162bf77 100644 --- a/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/app/index.jsx +++ b/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/app/index.jsx @@ -19,14 +19,13 @@ function App() { user: 'Gemini', }; - const handleMessageSend = (args) => { - setTimeout(async () => { + const handleMessageSend = async (args) => { if (chatRef.current) { chatRef.current.typingUsers = [aiModel]; } try { - const model = genAI.getGenerativeModel({ model: 'gemini-1.5-flash' }); + const model = genAI.getGenerativeModel({ model: 'gemini-2.5-flash' }); // Replace Your Model Name Here const result = await model.generateContent(args.message.text); const response = await result.response.text(); @@ -37,7 +36,6 @@ function App() { }); } } catch (error) { - console.error('Error fetching Gemini response:', error); if (chatRef.current) { chatRef.current.addMessage({ text: 'Error generating response. Please try again.', @@ -49,7 +47,6 @@ function App() { chatRef.current.typingUsers = []; } } - }, 500); }; const handleToolbarItemClicked = () => { diff --git a/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/app/index.tsx b/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/app/index.tsx index 9d915ac96..939e8d9e7 100644 --- a/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/app/index.tsx +++ b/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/app/index.tsx @@ -19,14 +19,13 @@ function App() { user: 'Gemini', }; - const handleMessageSend = (args: { message: { text: string } }) => { - setTimeout(async () => { + const handleMessageSend = async (args: { message: { text: string } }) => { if (chatRef.current) { chatRef.current.typingUsers = [aiModel]; } try { - const model = genAI.getGenerativeModel({ model: 'gemini-1.5-flash' }); + const model = genAI.getGenerativeModel({ model: 'gemini-2.5-flash' }); // Replace Your Model Name Here const result = await model.generateContent(args.message.text); const response = await result.response.text(); @@ -37,7 +36,6 @@ function App() { }); } } catch (error) { - console.error('Error fetching Gemini response:', error); if (chatRef.current) { chatRef.current.addMessage({ text: 'Error generating response. Please try again.', @@ -49,7 +47,6 @@ function App() { chatRef.current.typingUsers = []; } } - }, 500); }; const handleToolbarItemClicked = () => { diff --git a/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/systemjs.config.js b/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/systemjs.config.js index 7ff017ea1..bcfda3df8 100644 --- a/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/ai-integrations/gemini/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", diff --git a/ej2-react/code-snippet/chat-ui/ai-integrations/openai/app/index.jsx b/ej2-react/code-snippet/chat-ui/ai-integrations/openai/app/index.jsx index 97aab6010..0a9b32e77 100644 --- a/ej2-react/code-snippet/chat-ui/ai-integrations/openai/app/index.jsx +++ b/ej2-react/code-snippet/chat-ui/ai-integrations/openai/app/index.jsx @@ -3,9 +3,13 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { marked } from 'marked'; +const azureOpenAIApiKey = 'YOUR_AZURE_OPENAI_API_KEY'; // Replace with your Azure OpenAI API key +const azureOpenAIEndpoint = 'YOUR_AZURE_OPENAI_ENDPOINT'; // Replace with your Azure OpenAI endpoint (e.g., https://your-resource-name.openai.azure.com) +const azureOpenAIApiVersion = '2024-02-01'; // Replace with the API version for your resource +const azureDeploymentName = 'YOUR_DEPLOYMENT_NAME'; // Replace with your Azure OpenAI deployment name + function App() { const chatRef = React.useRef(null); - const openaiApiKey = ''; const currentUser = { id: 'user1', @@ -14,54 +18,51 @@ function App() { const aiModel = { id: 'ai', - user: 'Open AI', + user: 'Azure OpenAI', }; - const handleMessageSend = (args) => { - setTimeout(async () => { - if (chatRef.current) { - chatRef.current.typingUsers = [aiModel]; - } + const handleMessageSend = async (args) => { + if (chatRef.current) { + chatRef.current.typingUsers = [aiModel]; + } + try { + const url = + azureOpenAIEndpoint.replace(/\/$/, '') + + `/openai/deployments/${encodeURIComponent(azureDeploymentName)}/chat/completions` + + `?api-version=${encodeURIComponent(azureOpenAIApiVersion)}`; + const response = await fetch(url, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'api-key': azureOpenAIApiKey, + }, + body: JSON.stringify({ + messages: [{ role: 'user', content: args.message.text }], + temperature: 0.7, + }), + }); - try { - const response = await fetch( - 'https://api.openai.com/v1/chat/completions', - { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${openaiApiKey}`, - }, - body: JSON.stringify({ - model: 'gpt-4o-mini', - messages: [{ role: 'user', content: args.message.text }], - max_tokens: 150, - }), - } - ); - const data = await response.json(); - const responseText = data.choices[0].message.content.trim() || 'No response received.'; + const data = await response.json(); + const responseText = data.choices[0].message.content.trim() || 'No response received.'; - if (chatRef.current) { - chatRef.current.addMessage({ - text: marked.parse(responseText), - author: aiModel, - }); - } - } catch (error) { - console.error('Error fetching OpenAI response:', error); - if (chatRef.current) { - chatRef.current.addMessage({ - text: 'Error generating response. Please check your API key and try again.', - author: aiModel, - }); - } - } finally { - if (chatRef.current) { - chatRef.current.typingUsers = []; - } + if (chatRef.current) { + chatRef.current.addMessage({ + text: marked.parse(responseText), + author: aiModel, + }); } - }, 500); + } catch (error) { + if (chatRef.current) { + chatRef.current.addMessage({ + text: 'Error generating response. Please check your Azure OpenAI configuration (API Key, Endpoint, Deployment Name, and API Version) and try again.', + author: aiModel, + }); + } + } finally { + if (chatRef.current) { + chatRef.current.typingUsers = []; + } + } }; const handleToolbarItemClicked = () => { @@ -75,7 +76,7 @@ function App() { ref={chatRef} id="chat-ui" user={currentUser} - headerText="Chat with OpenAI" + headerText="Chat with Azure OpenAI" headerIconCss="e-icons e-ai-chat" headerToolbar={{ items: [ diff --git a/ej2-react/code-snippet/chat-ui/ai-integrations/openai/app/index.tsx b/ej2-react/code-snippet/chat-ui/ai-integrations/openai/app/index.tsx index c8e3a0557..081a95d37 100644 --- a/ej2-react/code-snippet/chat-ui/ai-integrations/openai/app/index.tsx +++ b/ej2-react/code-snippet/chat-ui/ai-integrations/openai/app/index.tsx @@ -3,9 +3,13 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { marked } from 'marked'; +const azureOpenAIApiKey = 'YOUR_AZURE_OPENAI_API_KEY'; // Replace with your Azure OpenAI API key +const azureOpenAIEndpoint = 'YOUR_AZURE_OPENAI_ENDPOINT'; // Replace with your Azure OpenAI endpoint (e.g., https://your-resource-name.openai.azure.com) +const azureOpenAIApiVersion = '2024-02-01'; // Replace with the API version for your resource +const azureDeploymentName = 'YOUR_DEPLOYMENT_NAME'; // Replace with your Azure OpenAI deployment name + function App() { const chatRef = React.useRef(null); - const openaiApiKey: string = ''; const currentUser: UserModel = { id: 'user1', @@ -14,52 +18,51 @@ function App() { const aiModel: UserModel = { id: 'ai', - user: 'Open AI', + user: 'Azure OpenAI', }; - const handleMessageSend = (args: { message: { text: string } }) => { - setTimeout(async () => { + const handleMessageSend = async (args: { message: { text: string } }) => { + if (chatRef.current) { + chatRef.current.typingUsers = [aiModel]; + } + try { + const url = + azureOpenAIEndpoint.replace(/\/$/, '') + + `/openai/deployments/${encodeURIComponent(azureDeploymentName)}/chat/completions` + + `?api-version=${encodeURIComponent(azureOpenAIApiVersion)}`; + const response = await fetch(url, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'api-key': azureOpenAIApiKey, + }, + body: JSON.stringify({ + messages: [{ role: 'user', content: args.message.text }], + temperature: 0.7, + }), + }); + + const data = await response.json(); + const responseText: string = data.choices[0].message.content.trim() || 'No response received.'; + if (chatRef.current) { - chatRef.current.typingUsers = [aiModel]; + chatRef.current.addMessage({ + text: marked.parse(responseText), + author: aiModel, + }); } - try { - const response = await fetch( - 'https://api.openai.com/v1/chat/completions', - { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${openaiApiKey}`, - }, - body: JSON.stringify({ - model: 'gpt-4o-mini', - messages: [{ role: 'user', content: args.message.text }], - max_tokens: 150, - }), - } - ); - const data = await response.json(); - let responseText = data.choices[0].message.content.trim() || 'No response received.'; - if (chatRef.current) { - chatRef.current.addMessage({ - text: marked.parse(responseText), - author: aiModel, - }); - } - } catch (error) { - console.error('Error fetching OpenAI response:', error); - if (chatRef.current) { - chatRef.current.addMessage({ - text: 'Error generating response. Please check your API key and try again.', - author: aiModel, - }); - } - } finally { - if (chatRef.current) { - chatRef.current.typingUsers = []; - } + } catch (error) { + if (chatRef.current) { + chatRef.current.addMessage({ + text: 'Error generating response. Please check your Azure OpenAI configuration (API Key, Endpoint, Deployment Name, and API Version) and try again.', + author: aiModel, + }); + } + } finally { + if (chatRef.current) { + chatRef.current.typingUsers = []; } - }, 500); + } }; const handleToolbarItemClicked = () => { @@ -73,7 +76,7 @@ function App() { ref={chatRef} id="chat-ui" user={currentUser} - headerText="Chat with OpenAI" + headerText="Chat with Azure OpenAI" headerIconCss="e-icons e-ai-chat" headerToolbar={{ items: [ diff --git a/ej2-react/code-snippet/chat-ui/ai-integrations/openai/index.html b/ej2-react/code-snippet/chat-ui/ai-integrations/openai/index.html index 654c7c20b..6eb45cdce 100644 --- a/ej2-react/code-snippet/chat-ui/ai-integrations/openai/index.html +++ b/ej2-react/code-snippet/chat-ui/ai-integrations/openai/index.html @@ -27,7 +27,7 @@ diff --git a/ej2-react/code-snippet/chat-ui/ai-integrations/openai/systemjs.config.js b/ej2-react/code-snippet/chat-ui/ai-integrations/openai/systemjs.config.js index b984273a0..131fbab50 100644 --- a/ej2-react/code-snippet/chat-ui/ai-integrations/openai/systemjs.config.js +++ b/ej2-react/code-snippet/chat-ui/ai-integrations/openai/systemjs.config.js @@ -25,6 +25,7 @@ System.config({ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", From 5e78734107593c573efbf9f1959357f5ed7ddc36 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Wed, 1 Oct 2025 21:16:35 +0530 Subject: [PATCH 21/34] Integrated latest changes at 10-01-2025 7:30:28 PM --- ej2-react/treegrid/columns/column-chooser.md | 20 +++-- ej2-react/treegrid/columns/column-menu.md | 30 ++++---- ej2-react/treegrid/columns/column-reorder.md | 14 ++-- ej2-react/treegrid/columns/column-resizing.md | 24 +++--- ej2-react/treegrid/columns/column-template.md | 16 ++-- ej2-react/treegrid/columns/columns.md | 75 +++++++++---------- .../treegrid/columns/complex-data-binding.md | 8 +- .../treegrid/columns/foreign-key-column.md | 6 +- ej2-react/treegrid/columns/headers.md | 38 +++++----- 9 files changed, 114 insertions(+), 117 deletions(-) diff --git a/ej2-react/treegrid/columns/column-chooser.md b/ej2-react/treegrid/columns/column-chooser.md index 2645049fa..ffd021913 100644 --- a/ej2-react/treegrid/columns/column-chooser.md +++ b/ej2-react/treegrid/columns/column-chooser.md @@ -1,7 +1,7 @@ --- layout: post -title: Column Chooser in React Treegrid component | Syncfusion -description: Learn here all about Column Chooser in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Column Chooser in React TreeGrid | Syncfusion +description: Learn about configuring and customizing the Column Chooser in the Syncfusion React TreeGrid, including header, content, and footer templates. control: Column Chooser platform: ej2-react documentation: ug @@ -12,19 +12,17 @@ domainurl: ##DomainURL## ## Column Chooser Template in Syncfusion React TreeGrid -The Column Chooser Template feature allows full customization of the column chooser’s header, content, and footer, making it easier to manage column visibility. To enable the column chooser, set [showColumnChooser](https://ej2.syncfusion.com/react/documentation/api/treegrid/#showcolumnchooser) to **true** and add **ColumnChooser** to the [toolbar](https://ej2.syncfusion.com/react/documentation/api/treegrid#toolbar) property. +The Column Chooser Template feature enables full customization of the column chooser header, content, and footer to manage column visibility. To enable the column chooser, set [showColumnChooser](https://ej2.syncfusion.com/react/documentation/api/treegrid/#showcolumnchooser) to true and include ColumnChooser in the [toolbar](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbar) property. To implement a custom column chooser template in the TreeGrid, use the following properties: -* **columnChooserSettings.headerTemplate** - Defines the header template of the column chooser. +* **columnChooserSettings.headerTemplate**: Defines the header template. +* **columnChooserSettings.template**: Defines the content template. +* **columnChooserSettings.footerTemplate**: Defines the footer template. -* **columnChooserSettings.template**- Defines the content template. +In this example, the Syncfusion TreeView component is rendered inside the column chooser. To use the TreeView component, install the Syncfusion TreeView package as described in the [TreeView getting started](https://ej2.syncfusion.com/react/documentation/treeview/getting-started) documentation. The `columnChooserSettings.template` property renders the TreeView with checkboxes. Checkbox selection is handled using the [nodeClicked](https://ej2.syncfusion.com/react/documentation/api/treeview/#nodeclicked) and [keyPress](https://ej2.syncfusion.com/react/documentation/api/treeview/#keypress) events, organizing columns into **Order Details**, **Shipping Details**, and **Delivery Status**. -* **columnChooserSettings.footerTemplate** - Defines the footer template. - -In this example, a Syncfusion TreeView component is rendered inside the column chooser. To use the TreeView component, install the Syncfusion TreeView package as described in the [documentation](https://ej2.syncfusion.com/react/documentation/treeview/getting-started). The `columnChooserSettings.template` property is used to render the TreeView component with checkboxes.Checkbox selection is handled using the [nodeClicked](https://ej2.syncfusion.com/react/documentation/api/treeview#nodeclicked) and [keyPress](https://ej2.syncfusion.com/react/documentation/api/treeview#keypress) events, which organize columns into **Order Details**, **Shipping Details**, and **Delivery Status**. - -The column chooser footer is customized using `columnChooserSettings.footerTemplate`, replacing the default buttons with customized **Apply** and **Close** buttons. The **Apply** button updates column visibility based on selection, while the **Close** button closes the column chooser via the `onClick` event. Additionally, the header is customized using `columnChooserSettings.headerTemplate` to include a title and an icon. +The column chooser footer is customized using `columnChooserSettings.footerTemplate`, replacing default buttons with customized **Apply** and **Close** buttons. The **Apply** button updates column visibility based on the selected nodes, and the **Close** button dismisses the dialog via the `onClick` event. The header is customized using `columnChooserSettings.headerTemplate` to include a title and an icon. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -35,4 +33,4 @@ The column chooser footer is customized using `columnChooserSettings.footerTempl {% endhighlight %} {% endtabs %} - {% previewsample "http://127.0.0.1:4000/ej2-react/code-snippet/treegrid/column-cs23" %} \ No newline at end of file + {% previewsample "page.domainurl/code-snippet/treegrid/column-cs23" %} \ No newline at end of file diff --git a/ej2-react/treegrid/columns/column-menu.md b/ej2-react/treegrid/columns/column-menu.md index 370f51cfa..8630647c3 100644 --- a/ej2-react/treegrid/columns/column-menu.md +++ b/ej2-react/treegrid/columns/column-menu.md @@ -1,28 +1,28 @@ --- layout: post -title: Column menu in React Treegrid component | Syncfusion -description: Learn here all about Column menu in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Column menu in React TreeGrid | Syncfusion +description: Learn here all about Column menu in Syncfusion React TreeGrid of Syncfusion Essential JS 2 and more. control: Column menu platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Column menu in React Treegrid component +# Column menu in React TreeGrid -The column menu has options to integrate features like sorting, filtering, and autofit. It will show a menu with the integrated feature when users click on multiple icon of the column. To enable column menu, you need to define the [`showColumnMenu`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#showcolumnmenu) property as true. +The column menu provides built-in actions such as sorting, filtering, and autofit. A menu with these actions appears when the column menu icon is clicked. Enable the column menu by setting the [showColumnMenu](https://ej2.syncfusion.com/react/documentation/api/treegrid/#showcolumnmenu) property to true. -To use the column menu, inject the **ColumnMenu** module in the treegrid. +To use the column menu, inject the **ColumnMenu** module in the TreeGrid. -The default items are displayed in following table. +The default items are listed below. | Item | Description | |-----|-----| -| **SortAscending** | Sort the current column in ascending order. | -| **SortDescending** | Sort the current column in descending order. | -| **AutoFit** | Auto fit the current column. | -| **AutoFitAll** | Auto fit all columns. | -| **Filter** | Show the filter option as given in [`filterSettings.type`](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettings/#type) | +| **SortAscending** | Sorts the current column in ascending order. | +| **SortDescending** | Sorts the current column in descending order. | +| **AutoFit** | Fits the current column to the widest cell content. | +| **AutoFitAll** | Fits all columns to their widest cell content. | +| **Filter** | Displays the filter UI defined by [filterSettings.type](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettings/#type). | {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -35,11 +35,11 @@ The default items are displayed in following table. {% previewsample "page.domainurl/code-snippet/treegrid/column-cs2" %} -> You can disable column menu for a particular column by defining the [`columns.showColumnMenu`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#showcolumnmenu) as **false**. +> Disable the column menu for a specific column by setting [columns.showColumnMenu](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#showcolumnmenu) to **false**. ## Customize the icon for column menu -To customize the column menu icon, you need to override the default TreeGrid class **.e-icons.e-columnmenu** with a custom CSS property called **content**. By specifying a Unicode character or an icon font’s CSS class, you can change the icon displayed in the column menu. +Customize the column menu icon by overriding the default TreeGrid class `.e-icons.e-columnmenu` and setting a custom `content` value. A Unicode character or icon font class can be used to change the displayed icon. ```css .e-treegrid .e-columnheader .e-icons.e-columnmenu::before { @@ -47,7 +47,7 @@ To customize the column menu icon, you need to override the default TreeGrid cla } ``` -Here is an example that demonstrates how to customize the column menu icon in the Syncfusion TreeGrid: +Example demonstrating a custom column menu icon in the Syncfusion TreeGrid: {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -64,4 +64,4 @@ Here is an example that demonstrates how to customize the column menu icon in th {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/treegrid/custom-column-menu-icon-cs1" %} \ No newline at end of file + {% previewsample "page.domainurl/code-snippet/treegrid/custom-column-menu-icon-cs1" %} \ No newline at end of file diff --git a/ej2-react/treegrid/columns/column-reorder.md b/ej2-react/treegrid/columns/column-reorder.md index 9c5240bac..6bb7c3e31 100644 --- a/ej2-react/treegrid/columns/column-reorder.md +++ b/ej2-react/treegrid/columns/column-reorder.md @@ -1,18 +1,18 @@ --- layout: post -title: Column reorder in React Treegrid component | Syncfusion -description: Learn here all about Column reorder in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Column reorder in React TreeGrid | Syncfusion +description: Learn here all about Column reorder in Syncfusion React TreeGrid of Syncfusion Essential JS 2 and more. control: Column reorder platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Column reorder in React Treegrid component +# Column reorder in React TreeGrid -Reordering can be done by drag and drop of a particular column header from one index to another index within the treegrid. To enable reordering, set the [`allowReordering`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowreordering) to true. +Columns can be reordered by drag and drop a column header from one index to another within the TreeGrid. Enable this behavior by setting [allowReordering](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowreordering) to true. -To use reordering, inject the [`Reorder`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#reordermodule) module in the treegrid. +To use reordering, inject the [Reorder](https://ej2.syncfusion.com/react/documentation/api/treegrid/#reordermodule) module into the TreeGrid. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -25,11 +25,11 @@ To use reordering, inject the [`Reorder`](https://ej2.syncfusion.com/react/docum {% previewsample "page.domainurl/code-snippet/treegrid/column-cs3" %} -> You can disable reordering a particular column by setting the [`columns.allowReordering`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#reordermodule) to false. +> Reordering can be disabled for a specific column by setting [columns.allowReordering](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#reordermodule) to false. ## Reorder multiple columns -Multiple columns can be reordered at a time by using the [`reorderColumns`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column#reordercolumns) method. +Multiple columns can be reordered programmatically using the [reorderColumns](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#reordercolumns) method. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/treegrid/columns/column-resizing.md b/ej2-react/treegrid/columns/column-resizing.md index 3b016a557..87fc2760a 100644 --- a/ej2-react/treegrid/columns/column-resizing.md +++ b/ej2-react/treegrid/columns/column-resizing.md @@ -1,18 +1,18 @@ --- layout: post -title: Column resizing in React Treegrid component | Syncfusion -description: Learn here all about Column resizing in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Column resizing in React TreeGrid | Syncfusion +description: Learn here all about Column resizing in Syncfusion React TreeGrid of Syncfusion Essential JS 2 and more. control: Column resizing platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Column resizing in React Treegrid component +# Column resizing in React TreeGrid -Column width can be resized by clicking and dragging the right edge of the column header. While dragging, the width of the respective column will be resized immediately. Each column can be auto resized by double-clicking the right edge of the column header to fit the width of that column based on the widest cell content. To enable column resize, set the [`allowResizing`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowresizing) property to true. +Column width can be adjusted by clicking and dragging the right edge of a column header. While dragging, the column resizes immediately. Double-clicking the right edge of a column header automatically fits that column to the widest cell content. To enable column resizing, set the [`allowResizing`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowresizing) property to true. -To use the column resize, inject **Resize** module in the treegrid. +To use column resizing, inject the **Resize** module in the TreeGrid. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -25,14 +25,14 @@ To use the column resize, inject **Resize** module in the treegrid. {% previewsample "page.domainurl/code-snippet/treegrid/column-cs5" %} -> You can disable Resizing for a particular column, by specifying [`columns.allowResizing`](https://ej2.syncfusion.com/react/documentation/api/treegrid/columnModel/#allowresizing) to false. -> In RTL mode, you can click and drag the left edge of header cell to resize the column. +> Resizing can be disabled for a specific column by setting [columns.allowResizing](https://ej2.syncfusion.com/react/documentation/api/treegrid/columnModel/#allowresizing) to false. +> In RTL mode, drag the left edge of the header cell to resize the column. ## Min and max width -Column resize can be restricted between minimum and maximum width by defining the [`columns->minWidth`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#minwidth) and [`columns->maxWidth`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#maxwidth). +Resizing can be constrained using [columns.minWidth`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#minwidth) and [columns.maxWidth](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#maxwidth). -In the following sample, minimum and maximum width are defined for **Duration**, and **Task Name** columns. +In the following sample, minimum and maximum widths are defined for the **Duration** and **Task Name** columns. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -47,7 +47,7 @@ In the following sample, minimum and maximum width are defined for **Duration**, ## Resize stacked column -Stacked columns can be resized by clicking and dragging the right edge of the stacked column header. While dragging, the width of the respective child columns will be resized at the same time. You can disable resize for particular stacked column by setting [`allowResizing`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#allowresizing) as **false** to its columns. +Stacked columns can be resized by dragging the right edge of the stacked header. While dragging, all child columns under the stacked header resize proportionally. To disable resizing for a particular stacked column, set [allowResizing](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#allowresizing) to **false** on the respective child columns. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -62,9 +62,9 @@ Stacked columns can be resized by clicking and dragging the right edge of the st ## Touch interaction -When the right edge of the header cell is tapped, a floating handler will be visible over the right border of the column. To resize the column, tap and drag the floating handler as needed. +When the right edge of a header cell is tapped, a floating handler appears over the column border. Drag the floating handler to adjust the column width. -The following screenshot represents the column resizing in touch device. +The following screenshot illustrates column resizing on a touch device. Touch interaction image diff --git a/ej2-react/treegrid/columns/column-template.md b/ej2-react/treegrid/columns/column-template.md index 0f4fa89de..e330eb996 100644 --- a/ej2-react/treegrid/columns/column-template.md +++ b/ej2-react/treegrid/columns/column-template.md @@ -1,18 +1,18 @@ --- layout: post -title: Column template in React Treegrid component | Syncfusion -description: Learn here all about Column template in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Column template in React TreeGrid component | Syncfusion +description: Learn here all about Column template in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Column template platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Column template in React Treegrid component +# Column template in React TreeGrid component -The column [`template`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#template) has options to display custom element instead of a field value in the column. +The column [template](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#template) option renders custom content in place of a field value within a column. -You can check this video to learn about how to use templates for column(based on conditions) and headers in Tree Grid. +Watch the following video to learn how to use templates for columns (including conditional templates) and headers in the TreeGrid. {% youtube "https://www.youtube.com/watch?v=o0rX1nkTINo" %} {% tabs %} @@ -26,13 +26,13 @@ You can check this video to learn about how to use templates for column(based on {% previewsample "page.domainurl/code-snippet/treegrid/column-cs8" %} -> The [`queryCellInfo`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#querycellinfo) event is not supported for template columns. Instead, use template function as described in the documentation (https://ej2.syncfusion.com/react/documentation/treegrid/columns/column-template#using-condition-template). +> The [queryCellInfo](https://ej2.syncfusion.com/react/documentation/api/treegrid/#querycellinfo) event is not supported for template columns. Instead, define logic within the column template function as described in the documentation (https://ej2.syncfusion.com/react/documentation/treegrid/columns/column-template#using-condition-template). ## Using condition template -You can render the template elements based on condition. +Template elements can be rendered based on conditions. -In the following code, checkbox is rendered based on *Approved* field value. +In the following example, a checkbox is rendered according to the value of the **Approved** field. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/treegrid/columns/columns.md b/ej2-react/treegrid/columns/columns.md index 4b511dd93..2ab1c35f0 100644 --- a/ej2-react/treegrid/columns/columns.md +++ b/ej2-react/treegrid/columns/columns.md @@ -1,26 +1,25 @@ --- layout: post -title: Columns in React Treegrid component | Syncfusion -description: Learn here all about Columns in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Columns in React TreeGrid component | Syncfusion +description: Learn here all about Columns in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Columns platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Columns in React Treegrid component +# Columns in React TreeGrid -The column definitions are used as the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#dataSource) schema in the TreeGrid. This plays a vital role in rendering column values in the required format. The treegrid operations such as sorting, filtering and searching etc. are performed based on column definitions. The [`field`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#field) property of the [`columns`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#column) is necessary to map the data source values in TreeGrid columns. +The column definitions act as the [dataSource](https://ej2.syncfusion.com/react/documentation/api/treegrid/#dataSource) schema in the TreeGrid. They play a vital role in rendering column values in the desired format. TreeGrid operations such as sorting, filtering, and searching are performed based on the column definitions. The [field](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#field) property of the [columns](https://ej2.syncfusion.com/react/documentation/api/treegrid/#column) configuration is required to map data source values to TreeGrid columns. -> 1. If the column [`field`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#field) is not specified in the dataSource, the column values will be empty. -> 2. If the [`field`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#field) name contains “dot” operator, it is considered as complex binding. +> 1. If the column `field` is not present in the data source, the column displays empty values. +> 2. If the `field` name contains a dot (.), it is treated as complex binding. -[`treeColumnIndex`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#treecolumnindex) property denotes the column that is used to expand and collapse child rows. +The [treeColumnIndex](https://ej2.syncfusion.com/react/documentation/api/treegrid/#treecolumnindex) property denotes the column used to expand and collapse child rows. ## Format -To format cell values based on specific culture, use the [`columns.format`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#format) property. The TreeGrid uses [Internalization](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization) library to format [`number`](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization#number-formatting) and [`date`](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization#manipulating-datetime) -values. +To format cell values based on culture, use the [columns.format](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#format) property. The TreeGrid uses the [Internationalization](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization) library to format [number](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization#number-formatting) and [date](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization#manipulating-datetime) values. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -33,27 +32,27 @@ values. {% previewsample "page.domainurl/code-snippet/treegrid/column-cs10" %} -> By default, the [`number`](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization#number-formatting) and [`date`](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization#manipulating-datetime) values are formatted in **en-US** locale. +> By default, [number](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization#number-formatting) and [date](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization#manipulating-datetime) values are formatted using the en-US locale. ### Number formatting -The number or integer values can be formatted using the below format strings. +Use the following format strings for numeric and integer values. Format |Description |Remarks -----|-----|----- -N | Denotes numeric type. | The numeric format is followed by integer value as N2, N3. etc which denotes the number of precision to be allowed. -C | Denotes currency type. | The currency format is followed by integer value as C2, C3. etc which denotes the number of precision to be allowed. -P | Denotes percentage type | The percentage format expects the input value to be in the range of 0 to 1. For example the cell value `0.2` is formatted as `20%`. The percentage format is followed by integer value as P2, P3. etc which denotes the number of precision to be allowed. +N | Numeric format | Append an integer to set precision (for example, N2, N3). +C | Currency format | Append an integer to set precision (for example, C2, C3). +P | Percentage format | Expects input from 0 to 1 (for example, 0.2 is shown as 20%). Append an integer to set precision (for example, P2, P3). -Please refer to the link to know more about [`Number formatting`](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization#number-formatting). +For more information, see [Number formatting](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization#number-formatting). ### Date formatting -You can format date values either using built-in date format string or custom format string. +Date values can be formatted using built-in or custom format strings. -For built-in date format you can specify [`columns.format`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#format) property as string (Example: `yMd`). Please refer to the link to know more about [`Date formatting`](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization#manipulating-datetime). +For built-in date formats, assign a string to the [columns.format](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#format) property (for example, `yMd`). For more information, see [Date formatting](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization#manipulating-datetime). -You can also use custom format string to format the date values. Some of the custom formats and the formatted date values are given in the below table. +Custom format examples: Format | Formatted value -----|----- @@ -76,9 +75,9 @@ Format | Formatted value ## Lock Columns -You can lock columns by using [`column.lockColumn`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#lockcolumn) property. The locked columns will be moved to the first position. Also you can’t reorder its position. +Lock columns using the [column.lockColumn](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#lockcolumn) property. Locked columns are moved to the first position and cannot be reordered. -In the below example, duration column is locked and its reordering functionality is disabled. +In the following example, the Duration column is locked and its reordering is disabled. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -93,24 +92,24 @@ In the below example, duration column is locked and its reordering functionality ## Column Type -Column type can be specified using the [`columns.type`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#type) property. It specifies the type of data the column binds. +Specify the column data type using the [columns.type](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#type) property. This ensures appropriate formatting and behavior. -If the [`format`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#format) is defined for a column, the column uses [`type`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#type) to select the appropriate format option ([number](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization#number-formatting) or [date](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization#manipulating-datetime)). +If a [format](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#format) is defined, the [type](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#type) helps select the correct formatting (for example, [number](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization#number-formatting) or [date](https://ej2.syncfusion.com/react/documentation/common/globalization/internationalization#manipulating-datetime)). -TreeGrid column supports the following types: +TreeGrid columns support the following types: * string * number * boolean * date * datetime -> If the [`type`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#type) is not defined, it will be determined from the first record of the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#datasource). +> If the [type](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#type) is not set, it is inferred from the first record of the [dataSource](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#datasource). ## Checkbox Column -To render checkboxes in existing column, you need to set [`columns.showCheckbox`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#showcheckbox) property as **true** +To render checkboxes in an existing column, set the [columns.showCheckbox](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#showcheckbox) property to true. -It is also possible to select the rows hierarchically using checkboxes in TreeGrid by enabling [`autoCheckHierarchy`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#autocheckhierarchy) property. When we check on any parent record checkbox then the child record checkboxes will get checked. +Rows can be selected hierarchically using checkboxes by enabling the [autoCheckHierarchy](https://ej2.syncfusion.com/react/documentation/api/treegrid/#autocheckhierarchy) property. Selecting a parent record checkbox selects its child records. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -123,13 +122,13 @@ It is also possible to select the rows hierarchically using checkboxes in TreeGr {% previewsample "page.domainurl/code-snippet/treegrid/column-cs12" %} -> For hierarchy selection between the records, we need to enable the [`autoCheckHierarchy`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#autocheckhierarchy) property. +> For hierarchical selection between records, enable the [autoCheckHierarchy](https://ej2.syncfusion.com/react/documentation/api/treegrid/#autocheckhierarchy) property. ## Autofit columns -The [autoFitColumns](https://ej2.syncfusion.com/react/documentation/api/treegrid/#autofitcolumns) method resizes the column to fit the widest cell's content without wrapping. You can autofit a specific column at initial rendering by invoking the `autoFitColumns` method in [dataBound](https://ej2.syncfusion.com/react/documentation/api/treegrid/#databound) event. +The [autoFitColumns](https://ej2.syncfusion.com/react/documentation/api/treegrid/#autofitcolumns) method resizes a column to fit the widest cell content without wrapping. You can autofit a specific column during initial rendering by invoking `autoFitColumns` method in the [dataBound](https://ej2.syncfusion.com/react/documentation/api/treegrid/#databound) event. -To use `autoFitColumns` method, you need to inject **Resize** module in the TreeGrid. +To use `autoFitColumns` method, inject the **Resize** module into the TreeGrid. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -142,11 +141,11 @@ To use `autoFitColumns` method, you need to inject **Resize** module in the Tree {% previewsample "page.domainurl/code-snippet/treegrid/column-cs1" %} -> You can autofit all columns, by invoking `autoFitColumns` method without column name. +> To autofit all columns, invoke the `autoFitColumns` method without specifying a column name. ## Controlling TreeGrid actions -You can enable or disable treegrid action for a particular column by setting the [`allowFiltering`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#allowfiltering), and [`allowSorting`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#allowsorting) properties. +Enable or disable TreeGrid actions for a specific column by setting the [allowFiltering](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#allowfiltering) and [allowSorting](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#allowsorting) properties. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -161,7 +160,7 @@ You can enable or disable treegrid action for a particular column by setting the ## Show/Hide Columns by External Button -You can show or hide treegrid columns dynamically using external buttons by invoking the [`showColumns`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#showcolumns) or [`hideColumns`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#hidecolumns) method. +Show or hide TreeGrid columns dynamically using external buttons by invoking the [showColumns](https://ej2.syncfusion.com/react/documentation/api/treegrid/#showcolumns) or [hideColumns](https://ej2.syncfusion.com/react/documentation/api/treegrid/#hidecolumns) methods. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -176,7 +175,7 @@ You can show or hide treegrid columns dynamically using external buttons by invo ## ValueAccessor -The [`valueAccessor`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#valueaccessor) is used to access/manipulate the value of display data. You can achieve custom value formatting by using the [`valueAccessor`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#valueaccessor). +The [valueAccessor](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#valueaccessor) is used to access or manipulate display values. Use it to implement custom value formatting. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -191,7 +190,7 @@ The [`valueAccessor`](https://ej2.syncfusion.com/react/documentation/api/treegri ### Display Array type Columns -You can bind an array of objects in a column by using the [`valueAccessor`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#valueaccessor) property. In this example, the name field has an array of two objects, FirstName and LastName. These two objects are joined and bound to a column using the [`valueAccessor`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#valueaccessor). +Bind an array of objects to a column using the [valueAccessor](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#valueaccessor) property. In the following example, the name field contains two objects, FirstName and LastName. These values are joined and displayed via `valueAccessor`. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -206,7 +205,7 @@ You can bind an array of objects in a column by using the [`valueAccessor`](http ### Expression Column -You can achieve the expression column by using the [`valueAccessor`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#valueaccessor)property. +An expression column can be achieved using the [valueAccessor](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#valueaccessor) property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -221,7 +220,7 @@ You can achieve the expression column by using the [`valueAccessor`](https://ej2 ## Render boolean value as checkbox -To render boolean values as checkbox in columns, you need to set [`displayAsCheckBox`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#displayascheckbox) property as **true**. +To render boolean values as checkboxes in columns, set the [displayAsCheckBox](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#displayascheckbox) property to **true**. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -236,7 +235,7 @@ To render boolean values as checkbox in columns, you need to set [`displayAsChec ## Responsive columns -The Syncfusion React TreeGrid provides a built-in feature to toggle the visibility of columns based on media queries using the [hideAtMedia](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#hideatmedia) property of the column object. The `hideAtMedia` accepts valid [Media Queries](http://cssmediaqueries.com/what-are-css-media-queries.html). +The Syncfusion React TreeGrid provides a built-in feature to toggle column visibility based on media queries using the [hideAtMedia](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#hideatmedia) property of the column object. The `hideAtMedia` property accepts valid [media queries](http://cssmediaqueries.com/what-are-css-media-queries.html). {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -249,4 +248,4 @@ The Syncfusion React TreeGrid provides a built-in feature to toggle the visibili {% previewsample "page.domainurl/code-snippet/treegrid/column-cs22" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/bootstrap5/treegrid/treegrid-overview) to knows how to present and manipulate data. +> Refer to our [React TreeGrid](https://www.syncfusion.com/react-components/react-tree-grid) feature tour page for its groundbreaking feature representations. Explore our [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/bootstrap5/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/columns/complex-data-binding.md b/ej2-react/treegrid/columns/complex-data-binding.md index 0596a4545..4dd283766 100644 --- a/ej2-react/treegrid/columns/complex-data-binding.md +++ b/ej2-react/treegrid/columns/complex-data-binding.md @@ -1,16 +1,16 @@ --- layout: post -title: Complex data binding in React Treegrid component | Syncfusion -description: Learn here all about Complex data binding in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Complex data binding in React TreeGrid | Syncfusion +description: Learn here all about Complex data binding in Syncfusion React TreeGrid of Syncfusion Essential JS 2 and more. control: Complex data binding platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Complex data binding in React Treegrid component +# Complex data binding in React TreeGrid -You can achieve complex data binding in the treegrid by using the dot(.) operator in the [`column.field`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#field). +Complex data binding can be configured by specifying a nested field path using the dot (.) operator in the [column.field](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#field). {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/treegrid/columns/foreign-key-column.md b/ej2-react/treegrid/columns/foreign-key-column.md index 44729ac14..4ae235244 100644 --- a/ej2-react/treegrid/columns/foreign-key-column.md +++ b/ej2-react/treegrid/columns/foreign-key-column.md @@ -10,9 +10,9 @@ domainurl: ##DomainURL## # Display foreignKey values in TreeGrid -The TreeGrid uses a hierarchical data binding approach and does not provide built-in support for foreign key datasources. +The TreeGrid uses hierarchical data binding and does not include built-in support for foreign key data sources. -To display the foreignKey value at initial rendering, we can use the [queryCellInfo](https://ej2.syncfusion.com/react/documentation/api/treegrid/#querycellinfo) event of the TreeGrid and also by using the [editType](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#edittype) and [columns.edit](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#edit) properties of TreeGrid Column, we can render Dropdownlist with external or foreign dataSource. +To display foreign key values during initial render, handle the [queryCellInfo](https://ej2.syncfusion.com/react/documentation/api/treegrid/#querycellinfo) event. For editing, configure the [editType](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#edittype) and [columns.edit](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#edit) properties to render a DropDownList bound to an external or foreign datasource. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -29,4 +29,4 @@ To display the foreignKey value at initial rendering, we can use the [queryCellI {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/treegrid/foreignkey-cs1" %} + {% previewsample "page.domainurl/code-snippet/treegrid/foreignkey-cs1" %} \ No newline at end of file diff --git a/ej2-react/treegrid/columns/headers.md b/ej2-react/treegrid/columns/headers.md index 2a0d0ae3f..0b6f4c77b 100644 --- a/ej2-react/treegrid/columns/headers.md +++ b/ej2-react/treegrid/columns/headers.md @@ -1,18 +1,18 @@ --- layout: post -title: Headers in React Treegrid component | Syncfusion -description: Learn here all about Headers in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Headers in React TreeGrid component | Syncfusion +description: Learn here all about Headers in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Headers platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Headers in React Treegrid component +# Headers in React TreeGrid ## Header text -By default, column header title is displayed from column [`field`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#field) value. To override the default header title, you have to define the [`headerText`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#headertext)value. +By default, the column header title is derived from the column [field](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#field) value. To override the default title, set the [headerText](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#headertext) property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -25,11 +25,11 @@ By default, column header title is displayed from column [`field`](https://ej2.s {% previewsample "page.domainurl/code-snippet/treegrid/column-cs20" %} -> * If both the [`field`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#field) and [`headerText`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#headertext) are not defined in the column, the column renders with **“empty”** header text. +> If both [field](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#field) and [headerText](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#headertext) are not defined, the column renders with an empty header. ## Header template -You can customize the header element by using the [`headerTemplate`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#headertemplate)property. +Customize the header element using the [headerTemplate](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#headertemplate) property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -44,16 +44,15 @@ You can customize the header element by using the [`headerTemplate`](https://ej2 ## Change header text dynamically -The Syncfusion TreeGrid allows to modify the header text of a corresponding column in real-time based on events or other interactions. This feature is useful in various scenarios, such as displaying custom header text for a specific column or updating the header text dynamically based on user input. Dynamic changes to the header text provide a more flexible and customizable experience. +The TreeGrid allows modifying a column’s header text at runtime based on events or other interactions. This feature is useful in various scenarios, such as displaying custom header text for a specific column or updating the header text dynamically based on input. Dynamic changes to the header text provide a more flexible and customizable experience. -You can change the column [headerText](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#headertext) dynamically through an external button. +Change the column [headerText](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#headertext) dynamically using an external button. -Follow the given steps to change the header text dynamically: +Follow these steps to change the header text dynamically: **Step 1**: -Get the column object corresponding to the field name by using the [getColumnByField](https://ej2.syncfusion.com/react/documentation/api/treegrid/#getcolumnbyfield) method. -Then change the header Text value. +Get the column object corresponding to the field name using the [getColumnByField](https://ej2.syncfusion.com/react/documentation/api/treegrid/#getcolumnbyfield) method, then update the header text value. ```ts /** Get the JSON object of the column corresponding to the field name **/ @@ -90,13 +89,14 @@ Here is an example of how to change the header text of a column using the `getCo ## Change orientation of header text -By default, the text in the column headers of the Syncfusion React TreeGrid is oriented horizontally. However, in some cases, you may want to change the orientation of the header text to vertical, diagonal, or at a custom angle. This can be achieved by adding a custom CSS class to the column header cell using the [customAttributes](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#customattributes) property of the TreeGrid columns. +By default, TreeGrid column headers are oriented horizontally. To display header text vertically, diagonally, or at a custom angle, apply a custom CSS class to the header cell using the [customAttribute`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#customattributes) property of the TreeGrid columns. -Follow the below steps to change the orientation of the header text in TreeGrid: -**Step 1: Create a CSS class with orientation style for TreeGrid header cell** +Follow the steps below to change the orientation of the header text: -To rotate the header text, you can create a CSS class with the transform property that rotates the header text 90 degrees. This class will be added to the header cell using the `customAttributes` property. +**Step 1: Create a CSS class with the desired orientation for the header cell** + +Create a CSS class that applies a transform to rotate the header text. This class will be added to the header cell via `customAttributes`. ```css .orientationcss .e-headercelldiv { @@ -105,9 +105,9 @@ To rotate the header text, you can create a CSS class with the transform propert ``` **Step 2: Add the custom CSS class to the TreeGrid column** -Once you have created the CSS class, you can add it to the particular column by using the `customAttributes` property. This property allows you to add any custom attribute to the TreeGrid column. +Add the CSS class to the target column by using the `customAttributes` property. This property allows to add any custom attribute to the TreeGrid column. -For example, to add the orientation css class to the **EndDate** column, you can use the following code: +For example, to apply the orientation class to the **EndDate** column: ```ts @@ -115,7 +115,7 @@ For example, to add the orientation css class to the **EndDate** column, you can **Step 3: Resize the header cell height** -After adding the custom CSS class to a column, you need to resize the header cell height in [create](https://ej2.syncfusion.com/react/documentation/api/treegrid/#create) event so that the rotated header text is fully visible. You can do this by using the following code: +After applying the custom class, adjust the header cell height in the [create](https://ej2.syncfusion.com/react/documentation/api/treegrid/#create) event so the rotated text is fully visible. ```ts const setHeaderHeight = () => { @@ -129,7 +129,7 @@ After adding the custom CSS class to a column, you need to resize the header cel } ``` -Here’s an example of how to change orientation of header text: +Here’s an example of how to change the orientation of header text: {% tabs %} {% highlight js tabtitle="app.jsx" %} From 4739ae37b6b93254f340dd1d213af87ddcde9574 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Thu, 2 Oct 2025 20:49:40 +0530 Subject: [PATCH 22/34] Integrated latest changes at 10-02-2025 7:34:58 PM --- ej2-react-toc.html | 10 --- .../ai-integrations/gemini-integration.md | 10 +-- .../ai-integrations/ollama-llm-integration.md | 6 +- .../ai-integrations/openai-integration.md | 8 +- .../ai-developer-tools/copilot-extension.md | 2 +- ej2-react/ai-developer-tools/mcp-server.md | 6 +- ej2-react/ai-developer-tools/overview.md | 2 +- ej2-react/chart/getting-started.md | 2 + .../ai-integrations/gemini-integration.md | 90 ------------------- .../ai-integrations/openai-integration.md | 85 ------------------ .../integration-with-bot-framework.md | 16 ++-- .../integration-with-dialogflow.md | 18 ++-- .../ai-integrations/gemini-ai/app/index.jsx | 2 +- .../ai-integrations/gemini-ai/app/index.tsx | 2 +- .../ai-integrations/gemini-ai/index.css | 6 +- .../ai-integrations/llm-model/app/index.jsx | 2 +- .../ai-integrations/llm-model/app/index.tsx | 2 +- .../ai-integrations/llm-model/index.css | 6 +- .../ai-integrations/open-ai/app/index.jsx | 2 +- .../ai-integrations/open-ai/app/index.tsx | 2 +- .../ai-integrations/open-ai/index.css | 6 +- ej2-react/diagram/getting-started.md | 2 + ej2-react/gantt/getting-started.md | 2 + ej2-react/grid/getting-started.md | 2 + ej2-react/introduction.md | 2 + ej2-react/kanban/getting-started.md | 2 + ej2-react/pivotview/getting-started.md | 2 + ej2-react/rich-text-editor/getting-started.md | 2 + ej2-react/schedule/getting-started.md | 2 + 29 files changed, 61 insertions(+), 240 deletions(-) delete mode 100644 ej2-react/chat-ui/ai-integrations/gemini-integration.md delete mode 100644 ej2-react/chat-ui/ai-integrations/openai-integration.md diff --git a/ej2-react-toc.html b/ej2-react-toc.html index b3adef95e..5f7a6c4ca 100644 --- a/ej2-react-toc.html +++ b/ej2-react-toc.html @@ -600,16 +600,6 @@ -
  • AI Integrations - -
  • Time break
  • Timestamp
  • Typing indicator
    • diff --git a/ej2-react/ai-assistview/ai-integrations/gemini-integration.md b/ej2-react/ai-assistview/ai-integrations/gemini-integration.md index e20d6105f..45e1dcc10 100644 --- a/ej2-react/ai-assistview/ai-integrations/gemini-integration.md +++ b/ej2-react/ai-assistview/ai-integrations/gemini-integration.md @@ -15,14 +15,14 @@ The Syncfusion AI AssistView supports integration with [Gemini](https://ai.googl ## Getting Started with the AI AssistView component -Before integrating Gemini AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your React app: +Before integrating Gemini AI, ensure that the Syncfusion AI AssistView component is correctly rendered in your React app: [React Getting Started Guide](../getting-started) ## Prerequisites * Requires `Node.js` (v16 or higher) and `npm`. -* Google account to generate API key on accessing `Gemini AI` +* Google account to generate API key on accessing [Gemini](https://ai.google.dev/gemini-api/docs). * Syncfusion AI AssistView for React `@syncfusion/ej2-react-interactive-chat` installed in your project. ## Install Dependencies @@ -45,11 +45,11 @@ npm install @google/generative-ai ## Generate API Key -1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your Google account. If you don’t have one, create a new account. +1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your google account. If you don’t have one, create a new account. 2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard. -3. Click the “Create API Key” button. You’ll be prompted to either select an existing Google Cloud project or create a new one. Choose the appropriate option and proceed. +3. Click the `Create API Key` button. You’ll be prompted to either select an existing Google Cloud project or create a new one. Choose the appropriate option and proceed. 4. After selecting or creating a project, your API key will be generated and displayed. Copy the key and store it securely, as it will only be shown once. @@ -88,4 +88,4 @@ npm start ``` -Open `http://localhost:3000` to interact with your Gemini AI for dynamic response. +Open the hosted link to interact with the Gemini AI for dynamic response diff --git a/ej2-react/ai-assistview/ai-integrations/ollama-llm-integration.md b/ej2-react/ai-assistview/ai-integrations/ollama-llm-integration.md index ff4a2b4e2..04f141d92 100644 --- a/ej2-react/ai-assistview/ai-integrations/ollama-llm-integration.md +++ b/ej2-react/ai-assistview/ai-integrations/ollama-llm-integration.md @@ -15,12 +15,12 @@ The Syncfusion AI AssistView supports integration with [LLM via Ollama](https:// ## Prerequisites * Requires `Node.js` (v16 or higher) and `npm`. -* `Ollama` application should be installed to run and manage LLM models locally. +* [Ollama](https://ollama.com) application should be installed to run and manage LLM models locally. * Syncfusion AI AssistView for React `@syncfusion/ej2-react-interactive-chat` installed in your react project. ## Step 1: Getting Started with the AI AssistView component -Before integrating LLM model, ensure that the Syncfusion AI AssistView control is correctly rendered in your application: +Before integrating LLM model, ensure that the Syncfusion AI AssistView component is correctly rendered in your application: [ React Getting Started Guide](../getting-started) @@ -110,4 +110,4 @@ npm start ``` -Open `http://localhost:3000` to interact with your AI model where you can enter prompts and receive responses from the `Ollama` model. +Open the hosted link to interact with your AI model where you can enter prompts and receive responses from the Ollama model. diff --git a/ej2-react/ai-assistview/ai-integrations/openai-integration.md b/ej2-react/ai-assistview/ai-integrations/openai-integration.md index 8f07cdc2d..3e6ea5ad6 100644 --- a/ej2-react/ai-assistview/ai-integrations/openai-integration.md +++ b/ej2-react/ai-assistview/ai-integrations/openai-integration.md @@ -15,14 +15,14 @@ The Syncfusion AI AssistView supports integration with [Azure Open AI](https://m ## Getting Started with the AI AssistView component -Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your React app: +Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView Component is correctly rendered in your React app: [React Getting Started Guide](../getting-started) ## Prerequisites * Requires `Node.js` (v16 or higher) and `npm`. -* An Azure account with access to `Azure Open AI` services and a generated API key. +* An Azure account with access to [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) services and a generated API key. * Syncfusion AI AssistView for React `@syncfusion/ej2-react-interactive-chat` installed in your project. ## Install Dependencies @@ -41,7 +41,7 @@ npm install @syncfusion/ej2-react-interactive-chat --save 2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL. -3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version (e.g., 2024-07-01-preview) matches your resource configuration. +3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version matches your resource configuration. 4. Store these values securely, as they will be used in your application. @@ -83,4 +83,4 @@ npm start ``` -Open `http://localhost:3000` to interact with your Azure Open AI for dynamic response. +Open the hosted link to interact with your Azure Open AI for dynamic response. diff --git a/ej2-react/ai-developer-tools/copilot-extension.md b/ej2-react/ai-developer-tools/copilot-extension.md index 19d9be4e2..d59e34e51 100644 --- a/ej2-react/ai-developer-tools/copilot-extension.md +++ b/ej2-react/ai-developer-tools/copilot-extension.md @@ -33,7 +33,7 @@ Before using this extension, ensure you have: - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) - [Free Community License](https://www.syncfusion.com/products/communitylicense) - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) -* An active [API KEY](https://staging.syncfusion.com/account/user-token-generation) +* An active [API KEY](https://syncfusion.com/account/api-key) ## Unlimited Access diff --git a/ej2-react/ai-developer-tools/mcp-server.md b/ej2-react/ai-developer-tools/mcp-server.md index 7ca3d26da..57a3149c2 100644 --- a/ej2-react/ai-developer-tools/mcp-server.md +++ b/ej2-react/ai-developer-tools/mcp-server.md @@ -25,12 +25,12 @@ The [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-a Before using [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant), ensure you have: * Required [node](https://nodejs.org/en/) version >= 18 -* A [compatible MCP client](https://modelcontextprotocol.io/clients) ([Syncfusion® CodeStudio](https://www.syncfusion.com/code-studio/), VS Code with GitHub Copilot, etc.) +* A [compatible MCP client](https://modelcontextprotocol.io/clients) (VS Code with GitHub Copilot, [Syncfusion® CodeStudio](https://www.syncfusion.com/code-studio/), etc.) * An active Syncfusion® license (any of the following): - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) - [Free Community License](https://www.syncfusion.com/products/communitylicense) - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) -* An active [API KEY](https://staging.syncfusion.com/account/user-token-generation) +* An active [API KEY](https://syncfusion.com/account/api-key) ## Unlimited Access @@ -55,7 +55,7 @@ Before you can invoke the `SyncfusionReactAssistant` MCP server, you need to con - **Arguments**: -y - **Server name**: syncfusionReactAssistant -You need to add your [Syncfusion API key](https://staging.syncfusion.com/account/user-token-generation) as an env parameter in the configuration file: +You need to add your [Syncfusion API key](https://syncfusion.com/account/api-key) as an env parameter in the configuration file: ```json "env": { diff --git a/ej2-react/ai-developer-tools/overview.md b/ej2-react/ai-developer-tools/overview.md index a6dde9cf9..12bf9408f 100644 --- a/ej2-react/ai-developer-tools/overview.md +++ b/ej2-react/ai-developer-tools/overview.md @@ -28,7 +28,7 @@ To use the AI Developer Tools, you need: - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) - [Free Community License](https://www.syncfusion.com/products/communitylicense) - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) -* An active [API KEY](https://staging.syncfusion.com/account/user-token-generation) +* An active [API KEY](https://syncfusion.com/account/api-key) * A [React application that includes SyncfusionReact](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start) ## Unlimited Access diff --git a/ej2-react/chart/getting-started.md b/ej2-react/chart/getting-started.md index d455f483d..dcaa7ba78 100644 --- a/ej2-react/chart/getting-started.md +++ b/ej2-react/chart/getting-started.md @@ -13,6 +13,8 @@ domainurl: ##DomainURL## This section explains you the steps required to create a simple chart and demonstrate the basic usage of the chart control. +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) + To get start quickly with React Charts, you can check on this video: {% youtube "https://www.youtube.com/watch?v=w1xHn0CceqE" %} diff --git a/ej2-react/chat-ui/ai-integrations/gemini-integration.md b/ej2-react/chat-ui/ai-integrations/gemini-integration.md deleted file mode 100644 index 6a6ae63b7..000000000 --- a/ej2-react/chat-ui/ai-integrations/gemini-integration.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -layout: post -title: Gemini AI With React Chat UI component | Syncfusion -description: Checkout and learn about Integration of Gemini AI With React AI Chat UI component of Syncfusion Essential JS 2 and more details. -platform: ej2-react -control: Chat UI -documentation: ug -domainurl: ##DomainURL## ---- - -# Integration of Gemini AI With Chat UI component - -The Syncfusion Chat UI supports integration with [Gemini](https://ai.google.dev/gemini-api/docs), enabling advanced conversational AI features in your React applications. - -## Getting Started with the Chat UI component - -Before integrating Gemini AI, ensure that the Syncfusion `Chat UI` is correctly rendered in your React app: - -[React Getting Started Guide](../getting-started) - -## Prerequisites - -* Requires `Node.js` (v16 or higher) and `npm`. -* Google account to generate API key on accessing `Gemini AI` -* Syncfusion Chat UI for React `@syncfusion/ej2-react-interactive-chat` installed in your project. - -## Install Dependencies - -Install the Syncfusion Chat UI in your project - -```bash - -npm install @syncfusion/ej2-react-interactive-chat --save - -``` - -Install the Gemini AI dependencies - -```bash - -npm install @google/generative-ai - -``` - -## Generate API Key - -1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your Google account. If you don’t have one, create a new account. - -2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard. - -3. Click the `Create API Key` button. You’ll be prompted to either select an existing Google Cloud project or create a new one. Choose the appropriate option and proceed. - -4. After selecting or creating a project, your API key will be generated and displayed. Copy the key and store it securely, as it will only be shown once. - -> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production. - -## Integration Gemini AI with Chat UI - -Include the below snippet in `src/App.jsx` to integrate the Syncfusion Chat UI with the Gemini AI - -* Add your generated `API Key` at the line - -```bash - -const geminiApiKey = 'Place your API key here'; - -``` - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chat-ui/ai-integrations/gemini/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chat-ui/ai-integrations/gemini/app/index.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chat-ui/ai-integrations/gemini" %} - -## Run and Test - -Run the application in the browser using the following command. - -```bash - -npm start - -``` - -Open `http://localhost:4000` to interact with your Gemini AI for dynamic response. diff --git a/ej2-react/chat-ui/ai-integrations/openai-integration.md b/ej2-react/chat-ui/ai-integrations/openai-integration.md deleted file mode 100644 index 2d9c7ec01..000000000 --- a/ej2-react/chat-ui/ai-integrations/openai-integration.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -layout: post -title: Azure Open AI With React Chat UI component | Syncfusion -description: Checkout and learn about Integration of Azure Open AI With React Chat UI component of Syncfusion Essential JS 2 and more details. -platform: ej2-react -control: Chat UI -documentation: ug -domainurl: ##DomainURL## ---- - -# Integration of Azure Open AI With Chat UI component - -The Syncfusion Chat UI supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your React applications. - -## Getting Started with the Chat UI component - -Before integrating Azure Open AI, ensure that the Syncfusion Chat UI control is correctly rendered in your React app: - -[React Getting Started Guide](../getting-started) - -## Prerequisites - -* Requires `Node.js` (v16 or higher) and `npm`. -* An Azure account with access to `Azure Open AI` services and a generated API key. -* Syncfusion Chat UI for React `@syncfusion/ej2-react-interactive-chat` installed in your project. - -## Install Dependencies - -Install the Syncfusion Chat UI in your project - -```bash - -npm install @syncfusion/ej2-react-interactive-chat --save - -``` - -## Configure Azure Open AI - -1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource. - -2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL. - -3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version (e.g., 2024-07-01-preview) matches your resource configuration. - -4. Store these values securely, as they will be used in your application. - -> `Security Note`: Never expose your API key in client-side code for production applications. Use a server-side proxy or environment variables to manage sensitive information securely. - -## Integration Azure Open AI with Chat UI - -Create `src/App.jsx` to integrate the Azure Open AI with Chat UI component - -* Update the following configuration values with your Azure Open AI details: - -```bash - -const azureOpenAIApiKey = 'Your_Azure_OpenAI_API_Key'; -const azureOpenAIEndpoint = 'Your_Azure_OpenAI_Endpoint'; -const azureOpenAIApiVersion = 'Your_Azure_OpenAI_API_Version'; -const azureDeploymentName = 'Your_Deployment_Name'; - -``` - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chat-ui/ai-integrations/openai/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chat-ui/ai-integrations/openai/app/index.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chat-ui/ai-integrations/openai" %} - -## Run and Test - -Run the application in the browser using the following command. - -```bash - -npm start - -``` - -Open `http://localhost:3000` to interact with your Azure Open AI for dynamic response. diff --git a/ej2-react/chat-ui/bot-integrations/integration-with-bot-framework.md b/ej2-react/chat-ui/bot-integrations/integration-with-bot-framework.md index 780ab5208..1d779b392 100644 --- a/ej2-react/chat-ui/bot-integrations/integration-with-bot-framework.md +++ b/ej2-react/chat-ui/bot-integrations/integration-with-bot-framework.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Integration of Microsoft Bot Framework With React Chat UI component -The Syncfusion React Chat UI supports integration with a Microsoft Bot Framework bot hosted on Azure, enabling a custom chat interface for seamless user interaction. The process involves setting up a secure backend token server, configuring the bot in Azure, and integrating the Syncfusion Chat UI in a React application. +The Syncfusion React Chat UI supports integration with a [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0) bot hosted on Azure, enabling a custom chat interface for seamless user interaction. The process involves setting up a secure backend token server, configuring the bot in Azure, and integrating the Syncfusion Chat UI in a React application. ## Getting Started With the Chat UI Component @@ -20,7 +20,7 @@ Before integrating Microsoft Bot Framework, ensure that the Syncfusion Chat UI c ## Prerequisites -* `Microsoft Azure Account`: Required to create and host the bot. +* [Microsoft Azure Account](https://portal.azure.com/#home): Required to create and host the bot. * `Node.js Environment`: The backend portion requires `Node.js` and `npm`. * `Syncfusion Chat UI for React`: Install @syncfusion/ej2-react-interactive-chat in your React project. * `Deployed Azure Bot`: A bot should be created and published using the Bot Framework, which is accessible via an Azure App Service. Refer to Microsoft's Bot Creation Guide. @@ -52,11 +52,11 @@ npm install express axios cors dotenv 1. In the [Azure Portal](https://portal.azure.com/#home), navigate to your bot resource. -2. Enable the Direct Line channel: +2. Enable the direct line channel: * Go to `Channels` > `Direct Line` > `Default-Site`. * Copy one of the displayed secret keys. -3. Verify the Messaging endpoint in the Configuration section (e.g., https://your-bot-service.azurewebsites.net/api/messages). +3. Verify the messaging endpoint in the configuration section (e.g., https://your-bot-service.azurewebsites.net/api/messages). > `Security Note`: Never expose the Direct Line secret key in frontend code. Use a backend token server to handle it securely. @@ -110,7 +110,7 @@ app.listen(port, () => console.log(`Token server running on http://localhost:${p ## Integrate ChatUI in React -Create `src/App.js` to connect the Syncfusion Chat UI to the bot via the Direct Line API: +Create `src/App.js` to connect the Syncfusion Chat UI to the bot via the direct line API: {% tabs %} {% highlight js tabtitle="App.js" %} @@ -230,14 +230,14 @@ In a separate terminal window, navigate to your React project folder and start t npm start ``` -Open `http://localhost:3000` to interact with your Microsoft Bot Framework chatbot. +Open the Host link to interact with your Microsoft Bot Framework chatbot. ## Troubleshooting * `Token Server Error (500)`: Ensure the `DIRECT_LINE_SECRET` in the `.env` file is correct and that you have restarted the token server after changes. -* `CORS Error`: Ensure the CORS configuration in `index.js` allows requests from your frontend URL (e.g., `http://localhost:3000`). +* `CORS Error`: Ensure the CORS configuration in `index.js` allows requests from your frontend Host URL. * `Bot is Not Responding`: - Test the bot in the Azure Portal using the `Test in Web Chat` feature to ensure it's running correctly. - Check the bot's `Messaging endpoint` in the Configuration section and ensure it is correct and accessible. * `Connection Fails on Load`: Verify the token server is running and accessible from the browser. Check the console for network errors. -* `Token Expiration`: Direct Line tokens are short-lived. The `directline-js` library typically handles token refresh automatically, but if issues persist, restart the Direct Line connection. +* `Token Expiration`: direct line tokens are short-lived. The `directline-js` library typically handles token refresh automatically, but if issues persist, restart the direct line connection. diff --git a/ej2-react/chat-ui/bot-integrations/integration-with-dialogflow.md b/ej2-react/chat-ui/bot-integrations/integration-with-dialogflow.md index 7b337d13c..6500d9f4f 100644 --- a/ej2-react/chat-ui/bot-integrations/integration-with-dialogflow.md +++ b/ej2-react/chat-ui/bot-integrations/integration-with-dialogflow.md @@ -20,7 +20,7 @@ Before integrating Dialogflow, ensure that the Syncfusion Chat UI component is c ## Prerequisites -* Google account to access `Dialogflow` and `Google Cloud Console`. +* Google account to access [Google Dialogflow](https://cloud.google.com/dialogflow/docs) and [Google Cloud Console](https://console.cloud.google.com/). * Backend requires `Node.js` (v16 or higher) and `npm`. * Syncfusion Chat UI for React `@syncfusion/ej2-react-interactive-chat` installed in your React project. * Dialogflow Service Account with the `Dialogflow API Client` role and its JSON key file. @@ -44,11 +44,11 @@ npm install @syncfusion/ej2-react-interactive-chat --save ## Set Up the Dialogflow Agent -1. In the Dialogflow console, create an [agent](https://cloud.google.com/agent-assist/docs), set a name (e.g., `MyChatBot`), and configure the default language (e.g., English - `en`). +1. In the dialogflow console, create an [agent](https://cloud.google.com/agent-assist/docs), set a name (e.g., `MyChatBot`), and configure the default language (e.g., English - `en`). -2. Add intents with training phrases and responses (e.g., greetings, FAQs). Test using the Dialogflow simulator. +2. Add intents with training phrases and responses (e.g., greetings, FAQs). Test using the dialogflow simulator. -3. In the Google Cloud Console, go to `APIs & Services` > `Credentials`, create a Service Account with the Dialogflow API Client role, and download the JSON key file. +3. In the Google Cloud Console, go to `APIs & Services` > `Credentials`, create a Service Account with the dialogflow API client role, and download the JSON key file. > `Security Note`: Never commit the JSON key file to version control. Use environment variables or a secret manager (e.g., Google Cloud Secret Manager) for production. @@ -124,11 +124,11 @@ Use the Chat UI `messageSend` event to exchanges message. Each time a user send ### Forward Message to backend: -Upon message submission, a POST request is sent to your backend API endpoint (`/api/message`). This backend service forwards the user’s message to Dialogflow and waits for a response. +Upon message submission, a POST request is sent to your backend API endpoint (`/api/message`). This backend service forwards the user’s message to dialogflow and waits for a response. ### Displaying Bot response: -Create `src/App.js` to integrate the Syncfusion Chat UI with the Dialogflow backend: +Create `src/App.js` to integrate the Syncfusion Chat UI with the dialogflow backend: {% tabs %} {% highlight js tabtitle="App.js" %} @@ -209,15 +209,15 @@ In a separate terminal window, navigate to your React project folder and start t npm start ``` -Open your app and chat with your Dialogflow-powered bot. +Open your app and chat with your dialogflow-powered bot. ![ChatUI with Dialogflow](../images/dialogflow.png) ## Troubleshooting: * `Permission Denied`: Ensure the service account has the `Dialogflow API Client` role in the Google Cloud Console. -* `CORS Error`: Verify that the CORS origin in backend/index.js matches your frontend URL (e.g., http://localhost:3000). +* `CORS Error`: Verify that the CORS origin in backend/index.js matches your frontend Host URL. * `No Response`: Test intents in the Dialogflow Console simulator to ensure they are configured correctly. * `Quota Exceeded`: Check Dialogflow API quotas in the Google Cloud Console. -* `Network Issues`: Confirm the backend server is running and the frontend is pointing to the correct URL (e.g., http://localhost:5000). +* `Network Issues`: Confirm the backend server is running and the frontend is pointing to the correct Host URL. * `Invalid Credentials`: Verify the service account JSON or environment variables are correctly configured. \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx index c8fa5a151..23c425849 100644 --- a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx @@ -14,7 +14,7 @@ function App() { 'How do I prioritize my tasks?', 'How can I improve my time management skills?' ]; - const bannerTemplate = ''; + const bannerTemplate = ''; const toolbarItemClicked = (args) => { if (args.item.iconCss === 'e-icons e-refresh') { diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx index a6ae30718..a1db10a35 100644 --- a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx @@ -15,7 +15,7 @@ function App() { 'How do I prioritize my tasks?', 'How can I improve my time management skills?' ]; - const bannerTemplate: string = ''; + const bannerTemplate: string = ''; const toolbarItemClicked = (args: ToolbarItemClickArgs): void => { if (args.item.iconCss === 'e-icons e-refresh') { diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/index.css b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/index.css index 708414b25..5c4947426 100644 --- a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/index.css +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/index.css @@ -13,13 +13,9 @@ } .banner-content { - display: flex; - flex-direction: column; - justify-content: center; - height: 330px; text-align: center; } .banner-content .e-assistview-icon:before { - font-size: 35px; + font-size: 25px; } \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/app/index.jsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/app/index.jsx index 996167647..ecd7eb2ee 100644 --- a/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/app/index.jsx +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/app/index.jsx @@ -10,7 +10,7 @@ function App() { 'How do I prioritize my tasks?', 'How can I improve my time management skills?' ]; - const bannerTemplate = ''; + const bannerTemplate = ''; const toolbarItemClicked = (args) => { if (args.item.iconCss === 'e-icons e-refresh') { diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/app/index.tsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/app/index.tsx index 021cddf1e..3df8566c5 100644 --- a/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/app/index.tsx +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/app/index.tsx @@ -11,7 +11,7 @@ function App() { 'How do I prioritize my tasks?', 'How can I improve my time management skills?' ]; - const bannerTemplate = ''; + const bannerTemplate = ''; const toolbarItemClicked = (args:ToolbarItemClickedEventArgs) => { if (args.item.iconCss === 'e-icons e-refresh') { assistInstance.current.prompts = []; diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/index.css b/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/index.css index 708414b25..5c4947426 100644 --- a/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/index.css +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/index.css @@ -13,13 +13,9 @@ } .banner-content { - display: flex; - flex-direction: column; - justify-content: center; - height: 330px; text-align: center; } .banner-content .e-assistview-icon:before { - font-size: 35px; + font-size: 25px; } \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.jsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.jsx index 72f83140d..437054706 100644 --- a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.jsx +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.jsx @@ -18,7 +18,7 @@ function App() { ]; const bannerTemplate = - ''; + ''; const toolbarItemClicked = (args) => { if (args.item.iconCss === 'e-icons e-refresh' && assistInstance.current) { diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.tsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.tsx index df11443ef..420767e4c 100644 --- a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.tsx +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.tsx @@ -15,7 +15,7 @@ function App() { 'How do I prioritize my tasks?', 'How can I improve my time management skills?' ]; - const bannerTemplate = ''; + const bannerTemplate = ''; const toolbarItemClicked = (args:ToolbarItemClickedEventArgs) => { if (args.item.iconCss === 'e-icons e-refresh') { assistInstance.current.prompts = []; diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/index.css b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/index.css index 708414b25..5c4947426 100644 --- a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/index.css +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/index.css @@ -13,13 +13,9 @@ } .banner-content { - display: flex; - flex-direction: column; - justify-content: center; - height: 330px; text-align: center; } .banner-content .e-assistview-icon:before { - font-size: 35px; + font-size: 25px; } \ No newline at end of file diff --git a/ej2-react/diagram/getting-started.md b/ej2-react/diagram/getting-started.md index d94176b64..7f2042c01 100644 --- a/ej2-react/diagram/getting-started.md +++ b/ej2-react/diagram/getting-started.md @@ -12,6 +12,8 @@ domainurl: ##DomainURL## This section explains the steps required to create a simple diagram and demonstrates the basic usage of the diagram control in React applications. +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) + ## Prerequisites [System requirements for Syncfusion® React UI components](https://ej2.syncfusion.com/react/documentation/system-requirement) diff --git a/ej2-react/gantt/getting-started.md b/ej2-react/gantt/getting-started.md index a33b8a40f..8f88f5f9b 100644 --- a/ej2-react/gantt/getting-started.md +++ b/ej2-react/gantt/getting-started.md @@ -12,6 +12,8 @@ domainurl: ##DomainURL## This section explains you the steps required to create a simple Essential® JS 2 Gantt in a React application and demonstrates its basic features. +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) + To get started quickly with React Gantt Chart the following video explains the project configuration and basic Gantt chart features behaviors: {% youtube "https://www.youtube.com/watch?v=pCg5hUSKRh8" %} diff --git a/ej2-react/grid/getting-started.md b/ej2-react/grid/getting-started.md index b090498cf..5f435489a 100644 --- a/ej2-react/grid/getting-started.md +++ b/ej2-react/grid/getting-started.md @@ -12,6 +12,8 @@ domainurl: ##DomainURL## This section explains you the steps required to create a simple Grid and demonstrate the basic usage of the Grid component in React environment. +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) + To get start quickly with React Grid, you can check on this video: {% youtube "https://www.youtube.com/watch?v=QNwcXokKc70" %} diff --git a/ej2-react/introduction.md b/ej2-react/introduction.md index b195a6ea5..46a7272cc 100644 --- a/ej2-react/introduction.md +++ b/ej2-react/introduction.md @@ -12,6 +12,8 @@ domainurl: ##DomainURL## Syncfusion® React (Essential® JS 2) is a modern UI components library built from the ground up to be lightweight, responsive, modular, and touch friendly. +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](./ai-developer-tools/overview.md) + ## Components list The Syncfusion® React UI components are listed below. diff --git a/ej2-react/kanban/getting-started.md b/ej2-react/kanban/getting-started.md index ce6fc2426..31dbf0ba5 100644 --- a/ej2-react/kanban/getting-started.md +++ b/ej2-react/kanban/getting-started.md @@ -12,6 +12,8 @@ domainurl: ##DomainURL## This article provides a step-by-step introduction to get started with the Syncfusion® React Kanban component. +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) + ## Overview The Kanban component consists of: diff --git a/ej2-react/pivotview/getting-started.md b/ej2-react/pivotview/getting-started.md index c3a78165f..1b1597e63 100644 --- a/ej2-react/pivotview/getting-started.md +++ b/ej2-react/pivotview/getting-started.md @@ -12,6 +12,8 @@ domainurl: ##DomainURL## This section guides you through the steps to create a simple [Pivot Table](https://www.syncfusion.com/react-components/react-pivot-table) in a React application. It demonstrates how to set up and use the Pivot Table component to display and analyze data effectively. +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) + To get started quickly with the React [Pivot Table](https://www.syncfusion.com/react-components/react-pivot-table), watch this video: {% youtube "https://www.youtube.com/watch?v=vwoijhliTAI" %} diff --git a/ej2-react/rich-text-editor/getting-started.md b/ej2-react/rich-text-editor/getting-started.md index c49dd6aa7..081494187 100644 --- a/ej2-react/rich-text-editor/getting-started.md +++ b/ej2-react/rich-text-editor/getting-started.md @@ -12,6 +12,8 @@ domainurl: ##DomainURL## The Syncfusion React Rich Text Editor is a WYSIWYG (What You See Is What You Get) editor that enables users to create, edit, and format rich text content with features like multimedia insertion, lists, and links. This section explains the steps to create a simple React Rich Text Editor component and configure its core functionalities. +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) + To get started quickly with the React Rich Text Editor, refer to this video tutorial: {% youtube "https://www.youtube.com/watch?v=5mLO6_nwzww" %} diff --git a/ej2-react/schedule/getting-started.md b/ej2-react/schedule/getting-started.md index d03efb7c0..afd849222 100644 --- a/ej2-react/schedule/getting-started.md +++ b/ej2-react/schedule/getting-started.md @@ -13,6 +13,8 @@ domainurl: ##DomainURL## This section briefly explains how to create [**React Scheduler**](https://www.syncfusion.com/react-components/react-scheduler) component and configure its available functionalities in React environment, using Essential® JS 2 [quickstart](https://github.com/syncfusion/ej2-quickstart.git) seed repository. +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) + To get start quickly with React Scheduler using the Create React App, you can check on this video: {% youtube "https://www.youtube.com/watch?v=iNkryf_TtZw" %} From b7f719ad2ce9390c9eda89c8022c6a5e484820b6 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Fri, 3 Oct 2025 20:37:30 +0530 Subject: [PATCH 23/34] Integrated latest changes at 10-03-2025 7:30:15 PM --- ej2-react/introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ej2-react/introduction.md b/ej2-react/introduction.md index 46a7272cc..826ba0ed1 100644 --- a/ej2-react/introduction.md +++ b/ej2-react/introduction.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## Syncfusion® React (Essential® JS 2) is a modern UI components library built from the ground up to be lightweight, responsive, modular, and touch friendly. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](./ai-developer-tools/overview.md) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) ## Components list From 690dedefb5c65840888c20b9e8669136f4a9bbda Mon Sep 17 00:00:00 2001 From: Shyam-SF5073 Date: Mon, 6 Oct 2025 14:38:07 +0530 Subject: [PATCH 24/34] Controls getting started changes committed --- ej2-react/chart/getting-started.md | 2 +- ej2-react/diagram/getting-started.md | 2 +- ej2-react/gantt/getting-started.md | 2 +- ej2-react/grid/getting-started.md | 2 +- ej2-react/kanban/getting-started.md | 2 +- ej2-react/pivotview/getting-started.md | 2 +- ej2-react/rich-text-editor/getting-started.md | 2 +- ej2-react/schedule/getting-started.md | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/ej2-react/chart/getting-started.md b/ej2-react/chart/getting-started.md index dcaa7ba78..666c58bf5 100644 --- a/ej2-react/chart/getting-started.md +++ b/ej2-react/chart/getting-started.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## This section explains you the steps required to create a simple chart and demonstrate the basic usage of the chart control. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) To get start quickly with React Charts, you can check on this video: diff --git a/ej2-react/diagram/getting-started.md b/ej2-react/diagram/getting-started.md index 7f2042c01..557404482 100644 --- a/ej2-react/diagram/getting-started.md +++ b/ej2-react/diagram/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This section explains the steps required to create a simple diagram and demonstrates the basic usage of the diagram control in React applications. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) ## Prerequisites diff --git a/ej2-react/gantt/getting-started.md b/ej2-react/gantt/getting-started.md index 8f88f5f9b..fd610f272 100644 --- a/ej2-react/gantt/getting-started.md +++ b/ej2-react/gantt/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This section explains you the steps required to create a simple Essential® JS 2 Gantt in a React application and demonstrates its basic features. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) To get started quickly with React Gantt Chart the following video explains the project configuration and basic Gantt chart features behaviors: diff --git a/ej2-react/grid/getting-started.md b/ej2-react/grid/getting-started.md index 5f435489a..563f55f36 100644 --- a/ej2-react/grid/getting-started.md +++ b/ej2-react/grid/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This section explains you the steps required to create a simple Grid and demonstrate the basic usage of the Grid component in React environment. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) To get start quickly with React Grid, you can check on this video: diff --git a/ej2-react/kanban/getting-started.md b/ej2-react/kanban/getting-started.md index 31dbf0ba5..2fee31596 100644 --- a/ej2-react/kanban/getting-started.md +++ b/ej2-react/kanban/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This article provides a step-by-step introduction to get started with the Syncfusion® React Kanban component. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) ## Overview diff --git a/ej2-react/pivotview/getting-started.md b/ej2-react/pivotview/getting-started.md index 1b1597e63..4e71e8b73 100644 --- a/ej2-react/pivotview/getting-started.md +++ b/ej2-react/pivotview/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This section guides you through the steps to create a simple [Pivot Table](https://www.syncfusion.com/react-components/react-pivot-table) in a React application. It demonstrates how to set up and use the Pivot Table component to display and analyze data effectively. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) To get started quickly with the React [Pivot Table](https://www.syncfusion.com/react-components/react-pivot-table), watch this video: diff --git a/ej2-react/rich-text-editor/getting-started.md b/ej2-react/rich-text-editor/getting-started.md index 081494187..a7a2918a5 100644 --- a/ej2-react/rich-text-editor/getting-started.md +++ b/ej2-react/rich-text-editor/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## The Syncfusion React Rich Text Editor is a WYSIWYG (What You See Is What You Get) editor that enables users to create, edit, and format rich text content with features like multimedia insertion, lists, and links. This section explains the steps to create a simple React Rich Text Editor component and configure its core functionalities. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) To get started quickly with the React Rich Text Editor, refer to this video tutorial: diff --git a/ej2-react/schedule/getting-started.md b/ej2-react/schedule/getting-started.md index afd849222..73c6de436 100644 --- a/ej2-react/schedule/getting-started.md +++ b/ej2-react/schedule/getting-started.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## This section briefly explains how to create [**React Scheduler**](https://www.syncfusion.com/react-components/react-scheduler) component and configure its available functionalities in React environment, using Essential® JS 2 [quickstart](https://github.com/syncfusion/ej2-quickstart.git) seed repository. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) To get start quickly with React Scheduler using the Create React App, you can check on this video: From cffc146339e524eb81fb1c8c93bbdbee6ca346a1 Mon Sep 17 00:00:00 2001 From: Shyam-SF5073 Date: Mon, 6 Oct 2025 15:05:38 +0530 Subject: [PATCH 25/34] Document changes done in HTML file and other files --- ej2-react-toc.html | 8 +- .../copilot-extension.md | 200 ++++----- .../mcp-server.md | 418 +++++++++--------- .../overview.md | 146 +++--- ej2-react/introduction.md | 2 +- 5 files changed, 387 insertions(+), 387 deletions(-) rename ej2-react/{ai-developer-tools => ai-coding-assistants}/copilot-extension.md (98%) rename ej2-react/{ai-developer-tools => ai-coding-assistants}/mcp-server.md (97%) rename ej2-react/{ai-developer-tools => ai-coding-assistants}/overview.md (70%) diff --git a/ej2-react-toc.html b/ej2-react-toc.html index 5f7a6c4ca..a45da6bcc 100644 --- a/ej2-react-toc.html +++ b/ej2-react-toc.html @@ -20,11 +20,11 @@
  • -AI Developer Tools +AI Coding Assistants
  • diff --git a/ej2-react/ai-developer-tools/copilot-extension.md b/ej2-react/ai-coding-assistants/copilot-extension.md similarity index 98% rename from ej2-react/ai-developer-tools/copilot-extension.md rename to ej2-react/ai-coding-assistants/copilot-extension.md index d59e34e51..37d3b4b13 100644 --- a/ej2-react/ai-developer-tools/copilot-extension.md +++ b/ej2-react/ai-coding-assistants/copilot-extension.md @@ -1,100 +1,100 @@ ---- -layout: post -title: SyncfusionReact GitHub Copilot Extension | Syncfusion -description: Learn how the SyncfusionReact GitHub Copilot extension enhances your React development with intelligent code suggestions, best practices, contextual guidance. -control: Getting started with SyncfusionReact copilot extension -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# SyncfusionReact GitHub Copilot Extension - -## Overview - -The [SyncfusionReact GitHub Copilot Extension](https://github.com/apps/syncfusionreact) provides intelligent assistance for developers using Syncfusion's React component libraries. This extension seamlessly integrates with GitHub Copilot to enhance your development workflow. - -### What is a GitHub Copilot Extension? - -A GitHub Copilot extension enhances Copilot's capabilities by integrating specialized, third-party tools and knowledge directly into the chat interface. It allows Copilot to access specific data, APIs, and services—such as a component vendor's official documentation—to provide more accurate, context-aware, and relevant assistance for a developer's specific technology stack. - -### Key Benefits - -* Smart code suggestions for Syncfusion® React components. -* Best practice guidance for component usage and configuration. -* Context-aware troubleshooting for complex scenarios. - -## Prerequisites - -Before using this extension, ensure you have: - -* [Github copilot](https://github.com/copilot/) -* An active Syncfusion® license (any of the following): - - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) - - [Free Community License](https://www.syncfusion.com/products/communitylicense) - - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) -* An active [API KEY](https://syncfusion.com/account/api-key) - -## Unlimited Access - -Syncfusion® offers unlimited access to this copilot extension. There are no restrictions on: - -* Number of requests -* Components usage -* Query types -* Usage duration - -This ensures users can fully leverage Syncfusion® components to enhance their development experience without limitations. - -## Installation - -* Visit the [SyncfusionReact GitHub App](https://github.com/apps/syncfusionreact) and click **Install**. -* Grant the required read-access permissions to allow the extension to function with Copilot chat. -* Click **Install & Authorize**. -* Sign in with your Syncfusion® account to authenticate and link the extension to your GitHub account. The API key is automatically retrieved upon successful authentication. -* Restart your development environment (e.g., VS Code or GitHub Copilot) and start a new Copilot chat session to use the extension. - -## Getting Started - -* Open the chat panel in a supported environment like [GitHub Copilot](https://github.com/copilot) or VSCode Copilot. -* Type `@` in the chat prompt and select the `SyncfusionReact` from the list of extensions. -* Enter a query related to Syncfusion® React components (e.g., configuration, implementation, or troubleshooting). - -### Mode availability in VS code - -Syncfusion® Copilot extension provide full access to all AI interaction modes — Ask, Edit, and Agent — when integrated with VS code. - -### Best Practices for Effective Usage - -1. `Be specific`: Mention both platform and component (e.g., "How do I create a Syncfusion React Grid with paging and filtering?"). -2. `Provide context`: Include details about your use case for more targeted solutions. -3. `Use descriptive queries`: Avoid vague questions that lack necessary context. -4. `Start fresh for new topics`: Begin a new chat session when switching components or topics. - -## Example Queries - -Here are some examples of queries you can use with the Syncfusion® Copilot extensions: - -* "@SyncfusionReact Create a Syncfusion data grid with paging and sorting" -* "@SyncfusionReact How do I implement a responsive Syncfusion chart with tooltips?" -* "@SyncfusionReact Show me a Syncfusion Kanban board implementation with drag and drop" - -## Uninstallation - -To remove the extension from your account: - -* Go to [GitHub App Installations](https://github.com/settings/installations/). -* Locate the `SyncfusionReact` extension in the list. -* Click `Configure`, then select `Uninstall`. - -## Support - -* [Support tickets](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours \| Unlimited tickets \| Holiday support -* [Community forum](https://www.syncfusion.com/forums/essential-js2) -* [Request feature or report bug](https://www.syncfusion.com/feedback/javascript) -* Live chat - -## See also - -* [Syncfusion® React Documentation](https://ej2.syncfusion.com/react/documentation) -* [Github Copilot Documentation](https://docs.github.com/en/copilot) +--- +layout: post +title: SyncfusionReact GitHub Copilot Extension | Syncfusion +description: Learn how the SyncfusionReact GitHub Copilot extension enhances your React development with intelligent code suggestions, best practices, contextual guidance. +control: Getting started with SyncfusionReact copilot extension +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# SyncfusionReact GitHub Copilot Extension + +## Overview + +The [SyncfusionReact GitHub Copilot Extension](https://github.com/apps/syncfusionreact) provides intelligent assistance for developers using Syncfusion's React component libraries. This extension seamlessly integrates with GitHub Copilot to enhance your development workflow. + +### What is a GitHub Copilot Extension? + +A GitHub Copilot extension enhances Copilot's capabilities by integrating specialized, third-party tools and knowledge directly into the chat interface. It allows Copilot to access specific data, APIs, and services—such as a component vendor's official documentation—to provide more accurate, context-aware, and relevant assistance for a developer's specific technology stack. + +### Key Benefits + +* Smart code suggestions for Syncfusion® React components. +* Best practice guidance for component usage and configuration. +* Context-aware troubleshooting for complex scenarios. + +## Prerequisites + +Before using this extension, ensure you have: + +* [Github copilot](https://github.com/copilot/) +* An active Syncfusion® license (any of the following): + - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) + - [Free Community License](https://www.syncfusion.com/products/communitylicense) + - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) +* An active [API KEY](https://syncfusion.com/account/api-key) + +## Unlimited Access + +Syncfusion® offers unlimited access to this copilot extension. There are no restrictions on: + +* Number of requests +* Components usage +* Query types +* Usage duration + +This ensures users can fully leverage Syncfusion® components to enhance their development experience without limitations. + +## Installation + +* Visit the [SyncfusionReact GitHub App](https://github.com/apps/syncfusionreact) and click **Install**. +* Grant the required read-access permissions to allow the extension to function with Copilot chat. +* Click **Install & Authorize**. +* Sign in with your Syncfusion® account to authenticate and link the extension to your GitHub account. The API key is automatically retrieved upon successful authentication. +* Restart your development environment (e.g., VS Code or GitHub Copilot) and start a new Copilot chat session to use the extension. + +## Getting Started + +* Open the chat panel in a supported environment like [GitHub Copilot](https://github.com/copilot) or VSCode Copilot. +* Type `@` in the chat prompt and select the `SyncfusionReact` from the list of extensions. +* Enter a query related to Syncfusion® React components (e.g., configuration, implementation, or troubleshooting). + +### Mode availability in VS code + +Syncfusion® Copilot extension provide full access to all AI interaction modes — Ask, Edit, and Agent — when integrated with VS code. + +### Best Practices for Effective Usage + +1. `Be specific`: Mention both platform and component (e.g., "How do I create a Syncfusion React Grid with paging and filtering?"). +2. `Provide context`: Include details about your use case for more targeted solutions. +3. `Use descriptive queries`: Avoid vague questions that lack necessary context. +4. `Start fresh for new topics`: Begin a new chat session when switching components or topics. + +## Example Queries + +Here are some examples of queries you can use with the Syncfusion® Copilot extensions: + +* "@SyncfusionReact Create a Syncfusion data grid with paging and sorting" +* "@SyncfusionReact How do I implement a responsive Syncfusion chart with tooltips?" +* "@SyncfusionReact Show me a Syncfusion Kanban board implementation with drag and drop" + +## Uninstallation + +To remove the extension from your account: + +* Go to [GitHub App Installations](https://github.com/settings/installations/). +* Locate the `SyncfusionReact` extension in the list. +* Click `Configure`, then select `Uninstall`. + +## Support + +* [Support tickets](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours \| Unlimited tickets \| Holiday support +* [Community forum](https://www.syncfusion.com/forums/essential-js2) +* [Request feature or report bug](https://www.syncfusion.com/feedback/javascript) +* Live chat + +## See also + +* [Syncfusion® React Documentation](https://ej2.syncfusion.com/react/documentation) +* [Github Copilot Documentation](https://docs.github.com/en/copilot) diff --git a/ej2-react/ai-developer-tools/mcp-server.md b/ej2-react/ai-coding-assistants/mcp-server.md similarity index 97% rename from ej2-react/ai-developer-tools/mcp-server.md rename to ej2-react/ai-coding-assistants/mcp-server.md index 57a3149c2..f30602407 100644 --- a/ej2-react/ai-developer-tools/mcp-server.md +++ b/ej2-react/ai-coding-assistants/mcp-server.md @@ -1,209 +1,209 @@ ---- -layout: post -title: SyncfusionReactAssistant MCP Server | Syncfusion -description: Learn how to configure and use SyncfusionReactAssistant MCP server for intelligent code generation, documentation, and troubleshooting in React apps. -control: Getting started with SyncfusionReactAssistant MCP Server -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# SyncfusionReactAssistant MCP Server - -## Overview - -The [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant) is a specialized [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) server that provides intelligent assistance for developers using Syncfusion's React component libraries. This tool seamlessly integrates with compatible [MCP clients](https://modelcontextprotocol.io/clients) to enhance your development workflow when building React applications with Syncfusion® components. - -### Key Benefits - -* Intelligent code generation for Syncfusion® React components. -* Detailed component documentation and usage examples. -* Troubleshooting assistance for common integration challenges. - -## Prerequisites - -Before using [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant), ensure you have: - -* Required [node](https://nodejs.org/en/) version >= 18 -* A [compatible MCP client](https://modelcontextprotocol.io/clients) (VS Code with GitHub Copilot, [Syncfusion® CodeStudio](https://www.syncfusion.com/code-studio/), etc.) -* An active Syncfusion® license (any of the following): - - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) - - [Free Community License](https://www.syncfusion.com/products/communitylicense) - - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) -* An active [API KEY](https://syncfusion.com/account/api-key) - -## Unlimited Access - -Syncfusion® offers unlimited access to this MCP server. There are no restrictions on: - -* Number of requests -* Components usage -* Query types -* Usage duration - -This ensures users can fully leverage Syncfusion® components to enhance their development experience without limitations. - -## Installation and setup - -Before you can invoke the `SyncfusionReactAssistant` MCP server, you need to configure your MCP client with these core settings. The **Generic MCP Server Settings** shown below are identical across all clients: - -### Generic MCP Server Settings - -- **npm package name**: `@syncfusion/react-assistant` -- **Type**: stdio (standard input/output transport) -- **Command**: npx -- **Arguments**: -y -- **Server name**: syncfusionReactAssistant - -You need to add your [Syncfusion API key](https://syncfusion.com/account/api-key) as an env parameter in the configuration file: - -```json -"env": { - "Syncfusion_API_Key": "YOUR_API_KEY" -} -``` - -[SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant) can be configured in various MCP clients. Below are setup instructions for popular environment: - -### Syncfusion® Code Studio - -* Install directly from the [Syncfusion Code Studio](https://www.syncfusion.com/code-studio/) MCP Marketplace. -* Start the server and grant permission when prompted. - -### VS Code (GitHub Copilot MCP) - -1. To configure an MCP server for a specific workspace, you can create a `.vscode/mcp.json` file in your workspace folder. - -```json -{ - "servers": { - "syncfusion-react-assistant": { - "type": "stdio", - "command": "npx", - "args": [ - "-y", - "@syncfusion/react-assistant@latest" - ], - "env": { - "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} -``` - -2. After updating the configuration in settings.json, you'll notice a "Start" option at the top of the config. This allows you to easily start the [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant) server directly from the settings interface without additional commands. - -3. Confirm that [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant) is being used (this does not happen automatically). Look for a statement in the output, which is similar to: - * `SyncfusionReactAssistant is running...` (in VS Code) - -### Cursor - -To configure an MCP server for a specific workspace, you can create a .cursor/mcp.json file in your workspace folder. - -```json -{ - "mcpServers": { - "syncfusion-react-assistant": { - "type": "stdio", - "command": "npx", - "args": [ - "-y", - "@syncfusion/react-assistant@latest" - ], - "env": { - "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} -``` - -### JetBrains IDEs - -1. Go to Settings -> Tools -> AI Assistant -> Model Context Protocol (MCP). -2. Click + Add to add a new MCP server configuration. -3. In the New MCP Server dialog, switch the dropdown as `As JSON` and add the following config: - -```json -{ - "mcpServers": { - "syncfusion-react-assistant": { - "command": "npx", - "args": [ - "-y", - "@syncfusion/react-assistant@latest" - ], - "env": { - "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} -``` - -4. Click OK and Apply. - -> For more detailed information about configuring MCP servers in various clients, refer to the official documentations. - * [VS Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server) - * [Cursor](https://docs.cursor.com/en/context/mcp#using-mcp-json) - * [JetBrains](https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server) - * [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json) - -## Usage - -To activate the SyncfusionReactAssistant MCP server: - -1. Start your prompt with one of the following: - * 'SyncfusionReactAssistant' - * '/syncfusion-react-assistant' - * '/syncfusion-react' - * '@syncfusion-react' - * '@ask_syncfusion_react' - * 'ej2-react' - - In VS Code, you can also use #SyncfusionReactAssistant to explicitly invoke the MCP server. - -2. Grant the SyncfusionReactAssistant MCP server a permission to run for this session, workspace, or always. -3. For best results, start a new chat for each new topic to maintain clean context. - -### Mode availability - -Syncfusion® MCP Servers provide full access to all AI interaction modes — Ask/Chat, Edit, and Agent — across supported MCP clients. - -### Best Practices for Effective Usage - -1. `Be specific`: Mention both platform and component (e.g., "How do I create a Syncfusion React Grid with paging and filtering?"). -2. `Provide context`: Include details about your use case for more targeted solutions. -3. `Use descriptive queries`: Avoid vague questions that lack necessary context. -4. `Start fresh for new topics`: Begin a new chat session when switching components or topics. - -### Example Queries - -Here are some effective ways to use [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant): - - * "Create a Syncfusion React Grid component with paging, sorting and filtering" - * "How do I implement data binding with Syncfusion React scheduler?" - * "Show me how to create a dashboard with multiple Syncfusion components" - -## Troubleshooting - -If you encounter issues: - - * Verify your API key is correctly configured. - * Ensure the MCP server is enabled in your client's tools selection. - * Check that you're using a compatible MCP client version. - * Try restarting your development environment. - -## Support - -Product support is available through the following mediums. - -* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours \| Unlimited tickets \| Holiday support -* [Community forum](https://www.syncfusion.com/forums/essential-js2) -* [Request feature or report bug](https://www.syncfusion.com/feedback/javascript) -* Live chat - -## See also - -* [Syncfusion React Documentation](https://ej2.syncfusion.com/react/documentation) +--- +layout: post +title: SyncfusionReactAssistant MCP Server | Syncfusion +description: Learn how to configure and use SyncfusionReactAssistant MCP server for intelligent code generation, documentation, and troubleshooting in React apps. +control: Getting started with SyncfusionReactAssistant MCP Server +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# SyncfusionReactAssistant MCP Server + +## Overview + +The [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant) is a specialized [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) server that provides intelligent assistance for developers using Syncfusion's React component libraries. This tool seamlessly integrates with compatible [MCP clients](https://modelcontextprotocol.io/clients) to enhance your development workflow when building React applications with Syncfusion® components. + +### Key Benefits + +* Intelligent code generation for Syncfusion® React components. +* Detailed component documentation and usage examples. +* Troubleshooting assistance for common integration challenges. + +## Prerequisites + +Before using [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant), ensure you have: + +* Required [node](https://nodejs.org/en/) version >= 18 +* A [compatible MCP client](https://modelcontextprotocol.io/clients) (VS Code with GitHub Copilot, [Syncfusion® CodeStudio](https://www.syncfusion.com/code-studio/), etc.) +* An active Syncfusion® license (any of the following): + - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) + - [Free Community License](https://www.syncfusion.com/products/communitylicense) + - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) +* An active [API KEY](https://syncfusion.com/account/api-key) + +## Unlimited Access + +Syncfusion® offers unlimited access to this MCP server. There are no restrictions on: + +* Number of requests +* Components usage +* Query types +* Usage duration + +This ensures users can fully leverage Syncfusion® components to enhance their development experience without limitations. + +## Installation and setup + +Before you can invoke the `SyncfusionReactAssistant` MCP server, you need to configure your MCP client with these core settings. The **Generic MCP Server Settings** shown below are identical across all clients: + +### Generic MCP Server Settings + +- **npm package name**: `@syncfusion/react-assistant` +- **Type**: stdio (standard input/output transport) +- **Command**: npx +- **Arguments**: -y +- **Server name**: syncfusionReactAssistant + +You need to add your [Syncfusion API key](https://syncfusion.com/account/api-key) as an env parameter in the configuration file: + +```json +"env": { + "Syncfusion_API_Key": "YOUR_API_KEY" +} +``` + +[SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant) can be configured in various MCP clients. Below are setup instructions for popular environment: + +### Syncfusion® Code Studio + +* Install directly from the [Syncfusion Code Studio](https://www.syncfusion.com/code-studio/) MCP Marketplace. +* Start the server and grant permission when prompted. + +### VS Code (GitHub Copilot MCP) + +1. To configure an MCP server for a specific workspace, you can create a `.vscode/mcp.json` file in your workspace folder. + +```json +{ + "servers": { + "syncfusion-react-assistant": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "@syncfusion/react-assistant@latest" + ], + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +2. After updating the configuration in settings.json, you'll notice a "Start" option at the top of the config. This allows you to easily start the [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant) server directly from the settings interface without additional commands. + +3. Confirm that [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant) is being used (this does not happen automatically). Look for a statement in the output, which is similar to: + * `SyncfusionReactAssistant is running...` (in VS Code) + +### Cursor + +To configure an MCP server for a specific workspace, you can create a .cursor/mcp.json file in your workspace folder. + +```json +{ + "mcpServers": { + "syncfusion-react-assistant": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "@syncfusion/react-assistant@latest" + ], + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +### JetBrains IDEs + +1. Go to Settings -> Tools -> AI Assistant -> Model Context Protocol (MCP). +2. Click + Add to add a new MCP server configuration. +3. In the New MCP Server dialog, switch the dropdown as `As JSON` and add the following config: + +```json +{ + "mcpServers": { + "syncfusion-react-assistant": { + "command": "npx", + "args": [ + "-y", + "@syncfusion/react-assistant@latest" + ], + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +4. Click OK and Apply. + +> For more detailed information about configuring MCP servers in various clients, refer to the official documentations. + * [VS Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server) + * [Cursor](https://docs.cursor.com/en/context/mcp#using-mcp-json) + * [JetBrains](https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server) + * [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json) + +## Usage + +To activate the SyncfusionReactAssistant MCP server: + +1. Start your prompt with one of the following: + * 'SyncfusionReactAssistant' + * '/syncfusion-react-assistant' + * '/syncfusion-react' + * '@syncfusion-react' + * '@ask_syncfusion_react' + * 'ej2-react' + + In VS Code, you can also use #SyncfusionReactAssistant to explicitly invoke the MCP server. + +2. Grant the SyncfusionReactAssistant MCP server a permission to run for this session, workspace, or always. +3. For best results, start a new chat for each new topic to maintain clean context. + +### Mode availability + +Syncfusion® MCP Servers provide full access to all AI interaction modes — Ask/Chat, Edit, and Agent — across supported MCP clients. + +### Best Practices for Effective Usage + +1. `Be specific`: Mention both platform and component (e.g., "How do I create a Syncfusion React Grid with paging and filtering?"). +2. `Provide context`: Include details about your use case for more targeted solutions. +3. `Use descriptive queries`: Avoid vague questions that lack necessary context. +4. `Start fresh for new topics`: Begin a new chat session when switching components or topics. + +### Example Queries + +Here are some effective ways to use [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant): + + * "Create a Syncfusion React Grid component with paging, sorting and filtering" + * "How do I implement data binding with Syncfusion React scheduler?" + * "Show me how to create a dashboard with multiple Syncfusion components" + +## Troubleshooting + +If you encounter issues: + + * Verify your API key is correctly configured. + * Ensure the MCP server is enabled in your client's tools selection. + * Check that you're using a compatible MCP client version. + * Try restarting your development environment. + +## Support + +Product support is available through the following mediums. + +* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours \| Unlimited tickets \| Holiday support +* [Community forum](https://www.syncfusion.com/forums/essential-js2) +* [Request feature or report bug](https://www.syncfusion.com/feedback/javascript) +* Live chat + +## See also + +* [Syncfusion React Documentation](https://ej2.syncfusion.com/react/documentation) diff --git a/ej2-react/ai-developer-tools/overview.md b/ej2-react/ai-coding-assistants/overview.md similarity index 70% rename from ej2-react/ai-developer-tools/overview.md rename to ej2-react/ai-coding-assistants/overview.md index 12bf9408f..dd454da64 100644 --- a/ej2-react/ai-developer-tools/overview.md +++ b/ej2-react/ai-coding-assistants/overview.md @@ -1,73 +1,73 @@ ---- -layout: post -title: Syncfusion AI Developer Tools Overview | Syncfusion -description: Learn how Syncfusion AI Developer Tools boost React productivity by generating accurate code snippets, configuration examples, and contextual guidance. -control: Syncfusion AI Developer Tools Overview -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Syncfusion® AI Developer Tools Overview - -The **Syncfusion® AI Developer Tools** are designed to streamline your development workflow when building React applications with Syncfusion® components. It uses contextual knowledge of the Syncfusion® component library to generate accurate code snippets, configuration examples, and guided explanations—minimizing documentation searches and maximizing productivity. - -AI Developer Tools: - -* **The SyncfusionReactAssistant MCP Server** - Processes advanced prompts and returns tailored code suggestions via [MCP-compatible clients](https://modelcontextprotocol.io/clients). -* **SyncfusionReact GitHub Copilot Extension** - Augments GitHub Copilot with Syncfusion-specific support for rapid component setup and contextual guidance in the IDE. - -## Getting Started - -To use the AI Developer Tools, you need: - -* A [Syncfusion® user account](https://www.syncfusion.com/account) -* An active Syncfusion® license (any of the following): - - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) - - [Free Community License](https://www.syncfusion.com/products/communitylicense) - - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) -* An active [API KEY](https://syncfusion.com/account/api-key) -* A [React application that includes SyncfusionReact](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start) - -## Unlimited Access - -Syncfusion® offers unlimited access to the AI Developer Tools, with no limitations on: - -* Number of requests -* Components usage -* Query types -* Usage duration - -This ensures users can fully leverage Syncfusion® components to enhance their development experience without limitations. - -## Best Practices - -* Initial Setup: Use the tools to quickly add and configure Syncfusion® components in your React application. -* Feature Tuning: Enable or disable component features through prompt-based configuration for tailored functionality. -* Data Binding: Generate sample data for testing and prototyping. Avoid using sensitive or production data to ensure security. -* Step-by-step explanations: Use annotated code to understand component behavior. Note that the level of detail may vary depending on the tool, mode, and AI model used. Refer to the [Syncfusion® React Documentation](https://ej2.syncfusion.com/react/documentation) for in-depth information. -* Troubleshooting: Resolve common issues with AI-generated suggestions. For complex problems, refer to [documentation](https://ej2.syncfusion.com/react/documentation) or [support](https://support.syncfusion.com/support/tickets/create). - -> Always check AI-generated content and code for accuracy before using it. - -## Recommendations - -* Session Management: Start new sessions when switching tasks to ensure prompt relevance and maintain content focus. -* Model Compatibility: For optimal performance, use the tools with advanced AI models such as GPT-5 or Claude Sonnet 4. - -## Privacy & Data Handling - -The Syncfusion® AI Developer Tools is designed with privacy in mind: - -* The tools do not access your project files or workspace directly. -* User prompts are not stored by any of the tools or used for any other purpose. -* Prompts are not used to train Syncfusion® models. -* The assistant generates context, while the final output is handled by your selected AI model. - -## See also - -* Add the [SyncfusionReact MCP Server](./mcp-server.md) to an MCP-enabled client -* Install the [SyncfusionReact GitHub Copilot Extension](./copilot-extension.md) -* [Syncfusion® React Documentation](https://ej2.syncfusion.com/react/documentation) +--- +layout: post +title: Syncfusion AI Coding Assistants Overview | Syncfusion +description: Learn how Syncfusion AI Coding Assistants boost React productivity by generating accurate code snippets, configuration examples, and contextual guidance. +control: Syncfusion AI Coding Assistants Overview +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# Syncfusion® AI Coding Assistants Overview + +The **Syncfusion® AI Coding Assistants** are designed to streamline your development workflow when building React applications with Syncfusion® components. It uses contextual knowledge of the Syncfusion® component library to generate accurate code snippets, configuration examples, and guided explanations—minimizing documentation searches and maximizing productivity. + +AI Coding Assistants: + +* **The SyncfusionReactAssistant MCP Server** + Processes advanced prompts and returns tailored code suggestions via [MCP-compatible clients](https://modelcontextprotocol.io/clients). +* **SyncfusionReact GitHub Copilot Extension** + Augments GitHub Copilot with Syncfusion-specific support for rapid component setup and contextual guidance in the IDE. + +## Getting Started + +To use the AI Coding Assistants, you need: + +* A [Syncfusion® user account](https://www.syncfusion.com/account) +* An active Syncfusion® license (any of the following): + - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) + - [Free Community License](https://www.syncfusion.com/products/communitylicense) + - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) +* An active [API KEY](https://syncfusion.com/account/api-key) +* A [React application that includes SyncfusionReact](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start) + +## Unlimited Access + +Syncfusion® offers unlimited access to the AI Coding Assistants, with no limitations on: + +* Number of requests +* Components usage +* Query types +* Usage duration + +This ensures users can fully leverage Syncfusion® components to enhance their development experience without limitations. + +## Best Practices + +* Initial Setup: Use the tools to quickly add and configure Syncfusion® components in your React application. +* Feature Tuning: Enable or disable component features through prompt-based configuration for tailored functionality. +* Data Binding: Generate sample data for testing and prototyping. Avoid using sensitive or production data to ensure security. +* Step-by-step explanations: Use annotated code to understand component behavior. Note that the level of detail may vary depending on the tool, mode, and AI model used. Refer to the [Syncfusion® React Documentation](https://ej2.syncfusion.com/react/documentation) for in-depth information. +* Troubleshooting: Resolve common issues with AI-generated suggestions. For complex problems, refer to [documentation](https://ej2.syncfusion.com/react/documentation) or [support](https://support.syncfusion.com/support/tickets/create). + +> Always check AI-generated content and code for accuracy before using it. + +## Recommendations + +* Session Management: Start new sessions when switching tasks to ensure prompt relevance and maintain content focus. +* Model Compatibility: For optimal performance, use the tools with advanced AI models such as GPT-5 or Claude Sonnet 4. + +## Privacy & Data Handling + +The Syncfusion® AI Coding Assistants is designed with privacy in mind: + +* The tools do not access your project files or workspace directly. +* User prompts are not stored by any of the tools or used for any other purpose. +* Prompts are not used to train Syncfusion® models. +* The assistant generates context, while the final output is handled by your selected AI model. + +## See also + +* Add the [SyncfusionReactAssistant MCP Server](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/mcp-server) to an MCP-enabled client +* Install the [SyncfusionReact GitHub Copilot Extension](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/copilot-extension) +* [Syncfusion® React Documentation](https://ej2.syncfusion.com/react/documentation) diff --git a/ej2-react/introduction.md b/ej2-react/introduction.md index 826ba0ed1..c620049bd 100644 --- a/ej2-react/introduction.md +++ b/ej2-react/introduction.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## Syncfusion® React (Essential® JS 2) is a modern UI components library built from the ground up to be lightweight, responsive, modular, and touch friendly. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) ## Components list From c4b9e18fbba43c145ee49706f2f1ef95cae0339f Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Mon, 6 Oct 2025 19:57:50 +0530 Subject: [PATCH 26/34] Integrated latest changes at 10-06-2025 7:39:52 PM --- ej2-react-toc.html | 6 +++--- .../ai-assistview/ai-integrations/gemini-integration.md | 4 ++-- .../ai-integrations/ollama-llm-integration.md | 4 ++-- .../ai-assistview/ai-integrations/openai-integration.md | 4 ++-- ej2-react/ai-coding-assistants/mcp-server.md | 8 ++++++-- .../bot-integrations/integration-with-bot-framework.md | 4 ++-- .../bot-integrations/integration-with-dialogflow.md | 4 ++-- ej2-react/gantt/getting-started.md | 2 +- ej2-react/schedule/getting-started.md | 1 - 9 files changed, 20 insertions(+), 17 deletions(-) diff --git a/ej2-react-toc.html b/ej2-react-toc.html index a45da6bcc..e2d50663a 100644 --- a/ej2-react-toc.html +++ b/ej2-react-toc.html @@ -241,13 +241,13 @@
  • AI Integrations
    • diff --git a/ej2-react/ai-assistview/ai-integrations/gemini-integration.md b/ej2-react/ai-assistview/ai-integrations/gemini-integration.md index 45e1dcc10..f3c0eee6d 100644 --- a/ej2-react/ai-assistview/ai-integrations/gemini-integration.md +++ b/ej2-react/ai-assistview/ai-integrations/gemini-integration.md @@ -9,7 +9,7 @@ domainurl: ##DomainURL## --- -# Integration of Gemini AI With AI AssistView component +# Gemini AI With AI AssistView component The Syncfusion AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs), enabling advanced conversational AI features in your React applications. @@ -55,7 +55,7 @@ npm install @google/generative-ai > `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production. -## Integration Gemini AI with AI AssistView +## Configure Gemini AI with AI AssistView Create `src/App.js` to integrate the Gemini AI with AI AssistView component diff --git a/ej2-react/ai-assistview/ai-integrations/ollama-llm-integration.md b/ej2-react/ai-assistview/ai-integrations/ollama-llm-integration.md index 04f141d92..cb51f7cdf 100644 --- a/ej2-react/ai-assistview/ai-integrations/ollama-llm-integration.md +++ b/ej2-react/ai-assistview/ai-integrations/ollama-llm-integration.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Integration of LLM via Ollama With AI AssistView component +# LLM via Ollama With AI AssistView component The Syncfusion AI AssistView supports integration with [LLM via Ollama](https://ollama.com), enabling advanced conversational AI features in your applications. The component acts as a UI for a support bot, where user prompts are sent to the selected AI service via API calls. @@ -85,7 +85,7 @@ ollama serve ``` -## Step 4: Integrate AI AssistView in React +## Step 4: Configure AI AssistView in React Create `src/App.js` to connect the Syncfusion AI AssistView to the LLM model: diff --git a/ej2-react/ai-assistview/ai-integrations/openai-integration.md b/ej2-react/ai-assistview/ai-integrations/openai-integration.md index 3e6ea5ad6..c9eb0ed52 100644 --- a/ej2-react/ai-assistview/ai-integrations/openai-integration.md +++ b/ej2-react/ai-assistview/ai-integrations/openai-integration.md @@ -9,7 +9,7 @@ domainurl: ##DomainURL## --- -# Integration of Azure Open AI With AI AssistView component +# Azure Open AI With AI AssistView component The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your React applications. @@ -47,7 +47,7 @@ npm install @syncfusion/ej2-react-interactive-chat --save > `Security Note`: Never expose your API key in client-side code for production applications. Use a server-side proxy or environment variables to manage sensitive information securely. -## Integration Azure Open AI with AI AssistView +## Configure Azure Open AI with AI AssistView Create `src/App.js` to integrate the Azure Open AI with AI AssistView component diff --git a/ej2-react/ai-coding-assistants/mcp-server.md b/ej2-react/ai-coding-assistants/mcp-server.md index f30602407..bbbf7d313 100644 --- a/ej2-react/ai-coding-assistants/mcp-server.md +++ b/ej2-react/ai-coding-assistants/mcp-server.md @@ -67,8 +67,12 @@ You need to add your [Syncfusion API key](https://syncfusion.com/account/api-key ### Syncfusion® Code Studio -* Install directly from the [Syncfusion Code Studio](https://www.syncfusion.com/code-studio/) MCP Marketplace. -* Start the server and grant permission when prompted. +* In [Code Studio](https://www.syncfusion.com/code-studio/), open MCP Marketplace, find `SyncfusionReactAssistant`, and click Install. +* When prompted, enter your [Syncfusion API key](https://syncfusion.com/account/api-key) and click Submit to register. +* It installs locally on your machine and appears in the Installed list. +* The server is ready for use in Code Studio. + +For additional details, see the Code Studio [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/mcp/marketplace). ### VS Code (GitHub Copilot MCP) diff --git a/ej2-react/chat-ui/bot-integrations/integration-with-bot-framework.md b/ej2-react/chat-ui/bot-integrations/integration-with-bot-framework.md index 1d779b392..45d839f6a 100644 --- a/ej2-react/chat-ui/bot-integrations/integration-with-bot-framework.md +++ b/ej2-react/chat-ui/bot-integrations/integration-with-bot-framework.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Integration of Microsoft Bot Framework With React Chat UI component +# Microsoft Bot Framework With React Chat UI component The Syncfusion React Chat UI supports integration with a [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0) bot hosted on Azure, enabling a custom chat interface for seamless user interaction. The process involves setting up a secure backend token server, configuring the bot in Azure, and integrating the Syncfusion Chat UI in a React application. @@ -108,7 +108,7 @@ app.listen(port, () => console.log(`Token server running on http://localhost:${p {% endhighlight %} {% endtabs %} -## Integrate ChatUI in React +## Configure ChatUI Create `src/App.js` to connect the Syncfusion Chat UI to the bot via the direct line API: diff --git a/ej2-react/chat-ui/bot-integrations/integration-with-dialogflow.md b/ej2-react/chat-ui/bot-integrations/integration-with-dialogflow.md index 6500d9f4f..b7bac21ea 100644 --- a/ej2-react/chat-ui/bot-integrations/integration-with-dialogflow.md +++ b/ej2-react/chat-ui/bot-integrations/integration-with-dialogflow.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Integration of Google Dialogflow With React Chat UI component +# Google Dialogflow With React Chat UI component The Syncfusion Chat UI supports integration with [Google Dialogflow](https://cloud.google.com/dialogflow/docs), enabling advanced conversational AI features in your React applications. @@ -118,7 +118,7 @@ app.listen(5000, () => console.log('Backend running on http://localhost:5000')); > Use a unique `sessionId` (e.g., UUID) for each user to maintain conversation context. -## Integrate ChatUI in React +## Configure message send Use the Chat UI `messageSend` event to exchanges message. Each time a user sends a message, this event will be invoked with details of the sent message. diff --git a/ej2-react/gantt/getting-started.md b/ej2-react/gantt/getting-started.md index fd610f272..8f88f5f9b 100644 --- a/ej2-react/gantt/getting-started.md +++ b/ej2-react/gantt/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This section explains you the steps required to create a simple Essential® JS 2 Gantt in a React application and demonstrates its basic features. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) To get started quickly with React Gantt Chart the following video explains the project configuration and basic Gantt chart features behaviors: diff --git a/ej2-react/schedule/getting-started.md b/ej2-react/schedule/getting-started.md index 73c6de436..f5ba8880e 100644 --- a/ej2-react/schedule/getting-started.md +++ b/ej2-react/schedule/getting-started.md @@ -1,4 +1,3 @@ - --- layout: post title: Getting started with React Schedule component | Syncfusion From 955d24f4d6a9be7ced0190e32b783c90ee569f51 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Tue, 7 Oct 2025 21:03:46 +0530 Subject: [PATCH 27/34] Integrated latest changes at 10-07-2025 7:30:12 PM --- ej2-react-toc.html | 10 + .../ai-assistview/speech/speech-to-text.md | 42 +++++ .../ai-assistview/speech/text-to-speech.md | 42 +++++ ej2-react/avatar/getting-started.md | 26 +-- .../avatar/how-to/avatar-customization.md | 14 +- .../how-to/integrate-avatar-into-badge.md | 8 +- .../how-to/integrate-avatar-into-listview.md | 6 +- ej2-react/avatar/types.md | 20 +- ej2-react/breadcrumb/accessibility.md | 14 +- ej2-react/breadcrumb/data-binding.md | 2 +- ej2-react/breadcrumb/getting-started.md | 23 ++- ej2-react/breadcrumb/icons.md | 28 +-- ej2-react/breadcrumb/navigation.md | 12 +- ej2-react/breadcrumb/overflow-mode.md | 22 ++- ej2-react/breadcrumb/template.md | 10 +- ej2-react/card/action-buttons.md | 10 +- ej2-react/card/card-image.md | 13 +- ej2-react/card/getting-started.md | 46 ++--- ej2-react/card/header-content.md | 28 +-- ej2-react/card/horizontal.md | 17 +- ...customize-the-card-image-title-position.md | 7 +- ...tegrate-other-component-inside-the-card.md | 6 +- ej2-react/card/style.md | 41 ++-- .../ai-assistview/speech/stt/app/index.jsx | 177 ++++++++++++++++++ .../ai-assistview/speech/stt/app/index.tsx | 177 ++++++++++++++++++ .../ai-assistview/speech/stt/index.css | 84 +++++++++ .../ai-assistview/speech/stt/index.html | 30 +++ .../speech/stt/systemjs.config.js | 48 +++++ .../ai-assistview/speech/tts/app/index.jsx | 141 ++++++++++++++ .../ai-assistview/speech/tts/app/index.tsx | 140 ++++++++++++++ .../ai-assistview/speech/tts/index.css | 32 ++++ .../ai-assistview/speech/tts/index.html | 28 +++ .../speech/tts/systemjs.config.js | 49 +++++ .../chart/series/column-cs20/app/index.jsx | 8 +- ej2-react/context-menu/accessibility.md | 20 +- ej2-react/context-menu/getting-started.md | 13 +- .../add-or-remove-context-menu-items.md | 10 +- .../how-to/change-animation-settings.md | 19 +- .../how-to/change-menu-items-dynamically.md | 12 +- ej2-react/context-menu/how-to/data-binding.md | 10 +- .../enable-or-disable-context-menu-items.md | 11 +- ...open-a-dialog-on-contextmenu-item-click.md | 12 +- .../how-to/open-and-close-contextmenu.md | 13 +- .../how-to/overflow-scrollable-contextmenu.md | 2 +- .../how-to/render-with-separator.md | 2 +- .../how-to/scrollable-context-menu.md | 8 +- ej2-react/context-menu/how-to/template.md | 10 +- .../underline-a-character-in-the-item-text.md | 12 +- .../context-menu/icons-and-navigation.md | 13 +- .../context-menu/style-and-appearance.md | 18 +- .../template-and-multilevel-nesting.md | 18 +- ej2-react/dashboard-layout/accessibility.md | 43 +++-- .../dashboard-layout/floating-of-panels.md | 23 ++- ej2-react/dashboard-layout/getting-started.md | 32 ++-- .../dragging-moving-of-panels.md | 30 +-- .../interaction-with-panels/moving-panels.md | 16 +- .../resizing-of-panels.md | 36 ++-- .../panels/add-remove-panels.md | 21 ++- .../panels/position-sizing-of-panels.md | 48 ++--- .../panels/setting-header-of-panels.md | 18 +- .../dashboard-layout/responsive-adaptive.md | 18 +- .../dashboard-layout/setting-size-of-cells.md | 28 +-- .../dashboard-layout/state-maintenance.md | 20 +- ej2-react/dashboard-layout/style.md | 24 +-- ej2-react/drop-down-tree/accessibility.md | 10 +- ej2-react/drop-down-tree/checkbox.md | 26 +-- ej2-react/drop-down-tree/data-binding.md | 37 ++-- ej2-react/drop-down-tree/getting-started.md | 12 +- ej2-react/drop-down-tree/localization.md | 22 ++- ej2-react/drop-down-tree/templates.md | 38 ++-- ej2-react/splitter/accessibility.md | 8 +- ej2-react/splitter/different-layouts.md | 9 +- ej2-react/splitter/ej1-api-migration.md | 2 +- ej2-react/splitter/expand-collapse.md | 18 +- .../splitter/getting-started-functional.md | 20 +- ej2-react/splitter/getting-started.md | 29 ++- ej2-react/splitter/globalization.md | 8 +- ej2-react/splitter/pane-content.md | 14 +- ej2-react/splitter/pane-sizing.md | 20 +- ej2-react/splitter/resize.md | 31 +-- ej2-react/splitter/split-panes.md | 22 +-- ej2-react/splitter/style.md | 12 +- ej2-react/timeline/accessibility.md | 8 +- ej2-react/timeline/align.md | 10 +- ej2-react/timeline/customization.md | 16 +- ej2-react/timeline/events.md | 6 +- ej2-react/timeline/getting-started.md | 10 +- ej2-react/timeline/items.md | 26 +-- ej2-react/timeline/orientations.md | 6 +- ej2-react/timeline/reverse.md | 4 +- ej2-react/timeline/template.md | 4 +- ej2-react/treegrid/accessibility.md | 106 +++++------ ej2-react/treegrid/adaptive.md | 17 +- ej2-react/treegrid/aggregates/aggregates.md | 32 ++-- .../treegrid/aggregates/custom-aggregate.md | 15 +- .../treegrid/aggregates/footer-aggregate.md | 21 +-- ej2-react/treegrid/cell/cell.md | 62 +++--- ej2-react/treegrid/clipboard.md | 58 +++--- ej2-react/treegrid/context-menu.md | 57 +++--- ej2-react/treegrid/editing/batch-editing.md | 8 +- ej2-react/treegrid/editing/cell-editing.md | 10 +- .../editing/command-column-editing.md | 18 +- ej2-react/treegrid/editing/dialog-editing.md | 27 ++- ej2-react/treegrid/editing/edit-types.md | 58 +++--- ej2-react/treegrid/editing/edit.md | 39 ++-- .../editing/persisting-data-in-server.md | 52 ++--- ej2-react/treegrid/editing/row-editing.md | 8 +- .../treegrid/editing/template-editing.md | 34 ++-- ej2-react/treegrid/editing/validation.md | 12 +- .../excel-export/adding-header-and-footer.md | 8 +- .../excel-export/excel-export-options.md | 42 ++--- .../treegrid/excel-export/excel-export.md | 31 +-- .../exporting-treegrid-in-server.md | 25 ++- .../treegrid/filtering/excel-like-filter.md | 10 +- ej2-react/treegrid/filtering/filter-bar.md | 42 ++--- ej2-react/treegrid/filtering/filter-menu.md | 21 +-- ej2-react/treegrid/filtering/filtering.md | 62 +++--- ej2-react/treegrid/frozen.md | 18 +- ej2-react/treegrid/getting-started.md | 100 +++++----- .../how-to/add-params-for-filtering.md | 13 +- ...ng-drop-down-list-with-treegrid-editing.md | 14 +- .../how-to/custom-tool-tip-for-columns.md | 12 +- .../how-to/customize-column-styles.md | 16 +- .../how-to/customize-pager-drop-down.md | 10 +- .../customize-the-empty-record-template.md | 12 +- ...enable-disable-treegrid-and-its-actions.md | 18 +- .../how-to/enable-editing-in-single-click.md | 16 +- .../how-to/exporting-filtered-data.md | 12 +- .../treegrid/how-to/get-row-cell-index.md | 10 +- ...nd-enabling-filtering-to-drop-down-list.md | 14 +- .../render-react-component-in-column.md | 12 +- ...t-decimal-points-while-treegrid-editing.md | 12 +- .../treegrid/how-to/row-cell-customization.md | 12 +- ...reegrid-rows-based-on-certain-condition.md | 14 +- .../how-to/show-spinner-while-exporting.md | 16 +- ej2-react/treegrid/infinite-scroll.md | 45 ++--- ej2-react/treegrid/loading-animation.md | 17 +- ej2-react/treegrid/module.md | 39 ++-- ej2-react/treegrid/overview.md | 46 ++--- ej2-react/treegrid/paging.md | 38 ++-- .../pdf-export/adding-header-and-footer.md | 18 +- .../exporting-treegrid-in-server.md | 36 ++-- .../treegrid/pdf-export/pdf-export-options.md | 52 ++--- ej2-react/treegrid/pdf-export/pdf-export.md | 21 ++- ej2-react/treegrid/preact.md | 35 ++-- ej2-react/treegrid/print.md | 56 +++--- ej2-react/treegrid/row/detail-template.md | 10 +- ej2-react/treegrid/row/indent.md | 12 +- ej2-react/treegrid/row/row-drag-and-drop.md | 42 ++--- ej2-react/treegrid/row/row-template.md | 20 +- ej2-react/treegrid/row/row.md | 28 ++- ej2-react/treegrid/scrolling.md | 46 +++-- ej2-react/treegrid/searching.md | 39 ++-- .../treegrid/selection/cell-selection.md | 13 +- .../treegrid/selection/check-box-selection.md | 31 ++- ej2-react/treegrid/selection/row-selection.md | 26 +-- ej2-react/treegrid/selection/selection.md | 40 ++-- ej2-react/treegrid/sorting.md | 45 ++--- .../state-persistence/state-persistence.md | 20 +- ej2-react/treegrid/tool-bar/tool-bar-items.md | 72 ++++--- ej2-react/treegrid/tool-bar/tool-bar.md | 14 +- ej2-react/treegrid/treegrid-styling.md | 50 ++--- ej2-react/treegrid/virtual-scroll.md | 136 +++++++------- 163 files changed, 2822 insertions(+), 1780 deletions(-) create mode 100644 ej2-react/ai-assistview/speech/speech-to-text.md create mode 100644 ej2-react/ai-assistview/speech/text-to-speech.md create mode 100644 ej2-react/code-snippet/ai-assistview/speech/stt/app/index.jsx create mode 100644 ej2-react/code-snippet/ai-assistview/speech/stt/app/index.tsx create mode 100644 ej2-react/code-snippet/ai-assistview/speech/stt/index.css create mode 100644 ej2-react/code-snippet/ai-assistview/speech/stt/index.html create mode 100644 ej2-react/code-snippet/ai-assistview/speech/stt/systemjs.config.js create mode 100644 ej2-react/code-snippet/ai-assistview/speech/tts/app/index.jsx create mode 100644 ej2-react/code-snippet/ai-assistview/speech/tts/app/index.tsx create mode 100644 ej2-react/code-snippet/ai-assistview/speech/tts/index.css create mode 100644 ej2-react/code-snippet/ai-assistview/speech/tts/index.html create mode 100644 ej2-react/code-snippet/ai-assistview/speech/tts/systemjs.config.js diff --git a/ej2-react-toc.html b/ej2-react-toc.html index e2d50663a..4a79dfb79 100644 --- a/ej2-react-toc.html +++ b/ej2-react-toc.html @@ -255,6 +255,16 @@
  • Custom views
  • File attachments
  • Templates
    • +
  • Speech + +
  • Appearance
  • Accessibility
  • Methods
    • diff --git a/ej2-react/ai-assistview/speech/speech-to-text.md b/ej2-react/ai-assistview/speech/speech-to-text.md new file mode 100644 index 000000000..a26a0b39f --- /dev/null +++ b/ej2-react/ai-assistview/speech/speech-to-text.md @@ -0,0 +1,42 @@ +--- +layout: post +title: Speech-to-Text With React AI AssistView component | Syncfusion +description: Checkout and learn about configuration of Speech-to-Text With Azure OpenAI in React AI AssistView component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: AI AssistView +documentation: ug +domainurl: ##DomainURL## +--- + +# Speech-to-Text in React AI AssistView + +The Syncfusion React AI AssistView component supports `Speech-to-Text` functionality through the browser's [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API), enabling conversion of spoken words into text using the device's microphone. + +## Prerequisites + +Before integrating `Speech-to-Text`, ensure the following: + +1. The Syncfusion AI AssistView component is properly set up in your React application. + - [React Getting Started Guide](../getting-started) + +2. The AI AssistView component is integrated with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai). + - [Integration of Azure OpenAI With React AI AssistView component](../ai-integrations/openai-integration.md) + +## Configure Speech-to-Text + +To enable Speech-to-Text functionality, modify the `src/App.jsx` or `src/App.tsx` file to incorporate the Web Speech API. The [SpeechToText](https://ej2.syncfusion.com/react/documentation/speech-to-text/getting-started) component listens for microphone input, transcribes spoken words, and updates the AI AssistView's editable footer with the transcribed text. The transcribed text is then sent as a prompt to the Azure OpenAI service via the AI AssistView component. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/ai-assistview/speech/stt/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/ai-assistview/speech/stt/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/ai-assistview/speech/stt" %} + +## See Also + +* [Text-to-Speech](./text-to-speech.md) diff --git a/ej2-react/ai-assistview/speech/text-to-speech.md b/ej2-react/ai-assistview/speech/text-to-speech.md new file mode 100644 index 000000000..002829f42 --- /dev/null +++ b/ej2-react/ai-assistview/speech/text-to-speech.md @@ -0,0 +1,42 @@ +--- +layout: post +title: Text-to-Speech With React AI AssistView component | Syncfusion +description: Checkout and learn about configuration of Text-to-Speech With Azure OpenAI in React AI AssistView component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: AI AssistView +documentation: ug +domainurl: ##DomainURL## +--- + +# Text-to-Speech in React AI AssistView + +The Syncfusion React AI AssistView component supports `Text-to-Speech` (TTS) functionality using the browser's Web Speech API specifically using the [SpeechSynthesisUtterance](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance) interface to convert AI-generated response into spoken audio. + +## Prerequisites + +Before integrating `Text-to-Speech`, ensure the following: + +1. The Syncfusion AI AssistView component is properly set up in your React application. + - [React Getting Started Guide](../getting-started) + +2. The AI AssistView component is integrated with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai). + - [Integration of Azure OpenAI With React AI AssistView component](../ai-integrations/openai-integration.md) + +## Configure Text-to-Speech + +To enable Text-to-Speech functionality, modify the `src/App.jsx` or `src/App.tsx` file to incorporate the Web Speech API. A custom `Read Aloud` button is added to the response toolbar using the [responseToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/#responsetoolbarsettings) property. When clicked, the [itemClicked](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/responseToolbarSettings/#itemclicked) event extracts plain text from the generated AI response and use the browser SpeechSynthesis API to read it aloud. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/ai-assistview/speech/tts/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/ai-assistview/speech/tts/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/ai-assistview/speech/tts" %} + +## See Also + +* [Speech-to-Text](./speech-to-text.md) diff --git a/ej2-react/avatar/getting-started.md b/ej2-react/avatar/getting-started.md index c8f9de5a2..a2351f4cc 100644 --- a/ej2-react/avatar/getting-started.md +++ b/ej2-react/avatar/getting-started.md @@ -2,39 +2,41 @@ layout: post title: Getting started with React Avatar component | Syncfusion description: Checkout and learn about Getting started with React Avatar component of Syncfusion Essential JS 2 and more details. -control: Getting started +control: Avatar platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Getting Started with React Avatar component +# Getting started with React Avatar component -This section explains how to create a simple **Avatar** using Styles in the React Framework +This section explains how to create a simple **Avatar** using styles in the React framework. ## Dependencies -The Avatar Component is a pure CSS component so no specific dependencies to render the avatar. +The Avatar component is a pure CSS component, so it has no specific dependencies for rendering. ## Installation and configuration -To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production. +To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools such as `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production. -> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. +> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. -To create a new React application, run the following command. +To create a new React application, run the following command: ```bash npm create vite@latest my-app ``` -To set-up a React application in TypeScript environment, run the following command. + +To set up a React application in a TypeScript environment, run the following commands: ```bash npm create vite@latest my-app -- --template react-ts cd my-app npm run dev ``` -To set-up a React application in JavaScript environment, run the following command. + +To set up a React application in a JavaScript environment, run the following commands: ```bash npm create vite@latest my-app -- --template react @@ -54,7 +56,7 @@ npm install @syncfusion/ej2-layouts --save ## Adding CSS Reference -The Avatar CSS files are available in the `ej2-layouts` package folder. This can be referenced in your application using the following code in `src/App.css`. +The Avatar CSS files, which include base styles from `@syncfusion/ej2-base`, are available in the `@syncfusion/ej2-layouts` package. Reference them in your application by adding the following to `src/App.css`: ```css @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @@ -63,7 +65,7 @@ The Avatar CSS files are available in the `ej2-layouts` package folder. This can ## Adding a simple Avatar -Add the HTML `div` element with `e-avatar` class into your `App.tsx`. +Add a `div` element with the `e-avatar` class to your `App.tsx`: ```bash
    AJ
    @@ -71,7 +73,7 @@ Add the HTML `div` element with `e-avatar` class into your `App.tsx`. ## Run the application -Now run the `npm run dev` command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser. +Run the `npm run dev` command to start the development server. This command compiles your code and serves the application locally, opening it in the browser. ```bash npm run dev diff --git a/ej2-react/avatar/how-to/avatar-customization.md b/ej2-react/avatar/how-to/avatar-customization.md index 4ef148dbd..2af4fad48 100644 --- a/ej2-react/avatar/how-to/avatar-customization.md +++ b/ej2-react/avatar/how-to/avatar-customization.md @@ -2,7 +2,7 @@ layout: post title: Avatar customization in React Avatar component | Syncfusion description: Learn here all about Avatar customization in Syncfusion React Avatar component of Syncfusion Essential JS 2 and more. -control: Avatar customization +control: Avatar platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,9 +10,11 @@ domainurl: ##DomainURL## # Avatar customization in React Avatar component +The React Avatar component offers extensive customization options including colors, sizes, and media formats. This section demonstrates how to modify the Avatar's appearance to match specific design requirements and integrate various content types. + ## Color customization -The Avatar comes with default background color (Grey). This can be easily customized to the desired color by adding custom class or directly selecting the Avatar class from the CSS. +The Avatar displays with a default (Grey) background color. Customize this to any desired color by adding a custom CSS class or directly targeting the avatar class in the stylesheet. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -33,7 +35,7 @@ The Avatar comes with default background color (Grey). This can be easily custom ## Customize Avatar sizes -Even though the Avatar comes with five predefined sizes, sometimes it's not enough. So, the Avatar is designed in such a way that the width and height will be relative to font-size. By changing the `font-size` of the Avatar element, you can change the width and height automatically. +Although the Avatar comes with five predefined sizes, sometimes these are not sufficient. So, the Avatar is designed in such a way that the width and height will be relative to font-size. By changing the `font-size` of the avatar element, you can change the width and height automatically. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -52,7 +54,7 @@ Even though the Avatar comes with five predefined sizes, sometimes it's not enou {% previewsample "page.domainurl/code-snippet/avatar/custom-size-cs1" %} -## Use various media in avatar +## Using various media formats Avatars can be used with a wide variety of media formats like SVG, font-icons, images, letters, words, etc. Some of them are given below. @@ -73,9 +75,9 @@ Avatars can be used with a wide variety of media formats like SVG, font-icons, i {% previewsample "page.domainurl/code-snippet/avatar/media-formats-cs1" %} -## Dynamic Avatar rendering from datasource +## Dynamic Avatar rendering from data source -We can render the Avatar component dynamically from a data-source. In this sample we have rendered the Avatar component using a data-source which contains the image source in different sizes dynamically. This is applicable also for data-source from the server or remote data or AJAX. We have also rendered the Avatar using `CSS` property `background-image` and using image tag. +We can render Avatar component dynamically from a data-source. In this sample we have rendered the Avatar component using a data-source which contains the image source in different sizes dynamically. This is applicable also for data-source from the server or remote data or AJAX. We have also rendered the Avatar using `CSS` property `background-image` and using image tag. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/avatar/how-to/integrate-avatar-into-badge.md b/ej2-react/avatar/how-to/integrate-avatar-into-badge.md index 555347844..fa105eaae 100644 --- a/ej2-react/avatar/how-to/integrate-avatar-into-badge.md +++ b/ej2-react/avatar/how-to/integrate-avatar-into-badge.md @@ -2,7 +2,7 @@ layout: post title: Integrate Avatar into Badge in React Avatar component | Syncfusion description: Learn here all about Integrate Avatar into Badge in Syncfusion React Avatar component of Syncfusion Essential JS 2 and more. -control: Integrate Avatar into Badge +control: Avatar platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,8 +10,10 @@ domainurl: ##DomainURL## # Integrate Avatar into Badge in React Avatar component -The Badge is a dependent and supportive component, and it can be used with an Avatar to create a notification avatar. -The default Avatar (.`e-avatar`) and circle Avatar (.`e-avatar-circle`) have been used with notification badges (.`e-badge-notification`) in the following sample. +The badge component serves as a dependent and supportive element that can be integrated with avatars to create notification avatars. This combination displays user profiles alongside status indicators, message counts, or alert notifications. + +## Implementation +The default Avatar (`e-avatar`) and circle Avatar (`e-avatar-circle`) classes work seamlessly with notification badges (`e-badge-notification`) to create these enhanced user interface elements. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/avatar/how-to/integrate-avatar-into-listview.md b/ej2-react/avatar/how-to/integrate-avatar-into-listview.md index 202a91cd2..67ad7d284 100644 --- a/ej2-react/avatar/how-to/integrate-avatar-into-listview.md +++ b/ej2-react/avatar/how-to/integrate-avatar-into-listview.md @@ -2,7 +2,7 @@ layout: post title: Integrate Avatar into ListView in React Avatar component | Syncfusion description: Learn here all about Integrate Avatar into ListView in Syncfusion React Avatar component of Syncfusion Essential JS 2 and more. -control: Integrate Avatar into ListView +control: Avatar platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,7 +10,9 @@ domainurl: ##DomainURL## # Integrate Avatar into ListView in React Avatar component -The Avatar component is integrated into the ListView to create contacts applications. The `xsmall` size Avatar is used to match the size of the list item. Letters and images are also used as Avatar content. +The Avatar component seamlessly integrates with ListView to create rich, visually appealing list interfaces commonly used in contact applications, user directories, and messaging platforms. This integration enhances the user experience by providing immediate visual identification of list items through profile images, initials, or icons. + +The `xsmall` Avatar size provides the ideal balance between visual impact and space efficiency within ListView items. This sizing ensures consistent alignment with text content and maintains the overall list structure without overwhelming the interface. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/avatar/types.md b/ej2-react/avatar/types.md index ad40b3f72..a2a4c1e71 100644 --- a/ej2-react/avatar/types.md +++ b/ej2-react/avatar/types.md @@ -2,7 +2,7 @@ layout: post title: Types in React Avatar component | Syncfusion description: Learn here all about Types in Syncfusion React Avatar component of Syncfusion Essential JS 2 and more. -control: Types +control: Avatar platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,19 +10,19 @@ domainurl: ##DomainURL## # Types in React Avatar component -This section explains different types of avatar. +The React Avatar component provides different sizes and visual styles to suit various design requirements. This section covers the available avatar sizes and shape types that can be customized using CSS classes. ## Avatar size -The Essential® JS 2 Avatar has the following predefined sizes that can be used with the `.e-avatar` class to change the appearance of the avatar. +The Essential® JS 2 Avatar provides predefined sizes that can be applied using CSS classes with the base `.e-avatar` class to control the avatar's dimensions. | Class Name | Description -| :-------------: |:-------------: -| e-avatar-xlarge | Displays xlarge size avatar. +| :------------- |:------------- +| e-avatar-xlarge | Displays extra large size avatar. | e-avatar-large | Displays large size avatar. | e-avatar | Displays default size avatar. | e-avatar-small | Displays small size avatar. -| e-avatar-xsmall | Displays xsmall size avatar. +| e-avatar-xsmall | Displays extra small size avatar. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -43,14 +43,14 @@ The Essential® JS 2 Avatar has the followin ## Avatar types -The types of Essential® JS 2 Avatar are: +The Essential® JS 2 Avatar supports two distinct shape styles to accommodate different design preferences: -* Default +* Default (rectangular with rounded corners) * Circle ### Default -The default style of the Avatar is rectangular shape with rounded corners, which can be applied from adding the modifier class `.e-avatar` to the target element. +The default Avatar style features a rectangular shape with rounded corners, providing a modern appearance suitable for most applications. This style is applied by adding the base class `.e-avatar` to the target element. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -71,7 +71,7 @@ The default style of the Avatar is rectangular shape with rounded corners, which ### Circle -The circle Avatar style can be applied by adding the modifier class `.e-avatar-circle` to the target element. +The circular Avatar style creates a perfectly round appearance, ideal for profile pictures and user representations. Apply this style by adding the modifier class `.e-avatar-circle` along with the base `.e-avatar` class to the target element. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/breadcrumb/accessibility.md b/ej2-react/breadcrumb/accessibility.md index 8d2f35443..f40e82fa8 100644 --- a/ej2-react/breadcrumb/accessibility.md +++ b/ej2-react/breadcrumb/accessibility.md @@ -2,7 +2,7 @@ layout: post title: Accessibility in React Breadcrumb component | Syncfusion description: Learn here all about Accessibility in Syncfusion React Breadcrumb component of Syncfusion Essential JS 2 and more. -control: Accessibility +control: Breadcrumb platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Accessibility in React Breadcrumb component -The Breadcrumb component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Breadcrumb component follows the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. The accessibility compliance for the Breadcrumb component is outlined below. @@ -40,7 +40,7 @@ The accessibility compliance for the Breadcrumb component is outlined below. ## WAI-ARIA attributes -The Breadcrumb component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) patterns to meet the accessibility. The following ARIA attributes are used in the Breadcrumb component: +The Breadcrumb component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) patterns to meet accessibility standards. The following ARIA attributes are used in the Breadcrumb component: | Attributes | Purpose | | --- | --- | @@ -49,7 +49,7 @@ The Breadcrumb component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg ## Keyboard interaction -The Breadcrumb component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Breadcrumb component. +The Breadcrumb component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/#keyboardinteraction) guidelines, making it accessible for users who rely on assistive technologies and keyboard navigation. The following keyboard shortcuts are supported by the Breadcrumb component: | **Press** | **To do this** | | --- | --- | @@ -60,12 +60,12 @@ The Breadcrumb component followed the [keyboard interaction](https://www.w3.org/ ## Ensuring accessibility -The Breadcrumb component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. +The Breadcrumb component's accessibility compliance is verified through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. -The accessibility compliance of the Breadcrumb component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/breadcrumb.html) in a new window to evaluate the accessibility of the Breadcrumb component with accessibility tools. +The accessibility compliance of the Breadcrumb component is demonstrated in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/breadcrumb.html) in a new window to evaluate the accessibility of the Breadcrumb component with accessibility tools. {% previewsample "https://ej2.syncfusion.com/accessibility/breadcrumb.html" %} ## See also -* [Accessibility in Syncfusion® React components](../common/accessibility) +* [Accessibility in Syncfusion® React components](../common/accessibility) \ No newline at end of file diff --git a/ej2-react/breadcrumb/data-binding.md b/ej2-react/breadcrumb/data-binding.md index 55c3e5584..2ae161f1d 100644 --- a/ej2-react/breadcrumb/data-binding.md +++ b/ej2-react/breadcrumb/data-binding.md @@ -2,7 +2,7 @@ layout: post title: Data binding in React Breadcrumb component | Syncfusion description: Learn here all about Data binding in Syncfusion React Breadcrumb component of Syncfusion Essential JS 2 and more. -control: Data binding +control: Breadcrumb platform: ej2-react documentation: ug domainurl: ##DomainURL## diff --git a/ej2-react/breadcrumb/getting-started.md b/ej2-react/breadcrumb/getting-started.md index e5e641c2b..f20a23f6c 100644 --- a/ej2-react/breadcrumb/getting-started.md +++ b/ej2-react/breadcrumb/getting-started.md @@ -2,19 +2,19 @@ layout: post title: Getting started with React Breadcrumb component | Syncfusion description: Checkout and learn about Getting started with React Breadcrumb component of Syncfusion Essential JS 2 and more details. -control: Getting started +control: Breadcrumb platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Getting Started +# Getting started with React Breadcrumb component -This section explains how to create a simple Breadcrumb, and configure its available functionalities in React. +This section explains how to create a simple Breadcrumb and configure its available functionalities in React. ## Dependencies -The following list of dependencies are required to use the Breadcrumb component in your application. +The following list of dependencies is required to use the Breadcrumb component in your application. ```javascript |-- @syncfusion/ej2-react-navigations @@ -28,11 +28,11 @@ The following list of dependencies are required to use the Breadcrumb component |-- @syncfusion/ej2-buttons ``` -## Setup your development environment +## Set up your development environment -To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production. +To set up a React application quickly, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production. -> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. +> **Note:** To create a React application using `create-react-app`, see this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app). To create a new React application, run the following command. @@ -54,7 +54,6 @@ cd my-app npm run dev ``` - ## Adding Syncfusion® packages All the available Essential® JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. @@ -106,7 +105,7 @@ export default App; ## Run the application -Now run the `npm run dev` command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser. +Run the following command to start the development server. This compiles your code and serves the application locally. ```bash npm run dev @@ -125,9 +124,9 @@ The following example shows a basic Breadcrumb component. {% previewsample "page.domainurl/code-snippet/breadcrumb/getting-started-cs5" %} -## Add Items to the Breadcrumb Component +## Add items to the Breadcrumb component -Use `items` property to bind items for Breadcrumb component. The below example demonstrates the basic rendering of Breadcrumb with items support. +Use the [`items`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#items) property to bind items for the Breadcrumb component. The example below demonstrates basic rendering with items support. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -142,7 +141,7 @@ Use `items` property to bind items for Breadcrumb component. The below example d ## Enable or Disable Navigation -This feature enables or disables the item navigation. By default, the navigation will be enabled when setting `Url` property. To prevent breadcrumb item navigation, set `enableNavigation` property as false in Breadcrumb. The below example shows enabling and disabling the navigation of Breadcrumb items. +This feature enables or disables the item navigation. By default, the navigation will be enabled when setting [`url`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#url) property. To prevent breadcrumb item navigation, set [`enableNavigation`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#enablenavigation) property as false in Breadcrumb. The below example shows enabling and disabling the navigation of Breadcrumb items. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/breadcrumb/icons.md b/ej2-react/breadcrumb/icons.md index 30a705b54..ad6b2bc4f 100644 --- a/ej2-react/breadcrumb/icons.md +++ b/ej2-react/breadcrumb/icons.md @@ -2,23 +2,23 @@ layout: post title: Icons in React Breadcrumb component | Syncfusion description: Learn here all about Icons in Syncfusion React Breadcrumb component of Syncfusion Essential JS 2 and more. -control: Icons platform: ej2-react +control: Breadcrumb documentation: ug domainurl: ##DomainURL## --- # Icons in React Breadcrumb component -The Breadcrumb component contains an icon/image to provide a visual representation of an item. +The Breadcrumb component supports icons and images to provide visual representation and enhance navigation context for each item. Icons can be implemented using font icons, custom images, or SVG graphics through the [`iconCss`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/breadcrumbItem/#iconcss) property, with flexible positioning options to suit different design requirements. -## Loading Icons in Breadcrumb Item +## Loading icon in Breadcrumb items -To load the icon on the breadcrumb item, set the [`iconCss`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/breadcrumbItem/#iconcss) property. +To load icons on breadcrumb items, configure the `iconCss` property with the appropriate CSS class or styling. -### Breadcrumb with font icons +### Breadcrumb with Font Icon -To place the font icon on the breadcrumb item, set the [`iconCss`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/breadcrumbItem/#iconcss) property to `e-icons` with the required icon CSS. By default, the icon is positioned to the left side of the item. +To place font icons on breadcrumb items, set the `iconCss` property to `e-icons` with the required icon CSS class. By default, icons are positioned to the left side of the item text. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -31,9 +31,9 @@ To place the font icon on the breadcrumb item, set the [`iconCss`](https://ej2.s {% previewsample "page.domainurl/code-snippet/breadcrumb/icon-position-cs1" %} -### Breadcrumb with image +### Breadcrumb with Image -In the Breadcrumb component, images can be added for the items using the [`iconCss`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/breadcrumbItem/#iconcss) property. In the following example, an image was added to the breadcrumb item by using the iconCss class `e-image-home` and specifying height and width. +In the Breadcrumb component, images can be added to items using the `iconCss` property. In the following example, an image is added to the breadcrumb item using the iconCss class `e-image-home` with specified height and width dimensions. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -46,9 +46,9 @@ In the Breadcrumb component, images can be added for the items using the [`iconC {% previewsample "page.domainurl/code-snippet/breadcrumb/breadcrumb-image-cs1" %} -### Breadcrumb with SVG image +### Breadcrumb with SVG Image -In the Breadcrumb component, SVG image can be added for the items using the [`iconCss`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/breadcrumbItem/#iconcss) property. In the following example, SVG image was added to the breadcrumb item by using the iconCss class `e-svg-home` and specifying height and width. +In the Breadcrumb component, SVG images can be added to items using the `iconCss` property. In the following example, an SVG image is added to the breadcrumb item using the iconCss class `e-svg-home` with specified height and width dimensions. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -63,7 +63,7 @@ In the Breadcrumb component, SVG image can be added for the items using the [`ic ## Icon Position -By default, the icon is positioned to the left side of the item in the Breadcrumb component. If you need to add the icon right to the breadcrumb item, add the `e-icon-right` class to the required item. In the following example, the `e-icon-right` class was added to the breadcrumb items using the [`beforeItemRender`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#beforeitemrender) event. +By default, icons are positioned to the left side of the item text in the Breadcrumb component. To position icons to the right of breadcrumb items, add the `e-icon-right` class to the required item. In the following example, the `e-icon-right` class is added to breadcrumb items using the [`beforeItemRender`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#beforeitemrender) event. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -76,9 +76,9 @@ By default, the icon is positioned to the left side of the item in the Breadcrum {% previewsample "page.domainurl/code-snippet/breadcrumb/icon-position-cs2" %} -## Icons only +## Icon Only -To display only icons for the items, add icons using the [`iconCss`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/breadcrumbItem/#iconcss) property. In the following example, breadcrumb items were demonstrated with only icons by providing the [`iconCss`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/breadcrumbItem/#iconcss) property. +To display only icons for items without text, add icons using the `iconCss` property while omitting the `text` property. In the following example, breadcrumb items are demonstrated with only icons by providing the `iconCss` property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -93,7 +93,7 @@ To display only icons for the items, add icons using the [`iconCss`](https://ej2 ## Show icon only for first item -To show icon only for the first item in the Breadcrumb component, add icons to the first item using the [`iconCss`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/breadcrumbItem/#iconcss) property. In the following example, the icon was provided only for the first item by setting the [`iconCss`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/breadcrumbItem/#iconcss) property. +To display an icon only for the first item in the Breadcrumb component, add icons to the first item using the `iconCss` property while leaving other items without icons. In the following example, the icon is provided only for the first item by setting the `iconCss` property. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/breadcrumb/navigation.md b/ej2-react/breadcrumb/navigation.md index 5e7316ed0..d96e5c38e 100644 --- a/ej2-react/breadcrumb/navigation.md +++ b/ej2-react/breadcrumb/navigation.md @@ -2,7 +2,7 @@ layout: post title: Navigation in React Breadcrumb component | Syncfusion description: Learn here all about Navigation in Syncfusion React Breadcrumb component of Syncfusion Essential JS 2 and more. -control: Navigation +control: Breadcrumb platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,15 +10,15 @@ domainurl: ##DomainURL## # Navigation in React Breadcrumb component -The breadcrumb item navigates to the path while clicking the item. To enable navigation, [`url`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/breadcrumbItem/#url) property was bound to the items. +The Breadcrumb component enables navigation to specific paths when users click breadcrumb items. To enable navigation functionality, bind the [`url`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/breadcrumbItem/#url) property to the breadcrumb items. ## URL -In the Breadcrumb component, the item represents the url. The breadcrumb items can be provided with either relative or absolute URL. +In the Breadcrumb component, each item represents a URL destination. Breadcrumb items can be configured with either relative or absolute URLs to define navigation paths. ### Relative URL -The breadcrumb items with relative URL contain only the path but do not locate the path or server. The following example represents the breadcrumb items with relative url. +Breadcrumb items with relative URLs contain only the path segment without specifying the complete location or server details. The following example demonstrates breadcrumb items configured with relative URLs. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -33,7 +33,7 @@ The breadcrumb items with relative URL contain only the path but do not locate t ### Absolute URL -The breadcrumb items with Absolute URL contain the path and locate to the resource if the static url is bound to the breadcrumb item. The following example represents the breadcrumb items with static url. +Breadcrumb items with absolute URLs contain the complete path and navigate directly to the specified resource when the absolute URL is bound to the breadcrumb item. The following example demonstrates breadcrumb items configured with absolute URLs. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -48,7 +48,7 @@ The breadcrumb items with Absolute URL contain the path and locate to the resour ## Enable navigation for last Breadcrumb item -The feature enables the last item of the Breadcrumb component by setting the [`enableActiveItemNavigation`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#enableactiveitemnavigation) property to true. In the following example, the last item of the `Breadcrumb` was enabled. +By default, the last breadcrumb item (active item) is not clickable. To enable navigation for the last item, set the [`enableActiveItemNavigation`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#enableactiveitemnavigation) property to `true`. The following example demonstrates enabling navigation for the last breadcrumb item. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/breadcrumb/overflow-mode.md b/ej2-react/breadcrumb/overflow-mode.md index 8df15ac24..752e1f7d3 100644 --- a/ej2-react/breadcrumb/overflow-mode.md +++ b/ej2-react/breadcrumb/overflow-mode.md @@ -1,18 +1,20 @@ --- layout: post -title: Overflow mode in React Breadcrumb component | Syncfusion +title: Overflow in React Breadcrumb component | Syncfusion description: Learn here all about Overflow mode in Syncfusion React Breadcrumb component of Syncfusion Essential JS 2 and more. -control: Overflow mode +control: Breadcrumb platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Overflow mode in React Breadcrumb component +# Overflow in React Breadcrumb component -In the Breadcrumb component, [`maxItems`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#maxitems) and [`overflowMode`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#overflowmode) properties were used to limit the number of breadcrumb items to be displayed. +## Overflow Mode -In the following example, the [`maxItems`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#maxitems) is set as 3 with overflowMode as Default. To prevent breadcrumb item navigation, the [`enableNavigation`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#enablenavigation) property has been set to false in the Breadcrumb component. +The Breadcrumb component uses the [`maxItems`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#maxitems) and [`overflowMode`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#overflowmode) properties to control how breadcrumb items are displayed when they exceed the available container space. The `maxItems` property sets the maximum number of items to display, while [`overflowMode`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#overflowmode) determines the behavior for handling additional items. + +In the following example, maxItems is set to 3 with overflowMode as Menu (default). To prevent breadcrumb item navigation, the [`enableNavigation`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#enablenavigation) property has been set to false in the Breadcrumb component. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -36,7 +38,7 @@ The following overflow modes are available in the Breadcrumb component. ## Collapsed -Collapsed mode shows the first and last Breadcrumb items and hides the remaining items with a collapsed icon. When the collapsed icon is clicked, all items become visible and navigable. +Collapsed mode displays the first and last breadcrumb items while hiding intermediate items behind a collapsed icon (ellipsis). When the collapsed icon is clicked, all hidden items become visible and navigable, providing a compact view that maintains access to all navigation levels. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -51,7 +53,7 @@ Collapsed mode shows the first and last Breadcrumb items and hides the remaining ## Menu -Menu mode shows the number of Breadcrumb items that can be accommodated within the container space and creates a submenu with the remaining items. +Menu mode displays the maximum number of breadcrumb items that fit within the container space and organizes the remaining items into a dropdown submenu. This mode provides efficient space utilization while keeping all items accessible through the overflow menu. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -66,7 +68,7 @@ Menu mode shows the number of Breadcrumb items that can be accommodated within t ## Wrap -Wrap mode wraps the items to multiple lines when the Breadcrumb’s width exceeds the container space. +Wrap mode automatically wraps breadcrumb items to multiple lines when the total width exceeds the container space. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -81,7 +83,7 @@ Wrap mode wraps the items to multiple lines when the Breadcrumb’s width exceed ## Scroll -Scroll mode shows an HTML scroll bar when the Breadcrumb’s width exceeds the container space. +Scroll mode displays an HTML scroll bar when the breadcrumb width exceeds the container space, allowing users to horizontally scroll to view hidden items. This mode maintains the single-line layout while providing access to all items through scrolling. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -96,7 +98,7 @@ Scroll mode shows an HTML scroll bar when the Breadcrumb’s width exceeds the c ## Hidden -Hidden mode shows the maximum number of items possible in the container space and hides the remaining items. Clicking on a previous item will make the hidden item visible. +Hidden mode displays the maximum number of items that fit within the container space and completely hides the remaining items. Hidden items become visible when users navigate to previous levels by clicking on visible breadcrumb items, creating a dynamic navigation experience. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/breadcrumb/template.md b/ej2-react/breadcrumb/template.md index d76ab11d5..24fd95927 100644 --- a/ej2-react/breadcrumb/template.md +++ b/ej2-react/breadcrumb/template.md @@ -2,7 +2,7 @@ layout: post title: Template in React Breadcrumb component | Syncfusion description: Learn here all about Template in Syncfusion React Breadcrumb component of Syncfusion Essential JS 2 and more. -control: Template +control: Breadcrumb platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Template in React Breadcrumb component -The Breadcrumb component provides a way to customize the items using [`itemTemplate`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#itemtemplate) and the separators using [`separatorTemplate`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#separatortemplate) properties. +The Breadcrumb component provides flexible template customization options to create rich, interactive navigation experiences. Use the [`itemTemplate`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#itemtemplate) property to customize individual breadcrumb items and the [`separatorTemplate`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#separatortemplate) property to customize the separators between items, enabling full control over the visual presentation and functionality. ## Item Template -In the following example, Shopping Cart details are used as breadcrumb Items and the items are customized by the chips component using [`itemTemplate`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#itemtemplate). +The following example demonstrates customizing breadcrumb items using the [`itemTemplate`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#itemtemplate) property. This shopping cart navigation scenario shows how breadcrumb items can be enhanced with chip components to create a more engaging user interface. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -29,7 +29,7 @@ In the following example, Shopping Cart details are used as breadcrumb Items and ## Separator Template -In the following example, the separators are customized with icons using [`separatorTemplate`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#separatortemplate). +The following example shows how to customize separators between breadcrumb items using the [`separatorTemplate`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#separatortemplate) property. Custom icons replace the default separator to create a more visually distinctive navigation path. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -44,7 +44,7 @@ In the following example, the separators are customized with icons using [`sepa ## Customize Specific Item Template -The specific breadcrumb item can be customizable using itemTemplate with conditional rendering. In the following example, added the span element only for the `breadcrumb` text in breadcrumb item. +Individual breadcrumb items can be customized selectively using [`itemTemplate`](https://ej2.syncfusion.com/react/documentation/api/breadcrumb/#itemtemplate) with conditional rendering logic. The following example demonstrates how to apply custom styling with a span element specifically to items containing "Breadcrumb" in their text, while leaving other items with default styling. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/card/action-buttons.md b/ej2-react/card/action-buttons.md index 0f8a8f92f..a78fbfa64 100644 --- a/ej2-react/card/action-buttons.md +++ b/ej2-react/card/action-buttons.md @@ -2,7 +2,7 @@ layout: post title: Action buttons in React Card component | Syncfusion description: Learn here all about Action buttons in Syncfusion React Card component of Syncfusion Essential JS 2 and more. -control: Action buttons +control: Card platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,9 +10,9 @@ domainurl: ##DomainURL## # Action buttons in React Card component -You can include Action buttons within the Card and customize them. Action button is a `div` element with `e-card-actions` class followed by button tag or anchor tag within the card root element. +You can include Action buttons within the Card and customize them. Action buttons are contained within a `div` element with `e-card-actions` class, which holds button or anchor elements within the card root element. -* For adding action buttons you can create button or anchor tag with `e-card-btn` class within the card action element. +* For adding action buttons, create button or anchor tag with `e-card-btn` class within the card action container element. ```
    @@ -25,7 +25,7 @@ You can include Action buttons within the Card and customize them. Action button ## Vertical -By default, action buttons positioned in horizontal alignment , and also it can be aligned to show in vertical alignment by adding `e-card-vertical` class. +By default, action buttons are positioned horizontally, and they can also be aligned vertically by adding the `e-card-vertical` class. ```
    @@ -70,4 +70,4 @@ By default, action buttons positioned in horizontal alignment , and also it can ## See Also -* [How to integrate other component inside the card](./how-to/integrate-other-component-inside-the-card/) +* [How to integrate other component inside the card](./how-to/integrate-other-component-inside-the-card) diff --git a/ej2-react/card/card-image.md b/ej2-react/card/card-image.md index 8fc1e2cb3..80f6d58bd 100644 --- a/ej2-react/card/card-image.md +++ b/ej2-react/card/card-image.md @@ -2,7 +2,7 @@ layout: post title: Card image in React Card component | Syncfusion description: Learn here all about Card image in Syncfusion React Card component of Syncfusion Essential JS 2 and more. -control: Card image +control: Card platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -12,9 +12,9 @@ domainurl: ##DomainURL## ## Images -The Card supports to include images within the elements, you can add image as direct element anywhere inside card root by adding the `e-card-image` class to `div` element. Using the class defined, you can write CSS styles to load images to that element. +The Card component supports including images within its elements. You can add an image as a direct element anywhere inside the card root by adding the `e-card-image` class to a `div` element. Using this class, you can write CSS styles to load images into that element. -> By default, card images occupies full width of its parent element. +> By default, card images occupy the full width of their parent element. ```
    @@ -25,7 +25,7 @@ The Card supports to include images within the elements, you can add image as di ### Title -Card image is supported to include a title or caption for the image. By default, Title is placed over the image on left-bottom position with overlay. +Card images support including a title or caption for the image. By default, the title is placed over the image in the left-bottom position with an overlay effect. ```
    @@ -69,9 +69,10 @@ Card image is supported to include a title or caption for the image. By default, ## Divider -Divider used to separate the elements inside the card. You can add divider inside the card elements to separate it. +Dividers are used to separate elements inside the card. You can add a divider inside the card elements to create visual separation between different sections. + +* Place a `div` element with the `e-card-separator` class inside the card element to add a divider. -* Place the `div` element with `e-card-separator` class inside the card element for adding a divider. `[Class-component]` diff --git a/ej2-react/card/getting-started.md b/ej2-react/card/getting-started.md index 735d04619..ee2e4ba32 100644 --- a/ej2-react/card/getting-started.md +++ b/ej2-react/card/getting-started.md @@ -2,39 +2,41 @@ layout: post title: Getting started with React Card component | Syncfusion description: Checkout and learn about Getting started with React Card component of Syncfusion Essential JS 2 and more details. -control: Getting started +control: Card platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Getting Started +# Getting started with React Card -This section explains how to create a simple **Card** using Styles, and how to configure the structure for the header section, Horizontal, action buttons, content section. +This section explains how to create a simple **Card** component with basic styling, including configuring the header, actions, and content sections. ## Dependencies -The Card Component is pure CSS component so no specific dependencies to render the card. +The Card component is styled entirely via CSS. To use it, include the appropriate CSS files; no additional JavaScript dependencies are required. -## Setup for Local Development +## Setup for local development -To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production. +To set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production. -> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. +> **Note:** To create a React application using `create-react-app`, see the [Syncfusion documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app). -To create a new React application, run the following command. +To create a new React application, run: ```bash npm create vite@latest my-app ``` -To set-up a React application in TypeScript environment, run the following command. + +For a TypeScript environment, run: ```bash npm create vite@latest my-app -- --template react-ts cd my-app npm run dev ``` -To set-up a React application in JavaScript environment, run the following command. + +For a JavaScript environment, run: ```bash npm create vite@latest my-app -- --template react @@ -42,14 +44,14 @@ cd my-app npm run dev ``` -## Adding Syncfusion® packages +## Add Syncfusion® packages -All the available Essential® JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. +All Essential® JS 2 packages are published on the [npm public registry](https://www.npmjs.com/~syncfusionorg). -Install the below required dependency package in order to use the `Card` component in your application. +Install the required package for the `Card` component: ```bash -npm install @syncfusion/ej2-layouts –save +npm install @syncfusion/ej2-layouts --save ``` * The Card CSS files are available in the `ej2-layouts` package folder. This can be referenced in your application using the following code. @@ -60,7 +62,7 @@ npm install @syncfusion/ej2-layouts –save @import '../node_modules/@syncfusion/ej2-layouts/styles/material.css'; ``` -## Adding a simple Card +## Add a simple Card * Add the HTML `div` element with `e-card` class into your `index.html`. @@ -72,19 +74,19 @@ npm install @syncfusion/ej2-layouts –save
    ``` -## Adding a header to the card +## Add a header to the card You can create cards with a header in a specific structure. For adding header you need to create `div` element and add `e-card-header` class. -* You can include heading inside the card header by adding an `div` element with `e-card-header-caption` class, and also content will be added by adding element with `e-card-content`. For detailed information, refer to the [Header and Content](./header-content/). +* You can include heading inside the card header by adding an `div` element with `e-card-header-caption` class, and also content will be added by adding element with `e-card-content`. For detailed information, refer to the [Header and Content](./header-content). ``` -
    --> Root Element -
    --> Root Header Element -
    --> Root Heading Element -
    --> Heading Title Element +
    +
    +
    +
    -
    --> Card content Element +
    ``` diff --git a/ej2-react/card/header-content.md b/ej2-react/card/header-content.md index b8733aeb9..cd109af72 100644 --- a/ej2-react/card/header-content.md +++ b/ej2-react/card/header-content.md @@ -2,7 +2,7 @@ layout: post title: Header content in React Card component | Syncfusion description: Learn here all about Header content in Syncfusion React Card component of Syncfusion Essential JS 2 and more. -control: Header content +control: Card platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -12,14 +12,14 @@ domainurl: ##DomainURL## ## Header -The Card can be created with header title, sub title and images. For adding header you need to create `div` element with the class `e-card-header` added. +The Card component can be created with header title, subtitle, and images. To add a header, create a `div` element with the class `e-card-header`. -Card provides below elements and corresponding class definitions to include header. +The Card provides the following elements and corresponding class definitions to include header content: Elements | Description ------------ | ------------- -Caption | It is the wrapper element to include title and sub-title. -Image | It supports to include header images with the specified dimensions. +Caption | The wrapper element that includes title and subtitle content. +Image | Supports header images with specified dimensions and positioning. Class | Description ------------ | ------------- @@ -29,19 +29,19 @@ Class | Description `e-card-header-image` | To include heading image within the header. `e-card-corner` | To add rounded corner for the image. -### Title and Subtitle +### Adding Title and Subtitle -For adding header to the Card , you need to create wrapper `div` element with `e-card-header-caption` class. +To add a header to the Card component, create a wrapper `div` element with the `e-card-header-caption` class. -* Place the `div` element with `e-card-header-title` class inside the header caption for adding main title. +* Place a `div` element with the `e-card-header-title` class inside the header caption for the main title. -* Place the div element with `e-card-sub-title` class inside the header caption element for adding sub-title. +* Place a `div` element with the `e-card-sub-title` class inside the header caption element for the subtitle. -### Image +### Header Image -Card header has an option for adding images in the header. It is aligned with either before or after the header based on the HTML element positioned in the header structure. +The Card header provides an option for adding images within the header section. Images are positioned either before or after the header caption based on the HTML element's position in the header structure. -* The header image can be added by creating a `div` element with `e-card-header-image` class which can be placed before or after the header caption wrapper element. +* Add a header image by creating a `div` element with the `e-card-header-image` class, which can be placed before or after the header caption wrapper element. `[Class-component]` @@ -77,10 +77,10 @@ Card header has an option for adding images in the header. It is aligned with ei ## Content -Content in Card holds texts, images, links and all possible HTML elements. Its adaptable within the Card root element. +The content section in Card components holds text, images, links, and all possible HTML elements. Content is adaptable within the Card root element and provides flexibility for various content types. * Create a `div` element with the class `e-card-content`. -* Place content `div` element in the Card root element or within any Card inner elements. +* Place the content `div` element within the Card root element or inside any Card inner elements. `[Class-component]` diff --git a/ej2-react/card/horizontal.md b/ej2-react/card/horizontal.md index 0cf8c339d..c021443cd 100644 --- a/ej2-react/card/horizontal.md +++ b/ej2-react/card/horizontal.md @@ -2,7 +2,7 @@ layout: post title: Horizontal in React Card component | Syncfusion description: Learn here all about Horizontal in Syncfusion React Card component of Syncfusion Essential JS 2 and more. -control: Horizontal +control: Card platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,8 +10,9 @@ domainurl: ##DomainURL## # Horizontal in React Card component -By default, all the card elements are aligned vertically one after the other as in the DOM. -You can achieve the element to align horizontally as well by adding the class `e-card-horizontal` in the root card element. +By default, all card elements are aligned vertically in a stacked layout following the natural DOM flow. The horizontal layout provides an alternative arrangement where card elements are positioned side-by-side, creating a more compact and visually engaging presentation for content that benefits from lateral organization. + +To achieve horizontal alignment, add the `e-card-horizontal` class to the root card element. This transforms the default vertical layout into a horizontal arrangement where child elements flow from left to right. ## Stacked cards @@ -20,14 +21,14 @@ This will align the stacked section vertically aligned differentiating from hori Class | Description ------------ | ------------- -`e-card-horizontal` | To align card elements horizontally. -`e-card-stacked` | To align elements vertically within the horizontal layout. +`e-card-horizontal` | Aligns card elements horizontally in a side-by-side layout. +`e-card-stacked` | Forces vertical alignment for specific sections within a horizontal layout. ```
    - Sample --> Aligned in horizontal -
    --> Aligned in horizontal - // Inside the element all are aligned vertical directions + Sample --> Aligned horizontally +
    --> Horizontal container + // Inside this element, all content flows vertically
    ``` diff --git a/ej2-react/card/how-to/customize-the-card-image-title-position.md b/ej2-react/card/how-to/customize-the-card-image-title-position.md index 4e886ae54..1528ab1e5 100644 --- a/ej2-react/card/how-to/customize-the-card-image-title-position.md +++ b/ej2-react/card/how-to/customize-the-card-image-title-position.md @@ -1,8 +1,7 @@ --- layout: post -title: Customize the card image title position in React Card component | Syncfusion -description: Learn here all about Customize the card image title position in Syncfusion React Card component of Syncfusion Essential JS 2 and more. -control: Customize the card image title position +title: Customize Image Title Position in React Card | Syncfusion +description: Learn here all about customizing the card image title position in Syncfusion React Card component of Syncfusion Essential JS 2 and more. platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,7 +9,7 @@ domainurl: ##DomainURL## # Customize the card image title position in React Card component -Card Image titles are placed as always Bottom-Left Corner only, we can manually customize to placing titles anywhere over the image by adding styles. +By default, card image titles are positioned in the bottom-left corner with an overlay effect. You can customize the title placement to any position over the image by applying custom CSS styles to override the default positioning. `[Class-component]` diff --git a/ej2-react/card/how-to/integrate-other-component-inside-the-card.md b/ej2-react/card/how-to/integrate-other-component-inside-the-card.md index 35057ae64..f67b40f36 100644 --- a/ej2-react/card/how-to/integrate-other-component-inside-the-card.md +++ b/ej2-react/card/how-to/integrate-other-component-inside-the-card.md @@ -1,8 +1,8 @@ --- layout: post -title: Integrate other component inside the card in React Card component | Syncfusion +title: Integrate UI Elements into React Card Component | Syncfusion description: Learn here all about Integrate other component inside the card in Syncfusion React Card component of Syncfusion Essential JS 2 and more. -control: Integrate other component inside the card +control: Card platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Integrate other component inside the card in React Card component -You can integrate any component inside the card element. Here ListView component is placed inside the card for showcasing the To-Do list. +The Card component provides a flexible container that can host any other component within its content area. This approach enables rich, interactive interfaces by combining the structured layout benefits of cards with the functionality of other components. Here, the ListView component is integrated inside the card to create an organized To-Do list interface, demonstrating how cards can enhance content presentation and user experience. `[Class-component]` diff --git a/ej2-react/card/style.md b/ej2-react/card/style.md index 3c73e95f6..98f2d2bdb 100644 --- a/ej2-react/card/style.md +++ b/ej2-react/card/style.md @@ -2,7 +2,7 @@ layout: post title: Style in React Card component | Syncfusion description: Learn here all about Style in Syncfusion React Card component of Syncfusion Essential JS 2 and more. -control: Style +control: Card platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Style in React Card component -The following content provides the exact CSS structure that can be used to modify the control’s appearance based on user preference. +The following content provides the exact CSS structure that can be used to modify the control's appearance based on user preference. ## Customizing the card -Use the following CSS to customize the card properties. +Use the following CSS to customize the card appearance. ```css .e-card { @@ -24,9 +24,9 @@ Use the following CSS to customize the card properties. } ``` -## Customizing the Header element +## Customizing the header element -Use the following CSS to customize the Header element properties. +Use the following CSS to customize the header element appearance. ```css .e-card .e-card-header { @@ -37,7 +37,7 @@ Use the following CSS to customize the Header element properties. ## Customizing the card content -Use the following CSS to customize the card content properties. +Use the following CSS to customize the card content appearance. ```css .e-card .e-card-content { @@ -48,10 +48,9 @@ Use the following CSS to customize the card content properties. } ``` -## Divider used to separate the elements inside the card - -Use the following CSS to customize the Divider used to separate the elements inside the card properties. +## Customizing the divider used to separate elements inside the card +Use the following CSS to customize the divider used to separate elements inside the card. ```css .e-card .e-card-separator { padding-bottom: 30px; @@ -60,7 +59,7 @@ Use the following CSS to customize the Divider used to separate the elements ins ## Including image within card element -Use the following CSS to Include image within card element. +Use the following CSS to include image within card element. ```css .e-card .e-card-image { @@ -70,9 +69,9 @@ Use the following CSS to Include image within card element. } ``` -## Including a title or caption for the image +## Including title or caption for the image -Use the following CSS to Include a title or caption for the image. +Use the following CSS to include title or caption for the image. ```css .e-card .e-card-image .e-card-title { @@ -81,9 +80,9 @@ Use the following CSS to Include a title or caption for the image. } ``` -## To include heading image within the header +## Including heading image within the header -Use the following CSS to Include heading image within the header. +Use the following CSS to include heading image within the header. ```css .e-card .e-card-header .e-card-header-image { @@ -92,9 +91,9 @@ Use the following CSS to Include heading image within the header. } ``` -## Customizing the Header main title +## Customizing the header main title -Use the following CSS to Customize the Header main title. +Use the following CSS to customize the header main title. ```css .e-card .e-card-header .e-card-header-caption .e-card-header-title { @@ -103,9 +102,9 @@ Use the following CSS to Customize the Header main title. } ``` -## Customizing the Header subtitle +## Customizing the header subtitle -Use the following CSS to Customize the Header subtitle. +Use the following CSS to customize the header subtitle. ```css .e-card .e-card-header .e-card-header-caption .e-card-sub-title { @@ -116,7 +115,7 @@ Use the following CSS to Customize the Header subtitle. ## Including action buttons or anchor tags -Use the following CSS to Include action buttons or anchor tags. +Use the following CSS to include action buttons or anchor tags. ```css .e-card .e-card-actions .e-card-btn { @@ -125,7 +124,7 @@ Use the following CSS to Include action buttons or anchor tags. } ``` -## To align card elements horizontally +## Aligning card elements horizontally Use the following CSS to align card elements horizontally. @@ -136,7 +135,7 @@ Use the following CSS to align card elements horizontally. } ``` -## To align elements vertically within the horizontal layout +## Aligning elements vertically within the horizontal layout Use the following CSS to align elements vertically within the horizontal layout. diff --git a/ej2-react/code-snippet/ai-assistview/speech/stt/app/index.jsx b/ej2-react/code-snippet/ai-assistview/speech/stt/app/index.jsx new file mode 100644 index 000000000..951068a4a --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/speech/stt/app/index.jsx @@ -0,0 +1,177 @@ +import * as React from 'react'; +import * as ReactDOM from "react-dom"; +import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat'; +import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; +import { SpeechToTextComponent } from '@syncfusion/ej2-react-inputs'; +import { marked } from 'marked'; + +let azureOpenAIApiKey = 'Your_Azure_OpenAI_API_Key'; // Your_Azure_OpenAI_API_Key +let azureOpenAIEndpoint = 'Your_Azure_OpenAI_Endpoint'; // Your_Azure_OpenAI_Endpoint +let azureOpenAIApiVersion = 'Your_Azure_OpenAI_API_Version'; // Your_Azure_OpenAI_API_Version +let azureDeploymentName = 'Your_Deployment_Name'; // Your_Deployment_Name +let stopStreaming = false; + +function App() { + let assistInstance = React.useRef(null); + let speechToTextObj = React.useRef(null); + let assistviewFooter = React.useRef(null); + let assistviewSendButton = React.useRef(null); + + const assistViewToolbarSettings = { + items: [{ iconCss: 'e-icons e-refresh', align: 'Right' }], + itemClicked: (args) => toolbarItemClicked(args) + }; + + const promptToolbarSettings = { + itemClicked: (args) => { + if (args.item.iconCss === "e-icons e-assist-edit") { + assistviewFooter.current.innerHTML = assistInstance.current.prompts[args.dataIndex].prompt; + toggleButtons(); + } + } + }; + + const bannerTemplate = () => { + return ( +
    +
    + Click the below mic-button to convert your voice to text. +
    + ); + }; + + const footerTemplate = () => { + return ( +
    + +
    + + +
    +
    + ); + }; + + const streamResponse = async (response) => { + let lastResponse = ""; + const responseUpdateRate = 10; + let i = 0; + const responseLength = response.length; + while (i < responseLength && !stopStreaming) { + lastResponse += response[i]; + i++; + if (i % responseUpdateRate === 0 || i === responseLength) { + const htmlResponse = marked.parse(lastResponse); + assistInstance.current?.addPromptResponse(htmlResponse, i === responseLength); + assistInstance.current?.scrollToBottom(); + } + await new Promise(resolve => setTimeout(resolve, 15)); // Delay for streaming effect + } + toggleButtons(); + }; + + const onPromptRequest = (args) => { + const url = + azureOpenAIEndpoint.replace(/\/$/, '') + + `/openai/deployments/${encodeURIComponent(azureDeploymentName)}/chat/completions` + + `?api-version=${encodeURIComponent(azureOpenAIApiVersion)}`; + + fetch(url, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'api-key': azureOpenAIApiKey, + }, + body: JSON.stringify({ + messages: [{ role: 'user', content: args.prompt }], + temperature: 0.7, + max_tokens: 500 + }), + }) + .then(response => response.json()) + .then(reply => { + const responseText = reply.choices[0].message.content.trim() || 'No response received.'; + stopStreaming = false; + streamResponse(responseText); + }) + .catch((error) => { + assistInstance.current.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please check your API key, Deployment model, endpoint or try again later.', true); + stopStreaming = true; + toggleButtons(); + }); + }; + + const toolbarItemClicked = (args) => { + if (args.item.iconCss === 'e-icons e-refresh') { + assistInstance.current.prompts = []; + } + }; + + const sendIconClicked = () => { + assistInstance.current.executePrompt(assistviewFooter.current.innerText); + assistviewFooter.current.innerText = ''; + }; + + const onTranscriptChange = (args) => { + if (assistviewFooter.current) { + assistviewFooter.current.innerText = args.transcript; + } + }; + + const onListeningStop = () => { + toggleButtons(); + }; + + const onCreated = () => { + toggleButtons(); + }; + + const toggleButtons = () => { + const assistviewFooterEle = assistviewFooter.current; + const sendButtonEle = assistviewSendButton.current?.element; + const speechButtonEle = speechToTextObj.current?.element; + if (!assistviewFooterEle || !sendButtonEle || !speechButtonEle) { + return; + } + const hasText = assistviewFooterEle.innerText.trim() !== ''; + sendButtonEle.classList.toggle('visible', hasText); + speechButtonEle.classList.toggle('visible', !hasText); + if (!hasText && (assistviewFooterEle.innerHTML.trim() === '' || assistviewFooterEle.innerHTML === '
    ')) { + assistviewFooterEle.innerHTML = ''; + } + }; + + const handleKeyDown = (event) => { + if (event.key === 'Enter' && !event.shiftKey) { + sendIconClicked(); + event.preventDefault(); + } + }; + + const handleStopResponse = () => { + stopStreaming = true; + toggleButtons(); + }; + + React.useEffect(() => { + // Defer toggleButtons until after mount to ensure refs are ready + toggleButtons(); + }, []); + + return ( +
    + +
    + ); +} + +ReactDOM.render(, document.getElementById('container')); \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/speech/stt/app/index.tsx b/ej2-react/code-snippet/ai-assistview/speech/stt/app/index.tsx new file mode 100644 index 000000000..dc1bccdd5 --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/speech/stt/app/index.tsx @@ -0,0 +1,177 @@ +import { AIAssistViewComponent, PromptRequestEventArgs, PromptToolbarSettingsModel, ToolbarItemClickedEventArgs, ToolbarSettingsModel } from '@syncfusion/ej2-react-interactive-chat'; +import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; +import { SpeechToTextComponent } from '@syncfusion/ej2-react-inputs'; +import * as React from 'react'; +import * as ReactDOM from "react-dom"; +import { marked } from 'marked'; + +let azureOpenAIApiKey = 'Your_Azure_OpenAI_API_Key'; // Your_Azure_OpenAI_API_Key +let azureOpenAIEndpoint = 'Your_Azure_OpenAI_Endpoint'; // Your_Azure_OpenAI_Endpoint +let azureOpenAIApiVersion = 'Your_Azure_OpenAI_API_Version'; // Your_Azure_OpenAI_API_Version +let azureDeploymentName = 'Your_Deployment_Name'; // Your_Deployment_Name +let stopStreaming = false; + +function App() { + const assistInstance = React.useRef(null); + const speechToTextObj = React.useRef(null); + const assistviewFooter = React.useRef(null); + const assistviewSendButton = React.useRef(null); + + const assistViewToolbarSettings: ToolbarSettingsModel = { + items: [{ iconCss: 'e-icons e-refresh', align: 'Right' }], + itemClicked: (args) => toolbarItemClicked(args) + }; + + const promptToolbarSettings: PromptToolbarSettingsModel = { + itemClicked: (args) => { + if (args.item.iconCss === "e-icons e-assist-edit") { + assistviewFooter.current.innerHTML = assistInstance.current.prompts[args.dataIndex].prompt; + toggleButtons(); + } + } + }; + + const bannerTemplate = () => { + return ( +
    +
    + Click the below mic-button to convert your voice to text. +
    + ); + }; + + const footerTemplate = () => { + return ( +
    + +
    + + +
    +
    + ); + }; + + const streamResponse = async (response: string) => { + let lastResponse = ""; + const responseUpdateRate = 10; + let i = 0; + const responseLength = response.length; + while (i < responseLength && !stopStreaming) { + lastResponse += response[i]; + i++; + if (i % responseUpdateRate === 0 || i === responseLength) { + const htmlResponse = marked.parse(lastResponse); + assistInstance.current?.addPromptResponse(htmlResponse, i === responseLength); + assistInstance.current?.scrollToBottom(); + } + await new Promise(resolve => setTimeout(resolve, 15)); // Delay for streaming effect + } + toggleButtons(); + }; + + const onPromptRequest = (args: PromptRequestEventArgs) => { + const url = + azureOpenAIEndpoint.replace(/\/$/, '') + + `/openai/deployments/${encodeURIComponent(azureDeploymentName)}/chat/completions` + + `?api-version=${encodeURIComponent(azureOpenAIApiVersion)}`; + + fetch(url, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'api-key': azureOpenAIApiKey, + }, + body: JSON.stringify({ + messages: [{ role: 'user', content: args.prompt }], + temperature: 0.7, + max_tokens: 500 + }), + }) + .then(response => response.json()) + .then(reply => { + const responseText = reply.choices[0].message.content.trim() || 'No response received.'; + stopStreaming = false; + streamResponse(responseText); + }) + .catch((error: unknown) => { + assistInstance.current.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please check your API key, Deployment model, endpoint or try again later.', true); + stopStreaming = true; + toggleButtons(); + }); + }; + + const toolbarItemClicked = (args: ToolbarItemClickedEventArgs) => { + if (args.item.iconCss === 'e-icons e-refresh') { + assistInstance.current.prompts = []; + } + }; + + const sendIconClicked = () => { + assistInstance.current.executePrompt(assistviewFooter.current.innerText); + assistviewFooter.current.innerText = ''; + }; + + const onTranscriptChange = (args: any) => { + if (assistviewFooter.current) { + assistviewFooter.current.innerText = args.transcript; + } + }; + + const onListeningStop = () => { + toggleButtons(); + }; + + const onCreated = () => { + toggleButtons(); + }; + + const toggleButtons = () => { + const assistviewFooterEle = assistviewFooter.current; + const sendButtonEle = assistviewSendButton.current?.element; + const speechButtonEle = speechToTextObj.current?.element; + if (!assistviewFooterEle || !sendButtonEle || !speechButtonEle) { + return; + } + const hasText = assistviewFooterEle.innerText.trim() !== ''; + sendButtonEle.classList.toggle('visible', hasText); + speechButtonEle.classList.toggle('visible', !hasText); + if (!hasText && (assistviewFooterEle.innerHTML.trim() === '' || assistviewFooterEle.innerHTML === '
    ')) { + assistviewFooterEle.innerHTML = ''; + } + }; + + const handleKeyDown = (event) => { + if (event.key === 'Enter' && !event.shiftKey) { + sendIconClicked(); + event.preventDefault(); + } + }; + + const handleStopResponse = () => { + stopStreaming = true; + toggleButtons(); + }; + + React.useEffect(() => { + // Defer toggleButtons until after mount to ensure refs are ready + toggleButtons(); + }, []); + + return ( +
    + +
    + ); +} + +ReactDOM.render(, document.getElementById('container')); \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/speech/stt/index.css b/ej2-react/code-snippet/ai-assistview/speech/stt/index.css new file mode 100644 index 000000000..7a84a4acd --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/speech/stt/index.css @@ -0,0 +1,84 @@ +/* Represents the styles for loader */ +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +.integration-speechtotext-section { + height: 350px; + width: 650px; + margin: 0 auto; +} + +.integration-speechtotext-section .e-view-container { + margin: auto; +} +.integration-speechtotext-section .e-banner-view { + margin-left: 0; +} +.integration-speechtotext-section .banner-content .e-listen-icon:before { + font-size: 25px; +} + +.integration-speechtotext-section .banner-content { + display: flex; + flex-direction: column; + gap: 10px; + text-align: center; +} + +.integration-speechtotext-section #assistview-sendButton { + width: 40px; + height: 40px; + font-size: 20px; + border: none; + background: none; + cursor: pointer; +} + +.integration-speechtotext-section #speechToText.visible, +.integration-speechtotext-section #assistview-sendButton.visible { + display: inline-block; +} + +.integration-speechtotext-section #speechToText, +.integration-speechtotext-section #assistview-sendButton { + display: none; +} + +@media only screen and (max-width: 750px) { + .integration-speechtotext-section { + width: 100%; + } +} + +.integration-speechtotext-section .e-footer-wrapper { + display: flex; + border: 1px solid #c1c1c1; + padding: 5px 5px 5px 10px; + margin: 5px 5px 0 5px; + border-radius: 30px; +} + +.integration-speechtotext-section .content-editor { + width: 100%; + overflow-y: auto; + font-size: 14px; + min-height: 25px; + max-height: 200px; + padding: 10px; +} + +.integration-speechtotext-section .content-editor[contentEditable='true']:empty:before { + content: attr(placeholder); + color: #6b7280; + font-style: italic; +} + +.integration-speechtotext-section .option-container { + align-self: flex-end; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/speech/stt/index.html b/ej2-react/code-snippet/ai-assistview/speech/stt/index.html new file mode 100644 index 000000000..853d8fbcd --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/speech/stt/index.html @@ -0,0 +1,30 @@ + + + + + Syncfusion React AI AssistView + + + + + + + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/speech/stt/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/speech/stt/systemjs.config.js new file mode 100644 index 000000000..a407cba76 --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/speech/stt/systemjs.config.js @@ -0,0 +1,48 @@ +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/20.3.56/" + }, + 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-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", + "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js" + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/speech/tts/app/index.jsx b/ej2-react/code-snippet/ai-assistview/speech/tts/app/index.jsx new file mode 100644 index 000000000..21d9f3560 --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/speech/tts/app/index.jsx @@ -0,0 +1,141 @@ +import * as React from 'react'; +import * as ReactDOM from "react-dom"; +import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat'; +import { marked } from 'marked'; + +let azureOpenAIApiKey = ''; // Your_Azure_OpenAI_API_Key +let azureOpenAIEndpoint = ''; // Your_Azure_OpenAI_Endpoint +let azureOpenAIApiVersion = ''; // Your_Azure_OpenAI_API_Version +let azureDeploymentName = ''; // Your_Deployment_Name +let stopStreaming = false; + +function App() { + let assistInstance = React.useRef(null); + let currentUtterance = null; + + const assistViewToolbarSettings = { + items: [{ iconCss: 'e-icons e-refresh', align: 'Right' }], + itemClicked: (args) => toolbarItemClicked(args) + }; + + const responseToolbarSettings = { + items: [ + { type: 'Button', iconCss: 'e-icons e-assist-copy', tooltip: 'Copy' }, + { type: 'Button', iconCss: 'e-icons e-audio', tooltip: 'Read Aloud' }, + { type: 'Button', iconCss: 'e-icons e-assist-like', tooltip: 'Like' }, + { type: 'Button', iconCss: 'e-icons e-assist-dislike', tooltip: 'Need Improvement' }, + ], + itemClicked: (args) => onResponseToolbarItemClicked(args) + }; + + const bannerTemplate = () => { + return ( +
    +
    + Ready to assist voice enabled ! +
    + ); + }; + + const streamResponse = async (response) => { + let lastResponse = ""; + const responseUpdateRate = 10; + let i = 0; + const responseLength = response.length; + while (i < responseLength && !stopStreaming) { + lastResponse += response[i]; + i++; + if (i % responseUpdateRate === 0 || i === responseLength) { + const htmlResponse = marked.parse(lastResponse); + assistInstance.current?.addPromptResponse(htmlResponse, i === responseLength); + assistInstance.current?.scrollToBottom(); + } + await new Promise(resolve => setTimeout(resolve, 15)); // Delay for streaming effect + } + }; + + const onPromptRequest = (args) => { + const url = + azureOpenAIEndpoint.replace(/\/$/, '') + + `/openai/deployments/${encodeURIComponent(azureDeploymentName)}/chat/completions` + + `?api-version=${encodeURIComponent(azureOpenAIApiVersion)}`; + + fetch(url, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'api-key': azureOpenAIApiKey, + }, + body: JSON.stringify({ + messages: [{ role: 'user', content: args.prompt }], + temperature: 0.7, + max_tokens: 500 + }), + }) + .then(response => response.json()) + .then(reply => { + const responseText = reply.choices[0].message.content.trim() || 'No response received.'; + stopStreaming = false; + streamResponse(responseText); + }) + .catch((error) => { + assistInstance.current.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please check your API key, Deployment model, endpoint or try again later.', true); + stopStreaming = true; + }); + }; + + const toolbarItemClicked = (args) => { + if (args.item.iconCss === 'e-icons e-refresh') { + assistInstance.current.prompts = []; + } + }; + + const onResponseToolbarItemClicked = (args) => { + const responseHtml = assistInstance.current?.prompts[args.dataIndex].response; + if (responseHtml) { + const tempDiv = document.createElement('div'); + tempDiv.innerHTML = responseHtml; + const text = (tempDiv.textContent || tempDiv.innerText || '').trim(); + if (args.item.iconCss === 'e-icons e-audio' || args.item.iconCss === 'e-icons e-assist-stop') { + if (currentUtterance) { + speechSynthesis.cancel(); + currentUtterance = null; + assistInstance.current.responseToolbarSettings.items[1].iconCss = 'e-icons e-audio'; + assistInstance.current.responseToolbarSettings.items[1].tooltip = 'Read Aloud'; + } else { + const utterance = new SpeechSynthesisUtterance(text); + utterance.onend = () => { + currentUtterance = null; + assistInstance.current.responseToolbarSettings.items[1].iconCss = 'e-icons e-audio'; + assistInstance.current.responseToolbarSettings.items[1].tooltip = 'Read Aloud'; + }; + speechSynthesis.speak(utterance); + currentUtterance = utterance; + assistInstance.current.responseToolbarSettings.items[1].iconCss = 'e-icons e-assist-stop'; + assistInstance.current.responseToolbarSettings.items[1].tooltip = 'Stop'; + } + } + } + }; + + const handleStopResponse = () => { + stopStreaming = true; + }; + + + return ( +
    + +
    + ); +} + +ReactDOM.render(, document.getElementById('container')); \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/speech/tts/app/index.tsx b/ej2-react/code-snippet/ai-assistview/speech/tts/app/index.tsx new file mode 100644 index 000000000..90e308049 --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/speech/tts/app/index.tsx @@ -0,0 +1,140 @@ +import { AIAssistViewComponent, PromptRequestEventArgs, ResponseToolbarSettingsModel, ToolbarItemClickedEventArgs, ToolbarSettingsModel } from '@syncfusion/ej2-react-interactive-chat'; +import * as React from 'react'; +import * as ReactDOM from "react-dom"; +import { marked } from 'marked'; + +let azureOpenAIApiKey: string = ''; // Your_Azure_OpenAI_API_Key +let azureOpenAIEndpoint: string = ''; // Your_Azure_OpenAI_Endpoint +let azureOpenAIApiVersion: string = ''; // Your_Azure_OpenAI_API_Version +let azureDeploymentName: string = ''; // Your_Deployment_Name +let stopStreaming = false; + +function App() { + const assistInstance = React.useRef(null); + let currentUtterance: SpeechSynthesisUtterance | null = null; + + const assistViewToolbarSettings: ToolbarSettingsModel = { + items: [{ iconCss: 'e-icons e-refresh', align: 'Right' }], + itemClicked: (args) => toolbarItemClicked(args) + }; + + const responseToolbarSettings: ResponseToolbarSettingsModel = { + items: [ + { type: 'Button', iconCss: 'e-icons e-assist-copy', tooltip: 'Copy' }, + { type: 'Button', iconCss: 'e-icons e-audio', tooltip: 'Read Aloud' }, + { type: 'Button', iconCss: 'e-icons e-assist-like', tooltip: 'Like' }, + { type: 'Button', iconCss: 'e-icons e-assist-dislike', tooltip: 'Need Improvement' }, + ], + itemClicked: (args) => onResponseToolbarItemClicked(args) + }; + + const bannerTemplate = () => { + return ( +
    +
    + Ready to assist voice enabled ! +
    + ); + }; + + const streamResponse = async (response: string) => { + let lastResponse = ""; + const responseUpdateRate = 10; + let i = 0; + const responseLength = response.length; + while (i < responseLength && !stopStreaming) { + lastResponse += response[i]; + i++; + if (i % responseUpdateRate === 0 || i === responseLength) { + const htmlResponse = marked.parse(lastResponse); + assistInstance.current?.addPromptResponse(htmlResponse, i === responseLength); + assistInstance.current?.scrollToBottom(); + } + await new Promise(resolve => setTimeout(resolve, 15)); // Delay for streaming effect + } + }; + + const onPromptRequest = (args: PromptRequestEventArgs) => { + const url = + azureOpenAIEndpoint.replace(/\/$/, '') + + `/openai/deployments/${encodeURIComponent(azureDeploymentName)}/chat/completions` + + `?api-version=${encodeURIComponent(azureOpenAIApiVersion)}`; + + fetch(url, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'api-key': azureOpenAIApiKey, + }, + body: JSON.stringify({ + messages: [{ role: 'user', content: args.prompt }], + temperature: 0.7, + max_tokens: 500 + }), + }) + .then(response => response.json()) + .then(reply => { + const responseText = reply.choices[0].message.content.trim() || 'No response received.'; + stopStreaming = false; + streamResponse(responseText); + }) + .catch((error: unknown) => { + assistInstance.current.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please check your API key, Deployment model, endpoint or try again later.', true); + stopStreaming = true; + }); + }; + + const toolbarItemClicked = (args: ToolbarItemClickedEventArgs) => { + if (args.item.iconCss === 'e-icons e-refresh') { + assistInstance.current.prompts = []; + } + }; + + const onResponseToolbarItemClicked = (args: ToolbarItemClickedEventArgs) => { + const responseHtml = assistInstance.current?.prompts[args.dataIndex].response; + if (responseHtml) { + const tempDiv = document.createElement('div'); + tempDiv.innerHTML = responseHtml; + const text = (tempDiv.textContent || tempDiv.innerText || '').trim(); + if (args.item.iconCss === 'e-icons e-audio' || args.item.iconCss === 'e-icons e-assist-stop') { + if (currentUtterance) { + speechSynthesis.cancel(); + currentUtterance = null; + assistInstance.current.responseToolbarSettings.items[1].iconCss = 'e-icons e-audio'; + assistInstance.current.responseToolbarSettings.items[1].tooltip = 'Read Aloud'; + } else { + const utterance = new SpeechSynthesisUtterance(text); + utterance.onend = () => { + currentUtterance = null; + assistInstance.current.responseToolbarSettings.items[1].iconCss = 'e-icons e-audio'; + assistInstance.current.responseToolbarSettings.items[1].tooltip = 'Read Aloud'; + }; + speechSynthesis.speak(utterance); + currentUtterance = utterance; + assistInstance.current.responseToolbarSettings.items[1].iconCss = 'e-icons e-assist-stop'; + assistInstance.current.responseToolbarSettings.items[1].tooltip = 'Stop'; + } + } + } + }; + + const handleStopResponse = () => { + stopStreaming = true; + }; + + return ( +
    + +
    + ); +} + +ReactDOM.render(, document.getElementById('container')); \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/speech/tts/index.css b/ej2-react/code-snippet/ai-assistview/speech/tts/index.css new file mode 100644 index 000000000..94017a6e0 --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/speech/tts/index.css @@ -0,0 +1,32 @@ +/* Represents the styles for loader */ +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +.integration-texttotpeech-section { + height: 350px; + width: 650px; + margin: 0 auto; +} + +.integration-texttotpeech-section .e-view-container { + margin: auto; +} +.integration-texttotpeech-section .e-banner-view { + margin-left: 0; +} +.integration-texttotpeech-section .banner-content .e-audio:before { + font-size: 25px; +} + +.integration-texttotpeech-section .banner-content { + display: flex; + flex-direction: column; + gap: 10px; + text-align: center; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/speech/tts/index.html b/ej2-react/code-snippet/ai-assistview/speech/tts/index.html new file mode 100644 index 000000000..b0eef4cfb --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/speech/tts/index.html @@ -0,0 +1,28 @@ + + + + + Syncfusion React AI AssistView + + + + + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/ai-assistview/speech/tts/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/speech/tts/systemjs.config.js new file mode 100644 index 000000000..f8fd474a2 --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/speech/tts/systemjs.config.js @@ -0,0 +1,49 @@ +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/20.3.56/" + }, + 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-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", + "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.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", + "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js", + "@google/generative-ai": "https://cdn.jsdelivr.net/npm/@google/generative-ai@0.24.1/dist/index.min.js" + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/column-cs20/app/index.jsx b/ej2-react/code-snippet/chart/series/column-cs20/app/index.jsx index 8f7bbb260..6671e52f3 100644 --- a/ej2-react/code-snippet/chart/series/column-cs20/app/index.jsx +++ b/ej2-react/code-snippet/chart/series/column-cs20/app/index.jsx @@ -1,3 +1,6 @@ +{% raw %} + + import * as React from "react"; import * as ReactDOM from "react-dom"; import { Category, ChartComponent, ColumnSeries, Inject, LineSeries, SeriesCollectionDirective, SeriesDirective, ILoadedEventArgs } from '@syncfusion/ej2-react-charts'; @@ -115,4 +118,7 @@ function App() { ); }; export default App; -ReactDOM.render(, document.getElementById("charts")); \ No newline at end of file +ReactDOM.render(, document.getElementById("charts")); + + +{% endraw %} \ No newline at end of file diff --git a/ej2-react/context-menu/accessibility.md b/ej2-react/context-menu/accessibility.md index 86c327acc..f8de301db 100644 --- a/ej2-react/context-menu/accessibility.md +++ b/ej2-react/context-menu/accessibility.md @@ -1,18 +1,18 @@ --- layout: post -title: Accessibility in React ContextMenu component | Syncfusion +title: Accessibility in React Context menu component | Syncfusion description: Learn here all about Accessibility in Syncfusion React ContextMenu component of Syncfusion Essential JS 2 and more. -control: Accessibility +control: Context Menu platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Accessibility in React ContextMenu component +# Accessibility in React Context menu component -The ContextMenu component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The React ContextMenu component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. -The accessibility compliance for the ContextMenu component is outlined below. +The accessibility compliance for the React ContextMenu component is outlined below. | Accessibility Criteria | Compatibility | | -- | -- | @@ -40,18 +40,18 @@ The accessibility compliance for the ContextMenu component is outlined below. ## WAI-ARIA attributes -The ContextMenu component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) patterns to meet the accessibility. The following ARIA attributes are used in the ContextMenu component: +The React ContextMenu component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) patterns to meet accessibility requirements. The following ARIA attributes are used in the ContextMenu component: | Attributes | Purpose | | --- | --- | -| `role` | Indicates ContextMenu component popup as `menu`, and the popup items as `menuitem`. | +| `role` | Indicates the ContextMenu component popup as `menu`, and the popup items as `menuitem`. | | `aria-haspopup` | Indicates the availability and type of interactive popup element. | | `aria-expanded` | Indicates whether the subtree can be expanded or collapsed, as well as indicates whether its current state is expanded or collapsed. | | `aria-label` | Indicates the menu item text. | ## Keyboard interaction -The ContextMenu component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the ContextMenu component. +The React ContextMenu component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/#keyboardinteraction) guidelines, making it accessible for people who use assistive technologies and those who rely completely on keyboard navigation. The following keyboard shortcuts are supported by the ContextMenu component: | **Press** | **To do this** | | --- | --- | @@ -64,7 +64,7 @@ The ContextMenu component followed the [keyboard interaction](https://www.w3.org ## Ensuring accessibility -The ContextMenu component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. +The React ContextMenu component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. The accessibility compliance of the ContextMenu component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/context-menu.html) in a new window to evaluate the accessibility of the ContextMenu component with accessibility tools. @@ -72,4 +72,4 @@ The accessibility compliance of the ContextMenu component is shown in the follow ## See also -* [Accessibility in Syncfusion® React components](../common/accessibility) +* [Accessibility in Syncfusion® React components](../common/accessibility) \ No newline at end of file diff --git a/ej2-react/context-menu/getting-started.md b/ej2-react/context-menu/getting-started.md index 092d4713f..a2c34551e 100644 --- a/ej2-react/context-menu/getting-started.md +++ b/ej2-react/context-menu/getting-started.md @@ -2,18 +2,19 @@ layout: post title: Getting started with React Context menu component | Syncfusion description: Checkout and learn about Getting started with React Context menu component of Syncfusion Essential JS 2 and more details. -control: Getting started +control: Context Menu platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Getting Started -This section explains how to create a simple ContextMenu, and configure its available functionalities in React +# Getting started with React Context menu component + +This section explains how to create a simple ContextMenu and configure its core functionalities in a React application. ## Dependencies -The following list of dependencies are required to use the ContextMenu component in your application. +The following dependencies are required to use the ContextMenu component: ```javascript |-- @syncfusion/ej2-react-navigations @@ -29,9 +30,9 @@ The following list of dependencies are required to use the ContextMenu component ## Setup your development environment -To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production. +To quickly set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production. -> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. +> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. To create a new React application, run the following command. diff --git a/ej2-react/context-menu/how-to/add-or-remove-context-menu-items.md b/ej2-react/context-menu/how-to/add-or-remove-context-menu-items.md index 66950ea02..5a4f6d327 100644 --- a/ej2-react/context-menu/how-to/add-or-remove-context-menu-items.md +++ b/ej2-react/context-menu/how-to/add-or-remove-context-menu-items.md @@ -1,15 +1,19 @@ --- layout: post -title: Add or remove context menu items in React Context menu component | Syncfusion +title: Add or Remove Items in React Context Menu | Syncfusion description: Learn here all about Add or remove context menu items in Syncfusion React Context menu component of Syncfusion Essential JS 2 and more. -control: Add or remove context menu items +control: Context Menu platform: ej2-react documentation: ug domainurl: ##DomainURL## --- # Add or remove context menu items in React Context menu component -ContextMenu items can be added or removed using the [`insertAfter`](https://ej2.syncfusion.com/react/documentation/api/menu/#insertafter), [`insertBefore`](https://ej2.syncfusion.com/react/documentation/api/menu/#insertbefore) and [`removeItems`](https://ej2.syncfusion.com/react/documentation/api/menu/#removeitems) methods. +The ContextMenu component provides dynamic item management capabilities, allowing you to add or remove menu items programmatically at runtime. This functionality enables responsive menu systems that adapt to changing application states, user permissions, or contextual requirements. + +ContextMenu items can be dynamically modified using the [`insertAfter`](https://ej2.syncfusion.com/react/documentation/api/menu/#insertafter), [`insertBefore`](https://ej2.syncfusion.com/react/documentation/api/menu/#insertbefore) and [`removeItems`](https://ej2.syncfusion.com/react/documentation/api/menu/#removeitems) methods. + +The `insertAfter` method adds new menu items after a specified target item, while `insertBefore` adds items before the target. The `removeItems` method removes specified items from the menu structure. In the following example, the **Display Settings** menu items are added before the **Personalize** item, the **Sort By** menu items are added after the **Refresh**, and the **Paste** item is removed from context menu. diff --git a/ej2-react/context-menu/how-to/change-animation-settings.md b/ej2-react/context-menu/how-to/change-animation-settings.md index 25cb275fd..dea59b892 100644 --- a/ej2-react/context-menu/how-to/change-animation-settings.md +++ b/ej2-react/context-menu/how-to/change-animation-settings.md @@ -2,7 +2,7 @@ layout: post title: Change animation settings in React Context menu component | Syncfusion description: Learn here all about Change animation settings in Syncfusion React Context menu component of Syncfusion Essential JS 2 and more. -control: Change animation settings +control: Context Menu platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,17 +10,20 @@ domainurl: ##DomainURL## # Change animation settings in React Context menu component -To change the animation of the ContextMenu, [`animationSettings`](https://ej2.syncfusion.com/react/documentation/api/context-menu/menuAnimationSettingsModel/) property is used. -The supported effects for ContextMenu are, +The ContextMenu component provides customizable animation effects through the [`animationSettings`](https://ej2.syncfusion.com/react/documentation/api/context-menu/menuAnimationSettingsModel/) property. This allows you to control how the context menu appears and disappears, enhancing the user experience with smooth visual transitions. + +The supported animation effects for ContextMenu are: | Effect | Functionality | | ------------ | ----------------------- | -| None | Specifies the sub menu transform with no animation effect. | -| SlideDown | Specifies the sub menu transform with slide down effect. | -| ZoomIn | Specifies the sub menu transform with zoom in effect. | -| FadeIn | Specifies the sub menu transform with fade in effect. | +| None | Displays the context menu instantly without any animation effect. | +| SlideDown | Animates the context menu with a sliding motion from top to bottom. | +| ZoomIn | Scales the context menu from small to full size with a zoom effect. | +| FadeIn | Gradually increases the opacity of the context menu from transparent to visible. | + +The `animationSettings` property accepts an object with three configurable options: [`effect`](https://ej2.syncfusion.com/react/documentation/api/context-menu/menuAnimationSettingsModel/#effect) (animation type), [`duration`](https://ej2.syncfusion.com/react/documentation/api/context-menu/menuAnimationSettingsModel/#duration) (animation time in milliseconds), and [`easing`](https://ej2.syncfusion.com/react/documentation/api/context-menu/menuAnimationSettingsModel/#easing) (transition timing function). The default settings use SlideDown effect with 400ms duration and ease timing. -The following sample illustrates how to open ContextMenu with `FadeIn` effect with the `duration` of `800ms`. +The following sample demonstrates how to configure ContextMenu with `FadeIn` effect and a custom `duration` of `800ms`. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/context-menu/how-to/change-menu-items-dynamically.md b/ej2-react/context-menu/how-to/change-menu-items-dynamically.md index b5059abf1..55dec9ca3 100644 --- a/ej2-react/context-menu/how-to/change-menu-items-dynamically.md +++ b/ej2-react/context-menu/how-to/change-menu-items-dynamically.md @@ -1,17 +1,21 @@ --- layout: post -title: Change menu items dynamically in React Context menu component | Syncfusion +title: Dynamically Change Items in react Context Menu | Syncfusion description: Learn here all about Change menu items dynamically in Syncfusion React Context menu component of Syncfusion Essential JS 2 and more. -control: Change menu items dynamically +control: Context Menu platform: ej2-react documentation: ug domainurl: ##DomainURL## --- # Change menu items dynamically in React Context menu component -The items visible in the ContextMenu can be changed dynamically based on the context you open. To achieve this behavior, initialize ContextMenu with all items using [`items`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#items) property and then based on the context you open hide/show required items using [`hideItems`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#hideitems)/[`showItems`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#showitems) method in [`beforeOpen`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#beforeopen) event. +The ContextMenu component supports dynamic menu item changes based on the target element where the context menu is triggered. This functionality enables context-aware menus that display different options depending on the specific area or element the user interacts with, enhancing user experience through relevant, targeted actions. -In the following example, the datasource for Clipboard div is `Cut`, `Copy`, `Paste` and for the Editor div is `Add`, `Edit`, `Delete` is changed on [`beforeOpen`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#beforeopen) event using [`hideItems`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#hideitems) and [`showItems`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#showitems) method. +To implement dynamic menu items, initialize the ContextMenu with a comprehensive set of all possible items using the [`items`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#items) property. Then, use the [`beforeOpen`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#beforeopen) event to selectively show or hide specific items based on the target context. This approach leverages the [`hideItems`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#hideitems) and [`showItems`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#showitems) methods to control menu item visibility dynamically. + +The [`beforeOpen`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#beforeopen) event provides access to the target element through its event arguments, allowing you to determine the appropriate menu items to display based on element properties, classes, or other identifying attributes. + +In the following example, the menu items change contextually based on the target area: the Clipboard div displays `Cut`, `Copy`, and `Paste` options, while the Editor div shows `Add`, `Edit`, and `Delete` actions. This dynamic behavior is implemented using the [`hideItems`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#hideitems) and [`showItems`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#showitems) methods within the [`beforeOpen`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#beforeopen) event handler. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/context-menu/how-to/data-binding.md b/ej2-react/context-menu/how-to/data-binding.md index 0a81d8629..686fd1414 100644 --- a/ej2-react/context-menu/how-to/data-binding.md +++ b/ej2-react/context-menu/how-to/data-binding.md @@ -2,15 +2,17 @@ layout: post title: Data binding in React Context menu component | Syncfusion description: Learn here all about Data binding in Syncfusion React Context menu component of Syncfusion Essential JS 2 and more. -control: Data binding +control: Context Menu platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Data binding in React Context menu component -In the following example, menu items are populated from data source and mapped to -[`items`](https://ej2.syncfusion.com/react/documentation/api/context-menu/menuItemModel/#items) property. +# Populate menu items with data source in React Context menu component + +The ContextMenu component supports data binding through the [`items`](https://ej2.syncfusion.com/react/documentation/api/context-menu/menuItemModel/#items) property, allowing you to populate menu items dynamically from local data sources. This approach is particularly useful when menu content needs to be generated from arrays, objects, or other structured data formats, providing flexibility for dynamic menu scenarios. + +The following example demonstrates how to bind local data source to the ContextMenu: {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/context-menu/how-to/enable-or-disable-context-menu-items.md b/ej2-react/context-menu/how-to/enable-or-disable-context-menu-items.md index fa8bf4678..a2ae0b034 100644 --- a/ej2-react/context-menu/how-to/enable-or-disable-context-menu-items.md +++ b/ej2-react/context-menu/how-to/enable-or-disable-context-menu-items.md @@ -1,17 +1,20 @@ --- layout: post -title: Enable or disable context menu items in React Context menu component | Syncfusion +title: Enable or Disable Items in react Context Menu | Syncfusion description: Learn here all about Enable or disable context menu items in Syncfusion React Context menu component of Syncfusion Essential JS 2 and more. -control: Enable or disable context menu items +control: Context Menu platform: ej2-react documentation: ug domainurl: ##DomainURL## --- + # Enable or disable context menu items in React Context menu component -You can enable and disable the menu items using the [`enableItems`](https://ej2.syncfusion.com/react/documentation/api/menu/#enableitems) method in ContextMenu. To enable menuItems, set the `enable` property in argument to `true` and vice-versa. +The ContextMenu component supports dynamic state management of menu items through the [`enableItems`](https://ej2.syncfusion.com/react/documentation/api/menu/#enableitems) method. This functionality allows you to control menu item availability based on application state, user permissions, or contextual conditions, enhancing user experience by showing only relevant actions. + +The `enableItems` method accepts three parameters: an array of item identifiers (`items`), a boolean value (`enable`) to specify the desired state, and an optional `isUniqueId` parameter to indicate whether the identifiers refer to unique IDs or text content. When `enable` is set to `true`, the specified items become interactive; when `false`, they become disabled and visually dimmed. -In the following example, the **Display Settings** in parent items and **Medium icons** in sub menu items are disabled. +In the following example, the **Display Settings** parent item and **Medium icons** sub menu item are disabled to demonstrate different levels of menu item control. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/context-menu/how-to/open-a-dialog-on-contextmenu-item-click.md b/ej2-react/context-menu/how-to/open-a-dialog-on-contextmenu-item-click.md index b358bc813..c6aefea50 100644 --- a/ej2-react/context-menu/how-to/open-a-dialog-on-contextmenu-item-click.md +++ b/ej2-react/context-menu/how-to/open-a-dialog-on-contextmenu-item-click.md @@ -1,18 +1,20 @@ --- layout: post -title: Open a dialog on contextmenu item click in React Context menu component | Syncfusion +title: Open Dialog on Context Menu Item Click in React | Syncfusion description: Learn here all about Open a dialog on contextmenu item click in Syncfusion React Context menu component of Syncfusion Essential JS 2 and more. -control: Open a dialog on contextmenu item click +control: Context Menu platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Open a dialog on contextmenu item click in React Context menu component +# Open Dialog on Context Menu Click in react -This section explains about how to open a dialog on ContextMenu item click. This can be achieved by handling dialog open in `select` event of the ContextMenu. +This section explains how to open a dialog when a ContextMenu item is clicked. This integration is commonly used for modal workflows, form interactions, and confirmation dialogs. The functionality is achieved by handling the dialog opening logic in the [`select`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#select) event of the ContextMenu component. -In the following sample, Dialog will open while clicking `Save As...` item: +When a ContextMenu item is selected, the `select` event provides access to the clicked item's details, allowing you to conditionally open dialogs based on the selected menu option. This pattern is particularly useful for actions that require additional user input or confirmation before execution. + +In the following sample, a Dialog will open when clicking the `Save As...` menu item: {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/context-menu/how-to/open-and-close-contextmenu.md b/ej2-react/context-menu/how-to/open-and-close-contextmenu.md index 00c843874..d019c9776 100644 --- a/ej2-react/context-menu/how-to/open-and-close-contextmenu.md +++ b/ej2-react/context-menu/how-to/open-and-close-contextmenu.md @@ -1,8 +1,8 @@ --- layout: post -title: Open and close contextmenu in React Context menu component | Syncfusion +title: Open and Close React Context Menu Programmatically | Syncfusion description: Learn here all about Open and close contextmenu in Syncfusion React Context menu component of Syncfusion Essential JS 2 and more. -control: Open and close contextmenu +control: Context Menu platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,9 +10,14 @@ domainurl: ##DomainURL## # Open and close contextmenu in React Context menu component -ContextMenu can be opened and closed programmatically whenever required by using `open` and `close` methods. +The ContextMenu component can be opened and closed programmatically using the [`open`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#open) and [`close`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#close) methods. This programmatic control is useful for creating custom trigger events or implementing context menu functionality in response to specific user interactions. -In the following example, the ContextMenu is opened using the [`open`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#open) method at the specified position using `top` and `left`. Also, ContextMenu is closed using [`close`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#close) method on ContextMenu item click or document click. +The [`open`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#open) method accepts three parameters: +- `top`: To specify ContextMenu vertical positioning. +- `left`: To specify ContextMenu horizontal positioning. +- `target`: To calculate z-index for ContextMenu based upon the specified target. + +In the following example, the ContextMenu is opened using the [`open`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#open) method at the specified position using `top` and `left` coordinates. The ContextMenu is closed using the [`close`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#close) method on ContextMenu item click or document click. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/context-menu/how-to/overflow-scrollable-contextmenu.md b/ej2-react/context-menu/how-to/overflow-scrollable-contextmenu.md index 35162bcff..96a0e9907 100644 --- a/ej2-react/context-menu/how-to/overflow-scrollable-contextmenu.md +++ b/ej2-react/context-menu/how-to/overflow-scrollable-contextmenu.md @@ -2,7 +2,7 @@ layout: post title: Overflow Scrollable in React Context menu component | Syncfusion description: Learn here all about Overflow Scrollable ContextMenu in Syncfusion React Context menu component of Syncfusion Essential JS 2 and more. -control: Overflow Scrollable ContextMenu +control: Context Menu platform: ej2-react documentation: ug domainurl: ##DomainURL## diff --git a/ej2-react/context-menu/how-to/render-with-separator.md b/ej2-react/context-menu/how-to/render-with-separator.md index 709903219..ed3daf031 100644 --- a/ej2-react/context-menu/how-to/render-with-separator.md +++ b/ej2-react/context-menu/how-to/render-with-separator.md @@ -2,7 +2,7 @@ layout: post title: Render with separator in React Context menu component | Syncfusion description: Learn here all about Render with separator in Syncfusion React Context menu component of Syncfusion Essential JS 2 and more. -control: Render with separator +control: Context Menu platform: ej2-react documentation: ug domainurl: ##DomainURL## diff --git a/ej2-react/context-menu/how-to/scrollable-context-menu.md b/ej2-react/context-menu/how-to/scrollable-context-menu.md index 974efd12c..673f3e630 100644 --- a/ej2-react/context-menu/how-to/scrollable-context-menu.md +++ b/ej2-react/context-menu/how-to/scrollable-context-menu.md @@ -1,8 +1,8 @@ --- layout: post -title: Scrollable Context Menu in React Context menu component | Syncfusion +title: Scrollable Context Menu in react Context menu component | Syncfusion description: Learn here all about Render Scrollable Context Menu in Syncfusion React Context menu component of Syncfusion Essential JS 2 and more. -control: Render Scrollable Context Menu +control: Context Menu platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,9 +10,9 @@ domainurl: ##DomainURL## # Render Scrollable Context Menu in React Context menu component -To enable scrolling for the Context Menu, use the [enableScrolling](https://ej2.syncfusion.com/react/documentation/api/context-menu/#enablescrolling) property to manage the overflow behavior of menu items by enabling or disabling scroll functionality. This is especially useful when dealing with a large number of menu items that exceed the viewport height, ensuring the context menu remains accessible without affecting the page layout. +The Context Menu component provides scrolling functionality through the [enableScrolling](https://ej2.syncfusion.com/react/documentation/api/context-menu/#enablescrolling) property to manage overflow behavior when menu items exceed the available display area. This feature ensures all menu options remain accessible without disrupting page layout, particularly beneficial for menus with extensive item lists. -To achieve this functionality, set the `enableScrolling` property to `true`. Additionally, use the [beforeOpen](https://ej2.syncfusion.com/react/documentation/api/context-menu/#beforeopen) event to adjust the height of the menu's parent element, ensuring the scrollable area is applied correctly. +Enable scrolling by setting the `enableScrolling` property to `true`. Use the [beforeOpen](https://ej2.syncfusion.com/react/documentation/api/context-menu/#beforeopen) event to configure the menu container height and ensure proper scrollable area implementation. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/context-menu/how-to/template.md b/ej2-react/context-menu/how-to/template.md index 123d2ba82..0b0b241ce 100644 --- a/ej2-react/context-menu/how-to/template.md +++ b/ej2-react/context-menu/how-to/template.md @@ -2,15 +2,17 @@ layout: post title: Template in React Context menu component | Syncfusion description: Learn here all about Template in Syncfusion React Context menu component of Syncfusion Essential JS 2 and more. -control: Template +control: Context Menu platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Template in React Context menu component +# Template customization in React Context menu component -## Table in Sub ContextMenu +The ContextMenu component supports extensive template customization, allowing you to embed complex UI elements and interactive components within menu items. This flexibility enables creating rich, context-aware menus that go beyond simple text-based navigation. + +## Show table in sub ContextMenu Menu items of the ContextMenu can be customized according to the requirement. The section explains about how to customize table template in sub menu item. @@ -27,7 +29,7 @@ This can be achieved by appending table layout while `li` rendering by using `be {% previewsample "page.domainurl/code-snippet/context-menu/table-cs1" %} -### UI Components in ContextMenu +## UI components in ContextMenu UI components can also be placed inside the each `li` element of ContextMenu. diff --git a/ej2-react/context-menu/how-to/underline-a-character-in-the-item-text.md b/ej2-react/context-menu/how-to/underline-a-character-in-the-item-text.md index bbf9c5a79..f954fd60d 100644 --- a/ej2-react/context-menu/how-to/underline-a-character-in-the-item-text.md +++ b/ej2-react/context-menu/how-to/underline-a-character-in-the-item-text.md @@ -1,16 +1,20 @@ --- layout: post -title: Underline a character in the item text in React Context menu component | Syncfusion +title: Underline Character in React Context Menu Item | Syncfusion description: Learn here all about Underline a character in the item text in Syncfusion React Context menu component of Syncfusion Essential JS 2 and more. -control: Underline a character in the item text +control: Context Menu platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Underline a character in the item text in React Context menu component +# Underline Character in react Context Menu Item Text -To underline a particular character in a text, it can be handled in `beforeItemRender` event by adding `` tag in between the text and given as innerHTML in `li` rendering. +To underline a specific character in a menu item's text, you can utilize the [`beforeItemRender`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#beforeitemrender) event. This technique is commonly used to create Shortcut keys by visually highlighting specific characters within menu items. + +The underlining can be achieved by adding `` tags around the target character and setting the modified text as innerHTML to the list item element during rendering. + +When implementing this feature, the `beforeItemRender` event provides access to the menu item element and its associated data, enabling you to modify the display text before the item is rendered in the DOM. The event occurs for each menu item during the rendering process, giving you the opportunity to customize the appearance based on your specific requirements. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/context-menu/icons-and-navigation.md b/ej2-react/context-menu/icons-and-navigation.md index 27c2dd195..e9a3d410f 100644 --- a/ej2-react/context-menu/icons-and-navigation.md +++ b/ej2-react/context-menu/icons-and-navigation.md @@ -2,7 +2,7 @@ layout: post title: Icons and navigation in React Context menu component | Syncfusion description: Learn here all about Icons and navigation in Syncfusion React Context menu component of Syncfusion Essential JS 2 and more. -control: Icons and navigation +control: Context Menu platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -12,7 +12,7 @@ domainurl: ##DomainURL## ## Icons -The ContextMenu item have an icon / image in it to provide visual representation of the action. To place the icon on a menu item, set the [`iconCss`](https://ej2.syncfusion.com/react/documentation/api/context-menu/menuItemModel/#iconcss) property to e-icons with the required icon CSS. By default, the icon is positioned to the left side of the menu item. In the following sample, the icons for Cut, Copy and Paste menu items are added using `iconCss` property. +The ContextMenu component supports icons and images on menu items to provide visual representation of actions and enhance user experience. To add an icon to a menu item, configure the [`iconCss`](https://ej2.syncfusion.com/react/documentation/api/context-menu/menuItemModel/#iconcss) property with the appropriate CSS class. By default, icons are positioned to the left side of the menu item text. In the following sample, icons for Cut, Copy and Paste menu items are added using the `iconCss` property with e-icons CSS classes. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -25,9 +25,9 @@ The ContextMenu item have an icon / image in it to provide visual representation {% previewsample "page.domainurl/code-snippet/context-menu/icons-cs1" %} -## Navigation URL +## URL Navigation -Navigation URL in ContextMenu is used for navigating to other web page when menu item is clicked. This can be achieved by providing link to the menu item using the [`url`](https://ej2.syncfusion.com/react/documentation/api/context-menu/menuItemModel/#url) property.In the following sample, Navigation URL for Flipkart, Amazon, and Snapdeal menu items are added using the `url` property. +The ContextMenu component enables navigation to external web pages or internal routes when menu items are clicked. This functionality is implemented by configuring the [`url`](https://ej2.syncfusion.com/react/documentation/api/context-menu/menuItemModel/#url) property with the target destination URL. When a menu item with a URL is selected, the browser navigates to the specified location. In the following sample, navigation URLs for Flipkart, Amazon, and Snapdeal menu items are configured using the `url` property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -40,9 +40,8 @@ Navigation URL in ContextMenu is used for navigating to other web page when menu {% previewsample "page.domainurl/code-snippet/context-menu/navigation-cs1" %} -> To open the links in new tab, set 'target' attribute with the value '_blank' in the -[`beforeItemRender`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#beforeitemrender) event. +> To open the links in new tab, set `target` attribute with the value `_blank` in the [`beforeItemRender`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#beforeitemrender) event. ## See Also -* [How to change menu items dynamically](./how-to/change-menu-items-dynamically) +* [How to change menu items dynamically](./how-to/change-menu-items-dynamically) \ No newline at end of file diff --git a/ej2-react/context-menu/style-and-appearance.md b/ej2-react/context-menu/style-and-appearance.md index fd1cb03b4..cd46f231a 100644 --- a/ej2-react/context-menu/style-and-appearance.md +++ b/ej2-react/context-menu/style-and-appearance.md @@ -2,7 +2,7 @@ layout: post title: Style and appearance in React Context menu component | Syncfusion description: Learn here all about Style and appearance in Syncfusion React Context menu component of Syncfusion Essential JS 2 and more. -control: Style and appearance +control: Context Menu platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,11 +10,13 @@ domainurl: ##DomainURL## # Style and appearance in React Context menu component -To modify the ContextMenu appearance, you need to override the default CSS of ContextMenu component. Please find the list of CSS classes and its corresponding section in ContextMenu component. Also, you have an option to create your own custom theme for the controls using our [`Theme Studio`](https://ej2.syncfusion.com/themestudio/?theme=material). +To modify the ContextMenu appearance, you need to override the default CSS of ContextMenu component. The ContextMenu provides extensive customization options through CSS classes that target specific elements within the component structure. You can customize everything from the overall wrapper to individual menu items, icons, and visual states. Additionally, you have an option to create your own custom theme for the controls using our [`Theme Studio`](https://ej2.syncfusion.com/themestudio/?theme=material). -CSS Class | Purpose of Class ------|----- -|.e-contextmenu-wrapper |To customize the context menu wrapper -|.e-contextmenu-wrapper .e-menu-parent|To customize the context menu items -|.e-contextmenu-wrapper ul .e-menu-item.e-selected .e-caret::before|To customize the context menu caret icon -|.e-contextmenu-wrapper ul .e-menu-item .e-menu-icon::before|To customize the icons of the context menu \ No newline at end of file +The following table lists the essential CSS classes and their purposes for customizing the ContextMenu component: + +| CSS Class | Purpose of Class | +|-----|-----| +|.e-contextmenu-wrapper | To customize the context menu wrapper | +|.e-contextmenu-wrapper .e-menu-parent | To customize the context menu items | +|.e-contextmenu-wrapper ul .e-menu-item.e-selected .e-caret::before | To customize the context menu caret icon | +|.e-contextmenu-wrapper ul .e-menu-item .e-menu-icon::before|To customize the icons of the context menu | \ No newline at end of file diff --git a/ej2-react/context-menu/template-and-multilevel-nesting.md b/ej2-react/context-menu/template-and-multilevel-nesting.md index 1f3570d11..c46a6b89a 100644 --- a/ej2-react/context-menu/template-and-multilevel-nesting.md +++ b/ej2-react/context-menu/template-and-multilevel-nesting.md @@ -1,18 +1,18 @@ --- layout: post -title: Template and nesting in React Context menu component | Syncfusion +title: Templates React Context menu component | Syncfusion description: Learn here all about Template and multilevel nesting in Syncfusion React Context menu component of Syncfusion Essential JS 2 and more. -control: Template and multilevel nesting +control: Context Menu platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Template and multilevel nesting in React Context menu component +# Templates in React Context menu component ## Item template -The [itemTemplate](https://ej2.syncfusion.com/react/documentation/api/context-menu/#itemtemplate) property in the ContextMenu component allows you to define custom templates for displaying menu items within the context menu. This feature is particularly useful when you want to customize the appearance or layout of the menu items beyond the default text-based list. +The [itemTemplate](https://ej2.syncfusion.com/react/documentation/api/context-menu/#itemtemplate) property in the ContextMenu component allows you to define custom templates for displaying menu items. This feature enables you to customize the appearance, layout, and content of menu items beyond the default text-based display. Use item templates when you need to include icons, formatted text, additional metadata, or complex HTML structures within menu items. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -25,9 +25,9 @@ The [itemTemplate](https://ej2.syncfusion.com/react/documentation/api/context-me {% previewsample "page.domainurl/code-snippet/context-menu/template-cs2" %} -## Customize the specific menu items +## Customize specific menu items -The ContextMenu items can be customized using the [`beforeItemRender`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#beforeitemrender) property. The item render event triggers while rendering each menu item. The event argument will be used to identify the menu item and customized it based on the requirement. In the following sample, the menu item is rendered with keycode for specified action in ContextMenu using the template. Here, the keycode is specified for Save as, View page source, and Inspect in the right side corner of the menu items by adding span element in the [`beforeItemRender`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#beforeitemrender) event. +ContextMenu items can be customized using the [`beforeItemRender`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#beforeitemrender) event. This event triggers while rendering each menu item, providing access to the item element and menu item data for customization based on specific requirements. The following example demonstrates how to add keyboard shortcuts to specific menu items by appending span elements during the rendering process. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -42,9 +42,9 @@ The ContextMenu items can be customized using the [`beforeItemRender`](https://e > To create span element, `createElement` util function used from `ej2-base`. -## Multilevel nesting +## Multi-level nesting -Multiple level nesting supports in ContextMenu. It can be achieved by mapping the [`items`](https://ej2.syncfusion.com/react/documentation/api/context-menu/menuItemModel/#items) property inside the parent [`menuItems`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#items). In the below sample, three level nesting of ContextMenu is provided. +The ContextMenu component supports multiple levels of nesting for creating hierarchical menu structures. Achieve this by mapping the [`items`](https://ej2.syncfusion.com/react/documentation/api/context-menu/menuItemModel/#items) property within parent [`menuItems`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#items). The following example demonstrates a three-level nested ContextMenu structure. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -57,7 +57,7 @@ Multiple level nesting supports in ContextMenu. It can be achieved by mapping th {% previewsample "page.domainurl/code-snippet/context-menu/getting-started-cs6" %} -> To open sub menu items only on click, [`showItemOnClick`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#showitemonclick) property should be set as `true`. +> To open sub menu items only on click, set the [`showItemOnClick`](https://ej2.syncfusion.com/react/documentation/api/context-menu/#showitemonclick) property to `true`. ## See Also diff --git a/ej2-react/dashboard-layout/accessibility.md b/ej2-react/dashboard-layout/accessibility.md index b3f43cb76..710cb55dc 100644 --- a/ej2-react/dashboard-layout/accessibility.md +++ b/ej2-react/dashboard-layout/accessibility.md @@ -2,7 +2,7 @@ layout: post title: Accessibility in React Dashboard Layout component | Syncfusion description: Learn here all about Accessibility in Syncfusion React Dashboard Layout component of Syncfusion Essential JS 2 and more. -control: Accessibility +control: Dashboard Layout platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,21 +10,13 @@ domainurl: ##DomainURL## # Accessibility in React Dashboard Layout component -The Dashboard Layout component follows the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Dashboard Layout component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. -The accessibility compliance for the Dashboard Layout component is outlined below. +The Dashboard Layout component provides an accessible interface for organizing and managing dashboard panels, ensuring that users with disabilities can effectively interact with and navigate the layout structure. -| Accessibility Criteria | Compatibility | -| -- | -- | -| [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | Intermediate | -| [Section 508](https://www.section508.gov/) Support | Intermediate | -| Screen Reader Support | Yes | -| Right-To-Left Support | Yes | -| Color Contrast | Yes | -| Mobile Device Support | Yes | -| Keyboard Navigation Support | Not applicable | -| [Accessibility Checker](https://www.npmjs.com/package/accessibility-checker) Validation | Yes | -| [Axe-core](https://www.npmjs.com/package/axe-core) Accessibility Validation | Yes | +## Accessibility compliance + +The accessibility compliance for the Dashboard Layout component is outlined below. +
    Yes - All features of the component meet the requirement.
    Intermediate - Some features of the component do not meet the requirement.
    No - The component does not meet the requirement.
    +| Accessibility Criteria | Compatibility | +| -- | -- | +| [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | Intermediate | +| [Section 508](https://www.section508.gov/) Support | Intermediate | +| Screen Reader Support | Yes | +| Right-To-Left Support | Yes | +| Color Contrast | Yes | +| Mobile Device Support | Yes | +| Keyboard Navigation Support | Not applicable | +| [Accessibility Checker](https://www.npmjs.com/package/accessibility-checker) Validation | Yes | +| [Axe-core](https://www.npmjs.com/package/axe-core) Accessibility Validation | Yes | + ## WAI-ARIA attributes -The Dashboard Layout component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) patterns to meet the accessibility. The following ARIA attributes are used in the Dashboard Layout component: +The Dashboard Layout component follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) patterns to meet accessibility standards. The following ARIA attributes are used in the Dashboard Layout component: | **Attributes** | **Purpose** | | --- | --- | @@ -53,14 +58,14 @@ The Dashboard Layout component follows the [WAI-ARIA](https://www.w3.org/WAI/ARI Keyboard support is not applicable for the Dashboard Layout. -## Ensuring accessibility +## Accessibility testing -The Dashboard Layout component's accessibility levels are ensured through [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. +The Dashboard Layout component's accessibility levels are validated through automated testing using [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. -The accessibility compliance of the Dashboard Layout component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/dashboard-layout.html) in a new window to evaluate the accessibility of the Dashboard Layout component using accessibility tools. +The accessibility compliance of the Dashboard Layout component is demonstrated in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/dashboard-layout.html) in a new window to evaluate the accessibility of the Dashboard Layout component with accessibility tools. {% previewsample "https://ej2.syncfusion.com/accessibility/dashboard-layout.html" %} ## See also -* [Accessibility in Syncfusion® React components](../common/accessibility) +* [Accessibility in Syncfusion® React components](../common/accessibility) \ No newline at end of file diff --git a/ej2-react/dashboard-layout/floating-of-panels.md b/ej2-react/dashboard-layout/floating-of-panels.md index f2f9caf65..981734f8d 100644 --- a/ej2-react/dashboard-layout/floating-of-panels.md +++ b/ej2-react/dashboard-layout/floating-of-panels.md @@ -2,15 +2,30 @@ layout: post title: Floating of panels in React Dashboard Layout component | Syncfusion description: Learn here all about Floating of panels in Syncfusion React Dashboard Layout component of Syncfusion Essential JS 2 and more. -control: Floating of panels +control: Dashboard Layout platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Floating of panels in React Dashboard Layout component +# Floating of panels in React Dashboard Layout component + +The floating functionality enables panels to move upward automatically to fill empty spaces left by panels in previous rows, maximizing space utilization within the dashboard layout. When floating is enabled, panels dynamically reposition themselves to eliminate gaps and create a more compact layout arrangement. + +This behavior can be controlled using the [`allowFloating`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#allowfloating) property, which accepts a boolean value (default: `true`). + +## How floating works + +When `allowFloating` is set to `true`: +- Panels automatically move upward to occupy available space in previous rows +- Empty cells are filled dynamically as panels are added, removed, or repositioned +- The layout maintains a compact appearance without gaps between rows + +When `allowFloating` is set to `false`: +- Panels remain in their designated row positions +- Empty spaces remain unfilled, preserving the original grid structure +- Panels maintain their exact row and column positions -The floating functionality of the component allows you to effectively use the entire layout for panel placement. When the floating functionality is enabled, the panels within the layout automatically float upwards to occupy empty cells available in previous rows. This functionality can be enabled or disabled using the [allowFloating](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#allowfloating) property of the component. The following sample demonstrates how to enable or disable the floating of panels in the Dashboard Layout component. @@ -37,4 +52,4 @@ The following sample demonstrates how to enable or disable the floating of panel {% previewsample "page.domainurl/code-snippet/dashboard-layout/floating-cs1" %} -> You can refer to our [React Dashboard Layout](https://www.syncfusion.com/react-ui-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default) to learn how to present and manipulate data. \ No newline at end of file +> You can refer to our [React Dashboard Layout](https://www.syncfusion.com/react-ui-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default) to know how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/dashboard-layout/getting-started.md b/ej2-react/dashboard-layout/getting-started.md index b59bd0ec8..e6f916e05 100644 --- a/ej2-react/dashboard-layout/getting-started.md +++ b/ej2-react/dashboard-layout/getting-started.md @@ -1,20 +1,20 @@ --- layout: post -title: Getting Started with React Dashboard Layout Component | Syncfusion +title: Getting started with React Dashboard Layout Component | Syncfusion description: Checkout and learn about getting started with Syncfusion Essential React Dashboard Layout component, it's elements, and more. -control: Getting started +control: Dashboard Layout platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Getting Started with React Dashboard Layout +# Getting started with React Dashboard Layout This section explains how to create a simple **Dashboard Layout** component and its basic usage. ## Dependencies -The following list of dependencies is required to use the Dashboard Layout component in your application. +The following packages are required to use the Dashboard Layout component in your application: ```js |-- @syncfusion/ej2-react-layouts @@ -25,23 +25,25 @@ The following list of dependencies is required to use the Dashboard Layout compo ## Installation and configuration -To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production. +To set up a React application quickly, use `create-vite-app`, which offers faster development, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite configures your environment using JavaScript and optimizes the application for production. -> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. +> **Note:** To create a React application using `create-react-app`, refer to the [Syncfusion documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. To create a new React application, run the following command. ```bash npm create vite@latest my-app ``` -To set-up a React application in TypeScript environment, run the following command. + +To set up a React application in a TypeScript environment, run the following command: ```bash npm create vite@latest my-app -- --template react-ts cd my-app npm run dev ``` -To set-up a React application in JavaScript environment, run the following command. + +To set up a React application in a JavaScript environment, run the following command: ```bash npm create vite@latest my-app -- --template react @@ -51,7 +53,7 @@ npm run dev ## Adding Syncfusion® packages -All the available Essential® JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. +All Essential® JS 2 packages are published in the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. To install `Dashboard Layout` component, use the following command @@ -59,7 +61,7 @@ To install `Dashboard Layout` component, use the following command npm install @syncfusion/ej2-react-layouts --save ``` -## Adding CSS Reference +## Adding CSS reference To render the Dashboard Layout component, need to import Dashboard Layout and its dependent component's styles as given below in `src/App.css`. @@ -68,7 +70,7 @@ To render the Dashboard Layout component, need to import Dashboard Layout and it @import "../node_modules/@syncfusion/ej2-react-layouts/styles/material.css"; ``` -> Note: If you want to refer the combined component styles, please make use of our [`CRG`](https://crg.syncfusion.com/) (Custom Resource Generator) in your application. +> **Note:** If you want to refer the combined component styles, please make use of our [`CRG`](https://crg.syncfusion.com/) (Custom Resource Generator) in your application. ## Add Dashboard Layout to the application @@ -217,13 +219,13 @@ export default App; ## Run the application -Now run the `npm run dev` command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser. +Run the following command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser. ```bash npm run dev ``` -The following example shows a basic Dashboard Layout by adding the panels property directly into the HTML element. +The following example shows a basic Dashboard Layout by adding panel definitions directly via HTML attributes. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -250,7 +252,7 @@ The following example shows a basic Dashboard Layout by adding the panels proper ## Setting the `panels` property directly -You can render the Dashboard Layout component by using the **panels** property directly. +You can render the Dashboard Layout component by defining the **panels** property in your component code. `[src/App.tsx]` @@ -332,5 +334,5 @@ The following example shows a basic Dashboard Layout by using the `panels` prope {% previewsample "page.domainurl/code-snippet/dashboard-layout/getting-started-panel-cs1" %} -> You can refer to our [React Dashboard Layout](https://www.syncfusion.com/react-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/bootstrap5/dashboard-layout/default) to knows how to present and manipulate data. +> You can refer to the [React Dashboard Layout](https://www.syncfusion.com/react-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/bootstrap5/dashboard-layout/default) to knows how to present and manipulate data. diff --git a/ej2-react/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md b/ej2-react/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md index 4680d1622..cf62d60e2 100644 --- a/ej2-react/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md +++ b/ej2-react/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md @@ -1,23 +1,23 @@ --- layout: post -title: Drag and Move Panels in React Dashboard Layout | Syncfusion +title: Dragging panels in React Dashboard Layout component | Syncfusion description: Learn here all about Dragging moving of panels in Syncfusion React Dashboard Layout component of Syncfusion Essential JS 2 and more. -control: Dragging moving of panels +control: Dashboard Layout platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Dragging moving of panels in React Dashboard Layout component +# Dragging and Moving Dashboard Layout Panels in React -The Dashboard Layout component provides dragging functionality to drag and reorder panels within the layout. While dragging a panel, a holder will be highlighted below the panel indicating the panel placement on panel drop. This helps the user to decide whether to place the panel in the current position or revert to previous position without disturbing the layout. +The Dashboard Layout component provides dragging functionality to reorder panels within the layout. While dragging a panel, a holder will be highlighted below the panel indicating the panel placement on panel drop. This helps the user to decide whether to place the panel in the current position or revert to previous position without disturbing the layout. -If one or more panels collide while dragging, then the colliding panels will be pushed towards the left or right or top or bottom direction where an adaptive space for the collided panel is available. The position changes of these collided panels will be updated dynamically during dragging of a panel, so the user can conclude whether to place the panel in the current position or not. +If one or more panels collide while dragging, the colliding panels will be pushed in the direction where space is available. This can be towards the left, right, top, or bottom. The position changes of these collided panels will be updated dynamically during dragging of a panel, so the user can conclude whether to place the panel in the current position or not. -While dragging a panel in Dashboard Layout the following dragging events will be triggered, -* [dragStart](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#dragstart) - Triggers when panel dragging starts -* [drag](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#drag) - Triggers when panel is being dragged -* [dragStop](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#dragstop) - Triggers when panel drag stops +While dragging a panel in Dashboard layout, the following dragging events will be triggered: +* [dragStart](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#dragstart) - Triggered when panel dragging begins +* [drag](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#drag) - Triggered continuously while panel is being dragged +* [dragStop](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#dragstop) - Triggered when panel dragging ends The following sample demonstrates dragging and pushing of panels. For example, while dragging the panel 0 over panel 1, these panels get collided and push the panel 1 towards the feasible direction, so that, the panel 0 gets placed in the panel 1 position. @@ -44,11 +44,11 @@ The following sample demonstrates dragging and pushing of panels. For example, w {% previewsample "page.domainurl/code-snippet/dashboard-layout/drag-pushing-cs1" %} -## Customizing the dragging handler +## Customizing the Drag Handle -Initially, the entire panel acts as the handler for dragging, allowing the dragging action to occur when clicking anywhere on the panel. However, this dragging handler for the panels can be customized using the [draggableHandle](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#draggablehandle) property to restrict the dragging action to a particular element within the panel. +By default, the entire panel acts as the handler for dragging, allowing the dragging action to occur when clicking anywhere on the panel. However, this dragging handler for the panels can be customized using the [`draggableHandle`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#draggablehandle) property to restrict the dragging action within a particular element in the panel. -The following sample demonstrates customizing the dragging handler of the panels where the dragging action of panel occurs only with the header of the panel. +The following sample demonstrates customizing the dragging handler of the panels, where the dragging action occurs only when interacting with the panel's header. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -73,9 +73,9 @@ The following sample demonstrates customizing the dragging handler of the panels {% previewsample "page.domainurl/code-snippet/dashboard-layout/draggable-handler-cs1" %} -## Disable dragging of panels +## Disabling Panel Dragging -By default, the dragging of panels is enabled in Dashboard Layout. It can also be disabled with the help of [allowDragging](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#allowdragging) API. Setting the [allowDragging](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#allowdragging) property to false disables the dragging functionality in Dashboard Layout. +By default, the dragging of panels is enabled in Dashboard Layout. It can also be disabled with the help of [allowDragging](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#allowdragging) API. Setting [allowDragging](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#allowdragging) to false disables the dragging functionality in Dashboard Layout. The following sample demonstrates Dashboard Layout with dragging support disabled. @@ -102,4 +102,4 @@ The following sample demonstrates Dashboard Layout with dragging support disable {% previewsample "page.domainurl/code-snippet/dashboard-layout/disable-dragging-cs1" %} -> You can refer to our [React Dashboard Layout](https://www.syncfusion.com/react-ui-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default) to learn how to present and manipulate data. \ No newline at end of file +> You can refer to the [React Dashboard Layout](https://www.syncfusion.com/react-ui-components/react-dashboard-layout) feature tour page for its comprehensive feature representations. You can also explore the [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default) to see practical implementations of panel manipulation. \ No newline at end of file diff --git a/ej2-react/dashboard-layout/interaction-with-panels/moving-panels.md b/ej2-react/dashboard-layout/interaction-with-panels/moving-panels.md index a9c29dbec..f04c992e9 100644 --- a/ej2-react/dashboard-layout/interaction-with-panels/moving-panels.md +++ b/ej2-react/dashboard-layout/interaction-with-panels/moving-panels.md @@ -1,8 +1,8 @@ --- layout: post -title: Moving panels in React Dashboard Layout component | Syncfusion -description: Learn here all about Moving panels in Syncfusion React Dashboard Layout component of Syncfusion Essential JS 2 and more. -control: Moving panels +title: Moving panels in React Dashboard Layout component | Syncfusion +description: Learn here all about Moving panels in Syncfusion React Dashboard Layout component of Syncfusion Essential JS 2 and more. +control: Dashboard Layout platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Moving panels in React Dashboard Layout component -In addition to drag and drop, it is possible to move panels in the Dashboard Layout programmatically. This can be achieved using the [movePanel](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#movepanel) method. The method is invoked as follows, +In addition to drag and drop, it is possible to move panels in the Dashboard Layout programmatically. This can be achieved using [movePanel](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#movepanel) method. The method is invoked as follows, ```js movePanel(id, row, col) @@ -18,10 +18,10 @@ movePanel(id, row, col) Where, * [**id**](https://helpej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#id) - ID of the panel to be moved. -* [**row**](https://helpej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#row) - New row position for moving the panel. -* [**col**](https://helpej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#col) - New column position for moving the panel. +* [**row**](https://helpej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#row) - New row position for the panel. +* [**col**](https://helpej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#col) - New column position for the panel. -Each time a panel's position is changed (programmatically or through UI interaction), the Dashboard Layout's [change](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#change) event will be triggered. +Each time a panel's position is changed (either programmatically or through UI interaction), the Dashboard Layout's [change](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#change) event is triggered. The following sample demonstrates how to move a panel programmatically to a new position in the Dashboard Layout's [created](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#created) event. @@ -48,4 +48,4 @@ The following sample demonstrates how to move a panel programmatically to a new {% previewsample "page.domainurl/code-snippet/dashboard-layout/moving-cs1" %} -> You can refer to our [React Dashboard Layout](https://www.syncfusion.com/react-ui-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default) to learn how to present and manipulate data. \ No newline at end of file +> You can refer to our [React Dashboard Layout](https://www.syncfusion.com/react-ui-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/dashboard-layout/interaction-with-panels/resizing-of-panels.md b/ej2-react/dashboard-layout/interaction-with-panels/resizing-of-panels.md index 4f201679f..c12923ac7 100644 --- a/ej2-react/dashboard-layout/interaction-with-panels/resizing-of-panels.md +++ b/ej2-react/dashboard-layout/interaction-with-panels/resizing-of-panels.md @@ -2,7 +2,7 @@ layout: post title: Resizing of panels in React Dashboard Layout component | Syncfusion description: Learn here all about Resizing of panels in Syncfusion React Dashboard Layout component of Syncfusion Essential JS 2 and more. -control: Resizing of panels +control: Dashboard Layout platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,17 +10,23 @@ domainurl: ##DomainURL## # Resizing of panels in React Dashboard Layout component -The Dashboard Layout component is also provided with the panel resizing functionality which can be enabled or disabled by setting the [allowResizing](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#allowresizing) property. This functionality allows you to resize the panels dynamically through UI interactions using the resizing handlers which controls the panel resizing in various directions. +The Dashboard Layout component provide resizing functionality that can be enabled using the [`allowResizing`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#allowresizing) property. This functionality allows users to dynamically resize panels using resizing handles that control panel dimensions in various directions. -By default, panels can be resized only in the south-east direction. However, panels can also be resized in east, west, north, south, and south-west directions by specifying the required directions with the [resizableHandles](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#resizablehandles) property. +By default, panels can be resized only in the south-east direction. However, panels can also be resized in east, west, north, south, and south-west directions by specifying the required directions with the [`resizableHandles`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#resizablehandles) property. -On resizing a panel in the Dashboard Layout , the following events will be triggered, -* [resizeStart](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#resizestart) - Triggers when panel resize starts -* [resize](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#resize) - Triggers when panel is being resized -* [resizeStop](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#resizestop) - Triggers when panel resize stops +## Resize events -The following sample demonstrates how to enable and disable the resizing of panels in the Dashboard Layout component in different directions. +When resizing a panel in the Dashboard Layout, the following events are triggered in sequence: + +| API Reference | Description | Use Case | +|---------------|-------------|----------| +|[resizeStart](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#resizestart) | Triggers when panel resize begins | Useful for capturing initial panel dimensions | +|[resize](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#resize) | Triggers continuously during panel resizing | Ideal for real-time updates or validation | +|[resizeStop](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#resizestop) | Triggers when panel resize completes | Perfect for saving final panel state | + + +The following sample demonstrates how to enable and disable panel resizing in the Dashboard Layout component with different directional handles: {% tabs %} {% highlight js tabtitle="app.jsx" %} {% include code-snippet/dashboard-layout/resizing-cs1/app/App.jsx %} @@ -44,21 +50,23 @@ The following sample demonstrates how to enable and disable the resizing of pane {% previewsample "page.domainurl/code-snippet/dashboard-layout/resizing-cs1" %} -## Resizing panels programmatically +## Programmatic panel resizing + +Dashboard Layout panels can be resized programmatically using the [resizePanel](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#resizepanel) method. The method is invoked as follows, -The Dashboard Layout panels can also be resized programmatically by using [resizePanel](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#resizepanel) method. The method is invoked as follows, +### Method signature ```js resizePanel(id, sizeX, sizeY) ``` -Where, -* [**id**](https://helpej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#id) - ID of the panel which needs to be resized. +### Parameters +* [**id**](https://helpej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#id) - ID of the panel which needs to be resized. * [**sizeX**](https://helpej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#sizex) - New panel width in cells count for resizing the panel. * [**sizeY**](https://helpej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#sizey) - New panel height in cells count for resizing the panel. -The following sample demonstrates how to resize panels programmatically in the Dashboard Layout's [created](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#created) event. +The following sample demonstrates how to resize panels programmatically during the Dashboard Layout's [created](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#created) event: {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -83,4 +91,4 @@ The following sample demonstrates how to resize panels programmatically in the D {% previewsample "page.domainurl/code-snippet/dashboard-layout/resize-programmatically-cs1" %} -> You can refer to our [React Dashboard Layout](https://www.syncfusion.com/react-ui-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default) to learn how to present and manipulate data. \ No newline at end of file +> You can refer to our [React Dashboard Layout](https://www.syncfusion.com/react-ui-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/tailwind3/dashboard-layout/default) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/dashboard-layout/panels/add-remove-panels.md b/ej2-react/dashboard-layout/panels/add-remove-panels.md index 2e603d1fa..eed750859 100644 --- a/ej2-react/dashboard-layout/panels/add-remove-panels.md +++ b/ej2-react/dashboard-layout/panels/add-remove-panels.md @@ -1,19 +1,26 @@ --- layout: post -title: Add remove panels in React Dashboard Layout component | Syncfusion +title: Add remove panels in React Dashboard Layout component | Syncfusion description: Learn here all about Add remove panels in Syncfusion React Dashboard Layout component of Syncfusion Essential JS 2 and more. -control: Add remove panels +control: Dashboard Layout platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Add remove panels in React Dashboard Layout component +# Adding and Removing Panels in React Dashboard Layout Component -In real-time scenarios, the data presented within the Dashboard should be updated frequently, which includes dynamically adding or removing data within the dashboard. This can be easily achieved using the [addPanel](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#addpanel) and [removePanel](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#removepanel) public methods of the component. +In real-time scenarios, the data presented within the dashboard often needs to be updated frequently, which includes dynamically adding or removing data within the dashboard. This can be easily achieved by using the [`addPanel`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#addpanel) and [`removePanel`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#removepanel) public methods of the component. -## Add or remove panels dynamically +## Adding and Removing Panels Dynamically -Panels can be added dynamically using the [addPanel](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#addpanel) public method by passing the [panel](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#panels) property as a parameter. Also, they can be removed dynamically using the [removePanel](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#removepanel) public method by passing the [panel id](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#id) value as a parameter. +### Adding Panels +Panels can be added dynamically by using the [`addPanel`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#addpanel) public method by passing the [`panels`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#panels) property as parameter. + +### Removing Panels + +Panels can be removed dynamically using the[`removePanel`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#removepanel) public method by passing the `panel id` value as a parameter. + +### Removing All Panels It is also possible to remove all the panels in a Dashboard Layout by calling the [removeAll](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#removeall) method. @@ -21,7 +28,7 @@ It is also possible to remove all the panels in a Dashboard Layout by calling th dashboard.removeAll(); ``` -The following sample demonstrates how to add and remove the panels dynamically in the Dashboard Layout component. Here, panels can be added in any desired position with the required size by selecting them in the numeric boxes and clicking the add button. They can be removed by selecting the ID of the panel. +The following sample demonstrates how to add and remove panels dynamically in the dashboard layout component. Here, panels can be added in any desired position with the required size by selecting values in the numeric boxes and clicking the add button. Panels can be removed by selecting their ID. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/dashboard-layout/panels/position-sizing-of-panels.md b/ej2-react/dashboard-layout/panels/position-sizing-of-panels.md index cad9440ea..10b6b9272 100644 --- a/ej2-react/dashboard-layout/panels/position-sizing-of-panels.md +++ b/ej2-react/dashboard-layout/panels/position-sizing-of-panels.md @@ -1,39 +1,39 @@ --- layout: post -title: Panel Positioning and Sizing in React Dashboard Layout | Syncfusion +title: Position and size in React Dashboard Layout component | Syncfusion description: Learn here all about Position sizing of panels in Syncfusion React Dashboard Layout component of Syncfusion Essential JS 2 and more. -control: Position sizing of panels +control: Dashboard Layout platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Position sizing of panels in React Dashboard Layout component +# Panel positioning and sizing in React Dashboard Layout component -Panels are the basic building blocks of the Dashboard Layout component. They act as a container for the data to be visualized or presented. These panels can be positioned or resized for an effective presentation of the data. +Panels serve as the fundamental building blocks of the Dashboard Layout component, functioning as containers for data visualization and content presentation. The component provides comprehensive control over panel positioning and sizing through a flexible grid-based system that enables precise layout management and responsive design implementation. -The following table represents all the available panel properties and the corresponding functionalities. +The following table details all available panel properties and their specific functions in layout management: -| **PanelObject** | **Description** | -| --- | --- | -| id | Specifies the ID value of the panel. | -| row | Specifies the row value in which the panel to be placed. | -| col | Specifies the column value in which the panel to be placed. | -| sizeX | Specifies the width of the panel in cells count. | -| sizeY | Specifies the height of the panel in cells count. | -| minSizeX |Specifies the minimum width of the panel in cells count. | -| minSizeY | Specifies the minimum height of the panel in cells count. | -| maxSizeX | Specifies the maximum width of the panel in cells count. | -| maxSizeY | Specifies the maximum height of the panel in cells count. | -| header | Specifies the header template for the panel. | -| content | Specifies the content template for the panel. | -| cssClass | Specifies the CSS class name that can be appended with each panel element.| +| **Property** | **Type** | **Description** | +| --- | --- | --- | +| `id` | string | Unique identifier for the panel, essential for state management and event handling | +| `row` | number | Grid row position where the panel begins (0-based indexing) | +| `col` | number | Grid column position where the panel begins (0-based indexing) | +| `sizeX` | number | Panel width measured in grid cells | +| `sizeY` | number | Panel height measured in grid cells | +| `minSizeX` | number | Minimum allowed width in cells, prevents excessive resizing | +| `minSizeY` | number | Minimum allowed height in cells, maintains content visibility | +| `maxSizeX` | number | Maximum allowed width in cells, controls layout boundaries | +| `maxSizeY` | number | Maximum allowed height in cells, prevents layout overflow | +| `header` | string | Header template content for panel identification | +| `content` | string | Main content template containing panel data | +| `cssClass` | string | Custom CSS classes for styling and theming | ## Positioning of panels -The panels within the layout can be easily positioned or ordered using the [row](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#row) and [col](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#col) properties of the panels. Positioning of panels is beneficial for representing data in any desired order. +The panels within the layout can be easily positioned or ordered using the [`row`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#row) and [`col`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#col) properties of the panels. Positioning panels is beneficial for representing data in any desired order. -The following sample demonstrates the positioning of panels within the Dashboard Layout using the row and column properties of the panels. +The following sample demonstrates the positioning of panels within the dashboard layout using the row and column properties of the panels. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -60,9 +60,9 @@ The following sample demonstrates the positioning of panels within the Dashboard ## Sizing of panels -A panel's size can be easily adjusted by defining the [sizeX](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#sizex) and [sizeY](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#sizey) properties. The `sizeX` property defines the width and the `sizeY` property defines the height of a panel in cell count. These properties are helpful in designing a dashboard, where the content of each panel may vary in size. +A panel's size can be varied easily by defining the [`sizeX`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#sizex) and [`sizeY`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#sizey) properties. The `sizeX` property defines the width and the `sizeY` property defines height of a panel in cells count. These properties are helpful in designing a dashboard, where the content of each panel may vary in size. -The following sample demonstrates the sizing of panels within the Dashboard Layout using the sizeX and sizeY properties of the panels. +The following sample demonstrates the sizing of panels within the dashboard layout using the sizeX and sizeY properties of the panels. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -87,4 +87,4 @@ The following sample demonstrates the sizing of panels within the Dashboard Layo {% previewsample "page.domainurl/code-snippet/dashboard-layout/sizing-of-panels-cs1" %} -> You can refer to our [React Dashboard Layout](https://www.syncfusion.com/react-ui-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default) to learn how to present and manipulate data. \ No newline at end of file +> You can refer to our [React Dashboard Layout](https://www.syncfusion.com/react-ui-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/dashboard-layout/panels/setting-header-of-panels.md b/ej2-react/dashboard-layout/panels/setting-header-of-panels.md index e074876be..e91b82b6c 100644 --- a/ej2-react/dashboard-layout/panels/setting-header-of-panels.md +++ b/ej2-react/dashboard-layout/panels/setting-header-of-panels.md @@ -1,18 +1,18 @@ --- layout: post -title: Set Panel Headers in React Dashboard Layout | Syncfusion +title: Set panels header in React Dashboard layout component | Syncfusion description: Learn here all about Setting header of panels in Syncfusion React Dashboard Layout component of Syncfusion Essential JS 2 and more. -control: Setting header of panels +control: Dashboard Layout platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Setting header of panels in React Dashboard Layout component +# Setting panel headers in React Dashboard Layout component -The Dashboard Layout component is primarily used to represent data for monitoring or managing processes. This data or any HTML template can be placed as the content of a panel using the content property. Additionally, a word or phrase that summarizes the panel's content can be added as a header at the top of each panel using the [header](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#header) property. +The dashboard Layout component is primarily used to represent data for monitoring or managing processes. These data or any HTML template can be placed as the content of a panel using the [`content`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#content) property. Also, a word or phrase that summarizes the panel's content can be added as the header on the top of each panel using the [`header`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#header) property of the panel. -The following sample demonstrates how to add content and headers for each panel using the [content](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#content) and [header](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#header) properties of the panels. +The following example demonstrates how to add content for each panel using the header and content properties of the panels. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -37,11 +37,11 @@ The following sample demonstrates how to add content and headers for each panel {% previewsample "page.domainurl/code-snippet/dashboard-layout/header-cs1" %} -## Placing components as content of panels +## Integrating Syncfusion components as panel content -In a dashboard, components such as charts, grids, maps, gauges, and more can be used to present complex data. These components can be placed as panel content by assigning the corresponding component element to the [content](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#content) property of the panel. +In a dashboard, components like charts, grids, maps, gauges, and more can be used to present complex data. Such components can be placed as the panel content by assigning the corresponding component element to the [`content`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#content) of the panel. -The following sample demonstrates how to add EJ2 Chart components as the [content](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/panelModel/#content) for each panel in the Dashboard Layout component. +The following example demonstrates how to integrate EJ2-Chart components as the `content` for each panel in the dashboard layout component. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -66,4 +66,4 @@ The following sample demonstrates how to add EJ2 Chart components as the [conten {% previewsample "page.domainurl/code-snippet/dashboard-layout/header-content-cs1" %} -> You can refer to our [React Dashboard Layout](https://www.syncfusion.com/react-ui-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default) to learn how to present and manipulate data. \ No newline at end of file +> You can refer to our [React Dashboard Layout](https://www.syncfusion.com/react-ui-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/dashboard-layout/responsive-adaptive.md b/ej2-react/dashboard-layout/responsive-adaptive.md index f51431a13..9564e08ae 100644 --- a/ej2-react/dashboard-layout/responsive-adaptive.md +++ b/ej2-react/dashboard-layout/responsive-adaptive.md @@ -1,8 +1,8 @@ --- layout: post -title: Responsive adaptive in React Dashboard Layout component | Syncfusion +title: Responsive adaptive in React Dashboard Layout component | Syncfusion description: Learn here all about Responsive adaptive in Syncfusion React Dashboard Layout component of Syncfusion Essential JS 2 and more. -control: Responsive adaptive +control: Dashboard Layout platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,11 +10,17 @@ domainurl: ##DomainURL## # Responsive adaptive in React Dashboard Layout component -The component is provided with built-in responsive support, where panels within the layout adjust based on their parent element's dimensions. This accommodates any resolution, relieving the burden of building responsive dashboards manually. +The React Dashboard Layout component provides built-in responsive support that automatically adjusts panel positioning and sizing based on the parent element's dimensions. This responsive behavior accommodates various screen resolutions without requiring additional configuration for basic responsive dashboards. -The Dashboard Layout is designed to automatically adapt with lower resolutions by transforming the entire layout into a stacked one, so that, the panels will be displayed in a vertical column. By default, this layout transformation occurs whenever the screen resolution reaches 600 px or lower resolutions this layout transformation occurs. This transformation can be modified for any user-defined resolution by setting the [mediaQuery](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#mediaquery) property of the component. +## Adaptive Layout Behavior -The following sample demonstrates the usage of the [mediaQuery](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#mediaquery) property to transform the layout into a stacked one at a user-defined resolution. In this example, whenever the window size reaches 700 px or less, the layout becomes a stacked layout. +The dashboard layout automatically transforms into a stacked layout when the screen resolution decreases. In a stacked layout, all panels are arranged vertically in a single column, ensuring optimal viewing on smaller screens. By default, this transformation occurs when the screen resolution reaches 600px or below. + +## Customizing Responsive Breakpoints + +The default responsive breakpoint can be customized using the [`mediaQuery`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#mediaquery) property. This property accepts a CSS media query string that defines when the layout should transform to its stacked state. + +The following example demonstrates how to configure the [`mediaQuery`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#mediaquery) property to trigger the stacked layout at 700px screen width: {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -39,4 +45,4 @@ The following sample demonstrates the usage of the [mediaQuery](https://ej2.sync {% previewsample "page.domainurl/code-snippet/dashboard-layout/responsive-adaptive-cs1" %} -> You can refer to our [React Dashboard Layout](https://www.syncfusion.com/react-ui-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default) to learn how to present and manipulate data. \ No newline at end of file +> You can refer to our [React Dashboard Layout](https://www.syncfusion.com/react-ui-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/dashboard-layout/setting-size-of-cells.md b/ej2-react/dashboard-layout/setting-size-of-cells.md index 021f55776..7bf89965b 100644 --- a/ej2-react/dashboard-layout/setting-size-of-cells.md +++ b/ej2-react/dashboard-layout/setting-size-of-cells.md @@ -2,25 +2,25 @@ layout: post title: Setting cell size in React Dashboard Layout component | Syncfusion description: Learn here all about Setting size of cells in Syncfusion React Dashboard Layout component of Syncfusion Essential JS 2 and more. -control: Setting size of cells +control: Dashboard Layout platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Setting size of cells in React Dashboard Layout component +# Setting cell size in React Dashboard Layout component -The entire layout dimensions are assigned based on the height and width of the parent element. Thus, a responsive or static layout can be created by assigning a percentage or static dimension values to the parent element. The layout adapts to mobile resolutions by transforming the entire layout into a stacked orientation, so that, the panels will be displayed in a vertical column. +The entire layout's dimensions are assigned based on the height and width of the parent element. Hence, a responsive or static layout can be created by assigning a percentage or static dimension values to the parent element. The layout adapts to mobile resolutions by transforming the entire layout into a stacked orientation, so that, the panels will be displayed in a vertical column. -The **Dashboard Layout** is a grid structured component which can be split into subsections of equal size known as cells. The total number of cells in each row is defined using the [columns](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#columns) property of the component. The width of each cell will be auto calculated based on the total number of cells placed in a row and the height of a cell will be same as that of its width. However, the height of these cells can also be configured to any desired size using the [cellAspectRatio](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#cellaspectratio) property (cellwidth/cellheight ratio) which defines the cell width to height ratio. +The **Dashboard Layout** is a grid structured component which can be split into subsections of equal size known as cells. The total number of cells in each row is defined using the [`columns`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#columns) property of the component. The width of each cell will be auto calculated based on the total number of cells placed in a row and the height of a cell will be same as that of its width. However, the height of these cells can also be configured to any desired size using the [`cellAspectRatio`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#cellaspectratio) property (cellwidth/cellheight ratio) which defines the cell width to height ratio. -The number of rows within the layout has no limits and can have any number of rows based on the panels count and position. Panels which acts as data containers will be placed or positioned over these cells. +The number of rows within the layout has no limits and can have any number of rows based on the panels count and position. Panels which act as data containers will be placed or positioned over these cells. -## Modifying cell size +## Modifying cell dimensions -In a dashboard, the data to be held by the panel in a cell may be of different size, hence different cell dimensions may be required in different scenarios. In this case, the size of these grid cells can be modified to the required size using the [columns](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#columns) and [cellAspectRatio](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#cellaspectratio) properties. +In a dashboard, the data to be held by the panel in a cell may be of different size, hence different cell dimensions may be required in different scenarios. In this case, the size of these grid cells can be modified to the required size using the [`columns`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#columns) and [`cellAspectRatio`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#cellaspectratio) properties. -The following sample demonstrates how to modify cell size using the [columns](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#columns) and [cellAspectRatio](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#cellaspectratio) properties. In the following sample, the width of the parent element is divided into 5 equal cells based on the columns property value resulting the width of each cell as 100 px. The height of these cells will be 50 px based on the cellAspectRatio value 100/50 (i.e., for every 100 px of width, 50 px will be the height of the cell). +The following sample demonstrates how to modify cell size using the `columns` and `cellAspectRatio` properties. In the following sample, the width of the parent element is divided into 5 equal cells based on the columns property value resulting the width of each cell as 100px. The height of these cells will be 50px based on the cellAspectRatio value 100/50 (i.e., for every 100px of width, 50px will be the height of the cell). {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -45,11 +45,11 @@ The following sample demonstrates how to modify cell size using the [columns](ht {% previewsample "page.domainurl/code-snippet/dashboard-layout/modifying-cell-size-cs1" %} -## Setting cell spacing +## Configuring cell spacing -The spacing between each panel in a row and column can be defined using the [cellSpacing](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#cellspacing) property. Adding spacing between the panels will make the layout more effective and provide a clearer data representation. +The spacing between each panel in a row and column can be defined using the [`cellSpacing`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#cellspacing) property. Adding spacing between the panels will make the layout effective and provide a clear data representation. -The following sample demonstrates the usage of the [cellSpacing](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#cellspacing) property, which helps in a neat and clear representation of a data. +The following sample demonstrates the usage of the [`cellSpacing`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#cellspacing) property, which helps in a neat and clear representation of a data. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -76,7 +76,7 @@ The following sample demonstrates the usage of the [cellSpacing](https://ej2.syn ## Graphical representation of layout -These cells collectively form a grid-structured layout which will be hidden initially. This grid structured layout can be made visible by enabling the [showGridLines](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#showgridlines) property, which clearly pictures the cells split-up within the layout. These gridlines will be helpful in panels sizing and placement within the layout during initial designing of a dashboard. +These cells collectively form a grid-structured layout, which is hidden initially. This grid structured layout can be made visible by enabling the [`showGridLines`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#showgridlines) property, which clearly pictures the cells split-up within the layout. These gridlines will be helpful in panels sizing and placement within the layout during initial designing of a dashboard. In the following sample, the gridlines indicate the cells split-up of the layout and the data containers placed over these cells are known as panels. @@ -105,7 +105,7 @@ In the following sample, the gridlines indicate the cells split-up of the layout ## Rendering component in right-to-left direction -It is possible to render the Dashboard Layout in a right-to-left direction by setting the [enableRtl](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#enablertl) API to true. +It is possible to render the Dashboard Layout in the right-to-left direction by setting the [enableRtl](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#enablertl) API to true. The following sample demonstrates Dashboard Layout in right-to-left direction. @@ -132,4 +132,4 @@ The following sample demonstrates Dashboard Layout in right-to-left direction. {% previewsample "page.domainurl/code-snippet/dashboard-layout/rtl-cs1" %} -> You can refer to our [React Dashboard Layout](https://www.syncfusion.com/react-ui-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default) to learn how to present and manipulate data. +> You can refer to our [React Dashboard Layout](https://www.syncfusion.com/react-ui-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default) to knows how to present and manipulate data. diff --git a/ej2-react/dashboard-layout/state-maintenance.md b/ej2-react/dashboard-layout/state-maintenance.md index bbc5c6e30..be028a3a9 100644 --- a/ej2-react/dashboard-layout/state-maintenance.md +++ b/ej2-react/dashboard-layout/state-maintenance.md @@ -1,18 +1,24 @@ --- layout: post -title: State maintenance in React Dashboard Layout component | Syncfusion -description: Learn here all about State maintenance in Syncfusion React Dashboard Layout component of Syncfusion Essential JS 2 and more. -control: State maintenance +title: Save restore in React Dashboard Layout component | Syncfusion +description: Learn here all about Save restore in Syncfusion React Dashboard Layout component of Syncfusion Essential JS 2 and more. +control: Dashboard Layout platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# State maintenance in React Dashboard Layout component +# Save and Restore Layout State in React Dashboard Layout Component -The current layout structure of the Dashboard Layout component can be obtained and saved to construct another Dashboard with the same panel structure using the [serialize](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#serialize) public method of the component. This method returns the component's current panel settings which can be used to construct a Dashboard with the same layout settings. +The Dashboard Layout component provides the ability to save the current layout configuration and restore it later, enabling users to persist their preferred panel arrangements across sessions or create reusable dashboard templates. -The following sample demonstrates how to save and restore the state of the panels using the serialize method. Click Save to store the panel's settings and click Restore to restore the previously saved panel settings. +## Save Layout State + +The current layout structure of the Dashboard Layout component can be obtained and saved using the [`serialize`](https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#serialize) public method of the component. This can be used to construct another dashboard with the same panel structure. This method returns the component's current panel settings which can be used to construct a dashboard with the same layout settings. + +## Implementation Example + +The following sample demonstrates how to save and restore panel states using the serialize method. The Save button stores the current panel settings, while the Restore button applies the previously saved configuration. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -37,4 +43,4 @@ The following sample demonstrates how to save and restore the state of the panel {% previewsample "page.domainurl/code-snippet/dashboard-layout/state-maintenance-cs1" %} -> You can refer to our [React Dashboard Layout](https://www.syncfusion.com/react-ui-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default) to learn how to present and manipulate data. \ No newline at end of file +> You can refer to our [React Dashboard Layout](https://www.syncfusion.com/react-ui-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/dashboard-layout/style.md b/ej2-react/dashboard-layout/style.md index 7c51ae9cc..c96785285 100644 --- a/ej2-react/dashboard-layout/style.md +++ b/ej2-react/dashboard-layout/style.md @@ -2,19 +2,19 @@ layout: post title: Style in React Dashboard Layout component | Syncfusion description: Learn here all about Style in Syncfusion React Dashboard Layout component of Syncfusion Essential JS 2 and more. -control: Style +control: Dashboard Layout platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Style in React Dashboard Layout component +# Styling and CSS Customization in React Dashboard Layout component -The following content provides the exact CSS structure that can be used to modify the control's appearance based on user preferences. +The React Dashboard Layout component provides extensive styling capabilities through CSS customization. This guide demonstrates how to modify the component's appearance using CSS selectors to match specific design requirements. -## Customizing the Dashboard Layout panel header +## Panel Header Customization -Use the following CSS to customize the Dashboard Layout panel header. +Use the following CSS to customize the dashboard layout panel header. ```css .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header { @@ -24,9 +24,9 @@ Use the following CSS to customize the Dashboard Layout panel header. } ``` -## Customizing the Dashboard Layout panel content +## Panel Content Customization -Use the following CSS to customize the Dashboard Layout panel content. +Use the following CSS to customize the dashboard layout panel content. ```css .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-content { @@ -35,9 +35,9 @@ Use the following CSS to customize the Dashboard Layout panel content. } ``` -## Customizing the Dashboard Layout panel resize icon +## Resize Handle Customization -Use the following CSS to customize the Dashboard Layout resize icon. +Use the following CSS to customize the dashboard layout resize icon. ```css .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double{ @@ -48,9 +48,9 @@ Use the following CSS to customize the Dashboard Layout resize icon. } ``` -## Customizing the Dashboard Layout panel background +## Dashboard Layout Background Customization -Use the following CSS to customize the Dashboard Layout panel background. +Use the following CSS to customize the dashboard layout panel background. ```css .e-dashboardlayout.e-control.e-responsive { @@ -58,4 +58,4 @@ Use the following CSS to customize the Dashboard Layout panel background. } ``` -> You can refer to our [React Dashboard Layout](https://www.syncfusion.com/react-ui-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default) to learn how to present and manipulate data. \ No newline at end of file +> You can refer to our [React Dashboard Layout](https://www.syncfusion.com/react-ui-components/react-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [React Dashboard Layout example](https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default) to knows how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/drop-down-tree/accessibility.md b/ej2-react/drop-down-tree/accessibility.md index e78771425..902428a79 100644 --- a/ej2-react/drop-down-tree/accessibility.md +++ b/ej2-react/drop-down-tree/accessibility.md @@ -2,7 +2,7 @@ layout: post title: Accessibility in React Dropdown Tree component | Syncfusion description: Learn here all about Accessibility in Syncfusion React Dropdown Tree component of Syncfusion Essential JS 2 and more. -control: Accessibility +control: Dropdown Tree platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -40,7 +40,7 @@ The accessibility compliance for the Dropdown Tree component is outlined below. ## WAI-ARIA attributes -The Dropdown Tree component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) patterns to meet the accessibility. The following ARIA attributes are used in the Dropdown Tree component: +The Dropdown Tree component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) patterns to meet accessibility requirements. The following ARIA attributes are used in the Dropdown Tree component: | Attributes | Purpose | | --- | --- | @@ -65,7 +65,7 @@ The Dropdown Tree component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/a ## Keyboard interaction -The Dropdown Tree component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Dropdown Tree component. +The Dropdown Tree component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/#keyboardinteraction) guidelines, making it accessible for users who rely on assistive technologies and keyboard navigation. The following keyboard shortcuts are supported by the Dropdown Tree component. | Interaction Keys | Description | |------|---------| @@ -83,9 +83,9 @@ The Dropdown Tree component follows the [keyboard interaction](https://www.w3.or ## Ensuring accessibility -The Dropdown Tree component's accessibility levels are verified using [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. +The accessibility compliance of the Dropdown Tree component is verified using [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. -The accessibility compliance of the Dropdown Tree component is demonstrated in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/drop-down-tree.html) in a new window to evaluate the accessibility of the Dropdown Tree component using accessibility tools. +The accessibility compliance of the Dropdown Tree component is demonstrated in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/drop-down-tree.html) in a new window to evaluate the accessibility of the Dropdown Tree component with accessibility tools. {% previewsample "https://ej2.syncfusion.com/accessibility/drop-down-tree.html" %} diff --git a/ej2-react/drop-down-tree/checkbox.md b/ej2-react/drop-down-tree/checkbox.md index cf83fa3ea..5444efef3 100644 --- a/ej2-react/drop-down-tree/checkbox.md +++ b/ej2-react/drop-down-tree/checkbox.md @@ -1,18 +1,18 @@ --- layout: post -title: Checkbox in React Drop down tree component | Syncfusion +title: Checkbox in React Dropdown Tree component | Syncfusion description: Learn here all about Checkbox in Syncfusion React Drop down tree component of Syncfusion Essential JS 2 and more. -control: Checkbox +control: Dropdown Tree platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Checkbox in React Drop down tree component +# Checkbox in React Dropdown Tree component -The Dropdown Tree component allows you to select multiple items from the tree without affecting the UI's appearance by enabling the [showCheckBox](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#showcheckbox) property. When this property is enabled, checkbox appears before each item text in the popup. +The Dropdown Tree component allows you to check more than one item from the tree without affecting the UI's appearance by enabling the [`showCheckBox`](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#showcheckbox) property. When this property is enabled, checkbox appears before each item text in the popup, enabling multi-selection functionality where users can select multiple tree nodes simultaneously. -In the following example, the [showCheckBox](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#showcheckbox) property is enabled. +In the following example, the `showCheckBox` property is enabled. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -30,15 +30,17 @@ In the following example, the [showCheckBox](https://ej2.syncfusion.com/react/do ## Auto Check -By default, the checkbox states of parent and child items in the Dropdown Tree are independent of each other. If you need dependent checked states, enable the `autoCheck` property, which is a member of [treeSettings](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#treesettings) property. +By default, the checkbox state of the parent and child items in the Dropdown Tree will not be dependent on each other. If you need dependent checked state, then enable the [`autoCheck`](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/treeSettingsModel/#autocheck) property which is a member of [`treeSettings`](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#treesettings) property. This feature creates a hierarchical checkbox behavior where parent and child selections are automatically synchronized. -* If one or more child items are not in the checked state, then the parent item will be in the intermediate state. +The auto check functionality follows these rules: + +* If one or more child items are not in the checked state, then the parent item will be in the intermediate state, displayed as a partially filled checkbox. * If all the child items are checked, then the parent item will also be in the checked state. -* If a parent item is checked, then all its child items will also be changed to the checked state. +* If a parent item is checked, then all the child items will also be changed to the checked state automatically. -In the following example, the [autoCheck](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/treeSettingsModel/#autocheck) property is enabled. +In the following example, the `autoCheck` property is enabled to demonstrate hierarchical checkbox behavior. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -56,11 +58,11 @@ In the following example, the [autoCheck](https://ej2.syncfusion.com/react/docum ## Select All -The Dropdown Tree component has in-built support to select all the tree items using Select All options in the header. +The Dropdown Tree component has built-in support to select all the tree items using Select All options in the header. This feature provides a convenient way to quickly select or deselect all available tree items without having to check each item individually. -When the [showSelectAll](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#showselectall) property is set to true, a checkbox will be displayed in the popup header that allows you to select or deselect all the tree items in the popup. +When the [`showSelectAll`](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#showselectall) property is set to true, a checkbox will be displayed in the popup header that allows you to select or deselect all the tree items in the popup. Note that the [`showCheckBox`](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#showcheckbox) property must be enabled for the Select All feature to work properly. -By default, `Select All` and `unSelect All` text values will be showcased along with the checkbox in the popup header to indicate the action to be performed on checking or unchecking the checkbox. You can customize these name attributes by using [selectAllText](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#selectalltext) and [unSelectAllText](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#unselectalltext) properties respectively. +By default, `Select All` and `Unselect All` text values will be displayed along with the checkbox in the popup header to indicate the action to be performed on checking or unchecking the checkbox. You can customize these text labels by using [`selectAllText`](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#selectalltext) and [`unSelectAllText`](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#unselectalltext) properties respectively. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/drop-down-tree/data-binding.md b/ej2-react/drop-down-tree/data-binding.md index 254a9f60e..1a6a08dfa 100644 --- a/ej2-react/drop-down-tree/data-binding.md +++ b/ej2-react/drop-down-tree/data-binding.md @@ -1,24 +1,26 @@ --- layout: post -title: Data binding in React Drop down tree component | Syncfusion +title: Data binding in React Dropdown Tree component | Syncfusion description: Learn here all about Data binding in Syncfusion React Drop down tree component of Syncfusion Essential JS 2 and more. -control: Data binding +control: Dropdown Tree platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Data binding in React Drop down tree component +# Data binding in React Dropdown Tree component -The Dropdown Tree component provides options to load the data either from local data sources or from remote data services. This can be done through [dataSource](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/fieldsModel/#datasource) property that is a member of the [fields](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#fields) property. The [dataSource](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/fieldsModel/#datasource) property supports array of JavaScript objects and [`DataManager`](https://ej2.syncfusion.com/react/documentation/data/getting-started). It also supports different kinds of data services such as OData, OData V4, Web API, URL, and JSON with the help of `DataManager` adaptors. +The Dropdown Tree component provides flexible data binding capabilities to display hierarchical data from various sources. Data binding is essential for populating the Dropdown Tree with dynamic content and can be configured through the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/fieldsModel/#datasource) property, which is a member of the [`fields`](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#fields) property. This enables seamless integration with both local data arrays and remote data services. -Dropdown Tree has `load on demand` (Lazy load) option. It reduces the bandwidth size when consuming the huge data. By default, the [loadOnDemand](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/treeSettingsModel/#loadondemand) is set to false. By enabling this property, it loads first level items initially, and when parent item is expanded, loads the child items based on the `parentValue/child` member. +The [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/fieldsModel/#datasource) property supports array of JavaScript objects and `DataManager`. It also supports different kinds of data services such as OData, OData V4, Web API, URL, and JSON with the help of `DataManager` adaptors. + +The Dropdown Tree supports `load on demand` (lazy loading) functionality, which optimizes performance by reducing bandwidth consumption when working with large datasets. By default, the `loadOnDemand` is set to false. When enabled through the `treeSettings` property, it loads only the first level items initially. Child items are loaded dynamically when their parent item is expanded, based on the `parentValue` or `child` field mapping. ## Local data -To bind local data to the Dropdown Tree, you can assign a JavaScript object array to the [dataSource](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/fieldsModel/#datasource) property. +To bind local data to the Dropdown Tree, assign an array of JavaScript objects to the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/fieldsModel/#datasource) property. -The Dropdown Tree component requires three fields (Value, text, and parentValue) to render local data source. When mapper fields are not specified, it takes the default values as the mapping fields. Local data source can also be provided as an instance of the [`DataManager`](https://ej2.syncfusion.com/react/documentation/data/getting-started). It supports two kinds of local data binding methods. +The Dropdown Tree component requires three essential fields (**value**, **text**, and **parentValue**) to render local data source effectively. When field mappings are not explicitly specified, the component uses default values as the mapping fields. The **value** field serves as the unique identifier, **text** displays the node content, and **parentValue** establishes the hierarchical relationship. Local data source can also be provided as an instance of the `DataManager`. The component supports two primary local data binding methods. * Hierarchical data @@ -26,9 +28,9 @@ The Dropdown Tree component requires three fields (Value, text, and parentValue) ### Hierarchical data -Dropdown Tree can be populated with the hierarchical data source that contains nested array of JSON objects. You can directly map the hierarchical data and the field members with corresponding key values from the hierarchical data to the [fields](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#fields) property. +Dropdown Tree can be populated with hierarchical data source that contains nested arrays of JSON objects. This structure represents parent-child relationships through nested object arrays rather than reference-based relationships. You can directly map the hierarchical data and the field members with corresponding key values from the hierarchical data to the [`fields`](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#fields) property. -In the following example, **code**, **name**, and **countries** columns from the hierarchical data are mapped to **value**, **text**, and **child** fields, respectively. +In the following example, **code**, **name**, and **countries** columns from the hierarchical data have been mapped to **value**, **text**, and **child** fields, respectively. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -46,11 +48,11 @@ In the following example, **code**, **name**, and **countries** columns from the ### Self-referential data -Dropdown Tree can be populated from the self-referential data structure that contains array of JSON objects with [`parentValue`](https://helpej2.syncfusion.com/react/documentation/api/drop-down-tree/fieldsModel/#parentvalue) mapping. +Dropdown Tree can be populated from self-referential data structure that contains an array of JSON objects with [`parentValue`](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/fieldsModel/#parentvalue) mapping. This structure represents hierarchical relationships through parent-child references within a flat array, where each item contains a reference to its parent item. -You can directly assign the self-referential data and map all the field members with corresponding key values from self-referential data to the [fields](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#fields) property. +You can directly assign the self-referential data and map all the field members with corresponding key values from self-referential data to the [`fields`](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#fields) property. -To render the root level items, specify the parentValue as null or or omit it in the dataSource. +To render the root level items, specify the parentValue as null or no need to specify the parentValue in the dataSource. In the following example, **id**, **pid**, **hasChild**, and **name** columns from self-referential data have been mapped to **value**, **parentValue**, **hasChildren**, and **text** fields, respectively. @@ -70,11 +72,11 @@ In the following example, **id**, **pid**, **hasChild**, and **name** columns fr ## Remote data -Dropdown Tree can also be populated from a remote data service with the help of the [`DataManager`](https://ej2.syncfusion.com/react/documentation/data/getting-started) component and [`Query`](https://ej2.syncfusion.com/react/documentation/data/querying) property. +Dropdown Tree can also be populated from remote data services with the help of the [`DataManager`](https://ej2.syncfusion.com/react/documentation/data/getting-started) control and [`Query`](https://ej2.syncfusion.com/react/documentation/data/querying) property. This approach is ideal for working with large datasets or when data needs to be fetched from external sources. -It supports different kinds of data services such as OData, OData V4, Web API, URL, and JSON with the help of `DataManager` adaptors. +The component supports different kinds of data services such as OData, OData V4, Web API, URL, and JSON with the help of `DataManager` adaptors. -You can assign service data as an instance of `DataManager` to the [dataSource](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/fieldsModel/#datasource). To interact with remote data source, you must provide the endpoint `url`. +You can assign service data as an instance of `DataManager` to the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/fieldsModel/#datasource) property. To interact with remote data source, you must provide the endpoint `url`. The `DataManager` that acts as an interface between the service endpoint and the Dropdown Tree requires the following information to interact with service endpoint properly. @@ -82,7 +84,7 @@ The `DataManager` that acts as an interface between the service endpoint and the * `DataManager->adaptor`: Defines the adaptor option. By default, ODataAdaptor is used for remote binding. - Adaptor is responsible for processing response and request from/to the service endpoint. The `@syncfusion/ej2-data` package provides some pre-defined adaptors designed to interact with service endpoints. They are, +Adaptor is responsible for processing response and request from/to the service endpoint. The `@syncfusion/ej2-data` package provides some predefined adaptors designed to interact with service endpoints. They are: * `UrlAdaptor`: Used to interact with remote services. This is the base adaptor for all remote based adaptors. @@ -94,8 +96,7 @@ The `DataManager` that acts as an interface between the service endpoint and the * `WebMethodAdaptor`: Used to interact with web methods. -In the following example, `ODataV4Adaptor` is used to fetch data from the remote services. The **EmployeeID**, **FirstName**, and **EmployeeID** -columns from the Employees table have been mapped to **value**, **text**, and **hasChildren** fields respectively for first level items. +In the following example, `ODataV4Adaptor` is used to fetch data from the remote services. The **EmployeeID**, **FirstName**, and **EmployeeID** columns from the Employees table have been mapped to **value**, **text**, and **hasChildren** fields respectively for first level items. The **OrderID**, **EmployeeID**, and **ShipName** columns from the orders table have been mapped to **value**, **parentValue**, and **text** fields respectively for second level items. diff --git a/ej2-react/drop-down-tree/getting-started.md b/ej2-react/drop-down-tree/getting-started.md index 7df612a73..aebe4a807 100644 --- a/ej2-react/drop-down-tree/getting-started.md +++ b/ej2-react/drop-down-tree/getting-started.md @@ -1,20 +1,20 @@ --- layout: post -title: Getting started with React Drop down tree component | Syncfusion +title: Getting started with React Dropdown Tree component | Syncfusion description: Checkout and learn about Getting started with React Drop down tree component of Syncfusion Essential JS 2 and more details. -control: Getting started +control: Dropdown Tree platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Getting Started +# # Getting started with React Dropdown Tree component This section explains you about how to create a simple **Dropdown Tree** component and configure its available functionalities in React. ## Dependencies -The following list of dependencies are required to use the `Dropdown Tree` component in your application. +The following dependencies are required to use the `Dropdown Tree` component in your application: ```javascript |-- @syncfusion/ej2-react-dropdowns @@ -33,7 +33,7 @@ The following list of dependencies are required to use the `Dropdown Tree` compo To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production. -> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. +> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. To create a new React application, run the following command. @@ -55,7 +55,7 @@ cd my-app npm run dev ``` -## Adding syncfusion® packages +## Adding Syncfusion® packages All the available Essential® JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. You can choose the component that you want to install. diff --git a/ej2-react/drop-down-tree/localization.md b/ej2-react/drop-down-tree/localization.md index 1d704154d..341d732b3 100644 --- a/ej2-react/drop-down-tree/localization.md +++ b/ej2-react/drop-down-tree/localization.md @@ -1,20 +1,22 @@ --- layout: post -title: Localization in React Drop down tree component | Syncfusion +title: Localization in React Dropdown Tree component | Syncfusion description: Learn here all about Localization in Syncfusion React Drop down tree component of Syncfusion Essential JS 2 and more. -control: Localization +control: Dropdown Tree platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Localization in React Drop down tree component +# Localization in React Dropdown Tree component -The [`Localization`](../../base/localization.html) library allows you to localize default text content of the Dropdown Tree and it can be localized to any culture by defining the texts and messages of the Dropdown Tree in the corresponding culture. The default locale of the Dropdown Tree is `en` (English). The following table represents the default texts and messages of the Dropdown Tree in `en` culture. +The Dropdown Tree component supports comprehensive localization to adapt text, messages, and user interface elements for different cultures and languages. This enables seamless integration into multi-language applications by customizing all user-facing strings according to specific cultural requirements. The component's default locale is `en` (English), providing a foundation that can be extended to support any target culture through resource configuration and locale property settings. -|KEY|Text/Message| -|----|----| -|noRecordsTemplate|No records found| -|actionFailureTemplate|Request failed| -|overflowCountTemplate|+${count} more..| -|totalCountTemplate|${count} selected| +The following table represents the default localization keys and their corresponding text messages for the Dropdown Tree in `en` culture. These keys serve as templates that display dynamic content and can be customized for any target locale: + +|KEY|Text/Message|Usage Context| +|----|----|----| +|noRecordsTemplate|No records found|Displayed when no data matches the current filter or when the data source is empty| +|actionFailureTemplate|Request failed|Shown when data loading operations encounter errors or network failures| +|overflowCountTemplate|+${count} more..|Appears when multiple items are selected and the display area shows a summary count of additional selections| +|totalCountTemplate|${count} selected|Displays the total number of currently selected items in multi-selection scenarios| diff --git a/ej2-react/drop-down-tree/templates.md b/ej2-react/drop-down-tree/templates.md index 61e9ceed0..113db04ba 100644 --- a/ej2-react/drop-down-tree/templates.md +++ b/ej2-react/drop-down-tree/templates.md @@ -1,22 +1,22 @@ --- layout: post -title: Templates in React Drop down tree component | Syncfusion +title: Templates in React Dropdown Tree component | Syncfusion description: Learn here all about Templates in Syncfusion React Drop down tree component of Syncfusion Essential JS 2 and more. -control: Templates +control: Dropdown Tree platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Templates in React Drop down tree component +# Templates in React Dropdown Tree component The Dropdown Tree provides support for customizing each list item, header, and footer elements. ## Item template -The content of each list item within the Dropdown Tree can be customized using the [itemTemplate](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree#itemtemplate) property. +Customize the content of each list item within the Dropdown Tree using the [itemTemplate](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#itemtemplate) property. This allows you to display complex data structures with custom formatting and styling. -In the following sample, the Dropdown Tree list items are customized with employee information such as **name** and **job** using the [itemTemplate](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree#itemtemplate) property. +In the following sample, the Dropdown Tree list items display employee information including **name** and **job** details using the **itemTemplate** property. The template expression should be provided inside the {...} interpolation syntax. @@ -39,9 +39,9 @@ The template expression should be provided inside the {...} interpolation syntax ## Value template -The currently selected value displayed by default in the Dropdown Tree input element can be customized using the [valueTemplate](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree#valuetemplate) property. +The currently selected value displayed in the Dropdown Tree input element can be customized using the [valueTemplate](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#valuetemplate) property. This template controls how selected items appear in the input field. -In the following sample, the selected value is displayed as a combined text of both `Name` and `Job` in the Dropdown Tree input, which is separated by a hyphen. +In the following sample, the selected value displays as combined text showing both `Name` and `Job` separated by a hyphen. The template expression should be provided inside the {...} interpolation syntax. @@ -64,9 +64,9 @@ The template expression should be provided inside the {...} interpolation syntax ## Header template -The header element is shown statically at the top of the popup list items within the Dropdown Tree. A custom element can be used as a header element using the [headerTemplate](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#headertemplate) property. +The header element appears statically at the top of the popup list items within the Dropdown Tree. Use the [headerTemplate](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#headertemplate) property to place custom elements as header content. -In the following sample, the header is customized with the custom element. +In the following sample, the header is customized with a custom element that provides context for the dropdown content. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -87,9 +87,9 @@ In the following sample, the header is customized with the custom element. ## Footer template -The Dropdown Tree has options to show a footer element at the bottom of the list items in the popup list. Here, you can place any custom element as a footer element using the [footerTemplate](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#footertemplate) property. +The Dropdown Tree supports displaying a footer element at the bottom of the popup list items. Use the [footerTemplate](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#footertemplate) property to place custom elements as footer content. -In the following sample, the footer element displays the total number of employees present in the Dropdown Tree. +In the following sample, the footer element displays the total number of employees available in the Dropdown Tree. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -110,9 +110,9 @@ In the following sample, the footer element displays the total number of employe ## No records template -The Dropdown Tree supports displaying custom designs in the popup list content using the [noRecordsTemplate](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#norecordstemplate) property when no matches found on search. +The Dropdown Tree supports displaying custom content when no matches are found during search operations. Use the [noRecordsTemplate](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#norecordstemplate) property to customize the no data message. -In the following sample, popup list content displays the notification of no data available. +In the following sample, the popup list displays a custom notification when no data is available. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -130,7 +130,7 @@ In the following sample, popup list content displays the notification of no data ## Action failure template -The Dropdown Tree provides an option to custom design the popup list content using [actionFailureTemplate](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#actionfailuretemplate) property, when the data fetch request fails at the remote server. +The Dropdown Tree provides options to customize the popup list content when data fetch requests fail at the remote server. Use the [actionFailureTemplate](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#actionfailuretemplate) property to display custom error messages. In the following sample, when the data fetch request fails, the Dropdown Tree displays the notification. @@ -148,13 +148,13 @@ In the following sample, when the data fetch request fails, the Dropdown Tree di {% previewsample "page.domainurl/code-snippet/dropdowntree/actionfailure-template-cs1" %} -## Custom template to show selected items in input +## Custom template for selected items display -In Dropdown Tree, while selecting more than one items via checkbox or multi selection support, all the selected items will be displayed in the input. Instead of displaying all the selected item text, a custom template can be displayed by setting the the [mode](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#mode) property as ***Custom*** and [customTemplate](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#customTemplate) property. +When multiple items are selected via checkbox or multi-selection, the Dropdown Tree can display a custom template instead of showing all selected item text. Configure this by setting the [mode](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#mode) property to ***Custom*** and using the [customTemplate](https://ej2.syncfusion.com/react/documentation/api/drop-down-tree/#customtemplate) property. -When the **mode** property is set to **Custom**, the Dropdown Tree displays the default template value **(${value.length} item(s) selected)**, such as **1 item(s) selected or 2 item(s) selected**. The default template can be customized by setting **customTemplate** property. +When the **mode** property is set to **Custom**, the Dropdown Tree displays the default template value **(${value.length} item(s) selected)** such as **1 item(s) selected** or **2 item(s) selected**. Customize this default template using the **customTemplate** property. -In the following sample, the Dropdown Tree is rendered with default value of the **customTemplate** property like “**1 item(s) selected or 2 item(s) selected**”. +In the following sample, the Dropdown Tree renders with the default value of the **customTemplate** property displaying **1 item(s) selected** or **2 item(s) selected**. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -170,7 +170,7 @@ In the following sample, the Dropdown Tree is rendered with default value of the {% previewsample "page.domainurl/code-snippet/dropdowntree/custom-template-mode-cs1" %} -In the following sample, the Dropdown Tree is rendered with custom value of the **customTemplate** property like **Selected items count: 2**. +In the following sample, the Dropdown Tree renders with a custom value for the **customTemplate** property displaying **Selected items count: 2**. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/splitter/accessibility.md b/ej2-react/splitter/accessibility.md index 670f2672c..52fd2e04a 100644 --- a/ej2-react/splitter/accessibility.md +++ b/ej2-react/splitter/accessibility.md @@ -2,7 +2,7 @@ layout: post title: Accessibility in React Splitter component | Syncfusion description: Learn here all about Accessibility in Syncfusion React Splitter component of Syncfusion Essential JS 2 and more. -control: Accessibility +control: Splitter platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,9 +10,9 @@ domainurl: ##DomainURL## # Accessibility in React Splitter component -The Splitter component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The React Splitter component adheres to major accessibility standards including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles), ensuring inclusive user experiences across platforms. -The accessibility compliance for the Splitter component is outlined below. +## Accessibility compliance overview | Accessibility Criteria | Compatibility | | -- | -- | @@ -40,7 +40,7 @@ The accessibility compliance for the Splitter component is outlined below. ## Keyboard interaction -You can use the following key shortcuts to access the splitter without interruptions: +Use the following keyboard shortcuts to navigate and interact with the Splitter component: | **Keyboard shortcuts** | **Actions** | | --- | --- | diff --git a/ej2-react/splitter/different-layouts.md b/ej2-react/splitter/different-layouts.md index d9d50bceb..6918900d1 100644 --- a/ej2-react/splitter/different-layouts.md +++ b/ej2-react/splitter/different-layouts.md @@ -2,7 +2,7 @@ layout: post title: Different layouts in React Splitter component | Syncfusion description: Learn here all about Different layouts in Syncfusion React Splitter component of Syncfusion Essential JS 2 and more. -control: Different layouts +control: Splitter platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,11 +10,12 @@ domainurl: ##DomainURL## # Different layouts in React Splitter component -By using splitter control, you can create the different layouts with multiple and nested panes. +Using the React Splitter component, you can create complex layouts with multiple and nested panes. ## Code editor style layout -Create the element with two child to render the outer splitter and create the inner splitter from first pane of vertical splitter. +Create an element with two child panes to render the outer Splitter. Then, create an inner Splitter inside the first pane of the vertical Splitter. + `[Class-component]` @@ -178,7 +179,7 @@ Once the above configurations has been completed, you will get the output like [ ## Outlook style layout -Create the element with three panes and place the elements within the pane to render `treeview`, `listview` and `RTE`. +Create an element with three panes and place the required components inside each pane to render `TreeView`, `ListView`, and `Rich Text Editor`. `[Class-component]` diff --git a/ej2-react/splitter/ej1-api-migration.md b/ej2-react/splitter/ej1-api-migration.md index 5ea8c26a6..d78d20117 100644 --- a/ej2-react/splitter/ej1-api-migration.md +++ b/ej2-react/splitter/ej1-api-migration.md @@ -2,7 +2,7 @@ layout: post title: Ej1 api migration in React Splitter component | Syncfusion description: Learn here all about Ej1 api migration in Syncfusion React Splitter component of Syncfusion Essential JS 2 and more. -control: Ej1 api migration +control: Splitter platform: ej2-react documentation: ug domainurl: ##DomainURL## diff --git a/ej2-react/splitter/expand-collapse.md b/ej2-react/splitter/expand-collapse.md index 2d9185a7a..a6f3fa22f 100644 --- a/ej2-react/splitter/expand-collapse.md +++ b/ej2-react/splitter/expand-collapse.md @@ -2,19 +2,19 @@ layout: post title: Expand collapse in React Splitter component | Syncfusion description: Learn here all about Expand collapse in Syncfusion React Splitter component of Syncfusion Essential JS 2 and more. -control: Expand collapse +control: Splitter platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Expand collapse in React Splitter component +# Expand and collapse panes in React Splitter component ## Collapsible panes -The Splitter panes can be configured with built-in expand and collapse functionalities. By default, the collapsible behavior is disabled. Enable the [collapsible](https://ej2.syncfusion.com/react/documentation/api/splitter/panePropertiesModel/#collapsible) behavior in the paneSettings property to show or hide the expand or collapse icons in the panes. You can dynamically expand and collapse the panes by the corresponding icons. +The React Splitter component supports built-in expand and collapse functionality for its panes. By default, this behavior is disabled. To enable it, set the [collapsible](https://ej2.syncfusion.com/react/documentation/api/splitter/panePropertiesModel/#collapsible) property within `paneSettings`. This displays expand and collapse icons in the panes. You can dynamically expand and collapse the panes by clicking on the corresponding icons -The following code shows how to enable collapsible behavior. +The following example demonstrates how to enable collapsible behavior: `[Class-component]` @@ -42,9 +42,11 @@ The following code shows how to enable collapsible behavior. {% previewsample "page.domainurl/code-snippet/splitter/expand-collapse-cs2" %} -## Control the expand and collapse action in programmatic manner +## Programmatically control the expand and collapse action -The Splitter provides an option to control the expand and collapse behavior programmatically by using the `expand` and `collapse` methods. Refer to the following code sample. +You can also control pane visibility programmatically using the Splitter’s public methods: [expand](https://ej2.syncfusion.com/react/documentation/api/splitter/#expand) and [collapse](https://ej2.syncfusion.com/react/documentation/api/splitter/#collapse). These methods allow you to dynamically toggle panes based on application logic. + +Here’s an example of using these methods: `[Class-component]` @@ -72,9 +74,9 @@ The Splitter provides an option to control the expand and collapse behavior prog {% previewsample "page.domainurl/code-snippet/splitter/expand-collapse-method-cs2" %} -## Specify initial state to panes +## Set initial collapsed state -You can render specific panes with collapsed state on page load. Specify a Boolean value to the [collapsed](https://ej2.syncfusion.com/react/documentation/api/splitter/panePropertiesModel/#collapsed) property to control this behavior. The following code explains how to collapse panes on rendering (the second panes renders with collapsed state). +To render a pane in a collapsed state on initial load, set the [collapsed](https://ej2.syncfusion.com/react/documentation/api/splitter/#collapsed) property to `true`. This is useful for customizing the default layout based on user preferences or screen size. `[Class-component]` diff --git a/ej2-react/splitter/getting-started-functional.md b/ej2-react/splitter/getting-started-functional.md index b9f261417..e5ddb84ad 100644 --- a/ej2-react/splitter/getting-started-functional.md +++ b/ej2-react/splitter/getting-started-functional.md @@ -2,19 +2,19 @@ layout: post title: Getting started functional with React Splitter component | Syncfusion description: Checkout and learn about Getting started functional with React Splitter component of Syncfusion Essential JS 2 and more details. -control: Getting started functional +control: Splitter platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Getting Started +# Getting Started with React Splitter -The following section explains the steps required to build the Splitter component with step-by-step procedure. +The following section explains the steps required to build the Splitter component with a step-by-step procedure. ## Dependencies -The following list of dependencies required to use the Splitter component in your application: +The following dependencies are required to use the Splitter component in your application: ```js |-- @syncfusion/ej2-layouts @@ -67,7 +67,7 @@ This can be referred in your application using the following code. ## Adding Splitter to the project -The Splitter can be initialized through `` tag-directive with `` and `` as child elements respectively. +Initialize the Splitter through `` tag-directive with `` and `` as child elements respectively. Please refer the below code snippet, @@ -118,7 +118,7 @@ Output will be as follows: ## Orientation -Splitter supports both `Horizontal` and `Vertical` orientation for the panes. By default, it will be rendered in `Horizontal` orientation. You can change it by using [orientation](https://ej2.syncfusion.com/react/documentation/api/splitter#orientation) property. +Splitter supports both `Horizontal` and `Vertical` pane layouts. By default, it renders in `Horizontal` orientation. Change it using the [orientation](https://ej2.syncfusion.com/react/documentation/api/splitter/#orientation) property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -131,11 +131,11 @@ Splitter supports both `Horizontal` and `Vertical` orientation for the panes. By {% previewsample "page.domainurl/code-snippet/splitter/getting-started-cs2" %} -## Load content to the pane +## Load Content into Panes -You can load the pane contents in either HTML element or string types using [content](https://ej2.syncfusion.com/react/documentation/api/splitter/panePropertiesModel/#content) property. +Load pane content as an HTML element or string using the [content](https://ej2.syncfusion.com/react/documentation/api/splitter/panePropertiesModel/#content) property. -For detailed information, refer to the [Pane Content](./pane-content/) section +For detailed information, refer to the [Pane Content](./pane-content) section. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -150,4 +150,4 @@ For detailed information, refer to the [Pane Content](./pane-content/) section ## See Also -* [Construct different layouts using Splitter](different-layouts) \ No newline at end of file +* [Construct different layouts using Splitter](different-layouts) diff --git a/ej2-react/splitter/getting-started.md b/ej2-react/splitter/getting-started.md index f4e626323..11574d5f1 100644 --- a/ej2-react/splitter/getting-started.md +++ b/ej2-react/splitter/getting-started.md @@ -2,19 +2,19 @@ layout: post title: Getting started with React Splitter component | Syncfusion description: Checkout and learn about Getting started with React Splitter component of Syncfusion Essential JS 2 and more details. -control: Getting started +control: Splitter platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Getting Started +# Getting Started with React Splitter -The following section explains the steps required to build the Splitter component with step-by-step procedure. +The following section explains the steps required to build the Splitter component with a step-by-step procedure. ## Dependencies -The following list of dependencies required to use the Splitter component in your application: +The following dependencies are required to use the Splitter component in your application: ```js |-- @syncfusion/ej2-layouts @@ -26,26 +26,26 @@ The following list of dependencies required to use the Splitter component in you ## Installation and configuration -To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production. +To quickly set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production. -> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. +> **Note:** To create a React application using `create-react-app`, refer to this [Syncfusion guide](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. To create a new React application, run the following command. ```bash npm create vite@latest my-app ``` -To set-up a React application in TypeScript environment, run the following command. +To set up a React application in TypeScript environment, run the following command. ```bash -npm create vite@latest my-app -- --template react-ts +npm create vite@latest my-app --template react-ts cd my-app npm run dev ``` -To set-up a React application in JavaScript environment, run the following command. +To set up a React application in JavaScript environment, run the following command. ```bash -npm create vite@latest my-app -- --template react +npm create vite@latest my-app --template react cd my-app npm run dev ``` @@ -56,7 +56,6 @@ Install the below required dependency package in order to use the `Splitter` com npm install @syncfusion/ej2-react-layouts --save ``` - ## Adding CSS Reference The Splitter CSS files are available in the `ej2-layouts` package folder. @@ -71,7 +70,7 @@ This can be referred in your application using the following code. ## Adding Splitter to the project -The Splitter can be initialized through `` tag-directive with `` and `` as child elements respectively. +Initialize the Splitter using the`` tag-directive with `` and `` child elements respectively. Please refer the below code snippet, @@ -122,7 +121,7 @@ Output will be as follows: ## Orientation -Splitter supports both `Horizontal` and `Vertical` orientation for the panes. By default, it will be rendered in `Horizontal` orientation. You can change it by using [orientation](https://ej2.syncfusion.com/react/documentation/api/splitter#orientation) property. +Splitter supports both `Horizontal` and `Vertical` orientations. By default, it renders in `Horizontal` orientation. Change the layout by setting the [orientation](https://ej2.syncfusion.com/react/documentation/api/splitter/#orientation) property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -137,9 +136,9 @@ Splitter supports both `Horizontal` and `Vertical` orientation for the panes. By ## Load content to the pane -You can load the pane contents in either HTML element or string types using [content](https://ej2.syncfusion.com/react/documentation/api/splitter/panePropertiesModel/#content) property. +Use the [content](https://ej2.syncfusion.com/react/documentation/api/splitter/panePropertiesModel/#content) property to load pane contents as an HTML element or string. -For detailed information, refer to the [Pane Content](./pane-content/) section +For detailed information, refer to the [Pane Content](./pane-content) section. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/splitter/globalization.md b/ej2-react/splitter/globalization.md index 4bb917c02..a647751c7 100644 --- a/ej2-react/splitter/globalization.md +++ b/ej2-react/splitter/globalization.md @@ -2,7 +2,7 @@ layout: post title: Globalization in React Splitter component | Syncfusion description: Learn here all about Globalization in Syncfusion React Splitter component of Syncfusion Essential JS 2 and more. -control: Globalization +control: Splitter platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,9 +10,11 @@ domainurl: ##DomainURL## # Globalization in React Splitter component -## RTL +The React Splitter component supports globalization features, including right-to-left (RTL) rendering for languages such as Arabic and Hebrew. -Specifies the direction of the Splitter component using the enableRtl property. For writing systems that require it like Arabic, Hebrew, etc., the direction can be switched to right-to-left. +## Right-to-Left (RTL) support + +To enable RTL layout, set the [`enableRtl`](https://ej2.syncfusion.com/react/documentation/api/splitter/#enablertl) property to `true`. This adjusts the direction of the Splitter panes and split bars to accommodate RTL writing systems. The following code shows how to enable RTL behavior. diff --git a/ej2-react/splitter/pane-content.md b/ej2-react/splitter/pane-content.md index 70d5ac060..b82b58e99 100644 --- a/ej2-react/splitter/pane-content.md +++ b/ej2-react/splitter/pane-content.md @@ -2,7 +2,7 @@ layout: post title: Pane content in React Splitter component | Syncfusion description: Learn here all about Pane content in Syncfusion React Splitter component of Syncfusion Essential JS 2 and more. -control: Pane content +control: Splitter platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Pane content in React Splitter component -This section explains how to provide plain text content or HTML markup or integrate other React UI controls as content of splitter. +This guide explains how to use plain text, HTML markup, templates, or React UI components as content within the panes of the Syncfusion React Splitter. ## Template @@ -44,13 +44,13 @@ You can render the HTML element directly to the splitter pane content using [con ## React UI components -You can render any React UI controls along with their native and control events within splitter as pane content. +React UI components can be embedded within Splitter panes, supporting their native behaviors and event bindings. You can refer [Accordion within splitter](https://ej2.syncfusion.com/react/demos/#/material/splitter/accordion-navigation-menu) and [Listview within splitter](https://ej2.syncfusion.com/react/demos/#/material/splitter/details-view) samples. ## Plain content -You can add the plain text as a pane contents using either inner HTML or [content](https://ej2.syncfusion.com/react/documentation/api/splitter/panePropertiesModel/#content) API +You can insert plain text into a pane using either inner HTML or the [content](https://ej2.syncfusion.com/react/documentation/api/splitter/panePropertiesModel/#content) property. `[Class-component]` @@ -80,7 +80,7 @@ You can add the plain text as a pane contents using either inner HTML or [conten ## HTML Markup -Splitter is a layout based container control. You can render the pane contents from existing HTML markup. Converting HTML markup as splitter pane is easy way to add the panes content dynamically. +Splitter is a layout-based container component. You can dynamically populate pane content using existing HTML markup, making it easy to update content without modifying component logic. `[Class-component]` @@ -110,9 +110,7 @@ Splitter is a layout based container control. You can render the pane contents f ## Pane content using selector -You can set HTML element as pane [content](https://ej2.syncfusion.com/react/documentation/api/splitter/panePropertiesModel/#content) using the query selectors such as ID or CSS class selectors. - -The following code demonstrates how to fetch an element from the document and load it to pane using its ID. +You can assign pane [content](https://ej2.syncfusion.com/react/documentation/api/splitter/panePropertiesModel/#content) using query selectors such as element IDs or CSS class names. The example below demonstrates how to load an element into a pane using its ID. `[Class-component]` diff --git a/ej2-react/splitter/pane-sizing.md b/ej2-react/splitter/pane-sizing.md index 7e377b2c3..ade9d5ea9 100644 --- a/ej2-react/splitter/pane-sizing.md +++ b/ej2-react/splitter/pane-sizing.md @@ -2,7 +2,7 @@ layout: post title: Pane sizing in React Splitter component | Syncfusion description: Learn here all about Pane sizing in Syncfusion React Splitter component of Syncfusion Essential JS 2 and more. -control: Pane sizing +control: Splitter platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,9 +10,12 @@ domainurl: ##DomainURL## # Pane sizing in React Splitter component -Splitter allows you to provide pane sizes either in pixel or percentage formats. -## Pane size in pixel +The React Splitter component allows you to define pane sizes using pixel values, percentage values, or automatic sizing based on layout behavior. + +## Set pane size in pixels + +To assign fixed pixel values to panes, use the `size` property in `paneSettings`. This ensures consistent pane dimensions regardless of container size. `[Class-component]` @@ -40,7 +43,9 @@ Splitter allows you to provide pane sizes either in pixel or percentage formats. {% previewsample "page.domainurl/code-snippet/splitter/pane-sizes-cs2" %} -## Pane size in percentage +## Set pane size in percentage + +You can also define pane sizes as percentages. This approach ensures responsive behavior across different screen sizes. `[Class-component]` @@ -68,9 +73,8 @@ Splitter allows you to provide pane sizes either in pixel or percentage formats. {% previewsample "page.domainurl/code-snippet/splitter/pane-sizes-cs4" %} -## Auto size panes - -You can render the split panes without providing the size values. It will split up the sizes automatically. +## Auto-size panes +When no explicit size is provided, panes automatically adjust based on available space. This behavior is powered by the default flex layout, allowing dynamic resizing when panes are added, removed, shown, or hidden. `[Class-component]` @@ -100,7 +104,7 @@ You can render the split panes without providing the size values. It will split ## Fixed pane -You can render the split panes with fixed sizes. Since last pane is a flexible pane, fixed size will not be applied. +You can configure panes with fixed sizes in both horizontal and vertical orientations. However, even when all panes are assigned fixed sizes, the Splitter treats the last pane as flexible to ensure layout adaptability. At least one pane must remain flexible to accommodate container changes. `[Class-component]` diff --git a/ej2-react/splitter/resize.md b/ej2-react/splitter/resize.md index bfc43a8b8..86169cd04 100644 --- a/ej2-react/splitter/resize.md +++ b/ej2-react/splitter/resize.md @@ -2,24 +2,24 @@ layout: post title: Resize in React Splitter component | Syncfusion description: Learn here all about Resize in Syncfusion React Splitter component of Syncfusion Essential JS 2 and more. -control: Resize +control: Splitter platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Resize in React Splitter component +# Resizing panes in React Splitter component -By default, resizing will be enable for split panes. Resizing gripper element will be add to the separator to makes the resize easy. +By default, pane resizing is enabled in the React Splitter component. A gripper element is added to the separator to make resizing intuitive and user-friendly. -> Horizontal splitter will allows to resize in horizontal directions. -> Vertical splitter will allows to resize in vertical directions. +> The horizontal Splitter allows resizing in horizontal directions. +> The vertical Splitter allows resizing in vertical directions. -While resizing, previous and next panes will be adjust its dimensions automatically. +During resizing, the adjacent panes automatically adjust their dimensions to accommodate the change. -## Min and Max validation +## Minimum and Maximum size constraints -Splitter allows you to set the minimum and maximum sizes for each pane. Resizing will not be occur over the minimum and maximum values. +You can define minimum and maximum sizes for each pane. Resizing is restricted within these boundaries to maintain layout integrity. `[Class-component]` @@ -47,7 +47,7 @@ Splitter allows you to set the minimum and maximum sizes for each pane. Resizing {% previewsample "page.domainurl/code-snippet/splitter/validation-cs2" %} -## Prevent resizing +## Disabling pane resizing You can disable the resizing for the pane by setting `false` to the [resizable](https://ej2.syncfusion.com/react/documentation/api/splitter/panePropertiesModel/#resizable) property within paneSettings. @@ -77,14 +77,17 @@ You can disable the resizing for the pane by setting `false` to the [resizable]( {% previewsample "page.domainurl/code-snippet/splitter/prevent-resize-cs2" %} -## Refresh content on resizing +## Refreshing content during resize -While resizing the panes, you can refresh the pane contents by using either [resizeStart](https://ej2.syncfusion.com/react/documentation/api/splitter#resizestart), -[resizing](https://ej2.syncfusion.com/react/documentation/api/splitter#resizestart) or [resizeStop](https://ej2.syncfusion.com/react/documentation/api/splitter#resizestart) events. +You can refresh pane content dynamically during resizing by using the following events: -## Customize the resize grip and cursor +- [`resizeStart`](https://ej2.syncfusion.com/react/documentation/api/splitter/#resizestart) +- [`resizing`](https://ej2.syncfusion.com/react/documentation/api/splitter/#resizing) +- [`resizeStop`](https://ej2.syncfusion.com/react/documentation/api/splitter/#resizestop) -You can customize the resize gripper icon and cursor in CSS level. +## Customizing Resize-gripper and Cursor + +You can style the resize gripper icon and cursor using CSS to match your application's design. `[Class-component]` diff --git a/ej2-react/splitter/split-panes.md b/ej2-react/splitter/split-panes.md index 86fe08f91..918213626 100644 --- a/ej2-react/splitter/split-panes.md +++ b/ej2-react/splitter/split-panes.md @@ -2,7 +2,7 @@ layout: post title: Split panes in React Splitter component | Syncfusion description: Learn here all about Split panes in Syncfusion React Splitter component of Syncfusion Essential JS 2 and more. -control: Split panes +control: Splitter platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Split panes in React Splitter component -This section explain about split panes behaviors. +This section explains the behavior of split panes in the React Splitter component. ## Horizontal layout -By default, splitter will render in horizontal orientation. Splitter container will be split as panes in horizontal flow direction with vertical separator. +By default, the Splitter renders in horizontal orientation, dividing the container into panes with a vertical separator. `[Class-component]` @@ -44,7 +44,7 @@ By default, splitter will render in horizontal orientation. Splitter container w ## Vertical layout -By setting [orientation](https://ej2.syncfusion.com/react/documentation/api/splitter/#orientation) property as `Vertical`, splitter will render in vertical orientation. Splitter container will be split as panes in vertical flow direction with horizontal separator. +Set the [orientation](https://ej2.syncfusion.com/react/documentation/api/splitter/#orientation) property to `Vertical` to render the Splitter in vertical orientation, dividing the container into panes with a horizontal separator. `[Class-component]` @@ -74,7 +74,7 @@ By setting [orientation](https://ej2.syncfusion.com/react/documentation/api/spli ## Multiple panes -You can render the multiple panes with both `Horizontal` and `Vertical` orientations. +You can render multiple panes in both `Horizontal` and `Vertical` orientations. `[Class-component]` @@ -104,10 +104,10 @@ You can render the multiple panes with both `Horizontal` and `Vertical` orientat ## Separator -By default, pane separator will be render with `1px` width/height. You can customize the separator size by using [separatorSize](https://ej2.syncfusion.com/react/documentation/api/splitter/#separatorsize) property. +By default, the pane separator is rendered with a `1px` width/height. You can customize the separator size using the [separatorSize](https://ej2.syncfusion.com/react/documentation/api/splitter/#separatorsize) property. -> For Horizontal orientation, it will be considered as separator width. -> For Vertical orientation, it will be considered as separator height. +- For horizontal orientation, this defines the separator’s width. +- For vertical orientation, this defines the separator’s height. `[Class-component]` @@ -137,7 +137,7 @@ By default, pane separator will be render with `1px` width/height. You can custo ## Nested Splitter -Splitter provides support to render the nested pane to achieve the complex layouts. You can use the same `
    ` element for splitter pane and nested splitter. +Splitter supports nested panes for complex layouts. You can use the same `
    ` element for both the parent pane and the nested Splitter. > Also you can render the nested splitter using direct child of the splitter pane. For this, nested splitter should have `100%` width and height to match with the parent pane dimensions. @@ -169,7 +169,7 @@ Splitter provides support to render the nested pane to achieve the complex layou ## Add or remove pane -You can add or remove panes programmatically to the splitter. By using [addPane](https://ej2.syncfusion.com/react/documentation/api/splitter#addpane) and [removePane](https://ej2.syncfusion.com/react/documentation/api/splitter#removepane) methods. +You can add or remove panes programmatically using the [addPane](https://ej2.syncfusion.com/react/documentation/api/splitter/#addpane) and [removePane](https://ej2.syncfusion.com/react/documentation/api/splitter/#removepane) methods. ### Add pane @@ -203,7 +203,7 @@ You can add the panes dynamically in the splitter by passing [pane properties](h ### Remove pane -You can remove the split panes dynamically by passing the pane index to [removePane](https://ej2.syncfusion.com/react/documentation/api/splitter#removepane) method. +You can remove the split panes dynamically by passing the pane index to [removePane](https://ej2.syncfusion.com/react/documentation/api/splitter/#removepane) method. `[Class-component]` diff --git a/ej2-react/splitter/style.md b/ej2-react/splitter/style.md index 23513d499..5c57be76e 100644 --- a/ej2-react/splitter/style.md +++ b/ej2-react/splitter/style.md @@ -2,7 +2,7 @@ layout: post title: Style in React Splitter component | Syncfusion description: Learn here all about Style in Syncfusion React Splitter component of Syncfusion Essential JS 2 and more. -control: Style +control: Splitter platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Style in React Splitter component -The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. +This guide outlines the CSS structure used to customize the appearance of the React Splitter component based on user preferences. ## Customizing the split bar -Use the following CSS to customize the split bar properties. +Use the following CSS rules to modify the default, hover, and active states of the split bar. ### Horizontal split bar @@ -48,7 +48,7 @@ Use the following CSS to customize the split bar properties. ## Customizing the split bar resize handle -Use the following CSS to customize the split bar resize handle. +Adjust the appearance of the resize handle within the split bar. ### Horizontal split bar resize handle @@ -82,7 +82,7 @@ Use the following CSS to customize the split bar resize handle. ## Customizing the split bar arrows -Use the following CSS to customize the split bar arrows. +Modify the appearance of the navigation arrows displayed on the split bar. ### Horizontal split bar resize arrows @@ -114,7 +114,7 @@ Use the following CSS to customize the split bar arrows. ## To hide the resize handle in Splitter -Use the following CSS to hide the resize handler in the split bar +To remove the resize handle from the split bar, apply the following CSS: ### Hide the horizontal split bar resize arrow diff --git a/ej2-react/timeline/accessibility.md b/ej2-react/timeline/accessibility.md index 91ef8630c..56fbb6719 100644 --- a/ej2-react/timeline/accessibility.md +++ b/ej2-react/timeline/accessibility.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Accessibility in React Timeline component -The Timeline component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Timeline component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. The accessibility compliance for the Timeline component is outlined below. @@ -38,7 +38,7 @@ The accessibility compliance for the Timeline component is outlined below. ## WAI-ARIA attributes -The following ARIA attributes are used in the Timeline component: +The following ARIA attributes are used in the Timeline component to ensure proper accessibility for users with assistive technologies: | Attributes | Purpose | | --- | --- | @@ -47,8 +47,8 @@ The following ARIA attributes are used in the Timeline component: ## Ensuring accessibility -The Timeline component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. +The Timeline component's accessibility levels are ensured through [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. ## See also -* [Accessibility in Syncfusion® React components](../common/accessibility) +* [Accessibility in Syncfusion® React components](../common/accessibility) \ No newline at end of file diff --git a/ej2-react/timeline/align.md b/ej2-react/timeline/align.md index a279d70d4..e4eea2179 100644 --- a/ej2-react/timeline/align.md +++ b/ej2-react/timeline/align.md @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Alignment in React Timeline component -You can display the Timeline content `Before`, `After`, `Alternate` and `AlternateReverse` by using the [align](https://ej2.syncfusion.com/react/documentation/api/timeline/#align) property. The oppositeContent will be displayed parallel to the content when configured in the `ItemDirective`. +The Timeline component allows you to control the positioning of content using the [align](https://ej2.syncfusion.com/react/documentation/api/timeline/#align) property, which accepts values `Before`, `After`, `Alternate`, or `AlternateReverse`. When both content and oppositeContent are configured in the `ItemDirective`, the oppositeContent will be displayed parallel to the main content, creating a balanced layout on opposite sides of the timeline. ## Before -In [Before](https://ej2.syncfusion.com/react/documentation/api/timeline/timelineAlign/) alignment, for `horizontal` orientation the item content is placed at the top and oppositeContent at the bottom whereas in `vertical`, the content to the left and oppositeContent to the right. +The [Before](https://ej2.syncfusion.com/react/documentation/api/timeline/timelineAlign/) alignment positions content strategically based on orientation. For `horizontal` orientation, the main content appears at the top with oppositeContent at the bottom. For `vertical` orientation, content is positioned on the left side while oppositeContent appears on the right side. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -35,7 +35,7 @@ In [Before](https://ej2.syncfusion.com/react/documentation/api/timeline/timeline ## After -In [After](https://ej2.syncfusion.com/react/documentation/api/timeline/timelineAlign/) alignment, for `horizontal` orientation the item content is placed at the bottom and oppositeContent at the top whereas in `vertical`, the content to the right and oppositeContent to the left. +The [After](https://ej2.syncfusion.com/react/documentation/api/timeline/timelineAlign/) alignment reverses the content positioning compared to Before alignment. For `horizontal` orientation, the main content is placed at the bottom with oppositeContent at the top. For `vertical` orientation, content appears on the right side while oppositeContent is positioned on the left side. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -56,7 +56,7 @@ In [After](https://ej2.syncfusion.com/react/documentation/api/timeline/timelineA ## Alternate -In [Alternate](https://ej2.syncfusion.com/react/documentation/api/timeline/timelineAlign/) alignment, the item content are arranged alternatively regardless of the Timeline orientation. +The [Alternate](https://ej2.syncfusion.com/react/documentation/api/timeline/timelineAlign/) alignment creates a dynamic zigzag pattern where timeline items switch positions alternately. This arrangement provides visual variety and works effectively for showcasing parallel events or comparisons, regardless of whether the Timeline orientation is horizontal or vertical. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -77,7 +77,7 @@ In [Alternate](https://ej2.syncfusion.com/react/documentation/api/timeline/timel ## Alternate reverse -In [AlternateReverse](https://ej2.syncfusion.com/react/documentation/api/timeline/timelineAlign/) alignment, the item content are arranged in reverse alternate regardless of the Timeline orientation. +The [AlternateReverse](https://ej2.syncfusion.com/react/documentation/api/timeline/timelineAlign/) alignment creates the opposite pattern of Alternate alignment, where timeline items are arranged in reverse alternating order. This provides another visual variation for displaying data with an inverted alternating pattern, maintaining effectiveness across both Timeline orientations. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/timeline/customization.md b/ej2-react/timeline/customization.md index cf7ebd95a..d306ca17a 100644 --- a/ej2-react/timeline/customization.md +++ b/ej2-react/timeline/customization.md @@ -10,13 +10,12 @@ domainurl: ##DomainURL## # Customization in React Timeline component -You can customize the Timeline items dot size, connectors, dot borders, dot outer space and more to personalize its appearance. This section explains the different ways for styling the items. +The Timeline component offers extensive customization options for visual styling including dot appearance, connector lines, borders, spacing, and color schemes. This section demonstrates various approaches to customize Timeline items and create visually distinctive event displays. ## Connector styling - ### Common styling -You can define the styles applicable to the all the Timeline item connectors. +Define styles that apply to all Timeline item connectors for consistent visual presentation across the entire Timeline. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -37,7 +36,7 @@ You can define the styles applicable to the all the Timeline item connectors. ### Individual styling -You can also apply unique styles to individual connectors, to differentiate specific items within the Timeline. +Apply unique styles to specific connectors to differentiate particular items within the Timeline sequence. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -57,7 +56,6 @@ You can also apply unique styles to individual connectors, to differentiate spec {% previewsample "page.domainurl/code-snippet/timeline/customization/connector-individual" %} ## Dot styling - ### Dot color You can modify the color of the dots to highlight the specific Timeline items. @@ -81,7 +79,7 @@ You can modify the color of the dots to highlight the specific Timeline items. ### Dot size -You can adjust the size of the dot to make it larger or smaller by using the `--dot-size` variable. +Adjust dot dimensions using the `--dot-size` CSS custom property to create visual emphasis or maintain design consistency with different Timeline layouts. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -102,7 +100,7 @@ You can adjust the size of the dot to make it larger or smaller by using the `-- ### Dot shadow -You can add shadow effects to the Timeline dots to make it feel visually engaging by using the `--dot-outer-space` & `--dot-border` variables. +Create visually engaging Timeline dots by adding shadow effects using the `--dot-outer-space` and `--dot-border` CSS custom properties. These properties control the outer spacing and border appearance of Timeline dots. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -123,7 +121,7 @@ You can add shadow effects to the Timeline dots to make it feel visually engagin ### Dot variant -You can achieve the desired dot variant by customizing the border, outline and background colors of the Timeline dots. +Create different dot appearances by customizing border, outline, and background color properties of Timeline dots. This enables distinct visual styles for different types of events. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -144,7 +142,7 @@ You can achieve the desired dot variant by customizing the border, outline and b ### Dot outline -By adding the `e-outline` class to the Timeline [`cssClass`](https://helpej2.syncfusion.com/react/documentation/api/timeline#cssclass) property, it enables the dots to have an outline state. +Apply the `e-outline` class to the Timeline [`cssClass`](https://ej2.syncfusion.com/react/documentation/api/timeline/#cssclass) property to enable outline-style dots to have an outline state. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/timeline/events.md b/ej2-react/timeline/events.md index f4976b76a..e4a2b5c37 100644 --- a/ej2-react/timeline/events.md +++ b/ej2-react/timeline/events.md @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Events in React Timeline component -This section describes the Timeline events that will be triggered when appropriate actions are performed. The following events are available in the Timeline component. +This section describes the Timeline events that trigger when appropriate actions are performed. The following events are available in the Timeline component. ## created -The Timeline component triggers the [created](https://ej2.syncfusion.com/react/documentation/api/timeline#created) event when the component rendering is completed. +The Timeline component triggers the [created](https://ej2.syncfusion.com/react/documentation/api/timeline/#created) event when the component rendering process is completed and the Timeline is ready for interaction. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -35,7 +35,7 @@ The Timeline component triggers the [created](https://ej2.syncfusion.com/react/d ## beforeItemRender -The Timeline component triggers the [beforeItemRender](https://ej2.syncfusion.com/react/documentation/api/timeline#beforeitemrender) event before rendering each item. +The Timeline component triggers the [beforeItemRender](https://ej2.syncfusion.com/react/documentation/api/timeline/#beforeitemrender) event before rendering each timeline item, allowing customization of individual items during the rendering process. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/timeline/getting-started.md b/ej2-react/timeline/getting-started.md index fad916e82..bf61bafb1 100644 --- a/ej2-react/timeline/getting-started.md +++ b/ej2-react/timeline/getting-started.md @@ -2,15 +2,15 @@ layout: post title: Getting started with React Timeline component | Syncfusion description: Checkout and learn about Getting started with Syncfusion React Timeline component of Syncfusion Essential JS 2 and more. -control: Timeline +control: Timeline platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Getting Started +# Getting started with the React Timeline component -This section explains how to create a simple Timeline and configure its available functionalities in the React environment. +This section explains how to create and configure a simple Timeline in a React application using Syncfusion Essential JS 2. ## Dependencies @@ -26,9 +26,9 @@ The following list of dependencies is required to use the Timeline component in ## Installation and Configuration -To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production. +To quickly set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production. -> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. +> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. To create a new React application, run the following command. diff --git a/ej2-react/timeline/items.md b/ej2-react/timeline/items.md index 8c54bf8b0..af1414b76 100644 --- a/ej2-react/timeline/items.md +++ b/ej2-react/timeline/items.md @@ -10,15 +10,15 @@ domainurl: ##DomainURL## # Items in React Timeline component -The Timeline items can be added by using the `ItemDirective` tag. Each item can be configured with options such as `content`, `oppositeContent`, `dotCss`, `disabled` and `cssClass`. +The Timeline items can be configured by using the `ItemDirective` tag. Each item supports multiple configuration options including `content`, `oppositeContent`, `dotCss`, `disabled`, and `cssClass` properties to create rich, interactive timeline experiences. ## Adding content -You can define the item content using the [content](https://ej2.syncfusion.com/react/documentation/api/timeline/timelineItem/#content) property. +Define the primary content for Timeline items using the [content](https://ej2.syncfusion.com/react/documentation/api/timeline/timelineItem/#content) property. This property supports both string values and templated content for flexible content presentation. ### String content -You can define string content for the Timeline items. +Define simple text content for Timeline items using string values. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -39,7 +39,7 @@ You can define string content for the Timeline items. ### Templated content -You can specify the template content for the items, by using the selector for an element in HTML. +Create rich, dynamic content for Timeline items by specifying template selectors that reference HTML elements with custom markup and styling. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -60,7 +60,7 @@ You can specify the template content for the items, by using the selector for an ## Adding opposite content -You can add additional information to each Timeline item, by using the [oppositeContent](https://ej2.syncfusion.com/react/documentation/api/timeline/timelineItem/#oppositecontent) property which is positioned opposite to the item content. +Enhance Timeline items with supplementary information using the [oppositeContent](https://ej2.syncfusion.com/react/documentation/api/timeline/timelineItem/#oppositecontent) property. This content appears on the opposite side of the timeline from the main content, providing additional context such as dates, metadata, or secondary details. Like the content property, oppositeContent accepts both string and template values. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -79,21 +79,21 @@ You can add additional information to each Timeline item, by using the [opposite {% previewsample "page.domainurl/code-snippet/timeline/items/opposite-content" %} -## Dot item +## Customizing dot appearance -You can define CSS class to set icons, background colors, or images to personalize the appearance of dots associated with each Timeline item by using the [dotCss](https://ej2.syncfusion.com/react/documentation/api/timeline/timelineItem/#dotcss) property. +Personalize the visual appearance of Timeline item dots using the [dotCss](https://ej2.syncfusion.com/react/documentation/api/timeline/timelineItem/#dotcss) property. This property accepts CSS class names that enable custom styling including icons, background images, colors, and text content. ### Adding icons -You can define the CSS class to show the icon for each item using the `dotCss` property. +Apply CSS classes containing icon fonts or icon libraries to display meaningful icons that represent each timeline event or milestone. ### Adding images -You can include images for the Timeline items using the `dotCss` property, by setting the CSS `background-image` property. +Incorporate custom images as dot backgrounds by defining CSS classes with `background-image` properties, perfect for displaying avatars, logos, or event-specific imagery. ### Adding text -You can display text for the Timeline items using the `dotCss` property, by adding text to the CSS [`content`](https://helpej2.syncfusion.com/react/documentation/api/timeline/timelineItemModel/#content) property. +Display short text labels within dots using CSS classes that define [`content`](https://ej2.syncfusion.com/react/documentation/api/timeline/timelineItem/#content) properties, useful for showing abbreviations, numbers, or status indicators. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -114,7 +114,7 @@ You can display text for the Timeline items using the `dotCss` property, by addi ## Disabling items -You can use the [disabled](https://ej2.syncfusion.com/react/documentation/api/timeline/timelineItem/#disabled) property to disable an item when set to `true`. By default, the value is `false`. +Control item interactivity using the [disabled](https://ej2.syncfusion.com/react/documentation/api/timeline/timelineItem/#disabled) property. When set to `true`, the item appears in a disabled state with reduced opacity and becomes non-interactive. The default value is `false`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -133,6 +133,6 @@ You can use the [disabled](https://ej2.syncfusion.com/react/documentation/api/ti {% previewsample "page.domainurl/code-snippet/timeline/items/disabled" %} -## CSS class +## CSS class customization -You can customize the appearance of the Timeline item by specifying a custom CSS class using the [cssClass](https://ej2.syncfusion.com/react/documentation/api/timeline/timelineItem/#cssclass) property. +Apply custom styling to individual Timeline items using the [cssClass](https://ej2.syncfusion.com/react/documentation/api/timeline/timelineItem/#cssclass) property. This property accepts CSS class names that enable comprehensive visual customization including colors, fonts, spacing, and layout modifications. diff --git a/ej2-react/timeline/orientations.md b/ej2-react/timeline/orientations.md index ce3bfec1c..4a51045f3 100644 --- a/ej2-react/timeline/orientations.md +++ b/ej2-react/timeline/orientations.md @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Orientations in React Timeline component -The Timeline component supports the display of items in both horizontal and vertical direction by using the [orientation](https://ej2.syncfusion.com/react/documentation/api/timeline/#orientation) property. +The Timeline component supports displaying items in both horizontal and vertical directions using the [orientation](https://ej2.syncfusion.com/react/documentation/api/timeline/#orientation) property. This flexibility allows you to choose the most suitable layout based on your application's design requirements and available space. ## Vertical -You can display the items one below the other vertically by setting the [orientation](https://ej2.syncfusion.com/react/documentation/api/timeline/#orientation) property to `Vertical`. By default, the items are displayed in vertical orientation. +Display timeline items vertically in a top-to-bottom sequence by setting the [orientation](https://ej2.syncfusion.com/react/documentation/api/timeline/#orientation) property to `Vertical`. By default, the items are displayed in vertical orientation. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -35,7 +35,7 @@ You can display the items one below the other vertically by setting the [orienta ## Horizontal -In horizontal orientation, the items are displayed in a side-by-side manner by setting the [orientation](https://ej2.syncfusion.com/react/documentation/api/timeline/#orientation) property to `Horizontal`. +Display timeline items horizontally in a left-to-right sequence by setting the [orientation](https://ej2.syncfusion.com/react/documentation/api/timeline/#orientation) property to `Horizontal`. The horizontal layout works particularly well on desktop screens and wide containers. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/timeline/reverse.md b/ej2-react/timeline/reverse.md index 06744684f..7a9d4ff91 100644 --- a/ej2-react/timeline/reverse.md +++ b/ej2-react/timeline/reverse.md @@ -10,7 +10,9 @@ domainurl: ##DomainURL## # Reverse in React Timeline component -You can display the Timeline items in reverse order, for different alignments by using the [reverse](https://ej2.syncfusion.com/react/documentation/api/timeline/#reverse) property which provides adaptability and improves user interaction. +The Timeline component allows you to display items in revers order by setting the [reverse](https://ej2.syncfusion.com/react/documentation/api/timeline/#reverse) property to `true`. This boolean property reverses the sequence of timeline items, making the most recent events appear first, which is particularly useful for activity feeds, news timelines, or any scenario where the latest information should be displayed. + +When the reverse property is enabled, it works seamlessly with all alignment options (`Before`, `After`, `Alternate`, `AlternateReverse`) and orientations (`Horizontal`, `Vertical`). {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/timeline/template.md b/ej2-react/timeline/template.md index 421d7ded0..25f3b8b52 100644 --- a/ej2-react/timeline/template.md +++ b/ej2-react/timeline/template.md @@ -10,9 +10,9 @@ domainurl: ##DomainURL## # Template in React Timeline component -The Timeline component allows you to customize the appearance for each item by using the [template](https://ej2.syncfusion.com/react/documentation/api/timeline/#template) to modify the dot items, templated contents, progress bar styling and more. +The Timeline component provides comprehensive template customization capabilities through the [template](https://ej2.syncfusion.com/react/documentation/api/timeline/#template) property. This feature allows you to customize the complete appearance and content structure of timeline items, including dot indicators, content areas, styling, and layout arrangements to match your application's design requirements. -The `template` context receives the following information: +The `template` context provides access to the following data and properties for each timeline item: | Type | Purpose | | --- | --- | diff --git a/ej2-react/treegrid/accessibility.md b/ej2-react/treegrid/accessibility.md index 4aaa9fcfc..d95ae1853 100644 --- a/ej2-react/treegrid/accessibility.md +++ b/ej2-react/treegrid/accessibility.md @@ -1,18 +1,18 @@ --- layout: post -title: Accessibility in React Treegrid component | Syncfusion -description: Learn here all about Accessibility in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Accessibility +title: Accessibility in React TreeGrid | Syncfusion +description: Learn here all about Accessibility in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. +control: Accessibility platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Accessibility in React Treegrid component +# Accessibility in React TreeGrid -The Tree Grid component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The TreeGrid follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles), which are commonly used to evaluate accessibility. -The accessibility compliance for the Tree Grid component is outlined below. +The accessibility compliance for the TreeGrid component is outlined below. | Accessibility Criteria | Compatibility | | -- | -- | @@ -39,71 +39,67 @@ The accessibility compliance for the Tree Grid component is outlined below.
    No - The component does not meet the requirement.
    ## WAI-ARIA attributes - -The Tree Grid component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/) patterns to meet the accessibility. The following ARIA attributes are used in the Tree Grid component: +The TreeGrid component follows [WAI‑ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/) patterns. The following ARIA attributes are used in the TreeGrid component: | Attributes | Purpose | | --- | --- | -| `role=treegrid` | Used to convey a significant and contextual message to the user. | -| `aria-selected` | Accurately reflect the selection state, whether it's single-select or multi-select. | -| `aria-expanded` | It can be used to show whether a node is expanded or collapsed, making it easier for screen reader users to navigate and understand the hierarchy. | -| `aria-sort` | Indicate the current sorting order of a table column for users with disabilities, facilitating accessible data presentation and interaction. | -| `aria-busy` | Loading state to improve accessibility for users, particularly those relying on screen readers. | -| `aria-invalid` | To indicate whether the user's input in a form field is valid or invalid, aiding users, including those with disabilities, in understanding and correcting their input. | -| `aria-grabbed` | Provides accessibility information for users interacting with draggable elements | -| `aria-owns` | Establishing relationships between an element and the elements it owns or controls. | +| `role=treegrid` | Used to convey a significant and contextual message. | +| `aria-selected` | Reflects the selection state for single or multiple selection. | +| `aria-expanded` | Indicates whether a hierarchical row is expanded or collapsed. | +| `aria-sort` | Conveys the current sort direction for a column. | +| `aria-busy` | Announces a loading state while data is being processed. | +| `aria-invalid` | Indicates that the current input value is invalid. | +| `aria-grabbed` | Provides accessibility information for interacting with draggable elements | +| `aria-owns` | Establishing relationships between an element and the elements it owns or controls | | `aria-label` | Provides an accessible name for the close icon. | ## Keyboard interaction -The Tree Grid component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Tree Grid component. +The TreeGrid follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported. -Interaction Keys |Description +Interaction Keys | Description -----|----- -PageDown |Goes to the next page. -PageUp |Goes to the previous page. -Ctrl + Alt +PageDown |Goes to the last page. -Ctrl + Alt + PageUp |Goes to the first page. -Alt + PageDown |Goes to the next page. -Alt + PageUp |Goes to the previous page. -Home |Goes to the first cell. -End |Goes to the last cell. -Ctrl + Home |Goes to the first row. -Ctrl + End |Goes to the last row. -DownArrow |Moves the cell focus downward. -UpArrow |Moves the cell focus upward. -LeftArrow |Moves the cell focus left side. -RightArrow |Moves the cell focus right side. -Shift + DownArrow |Extends the row/cell selection downwards. -Shift + UpArrow |Extends the row/cell selection upwards. -Shift + LeftArrow |Extends the cell selection to the left side. -Shift + RightArrow |Extends the cell selection to the right side. +PageDown | Navigates to the next page. +PageUp | Navigates to the previous page. +Ctrl + Alt + PageDown | Navigates to the last page. +Ctrl + Alt + PageUp | Navigates to the first page. +Alt + PageDown | Navigates to the next page. +Alt + PageUp | Navigates to the previous page. +Home | Moves focus to the first cell in the row. +End | Moves focus to the last cell in the row. +Ctrl + Home | Moves focus to the first row. +Ctrl + End | Moves focus to the last row. +DownArrow | Moves focus down one cell. +UpArrow | Moves focus up one cell. +LeftArrow | Moves focus left one cell. +RightArrow | Moves focus right one cell. +Shift + DownArrow | Extends row/cell selection downward. +Shift + UpArrow | Extends row/cell selection upward. +Shift + LeftArrow | Extends cell selection to the left. +Shift + RightArrow | Extends cell selection to the right. Enter | Moves the row/cell selection downward. If current cell is in edit state, then completes the editing. If the current cell is a header then performs sorting. Shift + Enter | Moves the row/cell selection upward. If the current cell is a header then clears sorting for the selected column. -Ctrl + Enter | If the current cell is a header then performs multi-sorting. -Tab | Moves the cell selection right side. -Shift + Tab | Moves the cell selection left side. -Esc |Deselects all the rows/cells. -Ctrl + A |Selects all the rows/cells. -UpArrow |Moves up a row/cell selection. -DownArrow |Moves down a row/cell selection. -RightArrow |Moves to the right cell selection. -LeftArrow |Moves to the left cell selection. -Ctrl + Shift + DownArrow |Expands the selected group. -Ctrl + DownArrow |Expands all the visible groups. -Ctrl + Shift + UpArrow |Collapses the selected group. -Ctrl + UpArrow |Collapses all the visible groups. -Ctrl + P |Prints the TreeGrid. +Ctrl + Enter | Applies multi-sorting when focused on a header. +Tab | Moves focus to the cell selection right side. +Shift + Tab | Moves focus to the cell selection left side. +Esc | Clears selection. +Ctrl + A | Selects all rows or cells. +UpArrow | Moves up a row/cell selection. +DownArrow | Moves down a row/cell selection. +RightArrow | Moves to the right cell selection. +LeftArrow | Moves to the left cell selection. +Ctrl + Shift + DownArrow | Expands the selected group. +Ctrl + DownArrow | Expands all visible groups. +Ctrl + Shift + UpArrow | Collapses the selected group. +Ctrl + UpArrow | Collapses all visible groups. +Ctrl + P | Prints the TreeGrid. ## Ensuring accessibility -The Tree Grid component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. - -The accessibility compliance of the Tree Grid component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/tree-grid.html) in a new window to evaluate the accessibility of the Tree Grid component with accessibility tools. - +Accessibility is validated using automated tools such as [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core). The following sample demonstrates TreeGrid accessibility. Open the [sample](https://ej2.syncfusion.com/accessibility/tree-grid.html) in a new window to evaluate accessibility with these tools. {% previewsample "https://ej2.syncfusion.com/accessibility/tree-grid.html" %} ## See also * [Accessibility in Syncfusion® React components](../common/accessibility) -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/adaptive.md b/ej2-react/treegrid/adaptive.md index 57b3a3271..1c53c7a8d 100644 --- a/ej2-react/treegrid/adaptive.md +++ b/ej2-react/treegrid/adaptive.md @@ -1,20 +1,20 @@ --- layout: post -title: Adaptive in React Treegrid component | Syncfusion -description: Learn here all about Adaptive in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Adaptive +title: Adaptive in React TreeGrid | Syncfusion +description: Learn here all about Adaptive in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. +control: Adaptive platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Adaptive in React Treegrid component +# Adaptive in React TreeGrid -The Grid user interface (UI) was redesigned to provide an optimal viewing experience and improve usability on small screens. This interface will render the filter, sort, and edit dialogs adaptively and have an option to render the Tree Grid row elements in the horizontal direction. +The TreeGrid interface (UI) is optimized for small screens to provide clear viewing and efficient interactions. When adaptive UI is enabled, the component renders filter, sort, and edit dialogs in a full-screen layout and offers an option to render TreeGrid rows horizontally to improve readability on compact layouts. ## Render adaptive dialogs -When you enable the [`enableAdaptiveUI`](https://ej2.syncfusion.com/react/documentation/api/grid/#enableadaptiveui) property, the grid will render the filter, sort, and edit dialogs in full screen for a better user experience. The following demo demonstrates this behaviour. +When the [enableAdaptiveUI](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enableadaptiveui) property is enabled, the TreeGrid renders filter, sort, and edit dialogs in full screen mode. The following demo demonstrates this behavior. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -24,7 +24,6 @@ When you enable the [`enableAdaptiveUI`](https://ej2.syncfusion.com/react/docume {% include code-snippet/treegrid/adaptive-cs1/app/App.tsx %} {% endhighlight %} {% endtabs %} +{% previewsample "page.domainurl/code-snippet/treegrid/adaptive-cs1" %} - {% previewsample "page.domainurl/code-snippet/treegrid/adaptive-cs1" %} - -> Please refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for key highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/aggregates/aggregates.md b/ej2-react/treegrid/aggregates/aggregates.md index b4ff26141..3fb904e7c 100644 --- a/ej2-react/treegrid/aggregates/aggregates.md +++ b/ej2-react/treegrid/aggregates/aggregates.md @@ -1,29 +1,29 @@ --- layout: post -title: Aggregates in React Treegrid component | Syncfusion -description: Learn here all about Aggregates in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Aggregates +title: Aggregates in React TreeGrid | Syncfusion +description: Learn here all about Aggregates in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. +control: Aggregates platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Aggregates in React Treegrid component +# Aggregates in React TreeGrid -Aggregate values are displayed in the TreeGrid footer and in parent row footer for child row aggregate values. It can be configured through [`aggregates`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#aggregates) property. [`field`](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateColumnModel/#field) and [`type`](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateColumnModel/#type) are the minimum properties required to represent an aggregate column. +Aggregate values are displayed in the TreeGrid footer and in the parent row footer for child row aggregates. Configure aggregates using the [aggregates](https://ej2.syncfusion.com/react/documentation/api/treegrid/#aggregates) property. The [field](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateColumnModel/#field) and [type](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateColumnModel/#type) properties are the minimum requirements to define an aggregate column. -To use the aggregate feature, you have to inject the **Aggregate** module. +To use aggregates, inject the **Aggregate** module. -By default, the aggregate value can be displayed in the treegrid footer, and footer of child rows. To show the aggregate value in one of the cells, use the [`footerTemplate`](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateColumnModel/#footertemplate). +By default, aggregate values can be shown in the TreeGrid footer and in child row footers. To display an aggregate inside a cell, use the [footerTemplate](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateColumnModel/#footertemplate). -To get start quickly with aggregates functionalities, you can check on this video: +The following video provides a quick start for aggregate functionalities: {% youtube "https://www.youtube.com/watch?v=4Fs8mKL3DCg" %} ## Built-in aggregate types -The aggregate type should be specified in the [`type`](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateColumnModel/#type) property to configure an aggregate column. +Specify the aggregate type in the [type](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateRowModel/#type) property to configure an aggregate column. -The built-in aggregates are, +The built-in aggregates are: * Sum * Average * Min @@ -32,13 +32,12 @@ The built-in aggregates are, * Truecount * Falsecount -> * Multiple aggregates can be used for an aggregate column by setting the [`type`](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateColumnModel/#type) property -with an array of aggregate types. -> * Multiple types for a column is supported only when one of the aggregate templates is used. +> * Multiple aggregates can be configured for a single aggregate column by setting the [type](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateRowModel/#type) property with an array of types. +> * Multiple types for a column are supported only when at least one aggregate template is used. ## Child aggregate -Aggregate value is calculated for child rows, and it is displayed in the parent row footer. Use the [`showChildSummary`](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateRowModel/#showchildsummary) property to render the child rows aggregate value. +Aggregate values for child rows are calculated and displayed in the parent row footer. Use the [showChildSummary](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateRowModel/#showchildsummary) property to render child row aggregate values. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -48,7 +47,6 @@ Aggregate value is calculated for child rows, and it is displayed in the parent {% include code-snippet/treegrid/aggregate-cs1/app/App.tsx %} {% endhighlight %} {% endtabs %} +{% previewsample "page.domainurl/code-snippet/treegrid/aggregate-cs1" %} - {% previewsample "page.domainurl/code-snippet/treegrid/aggregate-cs1" %} - -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for feature highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/aggregates/custom-aggregate.md b/ej2-react/treegrid/aggregates/custom-aggregate.md index d835b9504..91debf164 100644 --- a/ej2-react/treegrid/aggregates/custom-aggregate.md +++ b/ej2-react/treegrid/aggregates/custom-aggregate.md @@ -1,16 +1,16 @@ --- layout: post -title: Custom aggregate in React Treegrid component | Syncfusion -description: Learn here all about Custom aggregate in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Custom aggregate +title: Custom aggregate in React TreeGrid | Syncfusion +description: Learn here all about Custom aggregate in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. +control: Custom aggregate platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Custom aggregate in React Treegrid component +# Custom aggregate in React TreeGrid -To calculate the aggregate value with your own aggregate functions, use the custom aggregate option. To use custom aggregation, specify the [`type`](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateColumnModel/#type) as **Custom**, and provide the custom aggregate function in the [`customAggregate`](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateColumnModel/#customaggregate) property. +Custom aggregates calculate summary values using application-defined functions. To enable custom aggregation, set [type](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateColumnModel/#type) to **Custom** and provide the aggregate function through the [customAggregate](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateColumnModel/#customaggregate) property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -20,7 +20,6 @@ To calculate the aggregate value with your own aggregate functions, use the cust {% include code-snippet/treegrid/aggregate-cs2/app/App.tsx %} {% endhighlight %} {% endtabs %} +{% previewsample "page.domainurl/code-snippet/treegrid/aggregate-cs2" %} - {% previewsample "page.domainurl/code-snippet/treegrid/aggregate-cs2" %} - -> To access the custom aggregate value inside the template, use the key as **Custom**. \ No newline at end of file +> To access the custom aggregate value inside a template, use the key **Custom**. \ No newline at end of file diff --git a/ej2-react/treegrid/aggregates/footer-aggregate.md b/ej2-react/treegrid/aggregates/footer-aggregate.md index 16a5dd0d5..b66922433 100644 --- a/ej2-react/treegrid/aggregates/footer-aggregate.md +++ b/ej2-react/treegrid/aggregates/footer-aggregate.md @@ -1,16 +1,17 @@ --- layout: post -title: Footer aggregate in React Treegrid component | Syncfusion -description: Learn here all about Footer aggregate in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Footer aggregate +title: Footer aggregate in React TreeGrid | Syncfusion +description: Learn here all about Footer aggregate in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. +control: Footer aggregate platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Footer aggregate in React Treegrid component +# Footer aggregate in React TreeGrid + +Footer aggregate values are calculated across all rows and displayed in footer cells. Render footer aggregates using the [footerTemplate](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateColumnModel/#footertemplate) property. -Footer aggregate value is calculated for all the rows, and it is displayed in the footer cells. Use the [`footerTemplate`](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateColumnModel/#footertemplate) property to render the aggregate value in footer cells. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -20,14 +21,13 @@ Footer aggregate value is calculated for all the rows, and it is displayed in th {% include code-snippet/treegrid/aggregate-cs3/app/App.tsx %} {% endhighlight %} {% endtabs %} +{% previewsample "page.domainurl/code-snippet/treegrid/aggregate-cs3" %} - {% previewsample "page.domainurl/code-snippet/treegrid/aggregate-cs3" %} - -> The aggregate values must be accessed inside the template using their corresponding [`type`](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateColumnModel/#type) name. +> Access aggregate values inside the template using their corresponding [type](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateColumnModel/#type) name. ## How to format aggregate value -You can format the aggregate value result by using the [`format`](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateColumnModel/#format) property. +Format the aggregate result using the [format](https://ej2.syncfusion.com/react/documentation/api/treegrid/aggregateColumnModel/#format) property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -37,5 +37,4 @@ You can format the aggregate value result by using the [`format`](https://ej2.sy {% include code-snippet/treegrid/aggregate-cs4/app/App.tsx %} {% endhighlight %} {% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/aggregate-cs4" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/treegrid/aggregate-cs4" %} \ No newline at end of file diff --git a/ej2-react/treegrid/cell/cell.md b/ej2-react/treegrid/cell/cell.md index 0f38ca586..505783086 100644 --- a/ej2-react/treegrid/cell/cell.md +++ b/ej2-react/treegrid/cell/cell.md @@ -1,7 +1,7 @@ --- layout: post -title: Cell in React Treegrid component | Syncfusion -description: Learn here all about Cell in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Cell in React TreeGrid component | Syncfusion +description: Learn here all about Cell in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Cell platform: ej2-react documentation: ug @@ -10,13 +10,13 @@ domainurl: ##DomainURL## # Cell in React TreeGrid -In the Syncfusion React TreeGrid, a cell represents the intersection of a row and column, displaying specific data values. Each cell can contain text, numbers, HTML content, or custom templates. The TreeGrid provides comprehensive options to customize cell appearance, behavior, and content rendering to create interactive and visually appealing data presentations. +In the Syncfusion React TreeGrid, a cell represents the intersection of a row and column, displaying specific data values. Each cell can contain text, numbers, HTML content, or custom templates. The TreeGrid provides comprehensive options to customize cell appearance, behavior, and content rendering to create interactive and visually clear data presentations. ## Displaying the HTML content -Displaying HTML content in a TreeGrid can be useful in scenarios where you want to display formatted content, such as images, links, or tables, in a tabular format. TreeGrid allows you to display HTML tags in the TreeGrid header and content. By default, the HTML content is encoded to prevent potential security vulnerabilities. However, you can enable the [disableHtmlEncode](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#disablehtmlencode) property by setting the value as false to display HTML tags without encoding. This feature is useful when you want to display HTML content in a TreeGrid cell. +Displaying HTML content is useful for formatted values such as images, links, or tables. HTML tags can be rendered in both headers and content. By default, HTML is encoded to prevent security risks.To render raw HTML tags without encoding, set the [disableHtmlEncode](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#disablehtmlencode) property to false. -The following example demonstrates how to display HTML content in TreeGrid headers and cells by configuring the `disableHtmlEncode` property: +The following example demonstrates rendering HTML content in headers and cells by configuring the `disableHtmlEncode` property: {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -31,17 +31,17 @@ The following example demonstrates how to display HTML content in TreeGrid heade ## Autowrap the TreeGrid content -The auto wrap allows the cell content of the TreeGrid to wrap to the next line when it exceeds the boundary of the cell width. The cell content wrapping works based on the position of white space between words. To enable auto wrap, set the [allowTextWrap](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowtextwrap) property to **true**. You can configure the auto wrap mode by setting the [textWrapSettings.wrapMode](https://ej2.syncfusion.com/react/documentation/api/treegrid/#textwrapsettings) property. +Auto wrap allows cell content to flow to the next line when it exceeds the column width. Wrapping occurs at whitespace boundaries. Enable auto wrap by setting [allowTextWrap](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowtextwrap) to **true**, and configure behavior using [textWrapSettings.wrapMode](https://ej2.syncfusion.com/react/documentation/api/treegrid/#textwrapsettings). -There are three types of **wrapMode**. They are: +There are three types of **wrapMode**: -* **Both**: This value is set by default. Auto wrap will be enabled for both the content and the header. -* **Header**: Auto wrap will be enabled only for the header. -* **Content**: Auto wrap will be enabled only for the content. +* **Both**: Default. Wraps both content and header. +* **Header**: Wraps header only. +* **Content**: Wraps content only. -> When a column width is not specified, then auto wrap of columns will be adjusted with respect to the TreeGrid's width. +> When a column width is not specified, auto wrap adjusts based on the TreeGrid width. -The following example demonstrates how to set the `allowTextWrap` property to **true** and specify the wrap mode as **Content** by setting the `textWrapSettings.wrapMode` property. +The following example sets `allowTextWrap` to **true** and `textWrapSettings.wrapMode` to **Content**: {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -56,7 +56,7 @@ The following example demonstrates how to set the `allowTextWrap` property to ** ## Customize cell styles -The appearance of cells can be customized by using the [`queryCellInfo`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#querycellinfo) event. The [`queryCellInfo`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#querycellinfo) event triggers for every cell. In that event handler, you can get [`QueryCellInfoEventArgs`](https://ej2.syncfusion.com/react/documentation/api/grid/queryCellInfoEventArgs/) that contains the details of the cell. +Cell appearance can be customized using the [queryCellInfo](https://ej2.syncfusion.com/react/documentation/api/treegrid/#querycellinfo) event, which triggers for every cell. The event provides [QueryCellInfoEventArgs](https://ej2.syncfusion.com/react/documentation/api/grid/queryCellInfoEventArgs/) with details of the cell. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -71,7 +71,7 @@ The appearance of cells can be customized by using the [`queryCellInfo`](https:/ ## Custom attributes -You can customize the treegrid cells by adding a CSS class to the [`customAttribute`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#customattributes) property of the column. +Cells can be customized by adding a CSS class through the [customAttribute](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#customattributes) property of the column. ```css .e-attr { @@ -87,7 +87,7 @@ You can customize the treegrid cells by adding a CSS class to the [`customAttrib field="taskID" headerText="Task ID" customAttributes={customAttr} width="90" textAlign='Right'/> ``` -In the below example, we have customized the cells of *TaskID* and *StartDate* columns. +In the following example, cells in the *TaskID* and *StartDate* columns are customized. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -102,15 +102,15 @@ In the below example, we have customized the cells of *TaskID* and *StartDate* c ## Clip mode -The clip mode feature is useful when you have a long text or content in a TreeGrid cell, which overflows the cell’s width or height. It provides options to display the overflow content by either truncating it, displaying an ellipsis or displaying an ellipsis with a tooltip. You can enable this feature by setting [clipMode](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#clipmode) property to one of the below available options. +Clip mode manages long text that overflows cell boundaries. It supports truncation, ellipsis, and ellipsis with tooltip. Configure the behavior using the [clipMode](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#clipmode) property. -There are three types of `clipMode` available: +There are three types of `clipMode`: -* **Clip**: Truncates the cell content when it overflows its area. -* **Ellipsis**: Displays ellipsis when the cell content overflows its area. -* **EllipsisWithTooltip**: Displays ellipsis when the cell content overflows its area, also it will display the tooltip while hover on ellipsis is applied. +* **Clip**: Truncates overflow content. +* **Ellipsis**: Displays an ellipsis for overflow content. +* **EllipsisWithTooltip**: Displays an ellipsis and shows a tooltip on hover. -The following example demonstrates, how to set the `clipMode` property: +The following example demonstrates how to set the `clipMode` property: {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -123,21 +123,21 @@ The following example demonstrates, how to set the `clipMode` property: {% previewsample "page.domainurl/code-snippet/treegrid/cell-cs4" %} -> By default, `columns.clipMode` value is **Ellipsis**. +> By default, `columns.clipMode` is **Ellipsis**. ## TreeGrid lines -The [`gridLines`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#gridlines) have option to display cell border and it can be defined by the [`gridLines`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#gridlines) property. +The [gridLines](https://ej2.syncfusion.com/react/documentation/api/treegrid/#gridlines) property controls cell borders. -The available modes of grid lines are: +The available modes are: | Modes | Actions | |-------|---------| -| Both | Displays both the horizontal and vertical grid lines.| -| None | No grid lines are displayed.| -| Horizontal | Displays the horizontal grid lines only.| -| Vertical | Displays the vertical grid lines only.| -| Default | Displays grid lines based on the theme.| +| Both | Displays both horizontal and vertical grid lines. | +| None | Displays no grid lines. | +| Horizontal | Displays horizontal grid lines only. | +| Vertical | Displays vertical grid lines only. | +| Default | Displays grid lines based on the theme. | {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -150,5 +150,5 @@ The available modes of grid lines are: {% previewsample "page.domainurl/code-snippet/treegrid/cell-cs3" %} ->By default, the treegrid renders with **Default** mode. -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file +> By default, the TreeGrid renders in **Default** mode. +> Refer to the [React Tree Grid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour for key capabilities. Explore the [React Tree Grid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/clipboard.md b/ej2-react/treegrid/clipboard.md index 6a77f30dc..790eed093 100644 --- a/ej2-react/treegrid/clipboard.md +++ b/ej2-react/treegrid/clipboard.md @@ -1,23 +1,23 @@ --- layout: post -title: Clipboard in React Treegrid component | Syncfusion -description: Learn here all about Clipboard in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Clipboard +title: Clipboard in React TreeGrid | Syncfusion +description: Learn here all about Clipboard in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. +control: Clipboard platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Clipboard in React Treegrid component +# Clipboard in React TreeGrid -The clipboard provides an option to copy selected rows or cells data into the clipboard. +The clipboard feature copies selected rows or cells to the system clipboard. -The following list of keyboard shortcuts is supported in the Tree Grid to copy selected rows or cells data into the clipboard. +The following keyboard shortcuts are supported for copying rows or cells data. -Interaction keys |Description +Interaction keys | Description -----|----- -Ctrl + C |Copy selected rows or cells data into clipboard. -Ctrl + Shift + H |Copy selected rows or cells data with header into clipboard. +Ctrl + C | Copy selected rows or cells to the clipboard. +Ctrl + Shift + H | Copy selected rows or cells with column headers. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -27,12 +27,11 @@ Interaction keys |Description {% include code-snippet/treegrid/clip-board-cs1/app/App.tsx %} {% endhighlight %} {% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/clip-board-cs1" %} +{% previewsample "page.domainurl/code-snippet/treegrid/clip-board-cs1" %} ## Copy to clipboard by external buttons -To copy selected rows or cells data into the clipboard with help of external buttons, you need to invoke the [`copy`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#copy) method. +Invoke the [copy](https://ej2.syncfusion.com/react/documentation/api/treegrid/#copy) method to copy selected rows or cells using external buttons. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -42,21 +41,19 @@ To copy selected rows or cells data into the clipboard with help of external but {% include code-snippet/treegrid/clip-board-cs2/app/App.tsx %} {% endhighlight %} {% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/clip-board-cs2" %} +{% previewsample "page.domainurl/code-snippet/treegrid/clip-board-cs2" %} ## Copy Hierarchy Modes -Tree Grid provides support for a set of copy modes with [`copyHierarchyMode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettingsModel/#hierarchymode) property. -The below are the type of copy modes available in TreeGrid. +TreeGrid supports multiple copy modes via the [copyHierarchyMode](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettingsModel/#hierarchymode) property. -* **Parent** : This is the default copy hierarchy mode in Tree Grid. Clipboard value have the selected records with its parent records, if the selected records not have any parent record then the selected record will be in clipboard. +* **Parent** : Default mode. Copies the selected records along with their parent records. If no parent exists, only the selected records are copied. -* **Child** : Clipboard value will have the selected records with its child record. If the selected records do not have any child record, then the selected records will be in clipboard. +* **Child** : Copies the selected records along with their child records. If no child exists, only the selected records are copied. -* **Both** : Clipboard value will have the selected records with its both parent and child record. If the selected records do not have any parent and child record then the selected records alone in clipboard. +* **Both** : Copies the selected records along with both parent and child records. If neither exists, only the selected records are copied. -* **None** : Only the Selected records will be in clipboard. +* **None** : Copies only the selected records. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -66,12 +63,11 @@ The below are the type of copy modes available in TreeGrid. {% include code-snippet/treegrid/clip-board-cs3/app/App.tsx %} {% endhighlight %} {% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/clip-board-cs3" %} +{% previewsample "page.domainurl/code-snippet/treegrid/clip-board-cs3" %} ## AutoFill -AutoFill Feature allows you to copy the data of selected cells and paste it to another cells by just dragging the autofill icon of the selected cells up to required cells. This feature is enabled by defining `enableAutoFill` property as true. +AutoFill copies the data of selected cells and pastes it into adjacent cells by dragging the AutoFill handle. Enable this feature by setting `enableAutoFill` to true. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -81,20 +77,19 @@ AutoFill Feature allows you to copy the data of selected cells and paste it to a {% include code-snippet/treegrid/clip-board-cs4/app/App.tsx %} {% endhighlight %} {% endtabs %} +{% previewsample "page.domainurl/code-snippet/treegrid/clip-board-cs4" %} - {% previewsample "page.domainurl/code-snippet/treegrid/clip-board-cs4" %} - -> * If `enableAutoFill` is set to true, then the autofill icon will be displayed on cell selection to copy cells. +> * When `enableAutoFill` is true, the AutoFill handle appears on cell selection. > * It requires the selection `mode` to be `Cell`, `cellSelectionMode` to be `Box` and also Batch Editing should be enabled. ### Limitations of AutoFill * Since the string values are not parsed to number and date type, so when the selected string type cells are dragged to number type cells then it will display as **NaN**. For date type cells, when the selected string type cells are dragged to date type cells then it will display as an **empty cell**. -* Linear series and the sequential data generations are not supported in this autofill feature. +* Linear series and sequential data generation are not supported. ## Paste -You can able to copy the content of a cell or a group of cells by selecting the cells and pressing Ctrl + C shortcut key and paste it to another set of cells by selecting the cells and pressing Ctrl + V shortcut key. +Copy the content of a cell or a group of cells with Ctrl + C and paste into another set of cells with Ctrl + V. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -104,13 +99,12 @@ You can able to copy the content of a cell or a group of cells by selecting the {% include code-snippet/treegrid/clip-board-cs5/app/App.tsx %} {% endhighlight %} {% endtabs %} +{% previewsample "page.domainurl/code-snippet/treegrid/clip-board-cs5" %} - {% previewsample "page.domainurl/code-snippet/treegrid/clip-board-cs5" %} - -> To perform paste functionality, it requires the selection `mode` to be `Cell`, `cellSelectionMode` to be `Box` and also Batch Editing should be enabled. +> To perform paste functionality, it requires the selection `mode` to be `Cell`, `cellSelectionMode` to be `Box` and also Batch Editing should be enabled. ### Limitations of Paste Functionality * Since the string values are not parsed to number and date type, so when the copied string type cells are pasted to number type cells then it will display as **NaN**. For date type cells, when the copied string format cells are pasted to date type cells then it will display as an **empty cell**. -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/context-menu.md b/ej2-react/treegrid/context-menu.md index c3200654b..781650a21 100644 --- a/ej2-react/treegrid/context-menu.md +++ b/ej2-react/treegrid/context-menu.md @@ -1,41 +1,39 @@ --- layout: post -title: Context menu in React Treegrid component | Syncfusion -description: Learn here all about Context menu in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Context menu +title: Context menu in React TreeGrid | Syncfusion +description: Learn here all about Context menu in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. +control: Context menu platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Context menu in React Treegrid component +# Context menu in React TreeGrid -The TreeGrid has options to show the context menu when right clicked on it. To enable this feature, you need to define either default or custom item in the [`contextMenuItems`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#contextmenuitems). +The TreeGrid displays a context menu on right-click. Enable this feature by configuring default or custom items in the [contextMenuItems](https://ej2.syncfusion.com/react/documentation/api/treegrid/#contextmenuitems) property. +To use the context menu, inject the **ContextMenu** module in the TreeGrid. -To use the context menu, inject the **ContextMenu** module in the treegrid. - -The default items are in the following table. - -Items| Description +The default items are listed below. +Items | Description ----|---- -**AutoFit**| Auto fit the current column. -**AutoFitAll** | Auto fit all columns. -**Edit**| Edit the current record. +**AutoFit** | Auto-fit the current column. +**AutoFitAll** | Auto-fit all columns. +**Edit** | Edit the current record. **Delete** | Delete the current record. **Save** | Save the edited record. **Cancel** | Cancel the edited state. -**PdfExport** | Export the treegrid data as Pdf document. -**ExcelExport** | Export the treegrid data as Excel document. -**CsvExport** | Export the treegrid data as CSV document. +**PdfExport** | Export TreeGrid data as a PDF document. +**ExcelExport** | Export TreeGrid data as an Excel document. +**CsvExport** | Export TreeGrid data as a CSV document. **SortAscending** | Sort the current column in ascending order. **SortDescending** | Sort the current column in descending order. **FirstPage** | Go to the first page. **PrevPage** | Go to the previous page. **LastPage** | Go to the last page. **NextPage** | Go to the next page. -**AddRow** | Add new row to the treegrid. -**Indent** | Indents the record to one level of hierarchy.| -**Outdent** | Outdents the record to one level of hierarchy.| +**AddRow** | Add a new row to the TreeGrid. +**Indent** | Indent the record by one hierarchy level. +**Outdent** | Outdent the record by one hierarchy level. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -45,14 +43,12 @@ Items| Description {% include code-snippet/treegrid/contextmenu-cs1/app/App.tsx %} {% endhighlight %} {% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/contextmenu-cs1" %} +{% previewsample "page.domainurl/code-snippet/treegrid/contextmenu-cs1" %} ## Custom context menu items +Custom context menu items can be defined by setting [contextMenuItems](https://ej2.syncfusion.com/react/documentation/api/treegrid/#contextmenuitems) as a collection of [contextMenuItemModel](https://ej2.syncfusion.com/react/documentation/api/grid/contextMenuItemModel/). Handle item actions in the [contextMenuClick](https://ej2.syncfusion.com/react/documentation/api/treegrid/#contextmenuclick) event. -The custom context menu items can be added by defining the [`contextMenuItems`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#contextmenuitems) as a collection of [`contextMenuItemModel`](https://ej2.syncfusion.com/react/documentation/api/grid/contextMenuItemModel/). Actions for this customized items can be defined in the [`contextMenuClick`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#contextmenuclick) event. - -In the below sample, we have shown context menu item for parent rows to expand or collapse child rows. +In the following sample, a context menu item is added for parent rows to expand or collapse child rows. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -62,12 +58,10 @@ In the below sample, we have shown context menu item for parent rows to expand o {% include code-snippet/treegrid/contextmenu-cs2/app/App.tsx %} {% endhighlight %} {% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/contextmenu-cs2" %} +{% previewsample "page.domainurl/code-snippet/treegrid/contextmenu-cs2" %} ## Enable and disable context menu items dynamically - -You can enable and disable the context menu items using the [`enableItems`](https://ej2.syncfusion.com/documentation/api/menu/#enableitems) method in [`contextMenuOpen`](https://ej2.syncfusion.com/documentation/api/treegrid/#contextmenuopen) event. +Enable or disable context menu items using the [enableItems](https://ej2.syncfusion.com/documentation/api/menu/#enableitems) method within the [contextMenuOpen](https://ej2.syncfusion.com/documentation/api/treegrid/#contextmenuopen) event. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -77,8 +71,7 @@ You can enable and disable the context menu items using the [`enableItems`](http {% include code-snippet/treegrid/contextmenu-cs3/app/App.tsx %} {% endhighlight %} {% endtabs %} +{% previewsample "page.domainurl/code-snippet/treegrid/contextmenu-cs3" %} - {% previewsample "page.domainurl/code-snippet/treegrid/contextmenu-cs3" %} - -> You can hide or show an item in context menu for specific area inside of treegrid by defining the [`target`](https://ej2.syncfusion.com/react/documentation/api/grid/contextMenuItemModel/#target) property. -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file +> Hide or show a context menu item for a specific area of the TreeGrid by configuring the [target](https://ej2.syncfusion.com/react/documentation/api/grid/contextMenuItemModel/#target)t) property. +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/editing/batch-editing.md b/ej2-react/treegrid/editing/batch-editing.md index 0b431111a..ca6bdd43b 100644 --- a/ej2-react/treegrid/editing/batch-editing.md +++ b/ej2-react/treegrid/editing/batch-editing.md @@ -1,16 +1,16 @@ --- layout: post -title: Batch editing in React Treegrid component | Syncfusion -description: Learn here all about Batch editing in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Batch editing in React TreeGrid component | Syncfusion +description: Learn here all about Batch editing in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Batch editing platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Batch editing in React Treegrid component +# Batch editing in React TreeGrid -In Batch edit mode, when you double-click on the treegrid cell, the target cell goes into edit state. You can bulk save (added, changed and deleted data in the single request) to data source by clicking on the toolbar's **Update** button or by externally invoking the [`batchSave`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#batchsave) method. To enable Batch edit, set the [`editSettings.mode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettingsModel/#mode) as **Batch**. +In batch edit mode, double-clicking a cell switches the target cell to edit state. Changes can be saved in bulk—added, modified, and deleted records in a single request by clicking the toolbar’s **Update** button or by invoking the [batchSave](https://ej2.syncfusion.com/react/documentation/api/treegrid/#batchsave) method. Enable batch editing by setting [editSettings.mode](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettingsModel/#mode) to **Batch**. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/treegrid/editing/cell-editing.md b/ej2-react/treegrid/editing/cell-editing.md index 02f3c5444..7805e11bd 100644 --- a/ej2-react/treegrid/editing/cell-editing.md +++ b/ej2-react/treegrid/editing/cell-editing.md @@ -1,16 +1,16 @@ --- layout: post -title: Cell editing in React Treegrid component | Syncfusion -description: Learn here all about Cell editing in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Cell editing in React TreeGrid component | Syncfusion +description: Learn here all about Cell editing in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Cell editing platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Cell editing in React Treegrid component +# Cell editing in React TreeGrid -In Cell edit mode, when you double click on a cell, it is changed to edit state. You can change the cell value and save to the data source. To enable Cell edit, set the [`editSettings.mode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettingsModel/#mode) as **Cell**. +In cell edit mode, double-clicking a cell switches it to edit state. Modify the value and save it to the datasource. Enable cell editing by setting [editSettings.mode](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettingsModel/#mode) to **Cell**. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -23,4 +23,4 @@ In Cell edit mode, when you double click on a cell, it is changed to edit state. {% previewsample "page.domainurl/code-snippet/treegrid/editing-cs2" %} -> Cell edit mode is default mode of editing. \ No newline at end of file +> Cell edit mode is the default editing mode. \ No newline at end of file diff --git a/ej2-react/treegrid/editing/command-column-editing.md b/ej2-react/treegrid/editing/command-column-editing.md index 87ad97881..d28580d0b 100644 --- a/ej2-react/treegrid/editing/command-column-editing.md +++ b/ej2-react/treegrid/editing/command-column-editing.md @@ -1,25 +1,25 @@ --- layout: post -title: Command column editing in React Treegrid component | Syncfusion -description: Learn here all about Command column editing in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Command column editing in React TreeGrid component | Syncfusion +description: Learn here all about Command column editing in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Command column editing platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Command column editing in React Treegrid component +# Command column editing in React TreeGrid -The command column provides an option to add CRUD action buttons in a column. This can be defined by the [`column.commands`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#commands) property. +The command column adds CRUD action buttons within a column. Configure command buttons using the [column.commands](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#commands) property. The available built-in command buttons are: | Command Button | Actions | |----------------|---------| -| Edit | Edit the current row.| -| Delete | Delete the current row.| -| Save | Update the edited row.| -| Cancel | Cancel the edited state. | +| Edit | Edits the current row. | +| Delete | Deletes the current row. | +| Save | Saves updates to the edited row. | +| Cancel | Cancels the edit state. | {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -34,7 +34,7 @@ The available built-in command buttons are: ## Custom command - The custom command buttons can be added in a column by using the [`column.commands`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#commands) property and the action for the custom buttons can be defined in the [`buttonOption.click`](https://ej2.syncfusion.com/react/documentation/api/grid/commandButtonOptions/#click) event. +Custom command buttons can be added using the [column.commands](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#commands) property. Define the action for custom buttons in the [buttonOption.click](https://ej2.syncfusion.com/react/documentation/api/grid/commandButtonOptions/#click) event. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/treegrid/editing/dialog-editing.md b/ej2-react/treegrid/editing/dialog-editing.md index a4922e378..ee7537590 100644 --- a/ej2-react/treegrid/editing/dialog-editing.md +++ b/ej2-react/treegrid/editing/dialog-editing.md @@ -1,16 +1,16 @@ --- layout: post -title: Dialog editing in React Treegrid component | Syncfusion -description: Learn here all about Dialog editing in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Dialog editing in React TreeGrid component | Syncfusion +description: Learn here all about Dialog editing in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Dialog editing platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Dialog editing in React Treegrid component +# Dialog editing in React TreeGrid -In Dialog edit mode, when you start editing the currently selected row, data will be shown on a dialog. You can change the cell values and save edited data to the data source. To enable Dialog edit, set the [`editSettings.mode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettingsModel/#mode) as **Dialog**. +In dialog edit mode, starting an edit on the selected row displays the row data in a dialog. Modify the values and save the changes to the data source. Enable dialog edit by setting [editSettings.mode](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettingsModel/#mode) to **Dialog**. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -25,11 +25,9 @@ In Dialog edit mode, when you start editing the currently selected row, data wil ## Customize edit dialog -The edit dialog in the TreeGrid allows you to customize its appearance and behavior based on the type of action being performed, such as editing or adding a record. +The edit dialog can be customized based on the action type (editing or adding). Handle the [actionComplete](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actioncomplete) event and apply changes according to the `requestType` value (for example, **beginEdit** for editing a record or **add** for adding a new record). -To customize the edit dialog, you need to handle the [actionComplete](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actioncomplete) event of the TreeGrid and perform the necessary modifications based on the **requestType** parameter. The **requestType** parameter identifies the type of action being performed, such as **beginEdit** for editing a record or **add** for adding a new record. - -The following example that demonstrates how to customize the edit dialog using the `actionComplete` event: +The following example demonstrates customizing the edit dialog using the `actionComplete` event: {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -50,11 +48,12 @@ The following example that demonstrates how to customize the edit dialog using t ## Use wizard like dialog editing -Wizard-like dialog editing is a powerful feature in the TreeGrid that enables the creation of intuitive step-by-step forms. This feature provides a structured approach to form completion or data entry by breaking down the process into manageable steps.This feature is particularly useful when you have complex forms that need to be broken down into smaller sections to guide you through the data entry process. +Wizard-like dialog editing in TreeGrid enables the creation of structured, step-by-step forms for streamlined data entry. This approach simplifies complex form workflows by dividing them into manageable sections, allowing for progressive completion of each part. + +To implement wizard-style editing, configure the TreeGrid with the [editSettings.mode](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettings/#mode) property set to **Dialog**, and define a custom template using the `editSettings.template` property. This template can include multiple steps, each representing a distinct section of the form, and can be enhanced with unobtrusive validation to ensure data accuracy throughout the process. -To achieve wizard-like dialog editing in the TreeGrid, you can use the dialog template feature. This feature allows you to define your own custom editing template using the [editSettings.mode](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettings/#mode) property set to **Dialog** and the [editSetting.template](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettings/#template) property to specify the template variable that defines the editors for each step of the wizard. -The following example demonstrate the wizard like editing in the TreeGrid with the unobtrusive validation. +The following example demonstrates wizard-like dialog editing with unobtrusive validation: {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -73,11 +72,11 @@ The following example demonstrate the wizard like editing in the TreeGrid with t {% previewsample "page.domainurl/code-snippet/treegrid/wizardediting-cs1" %} -## Using tab inside the dialog editing +## Using Tab inside the dialog editing -You can use [tab](../../tab/getting-started) component inside dialog edit UI using dialog template feature. The dialog template feature can be enabled by defining [editSettings.mode](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettings/#mode) as **Dialog** and [editSetting.template](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettings/#template) as a react component. +The [Tab](../../tab/getting-started) component can be used inside the dialog edit UI via the dialog template feature. Enable the feature by setting [editSettings.mode](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettings/#mode) to **Dialog** and [editSettings.template](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettings/#template) to a react component. -The following example demonstrate the usage of tab control inside the dialog template. +The following example demonstrates using Tab inside the dialog template: {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/treegrid/editing/edit-types.md b/ej2-react/treegrid/editing/edit-types.md index 7edc8b8ca..e664f2cf5 100644 --- a/ej2-react/treegrid/editing/edit-types.md +++ b/ej2-react/treegrid/editing/edit-types.md @@ -1,43 +1,38 @@ --- layout: post -title: Edit types in React Treegrid component | Syncfusion -description: Learn here all about Edit types in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Edit types in React TreeGrid component | Syncfusion +description: Learn here all about Edit types in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Edit types platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Edit types in React Treegrid component +# Edit types in React TreeGrid ## Cell edit type and its params -The [`columns.editType`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#edittype) is used to customize the edit type of the particular column. You can set the [`columns.editType`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#edittype) based on data type of the column. +The [columns.editType](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#edittype) property customizes the editor used for a column. Set the edit type based on the column’s data type. -* `numericedit` - [`NumericTextBox`](../../numerictextbox) component for integers, double, and decimal data types. +* `numericedit` - [NumericTextBox](../../numerictextbox) component for integer, double, and decimal types. +* `defaultedit` - [TextBox](../../textbox) component for string type. +* `dropdownedit` - [DropDownList](../../drop-down-list) component for list type. +* `booleanedit` - [CheckBox](../../check-box) component for boolean type. +* `datepickeredit` - [DatePicker](../../datepicker) component for date type. +* `datetimepickeredit` - [DateTimePicker](../../datetimepicker) component for date and time type. -* `defaultedit` - [`TextBox`](../../textbox) component for string data type. +Customize the editor model through [columns.edit.params](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#edit). -* `dropdownedit` - [`DropDownList`](../../drop-down-list) component for list data type. +The following table lists editor components and example params. -* `booleanedit` - [`CheckBox`](../../check-box) component for boolean data type. - -* `datepickeredit` - [`DatePicker`](../../datepicker) component for date data type. - -* `datetimepickeredit` - [`DateTimePicker`](../../datetimepicker) component for date time data type. - -Also, you can customize model of the [`columns.editType`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#edittype) component through the [`columns.edit.params`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#edit). - -The following table describes cell edit type component and their corresponding edit params of the column. - -Component |Example +Component | Example -----|----- -[`NumericTextBox`](../../numerictextbox) | params: { decimals: 2, value: 5 } -[`TextBox`](../../textbox) | - -[`DropDownList`](../../drop-down-list) | params: { value: 'Germany' } -[`Checkbox`](../../check-box) | params: { checked: true} -[`DatePicker`](../../datepicker) | params: { format:'dd.MM.yyyy' } -[`DateTimePicker`](../../datetimepicker) | params: { value: new Date() } +[NumericTextBox](../../numerictextbox) | params: { decimals: 2, value: 5 } +[TextBox](../../textbox) | - +[DropDownList](../../drop-down-list) | params: { value: 'Germany' } +[CheckBox](../../check-box) | params: { checked: true } +[DatePicker](../../datepicker) | params: { format: 'dd.MM.yyyy' } +[DateTimePicker](../../datetimepicker) | params: { value: new Date() } {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -50,19 +45,16 @@ Component |Example {% previewsample "page.domainurl/code-snippet/treegrid/editing-cs6" %} -> If edit type is not defined in the column, then it will be considered as the *stringedit* type (Textbox component). +> If an edit type is not defined for a column, it defaults to the *stringedit* type (TextBox component). ## Cell edit template -The cell edit template is used to add a custom component for a particular column by invoking the following functions: - -* **create** - It is used to create the element at time of initialization. - -* **write** - It is used to create custom component or assign default value at time of editing. - -* **read** - It is used to read the value from component at time of save. +A cell edit template adds a custom component for a specific column by implementing the following functions: -* **destroy** - It is used to destroy the component. +* **create** - Create the element at initialization time. +* **write** - Render the custom component or assign a default value when editing begins. +* **read** - Retrieve the value from the component when saving. +* **destroy** - Dispose the component. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/treegrid/editing/edit.md b/ej2-react/treegrid/editing/edit.md index e28667791..b5fd0aba6 100644 --- a/ej2-react/treegrid/editing/edit.md +++ b/ej2-react/treegrid/editing/edit.md @@ -1,21 +1,21 @@ --- layout: post -title: Edit in React Treegrid component | Syncfusion -description: Learn here all about Edit in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Edit in React TreeGrid component | Syncfusion +description: Learn here all about Edit in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Edit platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Edit in React Treegrid component +# Edit in React TreeGrid -The TreeGrid component has options to dynamically insert, delete and update records. Editing feature is enabled by using [`editSettings`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#editsettings) property and it requires a primary key column for CRUD operations. To define the primary key, set [`columns.isPrimaryKey`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#isprimarykey) to **true** in particular column. +The TreeGrid supports dynamically inserting, deleting, and updating records. Enable editing by using the [`editSettings`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#editsettings) property, and define a primary key column for CRUD operations by setting [columns.isPrimaryKey](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#isprimarykey) to **true**. -To get start quickly with CRUD functionalities, you can check on this video: +The following video provides a quick start for CRUD functionalities: {% youtube "https://www.youtube.com/watch?v=JX8Ay-tH-WI" %} -To use CRUD, inject the [`Edit`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#editmodule) module in treegrid. +To use CRUD, inject the [Edit](https://ej2.syncfusion.com/react/documentation/api/treegrid/#editmodule) module in the TreeGrid. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -28,11 +28,11 @@ To use CRUD, inject the [`Edit`](https://ej2.syncfusion.com/react/documentation/ {% previewsample "page.domainurl/code-snippet/treegrid/editing-cs8" %} -> * You can disable editing for a particular column, by specifying [`columns.allowEditing`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#allowediting) to **false**. +> Editing for a particular column can be disabled by setting [columns.allowEditing](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#allowediting) to **false**. ## Toolbar with edit option -The treegrid toolbar has the built-in items to execute Editing actions. You can define this by using the [`toolbar`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbar) property. +The TreeGrid toolbar includes built-in items to execute editing actions. Configure these using the [toolbar](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbar) property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -47,9 +47,9 @@ The treegrid toolbar has the built-in items to execute Editing actions. You can ## Disable editing for particular row cell -You can disable the editing for a particular row by using the [actionBegin](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actionbegin) event of TreeGrid based on **requestType** as **beginEdit**. +Disable editing for a particular row by using the [actionBegin](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actionbegin) event when `requestType` is `beginEdit`. -In the below demo, the rows which are having the value for **Priority** column as **Breaker** is prevented from editing. +In the following example, rows with the **Priority** value set to **Breaker** are prevented from editing. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -70,9 +70,9 @@ In the below demo, the rows which are having the value for **Priority** column a ## Adding row position -The TreeGrid control provides the support to add the new row in the top, bottom, above selected row, below selected row and child position of tree grid content using [`editSettings.newRowPosition`](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettingsModel/#newrowposition) property. By default, a new row will be added at the top of the treegrid. +The TreeGrid supports adding a new row at the top, bottom, above the selected row, below the selected row, or as a child of a row, using [`editSettings.newRowPosition`](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettingsModel/#newrowposition). By default, a new row is added at the top. -The following examples shows how to set new row position as *Child* in tree grid. +The following example sets the new row position to *Child*. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -89,7 +89,7 @@ The following examples shows how to set new row position as *Child* in tree grid ### Delete confirmation -The delete confirm dialog can be shown when deleting a record by defining the [`showDeleteConfirmDialog`](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettingsModel/#showdeleteconfirmdialog) as **true** +Display a delete confirmation dialog by setting [showDeleteConfirmDialog](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettingsModel/#showdeleteconfirmdialog) to **true**. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -102,11 +102,11 @@ The delete confirm dialog can be shown when deleting a record by defining the [` {% previewsample "page.domainurl/code-snippet/treegrid/editing-cs11" %} -> The [`showDeleteConfirmDialog`](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettingsModel/#showdeleteconfirmdialog) supports all type of edit modes. +> [showDeleteConfirmDialog](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettingsModel/#showdeleteconfirmdialog) supports all edit modes. ## Default column values on add new -The treegrid provides an option to set the default value for the columns when adding a new record in it. To set a default value for the particular column by defining the [`columns.defaultValue`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#defaultvalue). +Set default values for columns when adding a new record by defining [columns.defaultValue](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#defaultvalue). {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -121,9 +121,9 @@ The treegrid provides an option to set the default value for the columns when ad ## Disable editing for particular column -You can disable editing for particular columns by using the [`columns.allowEditing`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#allowediting). +Disable editing for specific columns using [columns.allowEditing](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#allowediting). -In the following demo, editing is disabled for the *Start Date* column. +In the following example, editing is disabled for the *Start Date* column. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -138,7 +138,6 @@ In the following demo, editing is disabled for the *Start Date* column. ## Troubleshoot: Editing works only for first row -The Editing functionalities can be performed based upon the primary key value of the selected row. -If [`column.primaryKey`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#isprimarykey) is not defined in the treegrid, then edit or delete action take places the first row. +Editing relies on the primary key value of the selected row. If [columns.isPrimaryKey](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#isprimarykey) is not defined, edit or delete actions target the first row. -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour for key capabilities. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/editing/persisting-data-in-server.md b/ej2-react/treegrid/editing/persisting-data-in-server.md index 81725f807..ceb25d350 100644 --- a/ej2-react/treegrid/editing/persisting-data-in-server.md +++ b/ej2-react/treegrid/editing/persisting-data-in-server.md @@ -1,28 +1,28 @@ --- layout: post -title: Persisting data in server in React Treegrid component | Syncfusion -description: Learn here all about Persisting data in server in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Persisting data in server in React TreeGrid component | Syncfusion +description: Learn here all about Persisting data in server in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Persisting data in server platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Persisting data in server in React Treegrid component +# Persisting data in server in React TreeGrid -Edited data can be persisted in the database using the RESTful web services. +Edited data can be persisted to a database using RESTful web services. -All the CRUD operations in the treegrid are done through [`DataManager`](../../data). The `DataManager` has an option to bind all the CRUD related data in server-side. +All CRUD operations in the TreeGrid are performed through the [DataManager](../../data). The `DataManager` can bind CRUD requests to server-side endpoints. -> For your information, the ODataAdaptor persists data in the server as per OData protocol. +> The ODataAdaptor persists data on the server according to the OData protocol. -In the following section, we have explained how to perform CRUD operation in server-side using the [`UrlAdaptor`](../../../data/adaptors.html#url-adaptor) and `RemoteSave Adaptor`. +The following sections explain how to perform server-side CRUD using the [UrlAdaptor](../../../data/adaptors.html#url-adaptor) and the `RemoteSaveAdaptor`. ## URL adaptor -You can use the [`UrlAdaptor`](../../../data/adaptors.html#url-adaptor) of `DataManager` when binding data source from remote data. In the initial load of treegrid, data are fetched from remote data and bound to the treegrid using `url` property of `DataManager`.You can map The CRUD operation in treegrid can be mapped to server-side Controller actions using the properties `insertUrl`, `removeUrl`, `updateUrl` and `batchUrl`. +Use the [UrlAdaptor](../../../data/adaptors.html#url-adaptor) when binding a data source from a remote service. On initial load, data is fetched from the remote endpoint specified in the `url` property of `DataManager` and bound to the TreeGrid. Map CRUD operations to server-side controller actions using `insertUrl`, `removeUrl`, `updateUrl`, and `batchUrl`. -The following code example describes the above behavior. +The following example demonstrates this behavior. ```ts @@ -64,9 +64,9 @@ export default App; ``` -Also, when using the `UrlAdaptor`, you need to return the data as JSON from the controller action and the JSON object must contain a property as `result` with dataSource as its value and one more property `count` with the dataSource total records count as its value. +When using the `UrlAdaptor`, return JSON from controller actions. the JSON object must contain a property as `result` with dataSource as its value and one more property `count` with the dataSource total records count as its value. -The following code example describes the above behavior. +The following example illustrates the expected response pattern. ```ts @@ -94,9 +94,9 @@ public ActionResult DataSource(DataManager dm) ## Insert record -Using the `insertUrl` property, you can specify the controller action mapping URL to perform insert operation on the server-side. +Specify the controller action URL for insert operations on the server-side using `insertUrl`. -The following code example describes the above behavior and also we have inserted new record based on the newRowPosition TreeGrid editSettings as "Below". +The following example inserts a new record based on `newRowPosition` set to "Below". ```ts @@ -130,15 +130,15 @@ public int FindChildRecords(int id) ``` -The newly added record details are bound to the `value` parameter and `relationalKey` contains primaryKey value of an selected record helps to find out the position of newly added record. Please refer to the following screenshot. +The newly added record is provided in the `value` parameter. The `relationalKey` parameter contains the primary key of the selected record and is used to determine the insert position. ![Insert](images/insert.PNG) ## Update record -Using the `updateUrl` property, the controller action mapping URL can be specified to perform save/update operation on the server-side. +Specify the controller action URL for save/update operations on the server-side using `updateUrl`. -The following code example describes the previous behavior. +The following example updates an existing record. ```ts @@ -155,15 +155,15 @@ public ActionResult Update(TreeGridData value) ``` -The updated record details are bound to the `value` parameter. Please refer to the following screenshot. +The updated record is provided in the `value` parameter. ![Update](images/update.PNG) ## Delete record -Using the `removeUrl` and `batchUrl` property, the controller action mapping URL can be specified to perform delete operation on the server-side. +Specify controller action URLs for delete operations on the server-side using `removeUrl` and `batchUrl`. -The following code example describes the previous behavior. +The following example demonstrates single and batch delete operations. ```ts @@ -184,21 +184,23 @@ public ActionResult Remove(List changed, List added, ``` -The deleted record primary key value is bound to the `key` parameter. Please refer to the following screenshot. +For single delete, the primary key is provided in the `key` parameter. ![Delete](images/remove.PNG) -While delete parent record, the parent and child records is bound to the `deleted` parameter. Please refer to the following screenshot. +When deleting a parent record, both parent and child records are provided in the `deleted` parameter. ![Remove](images/delete.PNG) ## Remote save adaptor -You may need to perform all Tree Grid Actions in client-side except the CRUD operations, that should be interacted with server-side to persist data. It can be achieved in TreeGrid by using **RemoteSaveAdaptor**. +When all TreeGrid actions should run on the client except CRUD (which must be persisted on the server), use `RemoteSaveAdaptor`. -Datasource must be set to **json** property and set **RemoteSaveAdaptor** to the **adaptor** property. CRUD operations can be mapped to server-side using **updateUrl**, **insertUrl**, **removeUrl** and **batchUrl** properties. +* Set the initial data to the `json` property +* Set `adaptor` to `RemoteSaveAdaptor` +* Map CRUD operations using `updateUrl`, `insertUrl`, `removeUrl`, and `batchUrl` -You can use the following code example to use **RemoteSaveAdaptor** in TreeGrid. +The following example shows `RemoteSaveAdaptor` configuration. ```ts @@ -241,7 +243,7 @@ export default App; ``` -The following code example describes the CRUD operations handled at server-side. +The following example illustrates server-side handlers for CRUD with `RemoteSaveAdaptor`. ```ts diff --git a/ej2-react/treegrid/editing/row-editing.md b/ej2-react/treegrid/editing/row-editing.md index 1179a02c0..d729fb630 100644 --- a/ej2-react/treegrid/editing/row-editing.md +++ b/ej2-react/treegrid/editing/row-editing.md @@ -1,16 +1,16 @@ --- layout: post -title: Row editing in React Treegrid component | Syncfusion -description: Learn here all about Row editing in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Row editing in React TreeGrid component | Syncfusion +description: Learn here all about Row editing in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Row editing platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Row editing in React Treegrid component +# Row editing in React TreeGrid -In Row edit mode, when you start editing the currently selected record, the entire row is changed to edit state. You can change the cell values of the row and save edited data to the data source. To enable Row edit, set the [`editSettings.mode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettingsModel/#mode) as **Row**. +In row edit mode, starting an edit on the selected record switches the entire row to edit state. Cell values across the row can be modified and then saved to the datasource. Enable row editing by setting [editSettings.mode](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettingsModel/#mode) to **Row**. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/treegrid/editing/template-editing.md b/ej2-react/treegrid/editing/template-editing.md index b66a88dbd..6396b917b 100644 --- a/ej2-react/treegrid/editing/template-editing.md +++ b/ej2-react/treegrid/editing/template-editing.md @@ -1,25 +1,25 @@ --- layout: post -title: Template editing in React Treegrid component | Syncfusion -description: Learn here all about Template editing in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Template editing in React TreeGrid component | Syncfusion +description: Learn here all about Template editing in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Template editing platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Template editing in React Treegrid component +# Template editing in React TreeGrid component ## Dialog template -The dialog template editing provides an option to customize the default behavior of dialog editing. Using the dialog template, you can render your own editors by defining the [`editSettings.mode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettingsModel/#mode) as **Dialog** and [`template`](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettingsModel/#template) as SCRIPT element ID or HTML string which holds the template. +Dialog template editing customizes the default dialog editing behavior. Using the dialog template, custom editors can be rendered by setting [editSettings.mode](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettingsModel/#mode) to **Dialog** and [template](https://ej2.syncfusion.com/react/documentation/api/treegrid/editSettingsModel/#template) to a SCRIPT element ID or an HTML string that defines the template. -In some cases, you need to add the new field editors in the dialog which are not present in the column model. In that situation, the dialog template will help you to customize the default edit dialog. +Some scenarios require adding field editors that are not present in the column model. In such cases, the dialog template provides full control to extend the default edit dialog. -For quick details with dialog template, you can check on this video: +The following video provides a quick overview: {% youtube "https://www.youtube.com/watch?v=dOi4iNIf5M8" %} -In the following sample, treegrid enabled with dialog template editing. +The following sample enables dialog template editing in the TreeGrid. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -44,19 +44,19 @@ In the following sample, treegrid enabled with dialog template editing. {% previewsample "page.domainurl/code-snippet/treegrid/dialogtemplate-cs1" %} -> The template form editors should have **name** attribute. +> Template form editors must include a **name** attribute. ### Template context -The template should be a React Component class. You can access the row information inside the Component class using *props*, you can bind the attribute or value based on this row information. +The template is a React component class. Row information is available via props, enabling binding of attributes and values based on the current row context. -The following properties will be available at the time of template execution. +The following property is available during template execution. | Property Name | Usage | |---------------|-------| -| isAdd | A Boolean property; it defines whether the current row should be a new record or not. | +| isAdd | A Boolean value that indicates whether the current row is a new record. | -In the following code example, the *OrderID* textbox has been disabled by using the **isAdd** property. +In the following code example, the *OrderID* textbox is disabled based on the **isAdd** property. ``` // The disabled attributes will be added based on the isAdd property. @@ -64,13 +64,13 @@ In the following code example, the *OrderID* textbox has been disabled by using ``` -The following code example illustrates rendering the *taskID* textbox, when a new record is added. +The following code example illustrates rendering the *taskID* textbox when a new record is added. ### Get value from editor -You can read, format, and update the current editor value in the [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actionbegin) event at the time of setting **requestType** to **save**. +Read, format, and update the current editor value in the [actionBegin](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actionbegin) event when **requestType** is **save**. -In the following code example, the *progress* value has been formatted and updated. +In the following code example, the *progress* value is formatted and updated. ```ts const actionBegin = (args: DialogEditEventArgs) => { @@ -86,7 +86,7 @@ In the following code example, the *progress* value has been formatted and updat ### Set focus to editor -By default, the first input element in the dialog will be focused while opening the dialog. If the first input element is in disabled or hidden state, focus the valid input element in the [`actionComplete`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actioncomplete) event based on **requestType** as *beginEdit*. +By default, the first input element in the dialog receives focus when the dialog opens. If the first input is disabled or hidden, move focus to a valid input in the [actionComplete](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actioncomplete) event when **requestType** is *beginEdit*. ```ts @@ -103,7 +103,7 @@ By default, the first input element in the dialog will be focused while opening ### Adding validation rules for custom editors -If you have used additional fields that are not present in the column model, then add the validation rules to them in the [`actionComplete`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actioncomplete) event. +When additional fields not defined in the column model are used, add validation rules for them in the [actionComplete](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actioncomplete) event. ```ts diff --git a/ej2-react/treegrid/editing/validation.md b/ej2-react/treegrid/editing/validation.md index 4569be531..706bee8a3 100644 --- a/ej2-react/treegrid/editing/validation.md +++ b/ej2-react/treegrid/editing/validation.md @@ -1,18 +1,18 @@ --- layout: post -title: Validation in React Treegrid component | Syncfusion -description: Learn here all about Validation in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Validation in React TreeGrid component | Syncfusion +description: Learn here all about Validation in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Validation platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Validation in React Treegrid component +# Validation in React TreeGrid ## Column validation -Column validation allows you to validate the edited or added row data and it display errors for invalid fields before saving data. TreeGrid uses **Form Validator** component for column validation. You can set validation rules by defining the [`columns.validationRules`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#validationrules). +Column validation checks edited or newly added data and displays error messages for invalid fields before saving. TreeGrid uses the Form Validator component for column validation. Configure rules using the [columns.validationRules](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#validationrules) property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -27,9 +27,9 @@ Column validation allows you to validate the edited or added row data and it dis ## Custom validation -You can define your own custom validation rules for the specific columns by using **Form Validator custom rules**. +Custom validation rules can be defined for specific columns using **Form Validator custom rules**. -In the below demo, custom validation applied for *Priority* column. +In the following example, a custom rule is applied to the **Priority** column. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/treegrid/excel-export/adding-header-and-footer.md b/ej2-react/treegrid/excel-export/adding-header-and-footer.md index 3d5e4da80..b54c7bdde 100644 --- a/ej2-react/treegrid/excel-export/adding-header-and-footer.md +++ b/ej2-react/treegrid/excel-export/adding-header-and-footer.md @@ -1,16 +1,16 @@ --- layout: post -title: Adding header and footer in React Treegrid component | Syncfusion -description: Learn here all about Adding header and footer in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Adding header and footer in React TreeGrid | Syncfusion +description: Learn here all about Adding header and footer in Syncfusion React TreeGrid of Syncfusion Essential JS 2 and more. control: Adding header and footer platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Adding header and footer in React Treegrid component +# Adding header and footer in React TreeGrid -The excel export provides an option to include header and footer content for exported excel document. +Excel export supports adding header and footer content to the exported Excel document. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/treegrid/excel-export/excel-export-options.md b/ej2-react/treegrid/excel-export/excel-export-options.md index b50e84281..69bc039c6 100644 --- a/ej2-react/treegrid/excel-export/excel-export-options.md +++ b/ej2-react/treegrid/excel-export/excel-export-options.md @@ -1,36 +1,36 @@ --- layout: post -title: Excel export options in React Treegrid component | Syncfusion -description: Learn here all about Excel export options in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Excel export options in React TreeGrid | Syncfusion +description: Learn here all about Excel export options in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Excel export options platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Excel export options in React Treegrid component +# Excel export options in React TreeGrid ## To customize excel export -The excel export provides an option to customize mapping of the treegrid to excel document. +Excel export supports customizing how TreeGrid content maps to the Excel document. ### Export selected records -Exporting only the selected records from the TreeGrid allows generating Excel or CSV document that include only the desired data from the TreeGrid. This feature provides the flexibility to export specific records that are relevant to the needs, enabling more focused and targeted Excel or CSV exports. +Export only the selected records to generate an Excel or CSV document that includes the intended subset of data. This enables focused and targeted exports. -To export only the selected records by utilizing the [exportProperties.dataSource](https://ej2.syncfusion.com/react/documentation/api/grid/excelExportProperties/) property in the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/grid/#toolbarclick) event. +Export selected records by setting the [exportProperties.dataSource](https://ej2.syncfusion.com/react/documentation/api/grid/excelExportProperties/) property in the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/grid/#toolbarclick) event. -To export the selected records from the TreeGrid to a Excel or CSV file, you can follow these steps: +To export the selected records from the TreeGrid to an Excel or CSV file, follow these steps: 1. Handle the `toolbarClick` event of the TreeGrid. -2. Retrieve the selected records using the [getSelectedRecords](https://ej2.syncfusion.com/react/documentation/api/treegrid/#getselectedrecords) method. +2. Retrieve selected records using the [getSelectedRecords](https://ej2.syncfusion.com/react/documentation/api/treegrid/#getselectedrecords) method. 3. Assign the selected data to the `exportProperties.dataSource` property. 4. Trigger the export operation using the [excelExport](https://ej2.syncfusion.com/react/documentation/api/treegrid/#excelExport) or [csvExport](https://ej2.syncfusion.com/react/documentation/api/treegrid/#csvexport) method. -The following example demonstrates how to export the selected records to a Excel document when a toolbar item is clicked. +The following example demonstrates exporting selected records to an Excel document when a toolbar item is clicked. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -51,7 +51,7 @@ The following example demonstrates how to export the selected records to a Excel ### Export hidden columns -The excel export provides an option to export hidden columns of treegrid by defining `includeHiddenColumn` as **true**. +Export hidden columns by setting `includeHiddenColumn` to **true**. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -66,13 +66,13 @@ The excel export provides an option to export hidden columns of treegrid by defi ### Show or hide columns on exported excel -You can show a hidden column or hide a visible column while printing the treegrid using [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/treegrid#toolbarclick) and [`excelExportComplete`](https://ej2.syncfusion.com/react/documentation/api/grid/excelExportProperties) events. +Show a hidden column or hide a visible column during export using the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) and [excelExportComplete](https://ej2.syncfusion.com/react/documentation/api/grid/excelExportProperties/) events. -In the [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/treegrid#toolbarclick) event, based on **args.item.text** as **Excel Export**. We can show or hide columns by setting [`column.visible`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#visible) property to *true* or *false* respectively. +In the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) event, when **args.item.text** is **Excel Export**, control visibility by setting the [column.visible](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#visible) property to **true** or **false**. -In the excelExportComplete event, We have reversed the state back to the previous state. +In the `excelExportComplete` event, revert the visibility to the previous state. -In the below example, we have *Duration* as a hidden column in the treegrid. While exporting, we have changed *Duration* to visible column and *StartDate* as hidden column. +In the following example, the **Duration** column is hidden in the TreeGrid. During export, **Duration** is shown and **StartDate** is hidden. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -87,7 +87,7 @@ In the below example, we have *Duration* as a hidden column in the treegrid. Whi ### File name for exported document -You can assign the file name for the exported document by defining `fileName` property in `ExcelExportProperties`. +Assign a file name for the exported document by defining the `fileName` property in `ExcelExportProperties`. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -102,11 +102,11 @@ You can assign the file name for the exported document by defining `fileName` pr ## Conditional cell formatting -When exporting data from the TreeGrid, you have an option to conditionally format the cells in the exported Excel document. This allows you to customize the appearance of specific cells based on their values or other criteria. +Conditional formatting customizes cell appearance in the exported Excel document based on values or criteria. -To achieve this feature, you need to use the [excelQueryCellInfo](https://ej2.syncfusion.com/react/documentation/api/treegrid/#excelQueryCellInfo) event of the TreeGrid. This event is triggered for each cell during the export process to Excel. Within this event, you can access the cell object using the **args.cell** property and modify its properties, such as the background color, based on your desired conditions. +Implement conditional formatting using the [excelQueryCellInfo](https://ej2.syncfusion.com/react/documentation/api/treegrid/#excelQueryCellInfo) event. This event triggers for each cell during export. Within the event, access the cell object using `args.cell` and modify properties such as background color according to required conditions. -The following example demonstrate how to customize the background color of the Freight column in the exported Excel document using the **args.cell** and **backgroundColor** properties of the `excelQueryCellInfo` event. +The following example demonstrates customizing the background color of the Freight column in the exported Excel document using the `excelQueryCellInfo` event with `args.cell.backgroundColor`. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -121,9 +121,9 @@ The following example demonstrate how to customize the background color of the F ## Theme -The excel export provides an option to include theme for exported excel document. +Excel export supports applying a theme to the exported Excel document. -To apply theme in exported Excel, define the `theme` in `ExcelExportProperties`. +To apply a theme, define `theme` in `ExcelExportProperties`. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -136,4 +136,4 @@ To apply theme in exported Excel, define the `theme` in `ExcelExportProperties`. {% previewsample "page.domainurl/code-snippet/treegrid/excel-export-cs3" %} ->By default, material theme is applied to exported excel document. \ No newline at end of file +> By default, the Material theme is applied to the exported Excel document. \ No newline at end of file diff --git a/ej2-react/treegrid/excel-export/excel-export.md b/ej2-react/treegrid/excel-export/excel-export.md index c85645e98..218e124c4 100644 --- a/ej2-react/treegrid/excel-export/excel-export.md +++ b/ej2-react/treegrid/excel-export/excel-export.md @@ -1,20 +1,20 @@ --- layout: post -title: Excel export in React Treegrid component | Syncfusion -description: Learn here all about Excel export in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Excel export in React TreeGrid | Syncfusion +description: Learn here all about Excel export in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Excel export platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Excel export in React Treegrid component +# Excel export in React TreeGrid -The excel export allows exporting TreeGrid data to Excel document. You need to use the [`excelExport`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#excelexport) method for exporting. To enable Excel export in the treegrid, set the [`allowExcelExport`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowexcelexport) as **true**. +Excel export enables exporting TreeGrid data to an Excel document. Export by calling the [excelExport](https://ej2.syncfusion.com/react/documentation/api/treegrid/#excelexport) method. To enable Excel export in the TreeGrid, set [allowExcelExport](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowexcelexport) to **true**. -To use excel export, You need to inject the **ExcelExport** module in treegrid. +For Excel export, inject the **ExcelExport** module in the TreeGrid. -To get start quickly with exporting functionalities, you can check on this video: +For a quick start with exporting functionalities, refer to the following video: {% youtube "https://www.youtube.com/watch?v=Rz24Nk4eSEY" %} {% tabs %} @@ -30,7 +30,7 @@ To get start quickly with exporting functionalities, you can check on this video ## Persist collapsed state -You can persist the collapsed state in the exported document by defining `isCollapsedStatePersist` property as true in `TreeGridExcelExportProperties` parameter of [`excelExport`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#excelexport) method. +Persist the collapsed state in the exported document by setting `isCollapsedStatePersist` to true in the `TreeGridExcelExportProperties` parameter of the [excelExport](https://ej2.syncfusion.com/react/documentation/api/treegrid/#excelexport) method. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -45,7 +45,7 @@ You can persist the collapsed state in the exported document by defining `isColl ## Custom data source -The excel export provides an option to define datasource dynamically before exporting. To export data dynamically, define the `dataSource` in `ExcelExportProperties`. +Excel export supports defining a data source dynamically before exporting. To export data dynamically, set the `dataSource` in `ExcelExportProperties`. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -58,10 +58,11 @@ The excel export provides an option to define datasource dynamically before expo {% previewsample "page.domainurl/code-snippet/treegrid/excel-export-cs9" %} -## Exporting Custom Aggregates in Tree Grid -The Tree Grid enables exporting custom aggregates, which summarize column data, to an Excel document using the `ExcelAggregateQueryCellInfo` event. +## Exporting Custom Aggregates in TreeGrid -In the provided example, the `customAggregateFn` function computes the item count for a selected category, while the `ExcelAggregateQueryCellInfo` event customizes the exported cell values in the Excel document. +The TreeGrid supports exporting custom aggregates, which summarize column data, to an Excel document using the `ExcelAggregateQueryCellInfo` event. + +In the example, the `customAggregateFn` function computes the item count for a selected category, and the `ExcelAggregateQueryCellInfo` event customizes the exported cell values in the Excel document. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -76,11 +77,11 @@ In the provided example, the `customAggregateFn` function computes the item coun ## Passing additional parameters to the server when exporting -Passing additional parameters to the server when exporting data in the Syncfusion React TreeGrid involves providing flexibility to include extra information or customize the export process based on specific requirements. +Additional parameters can be sent to the server during export to include extra information or customize the export process. -You can achieve this by utilizing the [query](https://ej2.syncfusion.com/react/documentation/api/treegrid/#query) property and the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) event. Within the query property, you can invoke the [addParams](https://ej2.syncfusion.com/documentation/api/data/query/#addparams) method to add parameters to the request. +This can be achieved using the [query](https://ej2.syncfusion.com/react/documentation/api/treegrid/#query) property and the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) event. Within the `query` property, invoke the [addParams](https://ej2.syncfusion.com/documentation/api/data/query/#addparams) method to append parameters to the request. -The following example demonstrates how to pass additional parameters to the server when Excel exporting within the `toolbarClick` event. Within the event, the additional parameters, specifically **recordcount** as **12**, are passed using the `addParams` method and displayed as a message. +The following example demonstrates passing additional parameters during Excel export within the `toolbarClick` event. In this example, the parameter **recordcount** with value **12** is added using `addParams` and displayed as a message. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -99,4 +100,4 @@ The following example demonstrates how to pass additional parameters to the serv {% previewsample "page.domainurl/code-snippet/treegrid/refresh-cs7" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/excel-export/exporting-treegrid-in-server.md b/ej2-react/treegrid/excel-export/exporting-treegrid-in-server.md index 7373f058b..09a50c665 100644 --- a/ej2-react/treegrid/excel-export/exporting-treegrid-in-server.md +++ b/ej2-react/treegrid/excel-export/exporting-treegrid-in-server.md @@ -1,30 +1,29 @@ --- layout: post -title: Exporting TreeGrid in Server in React Tree Grid component | Syncfusion -description: Learn here all about Exporting Tree Grid in Server in Syncfusion ##Platform_Name## Tree Grid Component of Syncfusion Essential JS 2 and more. +title: Exporting TreeGrid in Server in React TreeGrid | Syncfusion +description: Learn here all about Exporting TreeGrid in Server in Syncfusion ##Platform_Name## TreeGrid Component of Syncfusion Essential JS 2 and more. platform: ej2-react control: Exporting TreeGrid in Server domainurl: ##DomainURL## documentation: ug --- +# Exporting tree grid in Server in React TreeGrid -# Exporting tree grid in Server in React Tree Grid Component - -The Tree Grid have an option to export the data to Excel in server side using tree grid server export library. +TreeGrid supports exporting data to Excel on the server side using the TreeGrid server export library. ## Server dependencies -The Server side export functionality is shipped in the Syncfusion.EJ2.TreeGridExport package, which is available in Essential Studio® and [nuget.org](https://www.nuget.org/).The following list of dependencies is required for tree grid server side Excel exporting action. +The server-side export functionality is available in the Syncfusion.EJ2.TreeGridExport package, which is distributed with Essential Studio and on [nuget.org](https://www.nuget.org/). The following dependencies are required for server-side Excel export: * Syncfusion.EJ2 * Syncfusion.EJ2.TreeGridExport ## Server configuration -The following code snippet shows server configuration using ASP.NET Core Controller Action. +The following code snippet shows server configuration using an ASP.NET Core controller action. -To Export the tree grid in server side, You need to call the [`serverExcelExport`](https://ej2.syncfusion.com/documentation/api/treegrid/#serverexcelexport) method for passing the tree grid properties to server exporting action. +To export the TreeGrid on the server side, call the [serverExcelExport](https://ej2.syncfusion.com/documentation/api/treegrid/#serverexcelexport) method to pass TreeGrid properties to the server export action. ```ts @@ -81,9 +80,9 @@ export default App; ``` ## CSV Export in server side -You can export the tree grid to CSV format by using the [`serverCsvExport`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#servercsvexport) method which will pass the tree grid properties to server. +Export to CSV on the server side using the [serverCsvExport](https://ej2.syncfusion.com/react/documentation/api/treegrid/#servercsvexport) method, which passes TreeGrid properties to the server. -In the below demo, we have invoked the above method inside the [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) event. In server side, we have deserialized the tree grid properties and passed to the [`ExportToCsv`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGridExport.TreeGridExcelExport.html#Syncfusion_EJ2_TreeGridExport_TreeGridExcelExport_ExportToCsv__1_Syncfusion_EJ2_TreeGrid_TreeGrid_System_Collections_IEnumerable_Syncfusion_EJ2_TreeGridExport_ExcelExportProperties_) method which will export the properties to CSV format. +In the following demo, the method is invoked inside the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) event. On the server, TreeGrid properties are deserialized and passed to the [ExportToCsv](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGridExport.TreeGridExcelExport.html#Syncfusion_EJ2_TreeGridExport_TreeGridExcelExport_ExportToCsv__1_Syncfusion_EJ2_TreeGrid_TreeGrid_System_Collections_IEnumerable_Syncfusion_EJ2_TreeGridExport_ExcelExportProperties_) method, which generates the CSV. ```ts @@ -150,11 +149,11 @@ export default App; ## Rotate a header text to a certain degree in the exported grid on the server side -The TreeGrid has support to customize the column header styles such as changing text orientation, the font color, and so on in the exported Excel file. To achieve this requirement, use the `ExcelHeaderCellRendering` event of the tree grid. +TreeGrid supports customizing column header styles in the exported Excel file, including text orientation and font color. To implement this, use the `ExcelHeaderCellRendering` event. -The `ExcelHeaderCellRendering` will be triggered when creating a column header for the excel document to be exported in the server side. Customize the column header in this event. +The `ExcelHeaderCellRendering` event triggers when creating a column header for the Excel document on the server side. Apply header customizations within this event. -In the following demo, using the `HeaderCellRotate` method of the `TreeGridExcelExport` class in the `ExcelHeaderCellRendering` event, you can rotate the header text of the column header in the excel exported document. +In the following demo, the `HeaderCellRotate` method of the `TreeGridExcelExport` class is used in the `ExcelHeaderCellRendering` event to rotate the header text in the exported document. ```ts diff --git a/ej2-react/treegrid/filtering/excel-like-filter.md b/ej2-react/treegrid/filtering/excel-like-filter.md index 759e7615a..bd9d4b2e2 100644 --- a/ej2-react/treegrid/filtering/excel-like-filter.md +++ b/ej2-react/treegrid/filtering/excel-like-filter.md @@ -1,16 +1,16 @@ --- layout: post -title: Excel like filter in React Treegrid component | Syncfusion -description: Learn here all about Excel like filter in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Excel like filter in React TreeGrid component | Syncfusion +description: Learn here all about Excel like filter in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Excel like filter platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Excel like filter in React Treegrid component +# Excel like filter in React TreeGrid -You can enable Excel like filter by defining [`filterSettings.type`](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettingsModel/#type) as *Excel*. The excel menu contains an option such as Sorting, Clear filter, Sub menu for advanced filtering.. +Enable the Excel like filter by setting [filterSettings.type](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettingsModel/#type) to `Excel`. The Excel filter menu adapts to the column type and provides options such as sorting, clear filter, and an advanced filtering submenu. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -25,7 +25,7 @@ You can enable Excel like filter by defining [`filterSettings.type`](https://ej2 ## Change default filter operator -You can change the default excel-filter operator by changing the column operator as `contains` from `startsWith` in the [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actionBegin) event +Change the default Excel filter operator during actions. For example, switch string columns from `startsWith` to `contains` in the [actionBegin](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actionbegin) event. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/treegrid/filtering/filter-bar.md b/ej2-react/treegrid/filtering/filter-bar.md index 80bbf9ad3..a9e7d6ba0 100644 --- a/ej2-react/treegrid/filtering/filter-bar.md +++ b/ej2-react/treegrid/filtering/filter-bar.md @@ -1,33 +1,33 @@ --- layout: post -title: Filter bar in React Treegrid component | Syncfusion -description: Learn here all about Filter bar in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Filter bar in React TreeGrid component | Syncfusion +description: Learn here all about Filter bar in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Filter bar platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Filter bar in React Treegrid component +# Filter bar in React TreeGrid -By setting the [`allowFiltering`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowfiltering) to true, the filter bar row will render next to the header, which allows you to filter data. You can filter the records with different expressions depending upon the column type. +When [allowFiltering](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowfiltering) is set to true, a filter bar row appears below the header to filter data. Records can be filtered using different expressions based on the column type. **Filter bar expressions:** - You can enter the following filter expressions (operators) manually in the filter bar. +Enter the following expressions (operators) directly in the filter bar. -Expression |Example |Description |Column Type +Expression | Example | Description | Column type -----|-----|-----|----- -= |=value |equal |Number -!= |!=value |notequal |Number -> |>value |greaterthan |Number -< |= |>=value |greaterthanorequal |Number -<=|<=value|lessthanorequal |Number -* |*value |startswith |String -% |%value |endswith |String -N/A |N/A | *Equal* operator will always be used for date filter. |Date -N/A |N/A |*Equal* operator will always be used for Boolean filter. |Boolean += | =value | equal | Number +!= | !=value | notequal | Number +> | >value | greaterthan | Number +< | = | >=value | greaterthanorequal | Number +<= | <=value | lessthanorequal | Number +* | *value | startswith | String +% | %value | endswith | String +N/A | N/A | **Equal** operator is always used for Date columns | Date +N/A | N/A | **Equal** operator is always used for Boolean columns | Boolean {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -40,11 +40,11 @@ N/A |N/A |*Equal* operator will always be used for Boolean filter. |Boolean {% previewsample "page.domainurl/code-snippet/treegrid/filtering-cs3" %} -> By default, the [`filterSettings.columns.operator`](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettingsModel/#operators) value is *equal*. +> By default, [filterSettings.columns.operator](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettingsModel/#operators) is `equal`. -## Filterbar template with custom component +## Filter bar template with custom component -You can customize default filter bar component of a column by custom component using **filter template**. +Customize a column’s default filter bar input using a **filter template**. The following example demonstrates the way to use filter template for a column when using filter bar. In the following example, the DropdownList component is used to filter **duration** column using filter template. @@ -61,9 +61,9 @@ The following example demonstrates the way to use filter template for a column w ### Change default filter bar operator -You can change the default filter operator by extending [`filterModule.filterOperators`](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettings/#operators) property in [`dataBound`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#databound) event. +Change the default filter operator by extending [filterModule.filterOperators](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettings/#operators) in the [dataBound](https://ej2.syncfusion.com/react/documentation/api/treegrid/#databound) event. -In the following sample, we have changed the default operator for string typed columns as `contains` from `startsWith`. +In the following sample, the default operator for string columns is changed from `startsWith` to `contains`. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/treegrid/filtering/filter-menu.md b/ej2-react/treegrid/filtering/filter-menu.md index 743f48a5b..32f49ad9c 100644 --- a/ej2-react/treegrid/filtering/filter-menu.md +++ b/ej2-react/treegrid/filtering/filter-menu.md @@ -1,16 +1,16 @@ --- layout: post -title: Filter menu in React Treegrid component | Syncfusion -description: Learn here all about Filter menu in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Filter menu in React TreeGrid component | Syncfusion +description: Learn here all about Filter menu in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Filter menu platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Filter menu in React Treegrid component +# Filter menu in React TreeGrid -You can enable filter menu by setting the [`filterSettings.type`](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettingsModel/#type) as *Menu*. The filter menu UI will be rendered based on its column type, which allows you to filter data. You can filter the records with different operators. +Enable the filter menu by setting [filterSettings.type](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettingsModel/#type) to `Menu`. The menu UI adapts to the column type and provides operator-based filtering. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -23,17 +23,15 @@ You can enable filter menu by setting the [`filterSettings.type`](https://ej2.sy {% previewsample "page.domainurl/code-snippet/treegrid/filtering-cs6" %} -> * [`allowFiltering`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowfiltering) must be set as true to enable filter menu. -> * Setting [`columns.allowFiltering`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#allowfiltering) as false will prevent filter menu rendering for a particular column. +> * [allowFiltering](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowfiltering) must be set to true. +> * Setting [columns.allowFiltering](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#allowfiltering) to false disables the filter menu for that column. ## Custom component in filter menu -You can customize default filter menu component of a column by custom component using **filterTemplate**. +Customize a column’s filter menu input using a `filterTemplate`. The following example demonstrates the way to use filter template for a column when using filter menu. In the following example, the DropdownList component is used to filter **duration** column using **filterTemplate**. - - ```ts import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns'; import { ColumnDirective, ColumnsDirective, Filter, FilterSettingsModel } from '@syncfusion/ej2-react-treegrid'; @@ -65,12 +63,11 @@ function App() { export default App; ``` - ## Enable different filter dialog for a column -You can use both *Menu* and *Excel* filter in a same TreeGrid. To do so, set the [`column.filter.type`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#filter) as *Menu* or *Excel*. +Both **Menu** and **Excel** filtering can be used in the same TreeGrid. Set [column.filter.type](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#filter) to **Menu** or **Excel** per column. -In the following sample menu filter is enabled by default and excel filter is enabled for the Task Name column using the [`column.filter.type`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#filter). +In the following sample, Menu filtering is enabled globally, and Excel filtering is applied to the **Task Name** column using [column.filter.type](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#filter). {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/treegrid/filtering/filtering.md b/ej2-react/treegrid/filtering/filtering.md index 5dcbe6432..cc68947ae 100644 --- a/ej2-react/treegrid/filtering/filtering.md +++ b/ej2-react/treegrid/filtering/filtering.md @@ -1,20 +1,20 @@ --- layout: post -title: Filtering in React Treegrid component | Syncfusion -description: Learn here all about Filtering in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Filtering in React TreeGrid component | Syncfusion +description: Learn here all about Filtering in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Filtering platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Filtering in React Treegrid component +# Filtering in React TreeGrid -Filtering allows you to view specific or related records based on filter criteria. To enable filtering in the TreeGrid, set the [`allowFiltering`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowfiltering) to true. Filtering options can be configured through [`filterSettings`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#filtersettings). +Filtering displays only records that match specified criteria. Enable filtering by setting [allowFiltering](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowfiltering) to true. Configure behavior using [filterSettings](https://ej2.syncfusion.com/react/documentation/api/treegrid/#filtersettings). -To use filter, inject the **Filter** module in the treegrid. +To use filtering, inject the **Filter** module in the TreeGrid. -To get start quickly with filtering functionalities, you can check on this video: +The following video provides a quick overview of filtering: {% youtube "https://www.youtube.com/watch?v=_kxndJOgtuw" %} {% tabs %} @@ -28,21 +28,17 @@ To get start quickly with filtering functionalities, you can check on this video {% previewsample "page.domainurl/code-snippet/treegrid/filtering-cs8" %} -> * You can apply and clear filtering by using [`filterByColumn`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#filterbycolumn) and [`clearFiltering`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#clearfiltering) methods. -> * To disable filtering for a particular column, set [`columns.allowFiltering`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#allowfiltering) to *false*. +> * Apply and clear filtering programmatically using [filterByColumn](https://ej2.syncfusion.com/react/documentation/api/treegrid/#filterbycolumn) and [clearFiltering](https://ej2.syncfusion.com/react/documentation/api/treegrid/#clearfiltering). +> * To disable filtering for a specific column, set [columns.allowFiltering](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#allowfiltering) to **false**. ## Filter hierarchy modes -TreeGrid provides support for a set of filtering modes with [`filterSettings.filterHierarchyMode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettingsModel/#hierarchymode) property. -The below are the type of filter mode available in TreeGrid. +TreeGrid provides support for a set of filtering modes with [filterSettings.filterHierarchyMode](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettingsModel/#hierarchymode) property. The available modes are: -* **Parent** : This is the default filter hierarchy mode in TreeGrid. The filtered records are displayed with its parent records, if the filtered records not have any parent record then the filtered records only displayed. - -* **Child** : The filtered records are displayed with its child record, if the filtered records not have any child record then the filtered records only displayed. - -* **Both** : The filtered records are displayed with its both parent and child record, if the filtered records not have any parent and child record then the filtered records only displayed. - -* **None** : The filtered records are only displayed. +* **Parent** (default): Displays matching records along with their parent records. If a match has no parent, only the matching record is shown. +* **Child** : Displays matching records along with their child records. If a match has no children, only the matching record is shown. +* **Both** : Displays matching records with both parent and child records. If no related parent or child exists, only the matching record is shown. +* **None** : Displays only the records that match the filter. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -57,7 +53,7 @@ The below are the type of filter mode available in TreeGrid. ## Initial filter -To apply the filter at initial rendering, set the filter *predicate* object in [`filterSettings.columns`](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettingsModel/#columns). +Apply filters on initial render by specifying **predicate** objects in [filterSettings.columns](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettingsModel/#columns). {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -72,29 +68,27 @@ To apply the filter at initial rendering, set the filter *predicate* object in [ ## Filter operators -The filter operator for a column can be defined in the [`operator`](https://ej2.syncfusion.com/react/documentation/api/grid/predicate/#operator) property of [`filterSettings.columns`](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettings/#columns). - -The available operators and its supported data types are: +Define the operator for each filtered column using the [operator](https://ej2.syncfusion.com/react/documentation/api/grid/predicate/#operator) property in [filterSettings.columns](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettings/#columns). -Operator |Description |Supported Types +Operator | Description | Supported types -----|-----|----- -startswith |Checks whether the value begins with the specified value. |String -endswith |Checks whether the value ends with the specified value. |String -contains |Checks whether the value contains the specified value. |String -equal |Checks whether the value is equal to the specified value. |String | Number | Boolean | Date -notequal |Checks for values not equal to the specified value. |String | Number | Boolean | Date -greaterthan |Checks whether the value is greater than the specified value. |Number | Date -greaterthanorequal|Checks whether a value is greater than or equal to the specified value. |Number | Date -lessthan |Checks whether the value is less than the specified value. |Number | Date -lessthanorequal |Checks whether the value is less than or equal to the specified value. |Number | Date +startswith | Checks whether the value begins with the specified value. | String +endswith | Checks whether the value ends with the specified value. | String +contains | Checks whether the value contains the specified value. | String +equal | Checks whether the value is equal to the specified value. | String | Number | Boolean | Date +notequal | Checks for values not equal to the specified value. | String | Number | Boolean | Date +greaterthan | Checks whether the value is greater than the specified value. | Number | Date +greaterthanorequal | Checks whether a value is greater than or equal to the specified value. | Number | Date +lessthan | Checks whether the value is less than the specified value. | Number | Date +lessthanorequal | Checks whether the value is less than or equal to the specified value. | Number | Date > By default, the **filterSettings.columns.operator** value is *equal*. ## Diacritics -By default, treegrid ignores diacritic characters while filtering. To include diacritic characters, set the [`filterSettings.ignoreAccent`](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettingsModel/#ignoreaccent) as **true**. +By default, the TreeGrid ignores diacritic characters during filtering. To include diacritic characters, set [filterSettings.ignoreAccent](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettingsModel/#ignoreaccent) to true. -In the following sample, type **aero** in *Name* column to filter diacritic characters. +In the following example, type **aero** in the Name column to match diacritic characters. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -107,4 +101,4 @@ In the following sample, type **aero** in *Name* column to filter diacritic char {% previewsample "page.domainurl/code-snippet/treegrid/filtering-cs11" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-components/react-tree-grid) feature tour for key capabilities. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/frozen.md b/ej2-react/treegrid/frozen.md index b018d4d4e..fe4e2a858 100644 --- a/ej2-react/treegrid/frozen.md +++ b/ej2-react/treegrid/frozen.md @@ -1,14 +1,14 @@ --- layout: post -title: Frozen in React Treegrid component | Syncfusion -description: Learn here all about Frozen in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Frozen in React TreeGrid | Syncfusion +description: Learn here all about Frozen in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Frozen platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Frozen in React Treegrid component +# Frozen in React TreeGrid ## Frozen rows and columns @@ -16,7 +16,7 @@ Frozen rows and columns provides an option to make rows and columns always visib To use frozen rows and columns support, inject the **Freeze** module in the tree grid. -In this demo, the [`frozenColumns`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#frozencolumns) is set as **'2'** and the [`frozenRows`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#frozenrows) +In this demo, the [frozenColumns](https://ej2.syncfusion.com/react/documentation/api/treegrid/#frozencolumns) is set as **'2'** and the [frozenRows](https://ej2.syncfusion.com/react/documentation/api/treegrid/#frozenrows) is set as **'3'**. Hence, the left two columns and top three rows are frozen. {% tabs %} @@ -32,7 +32,7 @@ is set as **'3'**. Hence, the left two columns and top three rows are frozen. ### Freeze particular columns -You can use [`isFrozen`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#isfrozen) property to freeze selected columns in tree grid. +You can use [isFrozen](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#isfrozen) property to freeze selected columns in tree grid. In this demo, the columns with field name `taskName` and `startDate` is frozen using the `isFrozen` property. @@ -49,9 +49,9 @@ In this demo, the columns with field name `taskName` and `startDate` is frozen u ### Freeze direction -You can freeze the tree grid columns on the left or right side by using the [`column.freeze`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#freeze) freeze property and the remaining columns will be movable. The tree grid will automatically move the columns to the left or right position based on the [`column.freeze`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#freeze) value. +You can freeze the tree grid columns on the left or right side by using the [column.freeze](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#freeze) freeze property and the remaining columns will be movable. The tree grid will automatically move the columns to the left or right position based on the [column.freeze](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#freeze) value. -Types of the [`column.freeze`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#freeze) directions: +Types of the [column.freeze](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#freeze) directions: * **`Left`**: Allows you to freeze the columns at the left. * **`Right`**: Allows you to freeze the columns at the right. @@ -69,7 +69,7 @@ In this demo, the **Task Name** column is frozen at the left and the **Priority* {% previewsample "page.domainurl/code-snippet/treegrid/freeze-direction-cs1" %} -> * Freeze Direction is not compatible with the [`isFrozen`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#isfrozen) and [`frozenColumns`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#frozencolumns) properties. +> * Freeze Direction is not compatible with the [isFrozen](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#isfrozen) and [frozenColumns](https://ej2.syncfusion.com/react/documentation/api/treegrid/#frozencolumns) properties. ### Limitations of frozen tree grid @@ -84,4 +84,4 @@ Freeze Direction feature has the below limitations, along with the above mention * Infinite scroll cache mode * Freeze direction in the stacked header is not compatible with column reordering. -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. +> You can refer to our [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. diff --git a/ej2-react/treegrid/getting-started.md b/ej2-react/treegrid/getting-started.md index da2f246c3..ca245b014 100644 --- a/ej2-react/treegrid/getting-started.md +++ b/ej2-react/treegrid/getting-started.md @@ -1,4 +1,3 @@ - --- layout: post title: Getting started with React Treegrid component | Syncfusion @@ -11,31 +10,31 @@ domainurl: ##DomainURL## # Getting started in React Treegrid component -This section explains the steps required to create a simple Essential® JS 2 TreeGrid and demonstrates the basic usage of the TreeGrid control in a React application. +This section outlines the steps to create a simple Essential JS 2 TreeGrid and demonstrates basic usage in a React application. -To get start quickly with React Tree Grid, you can check on this video: +For a quick start with React TreeGrid, refer to this video: {% youtube "https://www.youtube.com/watch?v=dQcIAoSgARc" %} ## Setup for Local Development -To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production. +To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up environment using JavaScript and optimizes application for production. -> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. +> **Note:** To create a React application using `create-react-app`, refer to this documentation: https://ej2.syncfusion.com/react/documentation/getting-started/create-app. To create a new React application, run the following command. ```bash npm create vite@latest my-app ``` -To set-up a React application in TypeScript environment, run the following command. +To set up a React application in a TypeScript environment, run the following command. ```bash npm create vite@latest my-app -- --template react-ts cd my-app npm run dev ``` -To set-up a React application in JavaScript environment, run the following command. +To set up a React application in a JavaScript environment, run the following command. ```bash npm create vite@latest my-app -- --template react @@ -43,10 +42,9 @@ cd my-app npm run dev ``` +## Adding Syncfusion TreeGrid packages -## Adding Syncfusion® TreeGrid packages - -All the available Essential® JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. To install TreeGrid component, use the following command +All Essential JS 2 packages are published in the npm public registry at [npmjs.com](https://www.npmjs.com/~syncfusionorg). Install the TreeGrid component with the following command: ``` npm install @syncfusion/ej2-react-treegrid --save @@ -54,7 +52,7 @@ npm install @syncfusion/ej2-react-treegrid --save ## Adding CSS reference - Add components style as given below in **src/App.css**. +Add component styles as shown below in src/App.css. ```css @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @@ -69,13 +67,13 @@ npm install @syncfusion/ej2-react-treegrid --save @import "../node_modules/@syncfusion/ej2-react-treegrid/styles/material.css"; ``` -> To refer **App.css** in the application then import it in the **src/App.tsx** file. +> Import **App.css** in the **src/App.tsx** file. ## Adding TreeGrid component -Now, you can start adding TreeGrid component in the application. For getting started, add the TreeGrid component in **src/App.tsx** file using following code. +Add the TreeGrid component to the application. For getting started, include the TreeGrid component in **src/App.tsx** using the following code. -Place the following treegrid code in the **src/App.tsx**. +Place the following treegrid code in **src/App.tsx**. ```ts import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid'; @@ -98,23 +96,23 @@ export default App; ## Module Injection -TreeGrid component features are segregated into individual feature-wise modules. In order to use a particular feature, you need to inject its feature service in the `App`. In the current application, we are going to use paging, sorting, filtering and exporting feature of TreeGrid. Please find relevant feature service name and description as follows. +TreeGrid features are segregated into individual feature-wise modules. To use a feature, inject its service in the App. The sample uses paging, sorting, filtering, and exporting features of TreeGrid. Relevant feature service names and descriptions: -* **Page** - Inject this service to use paging feature. -* **Sort** - Inject this service to use sorting feature. -* **Filter** - Inject this service to use filtering feature. -* **ExcelExport** - Inject this service to use Excel Export feature. -* **PdfExport** - Inject this service to use PDF Export feature. +* **Page** - Inject to enable paging. +* **Sort** - Inject to enable sorting. +* **Filter** - Inject to enable filtering. +* **ExcelExport** - Inject to enable Excel export. +* **PdfExport** - Inject to enable PDF export. These modules should be injected into the treegrid using the **Inject** directive. -> Additional feature modules are available [`here`](./module). +> Additional feature modules are available [here](./module). ## Enable Paging -The paging feature enables users to view the TreeGrid record in a paged view. It can be enabled by setting [`allowPaging`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowpaging) property to true. Inject the **Page** module in **Inject.services** as follows. If the **Page** service is not injected, the pager will not be rendered in the treegrid. Pager can be customized using [`pageSettings`](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettings) property. +The paging feature displays records in a paged view. Enable paging by setting the [allowPaging](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowpaging) property to true. Inject the **Page** module in **Inject.services** as shown. If the **Page** service is not injected, the pager is not rendered. Customize the pager using the [pageSettings](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettings/) property. -We also have Root level paging mode in which paging is based on the root level rows only i.e., it ignores the child rows count and it can be enabled by using the [`pageSettings.pageSizeMode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettings/#pagesizemode) property. +Root-level paging mode is available, which bases paging on root-level rows only (ignoring child row count). Enable it using the [pageSettings.pageSizeMode](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettings/#pagesizemode) property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -135,7 +133,7 @@ We also have Root level paging mode in which paging is based on the root level r ## Enable Sorting -The sorting feature enables you to order the records. It can be enabled by setting the [`allowSorting`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowsorting) property as *true*. Inject the **Sort** module in the **Inject.services** as follows. If the **Sort** module is not injected, you cannot sort when a header is clicked. Sorting feature can be customized using [`sortSettings`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#sortsettings) property. +The sorting feature orders records. Enable sorting by setting the [allowSorting](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowsorting) property to true. Inject the **Sort** module in **Inject.services**. If the **Sort** module is not injected, clicking a header will not sort. Customize sorting using the [sortSettings](https://ej2.syncfusion.com/react/documentation/api/treegrid/#sortsettings) property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -156,9 +154,9 @@ The sorting feature enables you to order the records. It can be enabled by setti ## Enable Filtering -The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [`allowFiltering`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowfiltering) property as true. Inject the **Filter** module in the **Inject.services** as follows. If **Filter** module is not injected, filter bar will not be rendered in TreeGrid. Filtering feature can be customized using [`filterSettings`](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettings) property. +The filtering feature displays a reduced set of records based on filter criteria. Enable filtering by setting the [allowFiltering](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowfiltering) property to true. Inject the **Filter** module in **Inject.services**. If the **Filter** module is not injected, the filter bar is not rendered. Customize filtering using the [filterSettings](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettings/) property. -By default, filtered records are shown along with its parent records. This behavior can be changed by using [`filterSettings-hierarchyMode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettings/#hierarchyMode) property. +By default, filtered records are shown along with their parent records. Change this behavior using the [filterSettings-hierarchyMode](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettings/#hierarchyMode) property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -179,13 +177,13 @@ By default, filtered records are shown along with its parent records. This behav ## Run the application -Now run the `npm run dev` command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser. +Run the `npm run dev` command in the console to start the development server. This command compiles the code and serves the application locally, opening it in the browser. ``` npm run dev ``` -Output will be appears as follows. +The output appears as follows. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -204,28 +202,28 @@ Output will be appears as follows. {% previewsample "page.domainurl/code-snippet/treegrid/getting-started-cs4" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. ## Handling errors -Error handling in Tree Grid identifies exceptions and notifies them through the [actionFailure](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actionfailure) event. When configuring the Tree Grid or enabling specific features through its API, mistakes can occur. The `actionFailure` event can be used to manage these errors. This event triggers when such mistakes happen. The `actionFailure` event handles various scenarios, including: +Error handling in TreeGrid identifies exceptions and notifies them through the [actionFailure](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actionfailure) event. When configuring the TreeGrid or enabling specific features through its API, configuration mistakes might occur. The `actionFailure` event triggers in such cases and can be used to manage these errors. The event covers scenarios such as: -* For CRUD operations, row drag and drop, and persisiting the selection, ensure the [isPrimaryKey](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#isprimarykey) property is mapped to a unique data column. Failure to do so will cause an error. -* [Paging](https://ej2.syncfusion.com/react/documentation/treegrid/paging) is not supported with [virtualization](https://ej2.syncfusion.com/react/documentation/treegrid/virtual-scroll). Enabling `paging` with `virtualization` will result in an error. -* To render the Tree Grid, map either the [dataSource](https://ej2.syncfusion.com/react/documentation/api/treegrid/#datasource) or [columns](https://ej2.syncfusion.com/react/documentation/api/treegrid/#columns) property. Failure to do so will result in an error. -* Freeze columns by mapping either [isFrozen](https://ej2.syncfusion.com/react/documentation/api/treegrid/treeGridColumn/#isfrozen) or [frozenColumns](https://ej2.syncfusion.com/react/documentation/api/treegrid#frozencolumns). Enabling both properties simultaneously will result in an error. -* The [detailTemplate](https://ej2.syncfusion.com/react/documentation/api/treegrid#detailtemplate) is not supported with `virtualization` and `stacked header`. Enabling them with these features will result in an error. -* The [frozenRows](https://ej2.syncfusion.com/react/documentation/api/treegrid#frozenrows) and `frozenColumns` are not supported with [rowtemplate](https://ej2.syncfusion.com/react/documentation/api/treegrid#rowtemplate), `detailTemplate`, and [cell editing](https://ej2.syncfusion.com/react/documentation/treegrid/editing/cell-editing). Enabling them with these features will result in an error. +* For CRUD operations, row drag and drop, and persisting selection, map the [isPrimaryKey](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#isprimarykey) property to a unique data column. Otherwise, an error occurs. +* [Paging](https://ej2.syncfusion.com/react/documentation/treegrid/paging) is not supported with [virtualization](https://ej2.syncfusion.com/react/documentation/treegrid/virtual-scroll). Enabling both results in an error. +* To render the TreeGrid, map either the [dataSource](https://ej2.syncfusion.com/react/documentation/api/treegrid/#datasource) or [columns](https://ej2.syncfusion.com/react/documentation/api/treegrid/#columns) property. Missing both results in an error. +* Freeze columns by mapping either [isFrozen](https://ej2.syncfusion.com/react/documentation/api/treegrid/treeGridColumn/#isfrozen) or [frozenColumns](https://ej2.syncfusion.com/react/documentation/api/treegrid/#frozencolumns). Enabling both simultaneously results in an error. +* The [detailTemplate](https://ej2.syncfusion.com/react/documentation/api/treegrid/#detailtemplate) is not supported with `virtualization` and `stacked header`. Enabling them together results in an error. +* The [frozenRows](https://ej2.syncfusion.com/react/documentation/api/treegrid/#frozenrows) and `frozenColumns` features are not supported with [rowtemplate](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowtemplate), `detailTemplate`, and [cell editing](https://ej2.syncfusion.com/react/documentation/treegrid/editing/cell-editing). Combining them results in an error. * In `stacked header`, the [freeze](https://ej2.syncfusion.com/react/documentation/api/treegrid/treeGridColumn/#freeze) direction is incompatible with [column reordering](https://ej2.syncfusion.com/react/documentation/treegrid/columns/column-reorder). -* [Selection](https://ej2.syncfusion.com/react/documentation/treegrid/selection/selection) functionality is not supported when using `rowTemplate`. Enabling both properties simultaneously will result in an error. -* Set the [treeColumnIndex](https://ej2.syncfusion.com/react/documentation/api/treegrid#treecolumnindex) value to display the tree structure. Make sure the value does not exceed the total column count, or it will result in an error. -* For `virtualization`, do not specify height and width in percentages. Using percentages will result in an error. -* When using the default filter ([filterbar](https://ej2.syncfusion.com/react/documentation/treegrid/filtering/filter-bar)) type, do not apply the other [filterType](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterType/) to columns within the same tree grid, as this will result in an error. -* In Tree Grid, avoid enabling [idMapping](https://ej2.syncfusion.com/react/documentation/api/treegrid#idmapping) and [childMapping](https://ej2.syncfusion.com/react/documentation/api/treegrid#childmapping) simultaneously. Enabling both properties at the same time will result in an error. -* The [showCheckbox](https://ej2.syncfusion.com/react/documentation/api/treegrid/treeGridColumn/#showcheckbox) column should only be defined in the tree column. Defining it elsewhere will result in an error. -* The [textAlign](https://ej2.syncfusion.com/react/documentation/api/treegrid/treeGridColumn/#textalign) right is not applicable for tree columns in the Tree Grid. Enabling right alignment for tree columns will result in an error. +* [Selection](https://ej2.syncfusion.com/react/documentation/treegrid/selection/selection) is not supported when using `rowTemplate`. Enabling both simultaneously results in an error. +* Set the [treeColumnIndex](https://ej2.syncfusion.com/react/documentation/api/treegrid/#treecolumnindex) value to display the tree structure. A value exceeding the total column count results in an error. +* For `virtualization`, do not specify height and width in percentages. Percentages result in an error. +* When using the default filter ([filterbar](https://ej2.syncfusion.com/react/documentation/treegrid/filtering/filter-bar)) type, do not apply other [filterType](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterType/) values to columns within the same tree grid; this results in an error. +* In TreeGrid, avoid enabling [idMapping](https://ej2.syncfusion.com/react/documentation/api/treegrid/#idmapping) and [childMapping](https://ej2.syncfusion.com/react/documentation/api/treegrid/#childmapping) simultaneously. Enabling both results in an error. +* The [showCheckbox](https://ej2.syncfusion.com/react/documentation/api/treegrid/treeGridColumn/#showcheckbox) column should be defined only in the tree column. Defining it elsewhere results in an error. +* The [textAlign](https://ej2.syncfusion.com/react/documentation/api/treegrid/treeGridColumn/#textalign) right value is not applicable for tree columns. Enabling right alignment for tree columns results in an error. -The following code example shows how to use the [actionFailure](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actionfailure) event in the Tree Grid control to display an exception when `isPrimaryKey`are not configured properly in the Tree Grid. +The following example shows how to use the [actionFailure](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actionfailure) event in the TreeGrid to display an exception when `isPrimaryKey` is not configured properly. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -246,10 +244,10 @@ The following code example shows how to use the [actionFailure](https://ej2.sync ## See Also -* [Getting Started with Syncfusion® JavaScript documentation](https://ej2.syncfusion.com/documentation/treegrid/getting-started) -* [Getting Started with Syncfusion® JavaScript (ES5) documentation](https://ej2.syncfusion.com/javascript/documentation/treegrid/getting-started) -* [Getting Started with Syncfusion® Angular documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/getting-started) -* [Getting Started with Syncfusion® Vue documentation](https://ej2.syncfusion.com/vue/documentation/treegrid/getting-started) -* [Getting Started with Syncfusion® ASP.NET Core documentation](https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/getting-started-core) -* [Getting Started with Syncfusion® ASP.NET MVC documentation](https://ej2.syncfusion.com/aspnetmvc/documentation/tree-grid/getting-started-mvc) -* [Getting Started with Syncfusion® Blazor documentation](https://blazor.syncfusion.com/documentation/treegrid/getting-started-webapp) +* [Getting Started with Syncfusion JavaScript documentation](https://ej2.syncfusion.com/documentation/treegrid/getting-started) +* [Getting Started with Syncfusion JavaScript (ES5) documentation](https://ej2.syncfusion.com/javascript/documentation/treegrid/getting-started) +* [Getting Started with Syncfusion Angular documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/getting-started) +* [Getting Started with Syncfusion Vue documentation](https://ej2.syncfusion.com/vue/documentation/treegrid/getting-started) +* [Getting Started with Syncfusion ASP.NET Core documentation](https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/getting-started-core) +* [Getting Started with Syncfusion ASP.NET MVC documentation](https://ej2.syncfusion.com/aspnetmvc/documentation/tree-grid/getting-started-mvc) +* [Getting Started with Syncfusion Blazor documentation](https://blazor.syncfusion.com/documentation/treegrid/getting-started-webapp) \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/add-params-for-filtering.md b/ej2-react/treegrid/how-to/add-params-for-filtering.md index 558ec6d9d..d6edd644f 100644 --- a/ej2-react/treegrid/how-to/add-params-for-filtering.md +++ b/ej2-react/treegrid/how-to/add-params-for-filtering.md @@ -1,17 +1,18 @@ --- layout: post -title: Add params for filtering in React Treegrid component | Syncfusion -description: Learn here all about Add params for filtering in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Add params for filtering in React TreeGrid | Syncfusion +description: Learn here all about Add params for filtering in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Add params for filtering platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Add params for filtering in React Treegrid component +# Add params for filtering in React TreeGrid -You can customize the default settings of the components which are used in Menu filter by using params of filter property in column definition. -In the below sample, TaskID and Duration Columns are numeric columns, while open the filter dialog then you can see that NumericTextBox with spin button is displayed to change/set the filter value. Now using the params option we hide the spin button in NumericTextBox for TaskID Column. +Customize the default settings of the components used in the Menu filter by configuring the `params` of the column’s `filter` property. + +In the following example, TaskID and Duration are numeric columns. When the filter dialog opens, a NumericTextBox displays with a spin button to adjust the filter value. Using the `params` option, the spin button is hidden in the NumericTextBox for the TaskID column. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -30,4 +31,4 @@ In the below sample, TaskID and Duration Columns are numeric columns, while open {% previewsample "page.domainurl/code-snippet/treegrid/refresh-cs1" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/cascading-drop-down-list-with-treegrid-editing.md b/ej2-react/treegrid/how-to/cascading-drop-down-list-with-treegrid-editing.md index 82f0fabff..294cf73af 100644 --- a/ej2-react/treegrid/how-to/cascading-drop-down-list-with-treegrid-editing.md +++ b/ej2-react/treegrid/how-to/cascading-drop-down-list-with-treegrid-editing.md @@ -1,18 +1,18 @@ --- layout: post -title: Cascading drop down list with treegrid editing in React Treegrid component | Syncfusion -description: Learn here all about Cascading drop down list with treegrid editing in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Cascading drop down list with treegrid editing +title: Cascading Dropdowns with TreeGrid in React | Syncfusion +description: Learn here all about Cascading drop down list with TreeGrid editing in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. +control: Cascading drop down list with TreeGrid editing platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Cascading drop down list with treegrid editing in React Treegrid component +# Cascading drop down list with TreeGrid editing in React TreeGrid -You can achieve the Cascading DropDownList with treegrid Editing by using the Cell Edit Template feature. +Implement a cascading DropDownList in TreeGrid editing using the cell edit template feature. -In the below demo, Cascading DropDownList rendered for **Priority** and **Duration** column. +In the following example, cascading DropDownList editors are rendered for the **Priority** and **Duration** columns. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -31,4 +31,4 @@ In the below demo, Cascading DropDownList rendered for **Priority** and **Durati {% previewsample "page.domainurl/code-snippet/treegrid/cascade-drop-cs1" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/custom-tool-tip-for-columns.md b/ej2-react/treegrid/how-to/custom-tool-tip-for-columns.md index cb95a819b..52d41294b 100644 --- a/ej2-react/treegrid/how-to/custom-tool-tip-for-columns.md +++ b/ej2-react/treegrid/how-to/custom-tool-tip-for-columns.md @@ -1,18 +1,18 @@ --- layout: post -title: Custom tool tip for columns in React Treegrid component | Syncfusion -description: Learn here all about Custom tool tip for columns in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Custom tool tip for columns in React TreeGrid | Syncfusion +description: Learn here all about Custom tool tip for columns in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Custom tool tip for columns platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Custom tool tip for columns in React Treegrid component +# Custom tool tip for columns in React TreeGrid -You can achieve the custom tooltip([`EJ2 Tooltip`](https://ej2.syncfusion.com/react/documentation/tooltip/getting-started)) for TreeGrid by using the [`queryCellInfo`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#querycellinfo) event. +Implement a custom tooltip [EJ2 Tooltip](https://ej2.syncfusion.com/react/documentation/tooltip/getting-started) for the TreeGrid using the [queryCellInfo](https://ej2.syncfusion.com/react/documentation/api/treegrid/#querycellinfo) event. -Render the ToolTip component for the treegrid cells by using the following code in the [`queryCellInfo`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#querycellinfo) event. +Render the Tooltip component for TreeGrid cells by using the following code in the [queryCellInfo](https://ej2.syncfusion.com/react/documentation/api/treegrid/#querycellinfo) event. ```ts @@ -42,4 +42,4 @@ Render the ToolTip component for the treegrid cells by using the following code {% previewsample "page.domainurl/code-snippet/treegrid/custom-tooltip-cs1" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/customize-column-styles.md b/ej2-react/treegrid/how-to/customize-column-styles.md index 8f1b129d7..d871335b2 100644 --- a/ej2-react/treegrid/how-to/customize-column-styles.md +++ b/ej2-react/treegrid/how-to/customize-column-styles.md @@ -1,22 +1,22 @@ --- layout: post -title: Customize column styles in React Treegrid component | Syncfusion -description: Learn here all about Customize column styles in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Customize column styles in React TreeGrid | Syncfusion +description: Learn here all about Customize column styles in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Customize column styles platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Customize column styles in React Treegrid component +# Customize column styles in React TreeGrid -You can customise the appearance of header and content of the particular column using the [`customAttributes`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#customattributes) property. +Customize the appearance of a specific column’s header and content using the [customAttributes](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#customattributes) property. -To customize the treegrid column, follow the given steps: +To customize a TreeGrid column, follow these steps: **Step 1**: -Create a css class with custom style to override the default style for rowcell and headercell. +Create a CSS class with custom styles to override the default styles for row cells and header cells. ```css @@ -38,7 +38,7 @@ Create a css class with custom style to override the default style for rowcell a **Step 2**: -Add the custom css class to particular column by using [`customAttributes`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#customattributes) property. +Apply the custom CSS class to the target column using the [customAttributes](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#customattributes) property. ```ts @@ -62,4 +62,4 @@ Add the custom css class to particular column by using [`customAttributes`](http {% previewsample "page.domainurl/code-snippet/treegrid/custom-column-cs1" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/customize-pager-drop-down.md b/ej2-react/treegrid/how-to/customize-pager-drop-down.md index 1aa3205d2..b715e35d5 100644 --- a/ej2-react/treegrid/how-to/customize-pager-drop-down.md +++ b/ej2-react/treegrid/how-to/customize-pager-drop-down.md @@ -1,16 +1,16 @@ --- layout: post -title: Customize pager drop down in React Treegrid component | Syncfusion -description: Learn here all about Customize pager drop down in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Customize pager drop down in React TreeGrid | Syncfusion +description: Learn here all about Customize pager drop down in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Customize pager drop down platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Customize pager drop down in React Treegrid component +# Customize pager drop down in React TreeGrid component -To customize default values of pager dropdown, you need to define [`pageSizes`](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettings/#pagesizes) as array of strings. +To customize the default pager dropdown values, define [pageSizes](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettings/#pagesizes) as an array of strings. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -29,4 +29,4 @@ To customize default values of pager dropdown, you need to define [`pageSizes`]( {% previewsample "page.domainurl/code-snippet/treegrid/paging-cs1" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/customize-the-empty-record-template.md b/ej2-react/treegrid/how-to/customize-the-empty-record-template.md index 2f82e79e9..f8ebf6b29 100644 --- a/ej2-react/treegrid/how-to/customize-the-empty-record-template.md +++ b/ej2-react/treegrid/how-to/customize-the-empty-record-template.md @@ -1,6 +1,6 @@ --- layout: post -title: Customize the Empty Record Template in React Treegrid component | Syncfusion +title: Customize the Empty Record Template in React TreeGrid | Syncfusion description: Learn here all about Customize the Empty Record Template in Syncfusion React TreeGrid of Syncfusion Essential JS 2 and more. control: Customize the Empty Record Template platform: ej2-react @@ -9,12 +9,10 @@ domainurl: ##DomainURL## --- # Customize the empty record template in React TreeGrid -The empty record template feature in the TreeGrid allows you to use custom content such as images, text, or other components, when the TreeGrid doesn't contain any records to display. This feature replaces the default message of **No records to display** typically shown in the TreeGrid. -To activate this feature, set the `emptyRecordTemplate` property of the TreeGrid. The `emptyRecordTemplate` property expects the HTML element or a function that returns the HTML element. -In the following example, an image and text have been rendered as a template to indicate that the TreeGrid has no data to display. - -In the below example, we have changed the dialog's header text for editing and adding records. +The empty record template feature in the TreeGrid allows custom content such as images, text, or other components when the TreeGrid does not contain any records to display. This feature replaces the default message of **No records to display** typically shown in the TreeGrid. +To activate this feature, set the `emptyRecordTemplate` property of the TreeGrid. The `emptyRecordTemplate` property accepts an HTML element or a function that returns an HTML element. +In the following example, an image and text are rendered as a template to indicate that the TreeGrid has no data to display. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -24,4 +22,4 @@ In the below example, we have changed the dialog's header text for editing and a {% include code-snippet/treegrid/emptyrecordtemplate-cs1/app/App.tsx %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/treegrid/emptyrecordtemplate-cs1" %} +{% previewsample "page.domainurl/code-snippet/treegrid/emptyrecordtemplate-cs1" %} \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/enable-disable-treegrid-and-its-actions.md b/ej2-react/treegrid/how-to/enable-disable-treegrid-and-its-actions.md index 1b60124ae..bf362039c 100644 --- a/ej2-react/treegrid/how-to/enable-disable-treegrid-and-its-actions.md +++ b/ej2-react/treegrid/how-to/enable-disable-treegrid-and-its-actions.md @@ -1,22 +1,22 @@ --- layout: post -title: Enable disable treegrid and its actions in React Treegrid component | Syncfusion -description: Learn here all about Enable disable treegrid and its actions in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Enable disable treegrid and its actions in React TreeGrid | Syncfusion +description: Learn here all about Enable disable treegrid and its actions in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Enable disable treegrid and its actions platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Enable disable treegrid and its actions in React Treegrid component +# Enable disable treegrid and its actions in React TreeGrid -You can enable/disable the TreeGrid and its actions by applying/removing corresponding CSS styles. +Enable or disable the TreeGrid and its actions by applying or removing corresponding CSS styles. -To enable/disable the treegrid and its actions, follow the given steps: +To enable or disable the TreeGrid and its actions, follow these steps: **Step 1**: -Create CSS class with custom style to override the default style of TreeGrid. +Create a CSS class with custom styles to override the default style of the TreeGrid. ```css .disabletreegrid { @@ -30,7 +30,7 @@ Create CSS class with custom style to override the default style of TreeGrid. **Step 2**: -Add/Remove the CSS class to the TreeGrid in the click event handler of Button. +Add or remove the CSS class from the TreeGrid in the Button click event handler. ```ts @@ -47,7 +47,7 @@ const btnClick = (): void => { ``` -In the below demo, the button click will enable/disable the TreeGrid and its actions. +In the following demo, clicking the button enables or disables the TreeGrid and its actions. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -66,4 +66,4 @@ In the below demo, the button click will enable/disable the TreeGrid and its act {% previewsample "page.domainurl/code-snippet/treegrid/enable-disable-actions-cs1" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. diff --git a/ej2-react/treegrid/how-to/enable-editing-in-single-click.md b/ej2-react/treegrid/how-to/enable-editing-in-single-click.md index b7f002156..4e13ebdfb 100644 --- a/ej2-react/treegrid/how-to/enable-editing-in-single-click.md +++ b/ej2-react/treegrid/how-to/enable-editing-in-single-click.md @@ -1,20 +1,20 @@ --- layout: post -title: Enable editing in single click in React Treegrid component | Syncfusion -description: Learn here all about Enable editing in single click in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Enable editing in single click in React TreeGrid | Syncfusion +description: Learn here all about Enable editing in single click in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Enable editing in single click platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Enable editing in single click in React Treegrid component +# Enable editing in single click in React TreeGrid ## Row Editing -You can make a row editable on a single click with **Row** mode of editing in TreeGrid, by using the [`startEdit`](https://ej2.syncfusion.com/react/documentation/api/treegrid#startedit) and [`endEdit`](https://ej2.syncfusion.com/react/documentation/api/treegrid#endedit) methods. +Enable single-click row editing in the TreeGrid by using the [startEdit](https://ej2.syncfusion.com/react/documentation/api/treegrid/#startedit) and [endEdit](https://ej2.syncfusion.com/react/documentation/api/treegrid/#endedit) methods. -Bind the **mousedown** event for TreeGrid and in the event handler call the [`startEdit`](https://ej2.syncfusion.com/react/documentation/api/treegrid#startedit) and [`endEdit`](https://ej2.syncfusion.com/react/documentation/api/treegrid#endedit), based on the clicked target element. +Bind the **mousedown** event for the TreeGrid and, in the event handler, call [startEdit](https://ej2.syncfusion.com/react/documentation/api/treegrid/#startedit) or [endEdit](https://ej2.syncfusion.com/react/documentation/api/treegrid/#endedit) based on the clicked target element. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -35,9 +35,9 @@ Bind the **mousedown** event for TreeGrid and in the event handler call the [`st ## Cell Editing -You can make a cell editable on a single click with **Cell** mode of editing in TreeGrid, by using the [`editCell`](https://ej2.syncfusion.com/react/documentation/api/treegrid#editcell) method. +Enable single-click cell editing in the TreeGrid by using the [editCell](https://ej2.syncfusion.com/react/documentation/api/treegrid/#editcell) method. -Bind the **mousedown** event for TreeGrid and in the event handler call the [`editCell`](https://ej2.syncfusion.com/react/documentation/api/treegrid#editcell) method, based on the clicked target element. +Bind the **mousedown** event for the TreeGrid and, in the event handler, call the [editCell](https://ej2.syncfusion.com/react/documentation/api/treegrid/#editcell) method based on the clicked target element. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -56,4 +56,4 @@ Bind the **mousedown** event for TreeGrid and in the event handler call the [`ed {% previewsample "page.domainurl/code-snippet/treegrid/refresh-cs3" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/exporting-filtered-data.md b/ej2-react/treegrid/how-to/exporting-filtered-data.md index 2bcf097f4..26c5e2061 100644 --- a/ej2-react/treegrid/how-to/exporting-filtered-data.md +++ b/ej2-react/treegrid/how-to/exporting-filtered-data.md @@ -1,18 +1,18 @@ --- layout: post -title: Exporting filtered data in React Treegrid component | Syncfusion -description: Learn here all about Exporting filtered data in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Exporting filtered data in React TreeGrid | Syncfusion +description: Learn here all about Exporting filtered data in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Exporting filtered data platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Exporting filtered data in React Treegrid component +# Exporting filtered data in React TreeGrid -You can export the filtered data by defining the resulted data in [`PdfExportProperties.dataSource`](https://ej2.syncfusion.com/react/documentation/api/grid/pdfExportProperties/#datasource) before export. +Export filtered data by defining the resulting dataset in [PdfExportProperties.dataSource](https://ej2.syncfusion.com/react/documentation/api/grid/pdfExportProperties/#datasource) before export. -In the below Pdf exporting demo, We have gotten the filtered data from the filteredResult of TreeGrid filterModule and then defines the resulted data in [`PdfExportProperties.dataSource`](https://ej2.syncfusion.com/react/documentation/api/grid/pdfExportProperties/#datasource) and pass it to [`pdfExport`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#pdfexport) method. +In the following PDF export demo, filtered data is obtained from the TreeGrid `filterModule.filteredResult`, assigned to [PdfExportProperties.dataSource](https://ej2.syncfusion.com/react/documentation/api/grid/pdfExportProperties/#datasource), and then passed to the [pdfExport](https://ej2.syncfusion.com/react/documentation/api/treegrid/#pdfexport) method. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -31,4 +31,4 @@ In the below Pdf exporting demo, We have gotten the filtered data from the filte {% previewsample "page.domainurl/code-snippet/treegrid/refresh-cs4" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/get-row-cell-index.md b/ej2-react/treegrid/how-to/get-row-cell-index.md index 6af649627..b568bd310 100644 --- a/ej2-react/treegrid/how-to/get-row-cell-index.md +++ b/ej2-react/treegrid/how-to/get-row-cell-index.md @@ -1,16 +1,16 @@ --- layout: post -title: Get row cell index in React Treegrid component | Syncfusion -description: Learn here all about Get row cell index in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Get row cell index in React TreeGrid | Syncfusion +description: Learn here all about Get row cell index in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Get row cell index platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Get row cell index in React Treegrid component +# Get row cell index in React TreeGrid -You can get the specific row and cell index of the treegrid by using [`rowSelected`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowselected) event of the treegrid. Here, we can get the row and cell index by using *aria-rowindex* (get row Index from *tr* element) and *aria-colindex* (column index from *td* element) attribute. +Obtain the specific row and cell index in the TreeGrid by using the [rowSelected](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowselected) event. Retrieve the row index from the *aria-rowindex* attribute of the table row (tr) element and the column index from the **aria-colindex** attribute of the table cell (td) element. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -29,4 +29,4 @@ You can get the specific row and cell index of the treegrid by using [`rowSelect {% previewsample "page.domainurl/code-snippet/treegrid/refresh-cs6" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list.md b/ej2-react/treegrid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list.md index e172f1aca..a329acb27 100644 --- a/ej2-react/treegrid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list.md +++ b/ej2-react/treegrid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list.md @@ -1,6 +1,6 @@ --- layout: post -title: Provide custom data source and enabling filtering to drop down list in React Treegrid component | Syncfusion +title: Custom Data and Filtering in React TreeGrid | Syncfusion description: Learn here all about Provide custom data source and enabling filtering to drop down list in Syncfusion React TreeGrid component and more. control: Provide custom data source and enabling filtering to drop down list platform: ej2-react @@ -8,11 +8,11 @@ documentation: ug domainurl: ##DomainURL## --- -# Provide custom data source and enabling filtering to drop down list in React Treegrid component +# Provide custom datasource and filter with React TreeGrid Dropdowns -You can provide data source to the DropDownList by using the **params** of [`columns.edit`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#edit) property. +Provide a data source to the DropDownList by using the **params** of the [columns.edit](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#edit) property. -While setting new data source using edit params, you must specify a new **query** property for the DropDownList as follows, +When setting a new data source using edit params, specify a new **query** property for the DropDownList as shown below. ```ts const priority : IEditCell = { @@ -26,9 +26,9 @@ While setting new data source using edit params, you must specify a new **query* }; ``` -You can also enable filtering for the DropDownList by passing the [`allowFiltering`](https://ej2.syncfusion.com/react/documentation/api/drop-down-list/#allowfiltering) as **true** to the edit params. +Enable filtering for the DropDownList by passing [allowFiltering](https://ej2.syncfusion.com/react/documentation/api/drop-down-list/#allowfiltering) as **true** in the edit params. -In the below demo, DropDownList is rendered with custom [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/drop-down-list/#datasource) for the *Priority* column and enabled filtering to search DropDownList items. +In the following demo, the DropDownList is rendered with a custom [dataSource](https://ej2.syncfusion.com/react/documentation/api/drop-down-list/#datasource) for the **Priority** column, and filtering is enabled to search DropDownList items. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -47,4 +47,4 @@ In the below demo, DropDownList is rendered with custom [`dataSource`](https://e {% previewsample "page.domainurl/code-snippet/treegrid/cascade-drop-cs2" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React Tree Grid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/render-react-component-in-column.md b/ej2-react/treegrid/how-to/render-react-component-in-column.md index dd9c899d5..77c9a364a 100644 --- a/ej2-react/treegrid/how-to/render-react-component-in-column.md +++ b/ej2-react/treegrid/how-to/render-react-component-in-column.md @@ -1,18 +1,18 @@ --- layout: post -title: Render react component in column in React Treegrid component | Syncfusion -description: Learn here all about Render react component in column in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Render react component in column in React TreeGrid | Syncfusion +description: Learn here all about Render react component in column in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Render react component in column platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Render react component in column in React Treegrid component +# Render react component in column in React TreeGrid -You can use [`queryCellInfo`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#querycellinfo) event to render the React component inside TreeGrid cells. +Render a React component inside TreeGrid cells by using the [queryCellInfo](https://ej2.syncfusion.com/react/documentation/api/treegrid/#querycellinfo) event. -In the following sample, the DropDownList is rendered in the **Priority** column. +In the following sample, a DropDownList is rendered in the **Priority** column. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -31,4 +31,4 @@ In the following sample, the DropDownList is rendered in the **Priority** column {% previewsample "page.domainurl/code-snippet/treegrid/dropdown-component-cs1" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React Tree Grid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/restrict-decimal-points-while-treegrid-editing.md b/ej2-react/treegrid/how-to/restrict-decimal-points-while-treegrid-editing.md index 32bca7be7..c397e5e3c 100644 --- a/ej2-react/treegrid/how-to/restrict-decimal-points-while-treegrid-editing.md +++ b/ej2-react/treegrid/how-to/restrict-decimal-points-while-treegrid-editing.md @@ -1,18 +1,18 @@ --- layout: post -title: Restrict decimal points while treegrid editing in React Treegrid component | Syncfusion -description: Learn here all about Restrict decimal points while treegrid editing in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Restrict Decimal Points in React TreeGrid Editing | Syncfusion +description: Learn here all about Restrict decimal points while treegrid editing in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Restrict decimal points while treegrid editing platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Restrict decimal points while treegrid editing in React Treegrid component +# Restrict decimal points while treegrid editing in React TreeGrid -By default, the number of decimal places will be restricted to two in the NumericTextBox while editing the numeric column. We can restrict to type the decimal points in a NumericTextBox by using the **validateDecimalOnType** and **decimals** properties of NumericTextBox. +By default, NumericTextBox restricts input to two decimal places when editing a numeric column. Prevent entering decimal points in a NumericTextBox by using the **validateDecimalOnType** and **decimals** properties of NumericTextBox. -In the below demo, while editing the row we have restricted to type the decimal point value in the NumericTextBox of **Progress** column. +In the following demo, during row editing, the NumericTextBox in the **Progress** column prevents entering decimal values. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -31,4 +31,4 @@ In the below demo, while editing the row we have restricted to type the decimal {% previewsample "page.domainurl/code-snippet/treegrid/customizedialog-cs4" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React Tree Grid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/row-cell-customization.md b/ej2-react/treegrid/how-to/row-cell-customization.md index f23cf2ec0..9231949bc 100644 --- a/ej2-react/treegrid/how-to/row-cell-customization.md +++ b/ej2-react/treegrid/how-to/row-cell-customization.md @@ -1,18 +1,18 @@ --- layout: post -title: Row cell customization in React Treegrid component | Syncfusion -description: Learn here all about Row cell customization in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Row cell customization in React TreeGrid | Syncfusion +description: Learn here all about Row cell customization in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Row cell customization platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Row cell customization in React Treegrid component +# Row cell customization in React TreeGrid -In TreeGrid we can customize the row and cell using [`queryCellInfo`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#querycellinfo) and [`rowDataBound`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdatabound) events of treegrid. +Customize rows and cells by using the TreeGrid events [queryCellInfo](https://ej2.syncfusion.com/react/documentation/api/treegrid/#querycellinfo) and [rowDataBound](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdatabound). -In the below demo, we customize and show the command buttons only for the parent rows using [`queryCellInfo`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#querycellinfo) and [`rowDataBound`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdatabound) events of treegrid. +In the following demo, command buttons are customized to appear only for parent rows using the [queryCellInfo](https://ej2.syncfusion.com/react/documentation/api/treegrid/#querycellinfo) and [rowDataBound](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdatabound) events. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -31,4 +31,4 @@ In the below demo, we customize and show the command buttons only for the parent {% previewsample "page.domainurl/code-snippet/treegrid/refresh-cs9" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React Tree Grid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/select-treegrid-rows-based-on-certain-condition.md b/ej2-react/treegrid/how-to/select-treegrid-rows-based-on-certain-condition.md index c6858a8ac..940fafad3 100644 --- a/ej2-react/treegrid/how-to/select-treegrid-rows-based-on-certain-condition.md +++ b/ej2-react/treegrid/how-to/select-treegrid-rows-based-on-certain-condition.md @@ -1,18 +1,18 @@ --- layout: post -title: Select treegrid rows based on certain condition in React Treegrid component | Syncfusion -description: Learn here all about Select treegrid rows based on certain condition in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Select treegrid rows based on certain condition +title: Condition-Based Row Selection in React TreeGrid | Syncfusion +description: Learn here all about Select TreeGrid rows based on certain condition in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. +control: Select TreeGrid rows based on certain condition platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Select treegrid rows based on certain condition in React Treegrid component +# Select TreeGrid rows based on certain condition in React TreeGrid -You can select the specific row in the treegrid based on a certain condition by using the [`selectRows`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#selectrows) method in the [`dataBound`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#databound) event of TreeGrid. +Select specific rows in the TreeGrid based on a condition by using the [selectRows](https://ej2.syncfusion.com/react/documentation/api/treegrid/#selectrows) method within the [dataBound](https://ej2.syncfusion.com/react/documentation/api/treegrid/#databound) event. -In the below demo, we have selected the grid rows only when *Duration* column value greater than *4*. +In the following demo, rows are selected when the value in the **Duration** column is greater than 4. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -31,4 +31,4 @@ In the below demo, we have selected the grid rows only when *Duration* column va {% previewsample "page.domainurl/code-snippet/treegrid/refresh-cs10" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React Tree Grid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/how-to/show-spinner-while-exporting.md b/ej2-react/treegrid/how-to/show-spinner-while-exporting.md index 218f0742a..732470b08 100644 --- a/ej2-react/treegrid/how-to/show-spinner-while-exporting.md +++ b/ej2-react/treegrid/how-to/show-spinner-while-exporting.md @@ -1,22 +1,22 @@ --- layout: post -title: Show spinner while exporting in React Treegrid component | Syncfusion -description: Learn here all about Show spinner while exporting in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Show spinner while exporting in React TreeGrid | Syncfusion +description: Learn here all about Show spinner while exporting in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Show spinner while exporting platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Show spinner while exporting in React Treegrid component +# Show spinner while exporting in React TreeGrid -You can show/ hide spinner component while exporting the treegrid using [`showSpinner`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#showspinner)/ [`hideSpinner`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#hidespinner) methods. You can use [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) event to show spinner before exporting and hide a spinner in the [`pdfExportComplete`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#pdfexportcomplete) or [`excelExportComplete`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#excelexportcomplete) event after the exporting. +Show or hide the spinner during export operations by using the [showSpinner](https://ej2.syncfusion.com/react/documentation/api/treegrid/#showspinner) and [hideSpinner](https://ej2.syncfusion.com/react/documentation/api/treegrid/#hidespinner) methods. Display the spinner in the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) event before exporting, and hide it in the [pdfExportComplete](https://ej2.syncfusion.com/react/documentation/api/treegrid/#pdfexportcomplete) or [excelExportComplete](https://ej2.syncfusion.com/react/documentation/api/treegrid/#excelexportcomplete) event after exporting. -In the [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/grid/#toolbarclick) event, based on the parameter **args.item.text** as **PDF Export** or **Excel Export** we can call the [`showSpinner`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#showspinner) method from grid instance. +In the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/grid/#toolbarclick) event, when **args.item.text** is **PDF Export** or **Excel Export**, call [showSpinner](https://ej2.syncfusion.com/react/documentation/api/treegrid/#showspinner) from the TreeGrid instance. -In the [`pdfExportComplete`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#pdfexportcomplete) or [`excelExportComplete`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#excelexportcomplete) event, We can call the [`hideSpinner`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#hidespinner) method. +In the [pdfExportComplete](https://ej2.syncfusion.com/react/documentation/api/treegrid/#pdfexportcomplete) or [excelExportComplete](https://ej2.syncfusion.com/react/documentation/api/treegrid/#excelexportcomplete) event, call [hideSpinner](https://ej2.syncfusion.com/react/documentation/api/treegrid/#hidespinner). -In the below demo, we have rendered the default spinner component when exporting the treegrid. +The following demo renders the default spinner during TreeGrid export. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -35,4 +35,4 @@ In the below demo, we have rendered the default spinner component when exporting {% previewsample "page.domainurl/code-snippet/treegrid/refresh-cs11" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React Tree Grid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/infinite-scroll.md b/ej2-react/treegrid/infinite-scroll.md index b13ff0ac4..7c18f2015 100644 --- a/ej2-react/treegrid/infinite-scroll.md +++ b/ej2-react/treegrid/infinite-scroll.md @@ -1,20 +1,18 @@ --- layout: post -title: Infinite scroll in React Treegrid component | Syncfusion -description: Learn here all about Infinite scroll in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Infinite scroll +title: Infinite scroll in React TreeGrid | Syncfusion +description: Learn here all about Infinite scroll in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. +control: Infinite scroll platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Infinite scroll in React Treegrid component +# Infinite scroll in React TreeGrid -Infinite scrolling is used to load a huge amount of data without degrading the Tree Grid performance. This feature works like the lazy loading concept, which means the buffer data is loaded only when the scrollbar reaches the end of the scroller. - -To enable Infinite scrolling, set `enableInfiniteScrolling` property as true and inject **InfiniteScroll** module in Tree Grid. - -> * In this feature, Tree Grid will not make a new data request when you visit the same page again. +Infinite scrolling loads large data sets without degrading TreeGrid performance. This feature uses lazy loading, buffer data is fetched only when the scrollbar reaches the end of the scroller. +To enable Infinite scrolling, set the `enableInfiniteScrolling` property to true and inject the **InfiniteScroll** module in the TreeGrid. +> * In this feature, TreeGrid does not make a new data request when the same page is revisited. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -24,14 +22,12 @@ To enable Infinite scrolling, set `enableInfiniteScrolling` property as true and {% include code-snippet/treegrid/infinitescroll-cs1/app/App.tsx %} {% endhighlight %} {% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/infinitescroll-cs1" %} +{% previewsample "page.domainurl/code-snippet/treegrid/infinitescroll-cs1" %} ## InitialBlocks -You can define the initial loading pages count by using `infiniteScrollSettings.initialBlocks` property. By default, this feature loads three pages in initial rendering. - -In the below demo, we have changed this property value to load five page records instead of three. +Define the number of pages loaded initially using the `infiniteScrollSettings.initialBlocks` property. By default, three pages load during initial rendering. +In the demo below, this property is configured to load five pages instead of three. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -46,9 +42,8 @@ In the below demo, we have changed this property value to load five page records ## Cache Mode -Cache is used to store the loaded rows object in the Tree Grid instance which can be reused for creating the row elements whenever you scroll to already visited page. Also, this mode maintains row elements based on the `infiniteScrollSettings.maxBlocks` count value, once this limit exceeds then it will remove row elements from DOM for new rows. - -To enable the cache mode in Infinite scrolling, set `infiniteScrollSettings.enableCache` property as true. +Cache mode stores loaded row objects in the TreeGrid instance and reuses them to create row elements when scrolling back to previously visited pages. This mode maintains row elements based on the `infiniteScrollSettings.maxBlocks` value; after the limit is exceeded, older row elements are removed from the DOM to accommodate new rows. +To enable cache mode in Infinite scrolling, set the `infiniteScrollSettings.enableCache` property to true. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -63,12 +58,12 @@ To enable the cache mode in Infinite scrolling, set `infiniteScrollSettings.enab ## Limitations for Infinite Scrolling -* Due to the element height limitation in browsers, the maximum number of records loaded by the tree grid is limited due to the browser capability. -* Initial loading rows total height must be greater than the viewport height. -* Cell selection will not be persisted in cache mode. -* Infinite scrolling is not compatible with batch editing, cell editing, detail template. -* The aggregated information and total group items are displayed based on the current view items. To get these information regardless of the view items, refer to the -* Programmatic selection using the [`selectRows`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#selectrows) and [`selectRow`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#selectrow) method is not supported in infinite scrolling. -* Infinite scrolling does not support rendering records in a collapsed state. All records must be fully expanded at initial rendering for proper functionality. +* Due to browser element height limitations, the maximum number of records loaded by the TreeGrid is constrained by browser capabilities. +* The total height of initially loaded rows must exceed the viewport height. +* Cell selection is not persisted in cache mode. +* Infinite scrolling is not compatible with batch editing, cell editing, and detail template. +* Aggregates and total group items reflect only the current view items. To compute across all items regardless of view, refer to the corresponding aggregate documentation. +* Programmatic selection using the [selectRows](https://ej2.syncfusion.com/react/documentation/api/treegrid/#selectrows) and [selectRow](https://ej2.syncfusion.com/react/documentation/api/treegrid/#selectrow) methods is not supported with Infinite scrolling. +* Infinite scrolling does not support rendering records in a collapsed state. All records must be fully expanded at initial rendering. -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for feature highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/loading-animation.md b/ej2-react/treegrid/loading-animation.md index 81e4f383a..a3c3a9dcf 100644 --- a/ej2-react/treegrid/loading-animation.md +++ b/ej2-react/treegrid/loading-animation.md @@ -1,20 +1,20 @@ --- layout: post -title: Loading animation in React Treegrid component | Syncfusion -description: Learn here all about Loading animation in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Loading animation +title: Loading animation in React TreeGrid | Syncfusion +description: Learn here all about Loading animation in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. +control: Loading animation platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Loading animation in React Treegrid component +# Loading animation in React TreeGrid -The Tree Grid displays a loading indicator while the data is being fetched and bound to the tree grid during initial rendering, refreshing, and after performing any tree grid actions like sorting, filtering, and more. +TreeGrid displays a loading indicator while data is fetched and bound during initial rendering, refresh operations, and after actions such as sorting or filtering. -The tree grid supports two indicator types, which can be enabled by setting the `loadingIndicator.indicatorType` property to Spinner or Shimmer. The default value of the indicator type is Spinner. +Two indicator types are supported and configured with the `loadingIndicator.indicatorType` property: `Spinner` or `Shimmer`. The default is `Spinner`. -In the following sample, the Shimmer indicator is displayed while the tree grid is loading and refreshing when using the remote data. +In the following sample, the `Shimmer` indicator is shown while the TreeGrid loads and refreshes with remote data. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -24,5 +24,4 @@ In the following sample, the Shimmer indicator is displayed while the tree grid {% include code-snippet/treegrid/indicator-cs1/app/App.tsx %} {% endhighlight %} {% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/indicator-cs1" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/treegrid/indicator-cs1" %} \ No newline at end of file diff --git a/ej2-react/treegrid/module.md b/ej2-react/treegrid/module.md index 3af795c99..822011199 100644 --- a/ej2-react/treegrid/module.md +++ b/ej2-react/treegrid/module.md @@ -1,6 +1,6 @@ --- layout: post -title: Module in React Treegrid component | Syncfusion +title: Module in React Treegrid | Syncfusion description: Learn here all about Module in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. control: Module platform: ej2-react @@ -8,28 +8,27 @@ documentation: ug domainurl: ##DomainURL## --- -# Module in React Treegrid component +# Module in React Treegrid -The following modules should be injected to extend treegrid's functionality. +The following modules should be injected to extend TreeGrid functionality. | Module | Description | |------|-------------| -| [`PageService`](../treegrid/paging)| Inject this module to use paging feature.| -| [`SortService`](../treegrid/sorting)| Inject this module to use sorting feature.| -| [`FilterService`](../treegrid/filtering/filtering)| Inject this module to use filtering feature.| -| [`EditService`](../treegrid/editing/edit)| Inject this module to use editing feature.| -| [`AggregateService`](../treegrid/aggregates/aggregates)| Inject this module to use aggregate feature.| -| [`ColumnMenuService`](../treegrid/columns/columns#column-menu)| Inject this module to use column menu feature.| -| [`CommandColumnService`](../../treegrid/edit/#command-column)| Inject this module to use command column feature.| -| [`ContextMenuService`](../treegrid/context-menu)| Inject this module to use context menu feature. -| [`ResizeService`](../treegrid/columns/columns#column-resizing)| Inject this module to use resize feature.| -| [`ReorderService`](../treegrid/columns/columns#reorder)| Inject this module to use reorder feature.| -| [`PrintService`](../treegrid/print)| Inject this module to use to use print feature and this is a default injected module.| -| [`ToolbarService`](../treegrid/tool-bar/tool-bar)| Inject this module to use toolbar feature.| -| [`ExcelExportService`](../treegrid/excel-export/excel-export)| Inject this module to use Excel export feature.| -| [`PdfExportService`](../treegrid/pdf-export/pdf-export)| Inject this module to use PDF export feature.| +| [PageService](../treegrid/paging)| Inject this module to enable paging.| +| [SortService](../treegrid/sorting)| Inject this module to enable sorting.| +| [FilterService](../treegrid/filtering/filtering)| Inject this module to enable filtering.| +| [EditService](../treegrid/editing/edit)| Inject this module to enable editing.| +| [AggregateService](../treegrid/aggregates/aggregates)| Inject this module to enable aggregates.| +| [ColumnMenuService](../treegrid/columns/columns#column-menu)| Inject this module to enable the column menu.| +| [CommandColumnService](../../treegrid/edit#command-column)| Inject this module to enable command columns.| +| [ContextMenuService](../treegrid/context-menu)| Inject this module to enable the context menu.| +| [ResizeService](../treegrid/columns/columns#column-resizing)| Inject this module to enable column resizing.| +| [ReorderService](../treegrid/columns/columns#reorder)| Inject this module to enable column reordering.| +| [PrintService](../treegrid/print)| Inject this module to enable printing; this module is injected by default.| +| [ToolbarService](../treegrid/tool-bar/tool-bar)| Inject this module to enable the toolbar.| +| [ExcelExportService](../treegrid/excel-export/excel-export)| Inject this module to enable Excel export.| +| [PdfExportService](../treegrid/pdf-export/pdf-export)| Inject this module to enable PDF export.| +Inject these modules into the TreeGrid using the `Inject` directive. -These modules should be injected into the treegrid using the `Inject` directive. - -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. +> Refer to the [React Tree Grid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour for highlights. Explore the [React Tree Grid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/overview.md b/ej2-react/treegrid/overview.md index 4f12f2d3d..418d08379 100644 --- a/ej2-react/treegrid/overview.md +++ b/ej2-react/treegrid/overview.md @@ -1,36 +1,36 @@ --- layout: post -title: Index in React Treegrid component | Syncfusion -description: Learn here all about Index in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Index in React TreeGrid | Syncfusion +description: Learn here all about Index in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Index platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Index in React Treegrid component +# Index in React TreeGrid -The Essential Studio® for JavaScript TreeGrid is a feature-rich control used to visualize self-referential hierarchical data effectively in a tabular format. It can pull data from data sources such as an array of JSON, RESTful services, OData services, WCF services or DataManager, and binding data fields to columns. It also expands or collapses child data using the tree column. +Essential Studio for JavaScript TreeGrid is a feature-rich control for visualizing self-referential hierarchical data in a tabular layout. It binds data from sources such as JSON arrays, RESTful services, OData services, WCF services, or DataManager, and maps fields to columns. Child records can be expanded or collapsed using the tree column. -The most important features available in the TreeGrid component are paging, sorting, filtering, and searching. +Key features include paging, sorting, filtering, and searching. ## Key Features -* **Data sources**: Binds the treegrid component with an array of JavaScript objects or DataManager. -* **Adaptive Layout**: The Tree Grid user interface (UI) has been designed to provide an optimal viewing experience and improve usability on small screens. -* **Sorting**: Supports **n** levels of sorting. -* **Filtering**: Supports filtering records with filter bar and menu filtering modes. -* **Paging**: Allows easy switching between pages using the pager bar. -* **Editing**: Offers cell and row editing modes for updating the records. -* **Virtual scrolling**: To efficiently handle and display a large amount of data without experiencing any performance degradation. -* **Columns**: The column definitions are used as the dataSource schema in the TreeGrid. This plays a vital role in rendering column values in the required tree structure. - * **Reordering**: Allows dragging and dropping of any column anywhere in the treegrid’s column header row, thus allowing repositioning of columns. - * **Resizing**:Resizing allows changing column width on the fly by simply dragging the right corner of the column header. - * **Cell Styling**: TreeGrid cell styles can be customized either by using CSS or programmatically. -* **Selection**:Rows or cells can be selected in the treegrid. One or more rows or cells can also be selected by holding Ctrl or Command, or programmatically. -* **Templates**: Templates can be used to create custom user experiences in the treegrid. -* **Aggregation**: Provides the option to easily visualized the aggregates for column values. Displays aggregates for child data. -* **Context menu**: The context menu provides a list of actions to be performed in the treegrid. It appears when a cell, header, or the pager is right-clicked. -* **Export**: Provides the options to export the treegrid data to Excel, PDF, and CSV formats. -* **RTL support**: Provides right-to-left mode that aligns the treegrid content from right to left. -* **Localization**: Provides an inherent support to localize the UI. +* **Data sources**: Binds the TreeGrid to JavaScript object arrays or DataManager. +* **Adaptive Layout**: Optimized UI for small screens with clear viewing and efficient interactions. +* **Sorting**: Supports multi-level sorting. +* **Filtering**: Provides filter bar and menu modes for refining records. +* **Paging**: Enables quick navigation between pages using the pager. +* **Editing**: Supports cell and row editing modes for updating records. +* **Virtual scrolling**: Efficiently handles and displays large data sets without performance degradation. +* **Columns**: Column definitions act as the data schema for rendering values in a hierarchical structure. + * **Reordering**: Drag and drop columns within the header row to reposition them. + * **Resizing**: Adjust column width by dragging the header edge. + * **Cell Styling**: Customize cell styles through CSS or programmatically. +* **Selection**: Select rows or cells, including multiple selection with modifier keys or programmatically. +* **Templates**: Use templates to build custom layouts and rendering within the TreeGrid. +* **Aggregation**: Compute and display aggregate values for columns, including aggregates for child data. +* **Context menu**: Display a context menu with actions when right-clicking cells, headers, or the pager. +* **Export**: Export TreeGrid data to Excel, PDF, and CSV formats. +* **RTL support**: Align content from right to left for right-to-left scripts. +* **Localization**: Localize UI text and messages. \ No newline at end of file diff --git a/ej2-react/treegrid/paging.md b/ej2-react/treegrid/paging.md index 2e17ca81f..7f11b6a24 100644 --- a/ej2-react/treegrid/paging.md +++ b/ej2-react/treegrid/paging.md @@ -1,18 +1,18 @@ --- layout: post -title: Paging in React Treegrid component | Syncfusion -description: Learn here all about Paging in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Paging in React TreeGrid component | Syncfusion +description: Learn here all about Paging in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Paging platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Paging in React Treegrid component +# Paging in React TreeGrid -Paging provides an option to display TreeGrid data in page segments. To enable paging, set the [`allowPaging`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowpaging) to **true**. When paging is enabled, pager component renders at the bottom of the treegrid. Paging options can be configured through the [`pageSettings`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#pagesettings). +Paging displays TreeGrid data in page segments. Enable paging by setting [allowPaging](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowpaging) to **true**. When enabled, the pager is rendered at the bottom of the TreeGrid. Paging behavior is configured through [pageSettings](https://ej2.syncfusion.com/react/documentation/api/treegrid/#pagesettings). -To use Paging, inject **Page** module in TreeGrid. +To use paging, inject the **Page** module in the TreeGrid. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -25,16 +25,16 @@ To use Paging, inject **Page** module in TreeGrid. {% previewsample "page.domainurl/code-snippet/treegrid/paging-cs2" %} -> You can achieve better performance by using treegrid paging to fetch only a pre-defined number of records from the data source. +> Paging improves performance by fetching only a defined number of records per request. ## Page Size Mode -Two behaviors are available in TreeGrid paging to display certain number of records in a current page. Following are the two types of [`pageSizeMode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettingsModel/#pagesizemode). +Two behaviors are available for determining records per page via [pageSizeMode](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettingsModel/#pagesizemode): -* **All** : This is the default mode. The number of records in a page is based on [`pageSize`](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettingsModel/#pagesize) property. -* **Root** : The number of root nodes or the 0th level records to be displayed per page is based on [`pageSize`](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettingsModel/#pagesize) property. +- **All** (default): Records per page are determined by [pageSize](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettingsModel/#pagesize) property. +- **Root**: The number of root (level 0) records per page is determined by [pageSize](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettingsModel/#pagesize) property. -With [`pageSizeMode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettingsModel/#pagesizemode) property as **Root** only the root level or the 0th level records are considered in records count. +With [pageSizeMode](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettingsModel/#pagesizemode) property as **Root** only the root level or the 0th level records are considered in records count. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -49,7 +49,7 @@ With [`pageSizeMode`](https://ej2.syncfusion.com/react/documentation/api/treegri ## Template -You can use custom elements inside the pager instead of default elements. The custom elements can be defined by using the [`template`](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettingsModel/#template) property. Inside this template, you can access the [`currentPage`](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettingsModel/#currentpage), [`pageSize`](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettingsModel/#pagesize), [`pageCount`](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettingsModel/#pagecount), **totalPage** and **totalRecordCount** values. +Custom elements can be rendered inside the pager using the [template](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettingsModel/#template) property. Within the template, the following values are available: [currentPage](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettingsModel/#currentpage), [pageSize](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettingsModel/#pagesize), [pageCount](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettingsModel/#pagecount), `totalPage`, and `totalRecordCount`. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -64,7 +64,7 @@ You can use custom elements inside the pager instead of default elements. The cu ## Pager with Page Size Dropdown -The pager Dropdown allows you to change the number of records in the TreeGrid dynamically. It can be enabled by defining the [`pageSettings.pageSizes`](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettingsModel/#pagesizes) property as **true**. +A pager dropdown allows changing the number of records per page dynamically. Enable it by setting [pageSettings.pageSizes](https://ej2.syncfusion.com/react/documentation/api/treegrid/pageSettingsModel/#pagesizes) to **true**. ```ts const pageSettings: PageSettingsModel = { pageSize: 7, pageSizes: true }; @@ -72,9 +72,9 @@ The pager Dropdown allows you to change the number of records in the TreeGrid dy ![Page size dropdown](images/pagesizes.png) -## How to render Pager at the Top of the TreeGrid +## Render pager at the top of the TreeGrid -By default, Pager will be rendered at the bottom of the TreeGrid. You can also render the Pager at the top of the TreeGrid by using the [`dataBound`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#databound) event. +By default, the pager is rendered at the bottom. Render the pager at the top using the [dataBound](https://ej2.syncfusion.com/react/documentation/api/treegrid/#databound) event. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -87,8 +87,8 @@ By default, Pager will be rendered at the bottom of the TreeGrid. You can also r {% previewsample "page.domainurl/code-snippet/treegrid/paging-cs5" %} -> During the paging action, the pager component triggers the below three events. -> * The [`created`](https://ej2.syncfusion.com/react/documentation/api/pager/#created) event triggers when Pager is created. -> * The [`click`](https://ej2.syncfusion.com/react/documentation/api/pager/#click) event triggers when the numeric items in the pager is clicked. -> * The [`dropDownChanged`](https://ej2.syncfusion.com/react/documentation/api/pager/#dropdownchanged) event triggers when pageSize DropDownList value is selected. -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. +> During paging, the pager triggers these events: +> * [created](https://ej2.syncfusion.com/react/documentation/api/pager/#created): Triggered when the pager is created. +> * [click](https://ej2.syncfusion.com/react/documentation/api/pager/#click): Triggered when numeric items are clicked. +> * [dropDownChanged](https://ej2.syncfusion.com/react/documentation/api/pager/#dropdownchanged): Triggered when the pageSize dropdown value changes. +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour for key capabilities. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/pdf-export/adding-header-and-footer.md b/ej2-react/treegrid/pdf-export/adding-header-and-footer.md index 2db059ef5..ddd6f6e61 100644 --- a/ej2-react/treegrid/pdf-export/adding-header-and-footer.md +++ b/ej2-react/treegrid/pdf-export/adding-header-and-footer.md @@ -1,20 +1,20 @@ --- layout: post -title: Adding header and footer in React Treegrid component | Syncfusion -description: Learn here all about Adding header and footer in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Adding header and footer in React TreeGrid | Syncfusion +description: Learn here all about PDF Adding header and footer in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Adding header and footer platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Adding header and footer in React Treegrid component +# Adding header and footer in React TreeGrid -You can customize text, page number, line, page size and changing orientation in header and footer. +Customize header and footer content such as text, page numbers, lines, page size, and orientation. ## How to write a text in header or footer -You can add text either in Header or Footer of exported PDF document. +Add text in the header or footer of the exported PDF document. ```ts @@ -37,7 +37,7 @@ You can add text either in Header or Footer of exported PDF document. ## How to draw a line in header or footer -you can add line either in Header or Footer of the exported PDF document. +Add a line in the header or footer of the exported PDF document. Supported line styles: @@ -67,7 +67,7 @@ Supported line styles: ## Add page number in header or footer -you can add page number either in Header or Footer of exported PDF document. +Add page numbers in the header or footer of the exported PDF document. Supported page number types: @@ -99,7 +99,7 @@ Supported page number types: ## Insert an image in header or footer -Image (Base64 string) can be added in the exported document in header/footer using the `PdfExportProperties`. +An image (Base64 string) can be added to the header or footer of the exported PDF document using `PdfExportProperties`. ```ts @@ -120,7 +120,7 @@ let exportProperties: PdfExportProperties = { ``` -The below code illustrates the pdf export customization. +The following example illustrates PDF export customization. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/treegrid/pdf-export/exporting-treegrid-in-server.md b/ej2-react/treegrid/pdf-export/exporting-treegrid-in-server.md index 02d2e1e61..09a8c275c 100644 --- a/ej2-react/treegrid/pdf-export/exporting-treegrid-in-server.md +++ b/ej2-react/treegrid/pdf-export/exporting-treegrid-in-server.md @@ -1,29 +1,29 @@ --- layout: post -title: Exporting TreeGrid in server in React Tree Grid component | Syncfusion -description: Learn here all about Exporting tree grid in server in Syncfusion React Tree Grid component of Syncfusion Essential JS 2 and more. +title: Exporting TreeGrid in server in React TreeGrid | Syncfusion +description: Learn here all about Exporting TreeGrid in server in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. platform: ej2-react -control: Exporting tree grid in server +control: Exporting TreeGrid in server documentation: ug domainurl: ##DomainURL## --- -# Exporting tree grid in server in React Tree Grid component +# Exporting TreeGrid in server in React TreeGrid -The Tree Grid have an option to export the data to PDF in server side using tree grid server export library. +The TreeGrid supports exporting data to PDF on the server side using the TreeGrid server export library. ## Server dependencies -The Server side export functionality is shipped in the Syncfusion.EJ2.TreeGridExport package, which is available in Essential Studio® and [nuget.org](https://www.nuget.org/). The following list of dependencies is required for tree grid server side PDF exporting action. +The server side export functionality is provided in the Syncfusion.EJ2.TreeGridExport package, available in Essential Studio and at [nuget.org](https://www.nuget.org/). The following dependencies are required for server-side PDF export: * Syncfusion.EJ2 * Syncfusion.EJ2.TreeGridExport ## Server configuration -The following code snippet shows server configuration using ASP.NET Core Controller Action. +The following code snippet shows an ASP.NET Core Controller Action for server configuration. -To Export the tree grid in server side, You need to call the [`serverPdfExport`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#serverpdfexport) method for passing the tree grid properties to server exporting action. +To export the TreeGrid on the server side, call the [serverPdfExport](https://ej2.syncfusion.com/react/documentation/api/treegrid/#serverpdfexport) method to pass TreeGrid properties to the server export action. ```ts @@ -87,15 +87,15 @@ function App() { export default App; ``` -## Rotate a header text to a certain degree in the exported tree grid on the server side +## Rotate a header text to a certain degree in the exported TreeGrid on the server side -The Tree Grid has support to customize the column header styles such as changing text orientation, the font color, and so on in the exported PDF file. To achieve this requirement, define the `BeginCellLayout` event of the `PdfExportProperties` with an event handler to perform the required action. +The TreeGrid supports customizing column header styles in the exported PDF file, such as text orientation and font color. To implement this, define the `BeginCellLayout` event of `PdfExportProperties` with an event handler to perform the required action. -The `PdfHeaderCellRendering` will be triggered when creating a column header for the pdf document to be exported. Collect the column header details in this event and handle the custom in the BeginCellLayout event handler. +The `PdfHeaderCellRendering` event is triggered while creating a column header for the PDF document. Capture the header details in this event and apply the customization in the `BeginCellLayout` event handler. -In the following demo, the `DrawString` method from the `Graphics` is used to rotate the header text of the column header inside the `BeginCellLayout` event handler. +In the following demo, the `DrawString` method from `Graphics` rotates the header text of the column header inside the `BeginCellLayout` event handler. -> A PDF exporting is not supported to rotate the column header on the client side. +> PDF export does not support rotating the column header on the client side. ```ts public IActionResult PdfExport(string treeGridModel) { @@ -120,8 +120,8 @@ public void BeginCellEvent(object sender, PdfGridBeginCellLayoutEventArgs args) PdfGrid grid = (PdfGrid)sender; var brush = new PdfSolidBrush(new PdfColor(Color.DimGray)); args.Graphics.Save(); - args.Graphics.TranslateTransform(args.Bounds.X + 50, args.Bounds.Height + 40); // give the value for bounds x and Y by the user - args.Graphics.RotateTransform(-60); // give the rotate degree value by the user + args.Graphics.TranslateTransform(args.Bounds.X + 50, args.Bounds.Height + 40); // Give the value for bounds x and Y. + args.Graphics.RotateTransform(-60); // Give the rotate degree value. // Draw the text at particular bounds. args.Graphics.DrawString(headerValues[args.CellIndex], new PdfStandardFont(PdfFontFamily.Helvetica, 10), brush, new PointF(0, 0)); if (args.IsHeaderRow) @@ -146,11 +146,11 @@ private void PdfHeaderQueryCellInfo(object pdf) ## Passing additional parameters to the server while exporting -Passing additional parameters to the server when exporting data in the Syncfusion React TreeGrid involves providing flexibility to include extra information or customize the export process based on specific requirements. +Additional parameters can be passed to the server to customize the export process based on specific requirements. -You can achieve this by utilizing the [query](https://ej2.syncfusion.com/react/documentation/api/treegrid/#query) property and the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) event. Within the `query` property, you can invoke the [addParams](https://ej2.syncfusion.com/documentation/api/data/query/#addparams) method to add parameters to the request. +This can be achieved using the [query](https://ej2.syncfusion.com/react/documentation/api/treegrid/#query) property and the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) event. Within the `query` property, invoke the [addParams](https://ej2.syncfusion.com/documentation/api/data/query/#addparams) method to add parameters to the request. -The following example demonstrates how to pass additional parameters to the server when PDF exporting within the `toolbarClick` event. Within the event, the additional parameters, specifically **recordcount** as **12**, are passed using the `addParams` method and displayed as a message. +The following example demonstrates passing additional parameters during PDF export within the `toolbarClick` event. In this example, the parameter **recordcount** with value **12** is passed using `addParams` and shown as a message. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/treegrid/pdf-export/pdf-export-options.md b/ej2-react/treegrid/pdf-export/pdf-export-options.md index 9a4f27328..507396da8 100644 --- a/ej2-react/treegrid/pdf-export/pdf-export-options.md +++ b/ej2-react/treegrid/pdf-export/pdf-export-options.md @@ -1,30 +1,30 @@ --- layout: post -title: Pdf export options in React Treegrid component | Syncfusion -description: Learn here all about Pdf export options in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Pdf export options in React TreeGrid | Syncfusion +description: Learn here all about Pdf export options in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Pdf export options platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Pdf export options in React Treegrid component +# PDF export options in React TreeGrid ## Export selected records -Exporting only the selected records from the Syncfusion React TreeGrid allows generating PDF document that include only the desired data from the TreeGrid. This feature provides the flexibility to export specific records that are relevant to the needs, enabling more focused and targeted PDF exports. +Exporting only the selected records from the Syncfusion React TreeGrid enables generating a PDF that includes only relevant data. This feature supports focused and targeted exports. -To export only the selected records by utilizing the [exportProperties.dataSource](https://ej2.syncfusion.com/react/documentation/api/grid/pdfExportProperties/) property in the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/grid/#toolbarclick) event. +Export selected records by setting the [exportProperties.dataSource](https://ej2.syncfusion.com/react/documentation/api/grid/pdfExportProperties/) property in the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/grid/#toolbarclick) event. -To export the selected records from the TreeGrid to a PDF file, you can follow these steps: +To export the selected records from the TreeGrid to a PDF document, follow these steps: 1. Handle the `toolbarClick` event of the TreeGrid. -2. Retrieve the selected records using the [getSelectedRecords](https://ej2.syncfusion.com/react/documentation/api/treegrid/#getselectedrecords) method. +2. Retrieve selected records using the [getSelectedRecords](https://ej2.syncfusion.com/react/documentation/api/treegrid/#getselectedrecords) method. 3. Assign the selected data to the `exportProperties.dataSource` property. -4. Trigger the export operation using the [pdfExport](https://ej2.syncfusion.com/react/documentation/api/treegrid/#pdfexport) method. +4. Trigger the export using the [pdfExport](https://ej2.syncfusion.com/react/documentation/api/treegrid/#pdfexport) method. The following example demonstrates how to export the selected records to a PDF document. @@ -47,7 +47,7 @@ The following example demonstrates how to export the selected records to a PDF d ## Export hidden columns -PDF export provides an option to export hidden columns of TreeGrid by defining the `includeHiddenColumn` as **true**. +Export hidden columns by setting `includeHiddenColumn` to **true**. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -62,13 +62,13 @@ PDF export provides an option to export hidden columns of TreeGrid by defining t ## Show or hide columns on exported PDF -You can show a hidden column or hide a visible column while exporting the treegrid using [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/treegrid#toolbarclick) and [`pdfExportComplete`](https://ej2.syncfusion.com/react/documentation/api/treegrid#pdfExportComplete) events. +Show a hidden column or hide a visible column during export using the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) and [pdfExportComplete](https://ej2.syncfusion.com/react/documentation/api/treegrid/#pdfExportComplete) events. -In the [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/treegrid#toolbarclick) event, based on **args.item.text** as **PDF Export**. We can show or hide columns by setting [`column.visible`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#visible) property to **true** or **false** respectively. +In the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) event, when **args.item.text** is **PDF Export**, control visibility by setting the [column.visible](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#visible) property to **true** or **false**. -In the pdfExportComplete event, We have reversed the state back to the previous state. +In the `pdfExportComplete` event, revert the visibility changes to the previous state. -In the below example, we have *Duration* as a hidden column in the treegrid. While exporting, we have changed *Duration* to visible column and *StartDate* as hidden column. +In the following example, **Duration** is hidden in the TreeGrid. During export, **Duration** is shown and **StartDate** is hidden. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -83,7 +83,7 @@ In the below example, we have *Duration* as a hidden column in the treegrid. Whi ## How to change page orientation -Page orientation can be changed Landscape(Default Portrait) for the exported document using the `PdfExportProperties`. +Change page orientation to Landscape (default: Portrait) for the exported document using `PdfExportProperties`. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -98,7 +98,7 @@ Page orientation can be changed Landscape(Default Portrait) for the exported doc ## How to change page size -Page size can be customized for the exported document using the `PdfExportProperties`. +Customize page size for the exported document using `PdfExportProperties`. Supported page sizes are: @@ -143,11 +143,11 @@ Supported page sizes are: ## To customize PDF export -PDF export provides an option to customize mapping of treegrid to exported PDF document. +PDF export supports customizing the mapping of TreeGrid content to the exported PDF document. ### File name for exported document -You can assign the file name for the exported document by defining `fileName` property in `PdfExportProperties` +Assign a file name for the exported document by defining the `fileName` property in `PdfExportProperties`. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -162,7 +162,7 @@ You can assign the file name for the exported document by defining `fileName` pr ### Default fonts for PDF exporting -By default, treegrid uses **Helvetica** font in the exported document. You can change the default font by using `PdfExportProperties.theme` property. The available default fonts are, +By default, TreeGrid uses the **Helvetica** font in the exported document. Change the default font using the `PdfExportProperties.theme` property. Available default fonts: * Helvetica * TimesRoman @@ -170,7 +170,7 @@ By default, treegrid uses **Helvetica** font in the exported document. You can c * Symbol * ZapfDingbats -The code example for changing default font, +The code example for changing the default font: ```ts @@ -189,9 +189,9 @@ The code example for changing default font, ### Add custom font for PDF exporting -You can change the default font of TreeGrid header, content and caption cells in the exported document by using `PdfExportProperties.theme` property. +Customize fonts for TreeGrid header, content, and caption cells in the exported document using the `PdfExportProperties.theme` property. -In the following example, we have used Advent Pro font to export the treegrid with Hungarian fonts. +In the following example, the Advent Pro font is applied to export the TreeGrid with Hungarian fonts. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -214,11 +214,11 @@ In the following example, we have used Advent Pro font to export the treegrid wi ## Conditional cell formatting -When exporting data from the Syncfusion React TreeGrid, you have an option to conditionally format the cells in the exported PDF document. This allows you to customize the appearance of specific cells based on their values or other criteria. +Conditional cell formatting in the exported PDF enables customizing cell appearance based on values or criteria. -To implement conditional cell formatting, you can utilize the [pdfQueryCellInfo](https://ej2.syncfusion.com/react/documentation/api/treegrid/#pdfQueryCellInfo) event of the TreeGrid. Within this event, you can access the cell object using the `args.cell` property and modify its properties, such as the background color, based on your desired conditions. +Implement conditional formatting using the [pdfQueryCellInfo](https://ej2.syncfusion.com/react/documentation/api/treegrid/#pdfQueryCellInfo) event. Within this event, access the cell object using `args.cell` and modify properties, such as background color, based on the required conditions. -The following example demonstrate how to customize the background color of the **Freight** column in the exported PDF document using the **args.cell** and **backgroundColor** properties of the `pdfQueryCellInfo` event. +The following example demonstrates customizing the background color of the **Freight** column in the exported PDF document using the `pdfQueryCellInfo` event and the `args.cell.backgroundColor` property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -233,9 +233,9 @@ The following example demonstrate how to customize the background color of the * ## Theme -PDF export provides an option to include theme for exported PDF document. +PDF export includes support for applying a theme to the exported PDF document. -To apply theme in exported PDF, define the `theme` in `PdfExportProperties`. +To apply a theme, define `theme` in `PdfExportProperties`. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/treegrid/pdf-export/pdf-export.md b/ej2-react/treegrid/pdf-export/pdf-export.md index e221a33ec..4bdc76be0 100644 --- a/ej2-react/treegrid/pdf-export/pdf-export.md +++ b/ej2-react/treegrid/pdf-export/pdf-export.md @@ -1,18 +1,18 @@ --- layout: post -title: Pdf export in React Treegrid component | Syncfusion -description: Learn here all about Pdf export in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Pdf export in React TreeGrid | Syncfusion +description: Learn here all about Pdf export in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Pdf export platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# PDF export in React Treegrid component +# PDF export in React TreeGrid -PDF export allows exporting TreeGrid data to PDF document. You need to use the [`pdfExport`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#pdfexport) method for exporting. To enable PDF export in the treegrid, set the [`allowPdfExport`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowpdfexport) as **true**. +PDF export enables exporting TreeGrid data to a PDF document. Export by calling the [pdfExport](https://ej2.syncfusion.com/react/documentation/api/treegrid/#pdfexport) method. To enable PDF export in the TreeGrid, set [allowPdfExport](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowpdfexport) to **true**. -To get start quickly with exporting functionalities, you can check on this video: +For a quick start with exporting functionalities, refer to this video: {% youtube "https://www.youtube.com/watch?v=Rz24Nk4eSEY" %} {% tabs %} @@ -28,7 +28,7 @@ To get start quickly with exporting functionalities, you can check on this video ## Custom data source -PDF export provides an option to define datasource dynamically before exporting. To export data dynamically, define the `dataSource` in `PdfExportProperties`. +PDF export supports defining a datasource dynamically before exporting. To export data dynamically, set the `dataSource` in `PdfExportProperties`. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -41,11 +41,11 @@ PDF export provides an option to define datasource dynamically before exporting. {% previewsample "page.domainurl/code-snippet/treegrid/pdfexport-cs11" %} -## Exporting Custom Aggregates in Tree Grid +## Exporting Custom Aggregates in TreeGrid -The Tree Grid enables exporting custom aggregates, which summarize column data, to an Excel document using the `PdfAggregateQueryCellInfo` event. +The TreeGrid supports exporting custom aggregates, which summarize column data, to a PDF document using the `PdfAggregateQueryCellInfo` event. -In the provided example, the `customAggregateFn` function computes the item count for a selected category, while the `PdfAggregateQueryCellInfo` event customizes the exported cell values in the Excel document. +In the example, the `customAggregateFn` function computes the item count for a selected category, and the `PdfAggregateQueryCellInfo` event customizes the exported cell values in the PDF document. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -57,4 +57,5 @@ In the provided example, the `customAggregateFn` function computes the item coun {% endtabs %} {% previewsample "page.domainurl/code-snippet/treegrid/pdfexport-cs12" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. + +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/preact.md b/ej2-react/treegrid/preact.md index 145e6003c..db83366fe 100644 --- a/ej2-react/treegrid/preact.md +++ b/ej2-react/treegrid/preact.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This article provides a step-by-step guide for setting up a [Preact](https://preactjs.com/) project and integrating the Syncfusion® React TreeGrid component. -`Preact` is a fast and lightweight JavaScript library for building user interfaces. It's often used as an alternative to larger frameworks like React. The key difference is that Preact is designed to be smaller in size and faster in performance, making it a good choice for projects where file size and load times are critical factors. +`Preact` is a fast and lightweight JavaScript library for building user interfaces. It is often used as an alternative to larger frameworks like React. The key difference is that Preact is designed to be smaller in size and faster in performance, making it suitable for projects where file size and load times are critical factors. ## Prerequisites @@ -20,7 +20,7 @@ This article provides a step-by-step guide for setting up a [Preact](https://pre ## Set up the Preact project -To create a new `Preact` project, use one of the commands that are specific to either NPM or Yarn. +To create a new `Preact` project, use one of the commands specific to NPM or Yarn. ```bash npm init preact @@ -32,9 +32,9 @@ or yarn init preact ``` -Using one of the above commands will lead you to set up additional configurations for the project, as below: +The command initializes an interactive setup to configure the project as shown below: -1\. Define the project name: We can specify the name of the project directly. Let's specify the name of the project as `my-project` for this article. +1\. Define the project name. Specify the name `my-project` for this article. ```bash T Preact - Fast 3kB alternative to React with the same modern API @@ -55,7 +55,7 @@ T Preact - Fast 3kB alternative to React with the same modern API — ``` -3\. Then configure the project as below for this article. +3\. Configure the project as shown below for this article. ```bash T Preact - Fast 3kB alternative to React with the same modern API @@ -73,19 +73,19 @@ T Preact - Fast 3kB alternative to React with the same modern API — ``` -5\. Upon completing the aforementioned steps to create `my-project`, run the following command to jump into the project directory: +4\. After completing the setup, run the following command to navigate to the project directory: ```bash cd my-project ``` -Now that `my-project` is ready to run with default settings, let's add Syncfusion® components to the project. +With `my-project` ready using default settings, add Syncfusion® components to the project. ## Add the Syncfusion® React packages Syncfusion® React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion® React components in the project, install the corresponding npm package. -This article uses the [React TreeGrid component](https://www.syncfusion.com/react-components/react-tree-grid) as an example. To use the React TreeGrid component in the project, the `@syncfusion/ej2-react-treegrid` package needs to be installed using the following command: +This article uses the [React TreeGrid component](https://www.syncfusion.com/react-components/react-tree-grid) as an example. To use the React TreeGrid component in the project, install the `@syncfusion/ej2-react-treegrid` package using one of the following commands: ```bash npm install @syncfusion/ej2-react-treegrid --save @@ -99,9 +99,9 @@ yarn add @syncfusion/ej2-react-treegrid ## Import Syncfusion® CSS styles -You can import themes for the Syncfusion® React component in various ways, such as using CSS or SASS styles from npm packages, CDN, CRG and [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio/). Refer to [themes topic](https://ej2.syncfusion.com/react/documentation/appearance/theme/) to know more about built-in themes and different ways to refer to theme's in a React project. +Themes for Syncfusion® React components can be imported in multiple ways, such as using CSS or SASS styles from npm packages, CDN, CRG, and [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). Refer to the [themes topic](https://ej2.syncfusion.com/react/documentation/appearance/theme) for details about built-in themes and approaches for referencing themes in a React project. -In this article, the `Material 3` theme is applied using CSS styles, which are available in installed packages. The necessary `Material 3` CSS styles for the TreeGrid component and its dependents were imported into the **src/style.css** file. +In this article, the `Material 3` theme is applied using CSS styles from installed packages. The required `Material 3` CSS files for the TreeGrid component and its dependencies are imported into the **src/style.css** file. {% tabs %} {% highlight css tabtitle="~/src/style.css" %} @@ -120,12 +120,13 @@ In this article, the `Material 3` theme is applied using CSS styles, which are a {% endhighlight %} {% endtabs %} -> The order of importing CSS styles should be in line with its dependency graph. +> Ensure the import order of CSS files follows the dependency graph. + ## Add the Syncfusion® React component -Follow the below steps to add the React TreeGrid component to the Vite project: +Follow these steps to add the React TreeGrid component to the Preact project: -1\. Before adding the TreeGrid component to your markup, import the TreeGrid component in the **src/index.jsx** file. +1\. Before adding the TreeGrid component to the markup, import the TreeGrid component in the **src/index.jsx** file. {% tabs %} {% highlight js tabtitle="~/src/index.jsx" %} @@ -135,7 +136,7 @@ import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusio {% endhighlight %} {% endtabs %} -2\. Then, define the TreeGrid component with the [dataSource](https://helpej2.syncfusion.com/react/documentation/api/treegrid#datasource) property and column definitions. Declare the values for the `dataSource` property. +2\. Define the TreeGrid component with the [dataSource](https://helpej2.syncfusion.com/react/documentation/api/treegrid/#datasource) property and column definitions. Declare the values for the `dataSource` property. {% tabs %} {% highlight js tabtitle="~/src/index.jsx" %} @@ -226,7 +227,7 @@ render(, document.querySelector('#app')) ## Run the project -To run the project, use the following command: +Run the project using one of the following commands: ```bash npm run dev @@ -238,10 +239,10 @@ or yarn run dev ``` -The output will appear as follows: +The output appears as follows: ![preact](./images/preact.png) ## See also -[Getting Started with the Syncfusion® React UI Component](../getting-started/quick-start) +[Getting Started with the Syncfusion® React UI Component](../getting-started/quick-start) \ No newline at end of file diff --git a/ej2-react/treegrid/print.md b/ej2-react/treegrid/print.md index e136d4791..f02c3e68f 100644 --- a/ej2-react/treegrid/print.md +++ b/ej2-react/treegrid/print.md @@ -1,16 +1,16 @@ --- layout: post -title: Print in React Treegrid component | Syncfusion -description: Learn here all about Print in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Print +title: Print in React TreeGrid | Syncfusion +description: Learn here all about Print in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. +control: Print platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Print in React Treegrid component +# Print in React TreeGrid -To print the TreeGrid, use the [`print`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#print) method from treegrid instance. The print option can be displayed on the [`toolbar`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbar) by adding the **Print** toolbar item. +Print the TreeGrid by calling the [print](https://ej2.syncfusion.com/react/documentation/api/treegrid/#print) method from the TreeGrid instance. The print option can be shown on the [toolbar](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbar) by adding the **Print** toolbar item. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -20,21 +20,20 @@ To print the TreeGrid, use the [`print`](https://ej2.syncfusion.com/react/docume {% include code-snippet/treegrid/print-cs1/app/App.tsx %} {% endhighlight %} {% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/print-cs1" %} +{% previewsample "page.domainurl/code-snippet/treegrid/print-cs1" %} ## Page setup -Some of the print options cannot be configured through JavaScript code. So, you have to customize the layout, paper size, and margin options using the browser page setup dialog. Please refer to the following links to know more about the browser page setup: +Some print options cannot be configured through JavaScript. Customize layout, paper size, and margins using the browser’s page setup dialog. Refer to the following resources for details: -* [`Chrome`](https://support.google.com/chrome/answer/1069693?hl=en&visit_id=1-636335333734668335-3165046395&rd=1) -* [`Firefox`](https://support.mozilla.org/en-US/kb/how-print-web-pages-firefox) -* [`Safari`](http://www.mintprintables.com/print-tips/adjust-margins-osx/) -* [`IE`](http://www.helpteaching.com/help/print/index.htm) +* [Chrome](https://support.google.com/chrome/answer/1069693?hl=en&visit_id=1-636335333734668335-3165046395&rd=1) +* [Firefox](https://support.mozilla.org/en-US/kb/how-print-web-pages-firefox) +* [Safari](http://www.mintprintables.com/print-tips/adjust-margins-osx/) +* [IE](http://www.helpteaching.com/help/print/index.htm) ## Print using an external button -To print the treegrid from an external button, invoke the [`print`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#print) method. +To print the TreeGrid from an external button, invoke the [print](https://ej2.syncfusion.com/react/documentation/api/treegrid/#print) method. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -44,12 +43,11 @@ To print the treegrid from an external button, invoke the [`print`](https://ej2. {% include code-snippet/treegrid/print-cs2/app/App.tsx %} {% endhighlight %} {% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/print-cs2" %} +{% previewsample "page.domainurl/code-snippet/treegrid/print-cs2" %} ## Print the visible page -By default, the treegrid prints all the pages. To print the current page alone, set the [`printMode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#printmode) to **CurrentPage**. +By default, the TreeGrid prints all pages. To print only the current page, set [printMode](https://ej2.syncfusion.com/react/documentation/api/treegrid/#printmode) to **CurrentPage**. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -59,26 +57,25 @@ By default, the treegrid prints all the pages. To print the current page alone, {% include code-snippet/treegrid/print-cs3/app/App.tsx %} {% endhighlight %} {% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/print-cs3" %} +{% previewsample "page.domainurl/code-snippet/treegrid/print-cs3" %} ## Print large number of columns -By default, the browser uses A4 as page size option to print pages and to adapt the size of the page the browser print preview will auto-hide the overflowed contents. Hence treegrid with large number of columns will cut off to adapt the print page. - -To show large number of columns when printing, adjust the scale option from print option panel based on your content size. +Browsers typically use A4 as the default page size for printing, and the print preview may hide overflowed content to fit the page. As a result, TreeGrids with many columns can be truncated in print output. + +To display more columns when printing, adjust the scale option in the browser’s print dialog according to the content width. ![Scale Option Setting](./images/print-preview.png) ## Show or Hide columns while Printing -You can show a hidden column or hide a visible column while printing the treegrid using [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) and [`printComplete`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#printcomplete) events. +Show a hidden column or hide a visible column during printing using the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) and [printComplete](https://ej2.syncfusion.com/react/documentation/api/treegrid/#printcomplete) events. -In the [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) event, based on **args.item.text** as *Print*. We can show or hide columns by setting [`column.visible`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#visible) property to *true* or *false* respectively. +In the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) event, when **args.item.text** is **Print**, toggle visibility by setting the [column.visible](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#visible) property to **true** or **false**. -In the printComplete event, We have reversed the state back to the previous state. +In the `printComplete` event, restore the previous column visibility state. -In the below example, we have **Duration** as a hidden column in the treegrid. While printing, we have changed **Duration** to visible column and **StartDate** as hidden column. +In the following example, the **Duration** column is initially hidden. During printing, **Duration** is shown and **StartDate** is hidden. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -88,13 +85,12 @@ In the below example, we have **Duration** as a hidden column in the treegrid. W {% include code-snippet/treegrid/print-cs4/app/App.tsx %} {% endhighlight %} {% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/print-cs4" %} +{% previewsample "page.domainurl/code-snippet/treegrid/print-cs4" %} ## Limitations of Printing Large Data -When treegrid contains large number of data, printing all the data at once is not a best option for the browser performance. Because to render all the DOM elements in one page will produce performance issues in the browser. It leads to browser slow down or browser hang. +When the TreeGrid contains a large volume of data, printing all records at once can impact browser performance because rendering all DOM elements on a single page is expensive and may cause slowdowns or hangs. -If printing of all the data is still needed, we suggest to Export the treegrid to **Excel** or **CSV** or **Pdf** and then print it from another non-web based application. +If printing all data is required, consider exporting the TreeGrid to **Excel**, **CSV**, or **PDF**, and then print using a desktop application. -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/row/detail-template.md b/ej2-react/treegrid/row/detail-template.md index 5dc234238..74d389170 100644 --- a/ej2-react/treegrid/row/detail-template.md +++ b/ej2-react/treegrid/row/detail-template.md @@ -1,18 +1,18 @@ --- layout: post -title: Detail template in React Treegrid component | Syncfusion -description: Learn here all about Detail template in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Detail template in React TreeGrid component | Syncfusion +description: Learn here all about Detail template in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Detail template platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Detail template in React Treegrid component +# Detail template in React TreeGrid -The detail template provides additional information about a particular row. By expanding the parent row the child rows are expanded along with their detail template. The [`detailTemplate`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#detailtemplate) property accepts either the template string or HTML element ID. +The detail template displays additional information for a row. When a parent row is expanded, its child rows expand along with their detail templates. The [detailTemplate](https://ej2.syncfusion.com/react/documentation/api/treegrid/#detailtemplate) property accepts either a template string or an HTML element ID. -To use detail template, inject the DetailRow module in the TreeGrid. +To enable the detail template, inject the **DetailRow** module into the TreeGrid. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/treegrid/row/indent.md b/ej2-react/treegrid/row/indent.md index 6d1366aef..6479cb507 100644 --- a/ej2-react/treegrid/row/indent.md +++ b/ej2-react/treegrid/row/indent.md @@ -1,18 +1,18 @@ --- layout: post -title: Indent in React Treegrid component | Syncfusion -description: Learn here all about Indent in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Indent in React TreeGrid component | Syncfusion +description: Learn here all about Indent in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Indent platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Indent in React Treegrid component +# Indent in React TreeGrid -The Indent and Outdent feature will help to change the hierarchy level of rows in tree grid. The indent action moves the selected row as the last child of its previous row, whereas the outdent action moves the selected row as a sibling to its parent row. +The indent and outdent feature changes the hierarchy level of rows in the TreeGrid. The indent action moves the selected row as the last child of its previous row, whereas the outdent action moves the selected row as a sibling of its parent row. -To use the indent and outdent feature, inject the `RowDD` module in the Tree Grid. The tree grid toolbar has the built-in items to execute indent and outdent actions. Define this by using the toolbar property. +To use the indent and outdent feature, inject the `RowDD` module into the TreeGrid. The TreeGrid toolbar includes built-in items to execute indent and outdent actions. Configure these with the toolbar property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -27,7 +27,7 @@ To use the indent and outdent feature, inject the `RowDD` module in the Tree Gri ## Indent/Outdent a row programmatically -You can change the hierarchy level of record programmatically using `indent` and `outdent` methods. +Change the hierarchy level of a record programmatically using the `indent` and `outdent` methods. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/treegrid/row/row-drag-and-drop.md b/ej2-react/treegrid/row/row-drag-and-drop.md index 50662c0e0..61b53e3f0 100644 --- a/ej2-react/treegrid/row/row-drag-and-drop.md +++ b/ej2-react/treegrid/row/row-drag-and-drop.md @@ -1,22 +1,22 @@ --- layout: post -title: Row drag and drop in React Treegrid component | Syncfusion -description: Learn here all about Row drag and drop in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Row drag and drop in React TreeGrid component | Syncfusion +description: Learn here all about Row drag and drop in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Row drag and drop platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Row drag and drop in React Treegrid component +# Row drag and drop in React TreeGrid -The TreeGrid rows can be reordered, dropped to another TreeGrid or custom control by enabling the [`allowRowDragAndDrop`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowrowdraganddrop) to true. +TreeGrid rows can be reordered or dropped into another TreeGrid or custom control by setting [allowRowDragAndDrop](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowrowdraganddrop) to true. -To use row drag and drop, inject the `RowDD` module in the TreeGrid. +To use row drag and drop, inject the **RowDD** module into the TreeGrid. -## Drag and drop within Tree Grid +## Drag and drop within TreeGrid -The TreeGrid row drag and drop allows you to drag and drop TreeGrid rows on the same TreeGrid using drag icon. To enable row drag and drop, set the [`allowRowDragAndDrop`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowrowdraganddrop) to true. It provides the way to drop the row above, below or child to the target row with respective to the target row position. +Row drag and drop supports reordering within the same TreeGrid using the drag icon. Enable it by setting [allowRowDragAndDrop](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowrowdraganddrop) to true. Rows can be dropped above, below, or as a child of the target row based on the drop position. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -29,14 +29,14 @@ The TreeGrid row drag and drop allows you to drag and drop TreeGrid rows on the {% previewsample "page.domainurl/code-snippet/treegrid/row-cs1" %} -> * Selection feature must be enabled for row drag and drop. -> * Multiple rows can be selected by clicking and dragging inside the treegrid. -> * For multiple row selection, the [`type`](https://ej2.syncfusion.com/react/documentation/api/treegrid/selectionSettings/#type) property must be set to `multiple`. -> * The [`isPrimaryKey`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#isprimarykey) property is necessary to perform row drag and drop operation. +> * Selection must be enabled for row drag and drop. +> * Multiple rows can be selected by clicking and dragging inside the TreeGrid. +> * For multiple row selection, set the [type](https://ej2.syncfusion.com/react/documentation/api/treegrid/selectionSettings/#type) property to `multiple`. +> * The [isPrimaryKey](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#isprimarykey) property is required to perform row drag-and-drop. -## Drag and drop to another Tree Grid +## Drag and drop to another TreeGrid -To drag and drop between two TreeGrid, enable the [`allowRowDragAndDrop`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowrowdraganddrop) property and specify the target TreeGrid ID in [`targetID`](https://ej2.syncfusion.com/react/documentation/api/treegrid/rowDropSettings/#targetid) property of rowDropSettings. +To drag and drop between two TreeGrids, enable [allowRowDragAndDrop](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowrowdraganddrop) and set the target TreeGrid ID in the [targetID](https://ej2.syncfusion.com/react/documentation/api/treegrid/rowDropSettings/#targetid) property of `rowDropSettings`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -51,18 +51,18 @@ To drag and drop between two TreeGrid, enable the [`allowRowDragAndDrop`](https: ## Drag and drop events -The following events are triggered while drag and drop the treegrid rows. +The following events are triggered during row drag and drop: -[`rowDragStartHelper`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdragstarthelper) - Triggers when click the drag icon or treegrid row and this event is used to customize the drag element based on user criteria.
    -[`rowDragStart`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdragstart) -Triggers when starts to drag the treegrid row.
    -[`rowDrag`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdrag) - Triggers while dragging the treegrid row.
    -[`rowDrop`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdrop) - Triggers when a drag element is dropped on the target element.
    +[rowDragStartHelper](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdragstarthelper) - Triggers when the drag icon or row is clicked; customize the drag element based on criteria.
    +[rowDragStart](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdragstart) - Triggers when a row drag starts.
    +[rowDrag](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdrag) - Triggers while a row is being dragged.
    +[rowDrop](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdrop) - Triggers when the dragged element is dropped on the target element.
    ## Prevent reordering a row as child to another row -You can prevent the default behavior of dropping rows as children to the target by setting the `cancel` property to `true` in [rowDrop](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdrop) event argument. You can also change the drop position after cancelling using [reorderRows](https://ej2.syncfusion.com/react/documentation/api/treegrid/#reorderrows) method. +Prevent dropping rows as children by setting `cancel` to `true` in the [rowDrop](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdrop) event arguments. After canceling, adjust the drop position programmatically using the [reorderRows](https://ej2.syncfusion.com/react/documentation/api/treegrid/#reorderrows) method. -In the below example drop action is cancelled and dropped above to target row. +In the following example, the drop action is canceled and the row is dropped above the target row. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -73,4 +73,4 @@ In the below example drop action is cancelled and dropped above to target row. {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/treegrid/row-cs3" %} + {% previewsample "page.domainurl/code-snippet/treegrid/row-cs3" %} \ No newline at end of file diff --git a/ej2-react/treegrid/row/row-template.md b/ej2-react/treegrid/row/row-template.md index 313854f82..547aeca16 100644 --- a/ej2-react/treegrid/row/row-template.md +++ b/ej2-react/treegrid/row/row-template.md @@ -1,16 +1,16 @@ --- layout: post -title: Row template in React Treegrid component | Syncfusion -description: Learn here all about Row template in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Row template in React TreeGrid component | Syncfusion +description: Learn here all about Row template in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Row template platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Row template in React Treegrid component +# Row template in React TreeGrid -The [`rowTemplate`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowtemplate) has an option to customise the look and behavior of the treegrid rows. The [`rowTemplate`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowtemplate) property accepts either the template string or HTML element ID. +The [rowTemplate](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowtemplate) option customizes the look and behavior of TreeGrid rows. The `rowTemplate` property accepts either a template string or an HTML element ID. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -23,11 +23,11 @@ The [`rowTemplate`](https://ej2.syncfusion.com/react/documentation/api/treegrid/ {% previewsample "page.domainurl/code-snippet/treegrid/rowtemplate-cs1" %} -The [`rowTemplate`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowtemplate) property accepts only the TR element. +The [rowTemplate](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowtemplate) must return a single tr element. ## Row template with formatting -If the [`rowTemplate`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowtemplate) is used, the value cannot be formatted inside the template using the [`columns.format`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#format) property. In that case, a function should be defined globally to format the value and invoke it inside the template. +When using [rowTemplate](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowtemplate), values cannot be formatted inside the template using [columns.format](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#format) property. In such cases, define a global formatting function and invoke it within the template. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -42,13 +42,13 @@ If the [`rowTemplate`](https://ej2.syncfusion.com/react/documentation/api/treegr ## Limitations -Row template feature is not compatible with all the features which are available in treegrid and it has limited features support. Here we have listed out the features which are compatible with row template feature. +Row template feature is not compatible with all the features which are available in the TreeGrid, and it has limited features support. The features that are incompatible with the row template feature are listed below. * Filtering * Paging * Sorting * Scrolling * Searching -* Rtl -* Context Menu -* State Persistence \ No newline at end of file +* RTL +* Context menu +* State persistence \ No newline at end of file diff --git a/ej2-react/treegrid/row/row.md b/ej2-react/treegrid/row/row.md index f22b4764b..13844d977 100644 --- a/ej2-react/treegrid/row/row.md +++ b/ej2-react/treegrid/row/row.md @@ -1,23 +1,23 @@ --- layout: post -title: Row in React Treegrid component | Syncfusion -description: Learn here all about Row in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Row in React TreeGrid component | Syncfusion +description: Learn here all about Row in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Row platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Row in React Treegrid component +# Row in React TreeGrid -The row represents record details fetched from data source. +A row represents record details from the datasource. -To get start quickly with features in Row, you can check on this video: +The following video provides a quick start for row features: {% youtube "https://www.youtube.com/watch?v=mHo_WLeNtWI" %} ## Customize rows -You can customize the appearance of a row by using the [`rowDataBound`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdatabound) event. The [`rowDataBound`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdatabound) event triggers for every row. In the event handler, you can get the [`RowDataBoundEventArgs`](https://ej2.syncfusion.com/react/documentation/api/grid/rowDataBoundEventArgs/) that contains details of the row. +Customize the appearance of a row using the [rowDataBound](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdatabound) event, which triggers for every row. In the event handler, [RowDataBoundEventArgs](https://ej2.syncfusion.com/react/documentation/api/grid/rowDataBoundEventArgs/) provides details of the row. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -32,7 +32,7 @@ You can customize the appearance of a row by using the [`rowDataBound`](https:// ## Styling alternate row -You can change the treegrid's alternative rows' background color by overriding the *.e-altrow* class. +Change the TreeGrid’s alternating row background color by overriding the `.e-altrow` class. ```css .e-treegrid .e-altrow { @@ -40,7 +40,7 @@ You can change the treegrid's alternative rows' background color by overriding t } ``` -Please refer the following example. +The following example demonstrates this style override. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -55,9 +55,9 @@ Please refer the following example. ## Row height -The Syncfusion TreeGrid allows you to customize the height of rows based on your needs. This feature can be useful when you need to display more content in a row or when you want to reduce the height of rows to fit its content. You can achieve this by using the [rowHeight](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowheight) property of the TreeGrid. This property allows you to change the height of the entire grid row to your desired value. +Row height can be customized using the [rowHeight](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowheight) property. This is useful for displaying more content in a row or reducing height to fit content. The property sets the height for all rows. -In the below example, the **rowHeight** is set as *60px*. +In the following example, `rowHeight` is set to 60px. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -72,11 +72,9 @@ In the below example, the **rowHeight** is set as *60px*. ### Customize row height for particular row -Customizing the row height for a particular row can be useful when you want to display more content in a particular row, reduce the height of a row to fit its content, or make a specific row stand out from the other rows in the TreeGrid. This can be achieved by using the `rowHeight` property of the TreeGrid along with the [rowDataBound](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdatabound) event. +When a specific row requires a different height, apply a custom value during the [rowDataBound](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdatabound) event based on the row data. This approach keeps the global `rowHeight` for all rows while selectively overriding the height for targeted rows. -The `rowHeight` property of the TreeGrid allows you to set the height of all rows in the TreeGrid to a specific value. However, if you want to customize the row height for a specific row based on the row data, you can use the `rowDataBound` event. This event is triggered every time a request is made to access row information, element, or data, and before the row element is appended to the TreeGrid element. - -In the below example, the row height for the row with **TaskID** as **3** is set as **90px** using the **rowDataBound** event. +In the following example, the row with `TaskID` as **3** is set to **90px** using `rowDataBound` event. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -89,4 +87,4 @@ In the below example, the row height for the row with **TaskID** as **3** is set {% previewsample "page.domainurl/code-snippet/treegrid/rows-cs2" %} -> Refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to know how to present and manipulate data. +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour for key capabilities. Explore the [React TreeGrid examples](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to see data presentation and manipulation. \ No newline at end of file diff --git a/ej2-react/treegrid/scrolling.md b/ej2-react/treegrid/scrolling.md index fe3599357..117071ec3 100644 --- a/ej2-react/treegrid/scrolling.md +++ b/ej2-react/treegrid/scrolling.md @@ -1,26 +1,28 @@ --- layout: post -title: Scrolling in React Treegrid component | Syncfusion -description: Learn here all about Scrolling in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Scrolling +title: Scrolling in React TreeGrid | Syncfusion +description: Learn here all about Scrolling in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. +control: Scrolling platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Scrolling in React Treegrid component +# Scrolling in React TreeGrid -The scrollbar will be displayed in the treegrid when content exceeds the element [`width`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#width) or [`height`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#height). The vertical and horizontal scrollbars will be displayed based on the following criteria: +The scrollbar is displayed in the TreeGrid when content exceeds the element [width](https://ej2.syncfusion.com/react/documentation/api/treegrid/#width) or [height](https://ej2.syncfusion.com/react/documentation/api/treegrid/#height). The vertical and horizontal scrollbars appear based on the following criteria: -* The vertical scrollbar appears when the total height of rows present in the treegrid exceeds its element height. -* The horizontal scrollbar appears when the sum of columns width exceeds the treegrid element width. -* The [`height`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#height) and [`width`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#width) are used to set the treegrid height and width, respectively. +* The vertical scrollbar appears when the total height of rows in the TreeGrid exceeds its element height. -> The default value for [`height`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#height) and [`width`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#width) is *auto*. +* The horizontal scrollbar appears when the sum of column widths exceeds the TreeGrid element width. + +* The [height](https://ej2.syncfusion.com/react/documentation/api/treegrid/#height) and [width](https://ej2.syncfusion.com/react/documentation/api/treegrid/#width) properties set the TreeGrid height and width, respectively. + +> The default value for [height](https://ej2.syncfusion.com/react/documentation/api/treegrid/#height) and [width](https://ej2.syncfusion.com/react/documentation/api/treegrid/#width) is *auto*. ## Set width and height -To specify the [`width`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#height) of the scroller in the pixel, set the pixel value to a number. +To specify the scroller [width](https://ej2.syncfusion.com/react/documentation/api/treegrid/#width) and [height](https://ej2.syncfusion.com/react/documentation/api/treegrid/#height) in pixels, assign a numeric pixel value. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -30,12 +32,11 @@ To specify the [`width`](https://ej2.syncfusion.com/react/documentation/api/tree {% include code-snippet/treegrid/scrolling-cs1/app/App.tsx %} {% endhighlight %} {% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/scrolling-cs1" %} +{% previewsample "page.domainurl/code-snippet/treegrid/scrolling-cs1" %} ## Responsive with parent container -Specify the [`width`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#height) as **100%** to make the treegrid element fill its parent container. Setting the [`height`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#height) to **100%** requires the treegrid parent element to have explicit height. +Specify [width](https://ej2.syncfusion.com/react/documentation/api/treegrid/#width) and [height](https://ej2.syncfusion.com/react/documentation/api/treegrid/#height) as **100%** to make the TreeGrid fill its parent container. When [height](https://ej2.syncfusion.com/react/documentation/api/treegrid/#height) is set to **100%**, the parent element must have an explicit height. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -45,18 +46,17 @@ Specify the [`width`](https://ej2.syncfusion.com/react/documentation/api/treegri {% include code-snippet/treegrid/responsive-scrolling-cs1/app/App.tsx %} {% endhighlight %} {% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/responsive-scrolling-cs1" %} +{% previewsample "page.domainurl/code-snippet/treegrid/responsive-scrolling-cs1" %} ## Sticky header -The Syncfusion React TreeGrid provides a useful feature to keep the column headers fixed (sticky) while scrolling through large datasets. This ensures that the headers remain visible at all times, enhancing user experience by making it easier to understand the context of the data displayed, especially when dealing with wide or long hierarchical data. +The Syncfusion React TreeGrid can keep column headers fixed (sticky) while scrolling through large datasets. Sticky headers remain visible to preserve column context during vertical scrolling, which is especially helpful with wide or lengthy hierarchical data. -For example, in a project management application, users often need to scroll through a detailed list of tasks and subtasks. When the dataset is large, scrolling down can cause confusion if the column headers scroll out of view, making it difficult to remember what each column represents. By enabling sticky headers, the column headers remain visible even while scrolling, allowing users to easily keep track of the data context. +Enabling sticky headers ensures that the header row remains anchored to the top of the TreeGrid container or its parent scrolling element, regardless of scroll position. -To enable sticky headers in the TreeGrid, you can simply set the `enableStickyHeader` property to **true**. This makes the column headers stick to the top of the TreeGrid container or its parent scrolling container when you scroll vertically. +To enable sticky headers in the TreeGrid, set the `enableStickyHeader` property to **true**. This keeps column headers anchored to the top of the TreeGrid container or its parent scrolling container during vertical scroll. -The following sample demonstrates how to enable or disable the sticky header in the TreeGrid using a [Switch](https://ej2.syncfusion.com/react/documentation/switch/getting-started) and its [change](https://ej2.syncfusion.com/react/documentation/api/switch#change) event: +The following sample demonstrates enabling or disabling the sticky header in the TreeGrid using a [Switch](https://ej2.syncfusion.com/react/documentation/switch/getting-started) and its [change](https://ej2.syncfusion.com/react/documentation/api/switch/#change) event: {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -66,12 +66,11 @@ The following sample demonstrates how to enable or disable the sticky header in {% include code-snippet/treegrid/scrolling-sticky-header/app/App.tsx %} {% endhighlight %} {% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/scrolling-sticky-header" %} +{% previewsample "page.domainurl/code-snippet/treegrid/scrolling-sticky-header" %} ## Scroll to selected row -You can scroll the treegrid content to the selected row position by using the [`rowSelected`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowselected) event. +Scroll the TreeGrid content to the selected row position by using the [rowSelected](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowselected) event. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -81,5 +80,4 @@ You can scroll the treegrid content to the selected row position by using the [` {% include code-snippet/treegrid/scrolling-cs2/app/App.tsx %} {% endhighlight %} {% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/scrolling-cs2" %} +{% previewsample "page.domainurl/code-snippet/treegrid/scrolling-cs2" %} \ No newline at end of file diff --git a/ej2-react/treegrid/searching.md b/ej2-react/treegrid/searching.md index 65d2212c5..2f924bb86 100644 --- a/ej2-react/treegrid/searching.md +++ b/ej2-react/treegrid/searching.md @@ -1,18 +1,19 @@ --- layout: post -title: Searching in React Treegrid component | Syncfusion -description: Learn here all about Searching in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Searching in React TreeGrid component | Syncfusion +description: Learn here all about Searching in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Searching platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Searching in React Treegrid component +# Searching in React TreeGrid -You can search records in a TreeGrid, by using the [`search`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#search) method with search key as a parameter. This also provides an option to integrate search text box in treegrid's toolbar by adding *search* item to the [`toolbar`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbar). +Search records by calling the [search](https://ej2.syncfusion.com/react/documentation/api/treegrid/#search) method with a search key. A search text box can also be placed in the TreeGrid toolbar by adding the search item to the [toolbar](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbar). -To search records, inject the **Filter** module in the grid. +To enable searching, inject the **Filter** + module into the TreeGrid. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -27,7 +28,7 @@ To search records, inject the **Filter** module in the grid. ## Initial search -To apply search at initial rendering, set the [`fields`](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettings/#fields), **operator**, [`key`](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettings/#key), and [`ignoreCase`](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettings/#ignorecase) in the [`searchSettings`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#searchsettings). +Apply search on initial render by setting [fields](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettings/#fields), `operator`, [key](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettings/#key), and [ignoreCase](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettings/#ignorecase) in [searchSettings](https://ej2.syncfusion.com/react/documentation/api/treegrid/#searchsettings). {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -40,27 +41,27 @@ To apply search at initial rendering, set the [`fields`](https://ej2.syncfusion. {% previewsample "page.domainurl/code-snippet/treegrid/searching-cs2" %} -> By default, treegrid searches all the bound column values. To customize this behavior define the [`searchSettings.fields`](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettingsModel/#fields) property. +> By default, searching targets all bound column values. To customize this behavior define the [searchSettings.fields](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettingsModel/#fields) property. ## Search operators -The search operator can be defined in the [`searchSettings.operator`](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettingsModel/#operator) property to configure specific searching. +Configure the operator in [searchSettings.operator](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettingsModel/#operator) to control how matching is performed. The following operators are supported in searching: -Operator |Description +Operator | Description -----|----- -startsWith |Checks whether a value begins with the specified value. -endsWith |Checks whether a value ends with the specified value. -contains |Checks whether a value contains the specified value. -equal |Checks whether a value is equal to the specified value. -notEqual |Checks for values not equal to the specified value. +startsWith | Checks whether a value begins with the specified value. +endsWith | Checks whether a value ends with the specified value. +contains | Checks whether a value contains the specified value. +equal | Checks whether a value is equal to the specified value. +notEqual | Checks for values not equal to the specified value. -> By default, the [`searchSettings.operator`](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettingsModel/#operator) value is *contains*. +> By default, the [searchSettings.operator](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettingsModel/#operator) value is **contains**. ## Search by external button -To search treegrid records from an external button, invoke the [`search`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#search) method. +Trigger a search from external UI by invoking the [search](https://ej2.syncfusion.com/react/documentation/api/treegrid/#search) method. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -73,9 +74,9 @@ To search treegrid records from an external button, invoke the [`search`](https: {% previewsample "page.domainurl/code-snippet/treegrid/searching-cs3" %}} -## Search Specific Columns +## Search specific columns -By default, treegrid searches all visible columns. You can search specific columns by defining the specific column's field names in the [`searchSettings.fields`](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettingsModel/#fields) property. +By default, searching targets all visible columns. To search specific columns, list their field names in [searchSettings.fields](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettingsModel/#fields). {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -88,4 +89,4 @@ By default, treegrid searches all visible columns. You can search specific colum {% previewsample "page.domainurl/code-snippet/treegrid/searching-cs4" %} -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour for key capabilities. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/selection/cell-selection.md b/ej2-react/treegrid/selection/cell-selection.md index febe04275..fb08816c1 100644 --- a/ej2-react/treegrid/selection/cell-selection.md +++ b/ej2-react/treegrid/selection/cell-selection.md @@ -10,14 +10,13 @@ domainurl: ##DomainURL## # Cell selection in React Treegrid component -Cell Selection can be done through simple Mouse down or Arrow keys(up, down, left and right). +Cells can be selected using mouse drag or arrow keys (Up, Down, Left, Right). -TreeGrid supports two types of cell selection mode which can be set by using [`selectionSettings.cellSelectionMode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/selectionSettings/#cellselectionmode). They are: +TreeGrid provides two cell selection modes configured through [selectionSettings.cellSelectionMode](https://ej2.syncfusion.com/react/documentation/api/treegrid/selectionSettings/#cellselectionmode): -* **Flow** - It is set by default. -Select range of cells between the start index and end index which includes in between cells of rows. -* **Box** - Select range of cells within the start and end column indexes which includes -in between cells of rows within the range. + +* **Flow** (default): Select range of cells between the start index and end index which includes in between cells of rows. +* **Box** - Select range of cells within the start and end column indexes which includes in between cells of rows within the range. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -28,4 +27,4 @@ in between cells of rows within the range. {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/treegrid/selection-cs1" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/treegrid/selection-cs1" %} \ No newline at end of file diff --git a/ej2-react/treegrid/selection/check-box-selection.md b/ej2-react/treegrid/selection/check-box-selection.md index f1e42797e..993716fa1 100644 --- a/ej2-react/treegrid/selection/check-box-selection.md +++ b/ej2-react/treegrid/selection/check-box-selection.md @@ -1,18 +1,18 @@ --- layout: post -title: Check box selection in React Treegrid component | Syncfusion -description: Learn here all about Check box selection in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Check box selection in React TreeGrid component | Syncfusion +description: Learn here all about Check box selection in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Check box selection platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Check box selection in React Treegrid component +# Check box selection in React TreeGrid -Checkbox Selection provides an option to select multiple TreeGrid records with help of checkbox in each row. +Checkbox selection enables selecting multiple TreeGrid records using a checkbox in each row. -To render checkbox in each treegrid row, you need to use checkbox column with type as **CheckBox** using column [`type`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#type) property. +To render a checkbox in each TreeGrid row, add a column with the [type](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#type) property set to **CheckBox**. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -23,20 +23,19 @@ To render checkbox in each treegrid row, you need to use checkbox column with ty {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/treegrid/selection-cs2" %} +{% previewsample "page.domainurl/code-snippet/treegrid/selection-cs2" %} -> By default selection is allowed by clicking a treegrid row or checkbox in that row. To allow Selection only through checkbox, you can set -[`selectionSettings.checkboxOnly`](https://ej2.syncfusion.com/react/documentation/api/treegrid/selectionSettings/#checkboxonly) property to **true**. -> Selection can be persisted on all the operations -using [`selectionSettings.persistSelection`](https://ej2.syncfusion.com/react/documentation/api/treegrid/selectionSettings/#persistselection) property. -For persisting selection on the TreeGrid, any one of the column should be defined as a primary key using [`columns.isPrimaryKey`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#isprimarykey) property. +> By default, selection is allowed by clicking a TreeGrid row or its checkbox. To allow selection only through checkboxes, set [selectionSettings.checkboxOnly](https://ej2.syncfusion.com/react/documentation/api/treegrid/selectionSettings/#checkboxonly) to **true**. +> Selection can be persisted on all the operations using [selectionSettings.persistSelection](https://ej2.syncfusion.com/react/documentation/api/treegrid/selectionSettings/#persistselection). To enable persistence, define at least one column as a primary key using [columns.isPrimaryKey](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#isprimarykey) property. ## Checkbox selection mode -In checkbox selection, selection can also be done by clicking on rows. This selection provides two types of Checkbox Selection mode which can be set by using the following API, [`selectionSettings.checkboxMode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/selectionSettings/#checkboxmode). The modes are; +In checkbox selection, rows can also be selected by clicking anywhere on the row. Configure the behavior using [selectionSettings.checkboxMode](https://ej2.syncfusion.com/react/documentation/api/treegrid/selectionSettings/#checkboxmode). -* **Default**: This is the default value of the checkboxMode. In this mode, user can select multiple rows by clicking rows one by one. -* **ResetOnRowClick**: In ResetOnRowClick mode, when user clicks on a row it will reset previously selected row. Also you can perform multiple-selection in this mode by press and hold CTRL key and click the desired rows. To select range of rows, press and hold the SHIFT key and click the rows. +**Modes:** + +* **Default**: Multiple rows can be selected by clicking rows one by one. +* **ResetOnRowClick**: Clicking a row clears the previously selected rows. Multiple selection is still available by holding Ctrl and clicking additional rows. To select a contiguous range, hold Shift and click the end row. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -47,6 +46,6 @@ In checkbox selection, selection can also be done by clicking on rows. This sele {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/treegrid/selection-cs3" %} +{% previewsample "page.domainurl/code-snippet/treegrid/selection-cs3" %} - > Checkbox Selection feature is intended for row selection only; it is not compatible with cell selection mode. \ No newline at end of file +> Checkbox selection applies to row selection only and is not compatible with cell selection mode. \ No newline at end of file diff --git a/ej2-react/treegrid/selection/row-selection.md b/ej2-react/treegrid/selection/row-selection.md index efcd3f1a5..441428730 100644 --- a/ej2-react/treegrid/selection/row-selection.md +++ b/ej2-react/treegrid/selection/row-selection.md @@ -1,18 +1,18 @@ --- layout: post -title: Row selection in React Treegrid component | Syncfusion -description: Learn here all about Row selection in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Row selection in React TreeGrid component | Syncfusion +description: Learn here all about Row selection in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Row selection platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Row selection in React Treegrid component +# Row selection in React TreeGrid ## Select row at initial rendering -To select a row at initial rendering, set the [`selectedRowIndex`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#selectedrowindex) value. +Select a row during initial render by setting the [selectedRowIndex](https://ej2.syncfusion.com/react/documentation/api/treegrid/#selectedrowindex) property. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -23,11 +23,11 @@ To select a row at initial rendering, set the [`selectedRowIndex`](https://ej2.s {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/treegrid/selection-cs4" %} +{% previewsample "page.domainurl/code-snippet/treegrid/selection-cs4" %} ## Get selected row indexes -You can get the selected row indexes by using the [`getSelectedRowIndexes`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#getselectedrowindexes) method. +Retrieve the selected row indexes using the [getSelectedRowIndexes](https://ej2.syncfusion.com/react/documentation/api/treegrid/#getselectedrowindexes) method. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -38,13 +38,13 @@ You can get the selected row indexes by using the [`getSelectedRowIndexes`](http {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/treegrid/selection-cs5" %} +{% previewsample "page.domainurl/code-snippet/treegrid/selection-cs5" %} ## Multiple selection based on condition -You can select multiple treegrid rows based on condition by using the [`selectRows`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#selectrows) method. +Select multiple TreeGrid rows based on a condition using the [selectRows](https://ej2.syncfusion.com/react/documentation/api/treegrid/#selectrows) method. -In the following code, the rows which contains *taskID* value as *3* and *5* are selected at initial rendering. +In the following example, rows with a *taskID* value of *3* and *5* are selected during initial render. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -55,11 +55,11 @@ In the following code, the rows which contains *taskID* value as *3* and *5* are {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/treegrid/selection-cs6" %} +{% previewsample "page.domainurl/code-snippet/treegrid/selection-cs6" %} ## Toggle selection -The Toggle selection allows to perform selection and unselection of the particular row or cell. To enable toggle selection, set [`enableToggle`](https://ej2.syncfusion.com/react/documentation/api/treegrid/selectionSettings/#enable toggle) property of the selectionSettings as true. If you click on the selected row or cell then it will be unselected and vice versa. +Toggle selection enables selecting and unselecting a specific row or cell. Enable this behavior by setting [selectionSettings.enableToggle](https://ej2.syncfusion.com/react/documentation/api/treegrid/selectionSettings/#enabletoggle) to true. Clicking an already selected row or cell will unselect it, and clicking an unselected target will select it. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -70,6 +70,6 @@ The Toggle selection allows to perform selection and unselection of the particul {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/treegrid/selection-cs7" %} +{% previewsample "page.domainurl/code-snippet/treegrid/selection-cs7" %} ->If multi selection is enabled, then first click on any selected row (without pressing Ctrl key), it will clear the multi selection and in second click on the same row, it will be unselected. \ No newline at end of file +> When multiple selection is enabled, clicking any selected row (without holding Ctrl key) clears the current selection. Clicking the same row again toggles its selection state off. \ No newline at end of file diff --git a/ej2-react/treegrid/selection/selection.md b/ej2-react/treegrid/selection/selection.md index fa0ade01b..720d57fee 100644 --- a/ej2-react/treegrid/selection/selection.md +++ b/ej2-react/treegrid/selection/selection.md @@ -1,27 +1,27 @@ --- layout: post -title: Selection in React Treegrid component | Syncfusion -description: Learn here all about Selection in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Selection in React TreeGrid component | Syncfusion +description: Learn here all about Selection in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Selection platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Selection in React Treegrid component +# Selection in React TreeGrid -Selection provides an option to highlight a row or cell. Selection can be done through simple Mouse down or Arrow keys.To disable selection in the TreeGrid, set the [`allowSelection`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowselection) to **false**. +Selection highlights a row or a cell. Selection can be performed using mouse click/drag or arrow keys. To disable selection in the TreeGrid, set [allowSelection](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowselection) to **false**. -To get start quickly with Selection, you can check on this video: +For a quick overview of selection, refer to the following video: {% youtube "https://www.youtube.com/watch?v=2pAN-4v7E4E" %} -The treegrid supports two types of selection that can be set by using the [`selectionSettings.type`](https://ej2.syncfusion.com/react/documentation/api/treegrid/selectionSettings/#type).They are: +Two selection types are available and can be configured using [selectionSettings.type](https://ej2.syncfusion.com/react/documentation/api/treegrid/selectionSettings/#type): -* **Single** - It is set by default. Allows you to select only a single row or cell. -* **Multiple** - Allows you to select multiple rows or cells. -To perform the multi-selection, press and hold CTRL key and click the desired rows or cells. -To select range of rows or cells, press and hold the SHIFT key and click the rows or cells. +* **Single** (default): Allows selection of a single row or cell. +* **Multiple**: Allows selection of multiple rows or cells. + +For multi-selection, hold Ctrl key and click the desired rows or cells. To select a contiguous range, hold Shift key and click the start and end targets. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -32,15 +32,15 @@ To select range of rows or cells, press and hold the SHIFT key and click the row {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/treegrid/selection-cs8" %} +{% previewsample "page.domainurl/code-snippet/treegrid/selection-cs8" %} ## Selection mode -TreeGrid supports three types of selection mode which can be set by using [`selectionSettings.mode`](https://ej2.syncfusion.com/react/documentation/api/treegrid/selectionSettings/#mode). They are: +TreeGrid supports three selection modes configured via [selectionSettings.mode](https://ej2.syncfusion.com/react/documentation/api/treegrid/selectionSettings/#mode): -* **Row** - It is set by default. Allows you to select rows only. -* **Cell** - Allows you to select cells only. -* **Both** - Allows you to select rows and cells at the same time. +* **Row** (default): Selects rows only. +* **Cell**: Selects cells only. +* **Both**: Allows selecting rows and cells at the same time. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -51,18 +51,18 @@ TreeGrid supports three types of selection mode which can be set by using [`sele {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/treegrid/selection-cs9" %} +{% previewsample "page.domainurl/code-snippet/treegrid/selection-cs9" %} ## Touch interaction -When you tap a treegrid row on touchscreen device, the tapped row is selected. It also shows a popup ![Multi Row selection](images/selection.jpg) for multi-row selection. To select multiple rows or cells, tap the popup![Multi Row or Cells](images/mselection.jpg) and then tap the desired rows or cells. +On touch devices, tapping a row selects it. A floating menu ![Multi Row selection](images/selection.jpg) enables multi-row selection. To select multiple rows or cells, tap the menu ![Multi Row or Cells](images/mselection.jpg), then tap the desired targets. -> Multi-selection requires the selection [`type`](https://ej2.syncfusion.com/react/documentation/api/treegrid/selectionSettings/#type) to be **Multiple**. +> Multi-selection requires [selectionSettings.type](https://ej2.syncfusion.com/react/documentation/api/treegrid/selectionSettings/#type) set to **Multiple**. -The following screenshot represents a treegrid touch selection in the device. +The following screenshot illustrates touch selection on a device. Touch interaction -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file +> For feature highlights, see the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour. Examples are available in the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) demos showcasing data presentation and manipulation. \ No newline at end of file diff --git a/ej2-react/treegrid/sorting.md b/ej2-react/treegrid/sorting.md index 67b8c565b..3f1213aed 100644 --- a/ej2-react/treegrid/sorting.md +++ b/ej2-react/treegrid/sorting.md @@ -1,22 +1,22 @@ --- layout: post -title: Sorting in React Treegrid component | Syncfusion -description: Learn here all about Sorting in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. +title: Sorting in React TreeGrid component | Syncfusion +description: Learn here all about Sorting in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. control: Sorting platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Sorting in React Treegrid component +# Sorting in React TreeGrid -Sorting enables you to sort data in the *Ascending* or *Descending* order. To sort a column, click the column header. +Sorting arranges data in **Ascending** or **Descending** order. Click a column header to sort that column. -To sort multiple columns, press and hold the CTRL key and click the column header. You can clear sorting of any one of the multi-sorted columns by pressing and holding the SHIFT key and clicking the specific column header. +For multi-column sorting, press and hold CTRL and then click additional column headers. To clear sorting for a specific column in a multi-sort state, press and hold SHIFT and click that column header. -To enable sorting in the TreeGrid, set the [`allowSorting`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowsorting) to true. Sorting options can be configured through the [`sortSettings`](https://ej2.syncfusion.com/react/documentation/api/treegrid/sortSettings). +Enable sorting in the TreeGrid by setting [allowSorting](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowsorting) to true. Sorting options are configured through [sortSettings](https://ej2.syncfusion.com/react/documentation/api/treegrid/sortSettings/). -To use Sorting, inject **Sort** module in TreeGrid. +To use sorting, inject the **Sort** module in the TreeGrid. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -29,13 +29,13 @@ To use Sorting, inject **Sort** module in TreeGrid. {% previewsample "page.domainurl/code-snippet/treegrid/sorting-cs1" %} -> * TreeGrid columns are sorted in the **Ascending** order. If you click the already sorted column, the sort direction toggles. -> * You can apply and clear sorting by invoking [`sortByColumn`](https://ej2.syncfusion.com/react/documentation/api/treegrid#sortbycolumn) and [`clearSorting`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#clearsorting) methods. -> * To disable sorting for a particular column, set the [`columns.allowSorting`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#allowSorting) to *false*. +> * Columns are sorted in ascending order by default. Clicking an already sorted column toggles the sort direction. +> * Sorting can be applied or cleared by invoking [sortByColumn](https://ej2.syncfusion.com/react/documentation/api/treegrid/#sortbycolumn) and [clearSorting](https://ej2.syncfusion.com/react/documentation/api/treegrid/#clearsorting). +> * To disable sorting for a particular column, set [columns.allowSorting](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#allowsorting) to **false**. ## Initial Sort -To sort at initial rendering, set the [`field`](https://ej2.syncfusion.com/react/documentation/api/treegrid/sortDescriptorModel/#field) and [`direction`](https://ej2.syncfusion.com/react/documentation/api/treegrid/sortDescriptorModel/#direction) in the [`sortSettings.columns`](https://ej2.syncfusion.com/react/documentation/api/treegrid/sortSettings/#columns). +To sort at initial render, set [field](https://ej2.syncfusion.com/react/documentation/api/treegrid/sortDescriptorModel/#field) and [direction](https://ej2.syncfusion.com/react/documentation/api/treegrid/sortDescriptorModel/#direction) in [sortSettings.columns](https://ej2.syncfusion.com/react/documentation/api/treegrid/sortSettings/#columns). {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -50,7 +50,7 @@ To sort at initial rendering, set the [`field`](https://ej2.syncfusion.com/react ## Sorting Events -During the sort action, the treegrid component triggers two events. The [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actionbegin) event triggers before the sort action starts, and the [`actionComplete`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actioncomplete) event triggers after the sort action is completed. Using these events you can perform the needed actions. +During sorting, the TreeGrid triggers two events: [actionBegin](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actionbegin) (before sorting starts) and [actionComplete](https://ej2.syncfusion.com/react/documentation/api/treegrid/#actioncomplete) (after sorting completes). These events can be used to run custom logic. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -63,13 +63,13 @@ During the sort action, the treegrid component triggers two events. The [`action {% previewsample "page.domainurl/code-snippet/treegrid/sorting-cs3" %} -> The `args.requestType` is the current action name. For example, in sorting the `args.requestType` value is *sorting*. +> The `args.requestType` value indicates the current action. For sorting, `args.requestType` is **sorting**. ## Custom sort comparer -You can customize the default sort action for a column by defining the [`column.sortComparer`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#sortcomparer) property. The sort comparer function has the same functionality like [`Array.sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) sort comparer. +Customize the default sort behavior for a column by defining [column.sortComparer](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#sortcomparer). The comparer function follows the same pattern as [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort). -In the following example, custom sort comparer function was defined in the *Category* column. +In the following example, a custom comparer is defined for the Category column. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -82,13 +82,14 @@ In the following example, custom sort comparer function was defined in the *Cate {% previewsample "page.domainurl/code-snippet/treegrid/sorting-cs4" %} -> The sort comparer function will work only for the local data. +> The sort comparer function applies only to local data. ### Display null values at bottom -By default, null values in a Syncfusion TreeGrid are displayed at the top when sorting in descending order and at the bottom when sorting in ascending order. However, there may be scenarios where you want to always display null values at the bottom of the TreeGrid regardless of the sort direction. This can be achieved by utilizing the [column.sortComparer](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#sortcomparer) method. This feature is particularly useful when working with data sets where null values might need to be clearly separated from actual data entries. +By default, null values appear at the top when sorting in descending order and at the bottom when sorting in ascending order. To always place null values at the bottom regardless of sort direction, use [column.sortComparer](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#sortcomparer). This feature is particularly useful when working with data sets where null values might need to be clearly separated from actual data entries. -The example below demonstrates how to display null date values at bottom of the TreeGrid row while sorting the **StartDate** column in both ways. + +The example below places null date values at the bottom of the TreeGrid when sorting the **StartDate** column in either direction. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -109,12 +110,12 @@ The example below demonstrates how to display null date values at bottom of the ## Touch Interaction -When you tap the treegrid header on touchscreen devices, the selected column header is sorted. A popup ![Multi column sorting](images/sorting.jpg) is displayed for multi-column sorting. To sort multiple columns, tap the popup![Multi sorting](images/msorting.jpg), and then tap the desired treegrid headers. +On touch devices, tapping a column header sorts that column. A popup ![Multi column sorting](images/sorting.jpg) indicates multi-column sorting. For multi-column sorting, tap the popup ![Multi sorting](images/msorting.jpg), then tap additional headers. -The following screenshot shows treegrid touch sorting. +The following image shows TreeGrid touch sorting. -Touch Sorting +TreeGrid touch sorting example -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour for key capabilities. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/state-persistence/state-persistence.md b/ej2-react/treegrid/state-persistence/state-persistence.md index 9e33ace8d..927d8804c 100644 --- a/ej2-react/treegrid/state-persistence/state-persistence.md +++ b/ej2-react/treegrid/state-persistence/state-persistence.md @@ -1,24 +1,22 @@ --- layout: post -title: State persistence in React Treegrid component | Syncfusion -description: Learn here all about State persistence in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: State persistence +title: State persistence in React TreeGrid | Syncfusion +description: Learn here all about State persistence in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. +control: State persistence platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# State persistence in React Treegrid component +# State persistence in React TreeGrid -State persistence refers to the TreeGrid's state maintained in the browser's [`localStorage`](https://www.w3schools.com/html/html5_webstorage.asp#) even if the browser is refreshed or if you move to the next page within the browser. +State persistence maintains the TreeGrid state in the browser’s [localStorage](https://www.w3schools.com/html/html5_webstorage.asp#) across page refreshes and intra-tab navigation. -State persistence stores treegrid’s model object in the local storage when the [`enablePersistence`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enablepersistence) is defined as true. - -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. +TreeGrid stores its model in local storage when [enablePersistence](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enablepersistence) is set to **true**. ## Get or set local storage value -If the [enablePersistence](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enablepersistence) property is set to true, the treegrid property value is saved in the **window.localStorage** for reference. You can get or set the localStorage value by using the **getItem** and **setItem** method in the **window.localStorage**. +When [enablePersistence](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enablepersistence) is true, TreeGrid property values are saved in `window.localStorage`. Use `getItem` and `setItem` to retrieve or assign the stored model. ```ts // Get the TreeGrid model. @@ -29,4 +27,6 @@ If the [enablePersistence](https://ej2.syncfusion.com/react/documentation/api/tr ```ts // Set the TreeGrid model. window.localStorage.setItem('treegridTreeGrid', JSON.stringify(model)); //"treegridTreeGrid" is component name + component id. -``` \ No newline at end of file +``` + +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) for data presentation and manipulation options. diff --git a/ej2-react/treegrid/tool-bar/tool-bar-items.md b/ej2-react/treegrid/tool-bar/tool-bar-items.md index 28f842fd4..276595a6a 100644 --- a/ej2-react/treegrid/tool-bar/tool-bar-items.md +++ b/ej2-react/treegrid/tool-bar/tool-bar-items.md @@ -1,38 +1,35 @@ --- layout: post -title: Tool bar items in React Treegrid component | Syncfusion -description: Learn here all about Tool bar items in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Tool bar items +title: Tool bar items in React TreeGrid component | Syncfusion +description: Learn here all about Tool bar items in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. +control: Tool bar items platform: ej2-react documentation: ug domainurl: ##DomainURL## --- - -# Tool bar items in React Treegrid component +# Tool bar items in React TreeGrid ## Built-in toolbar items -Built-in toolbar items execute standard actions of the treegrid, and it can be added by defining the [`toolbar`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbar) -as a collection of built-in items. It renders the button with icon and text. - -The following table shows built-in toolbar items and its actions. +Built-in toolbar items execute standard TreeGrid actions and can be added by defining the [toolbar](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbar) property as a collection of built-in items. Each item renders as a button with an icon and text. +The following table lists built-in toolbar items and their actions. | Built-in Toolbar Items | Actions | |------------------------|---------| -| ExpandAll | Expands all the rows.| -| CollapseAll | Collapses all the rows.| -| Add | Adds a new record.| -| Edit | Edits the selected record.| -| Update | Updates the edited record.| -| Delete | Deletes the selected record.| -| Cancel | Cancels the edit state.| -| Search | Searches the records by the given key.| -| Print | Prints the treegrid.| -| ExcelExport | Exports the treegrid to Excel.| -| PdfExport | Exports the treegrid to PDF.| -| WordExport | Exports the treegrid to Word.| -| Indent | Indents the record to one level of hierarchy.| -| Outdent | Outdents the record to one level of hierarchy.| +| ExpandAll | Expands all rows. | +| CollapseAll | Collapses all rows. | +| Add | Adds a new record. | +| Edit | Edits the selected record. | +| Update | Updates the edited record. | +| Delete | Deletes the selected record. | +| Cancel | Cancels the edit state. | +| Search | Searches records by the given key. | +| Print | Prints the TreeGrid. | +| ExcelExport | Exports the TreeGrid to Excel. | +| PdfExport | Exports the TreeGrid to PDF. | +| WordExport | Exports the TreeGrid to Word. | +| Indent | Indents the record one hierarchy level. | +| Outdent | Outdents the record one hierarchy level. | {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -42,16 +39,15 @@ The following table shows built-in toolbar items and its actions. {% include code-snippet/treegrid/toolbar-cs1/app/App.tsx %} {% endhighlight %} {% endtabs %} +{% previewsample "page.domainurl/code-snippet/treegrid/toolbar-cs1" %} - {% previewsample "page.domainurl/code-snippet/treegrid/toolbar-cs1" %} - -> * The [`toolbar`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbar) has options to define both built-in and custom toolbar items. +> The [toolbar](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbar) supports both built-in and custom toolbar items. ## Custom toolbar items -Custom toolbar items can be added by defining the [`toolbar`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbar) as a collection of [`ItemModels`](https://ej2.syncfusion.com/react/documentation/api/toolbar/itemModel/). Actions for this customized toolbar items are defined in the [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) event. +Custom toolbar items can be added by defining the [toolbar](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbar) property as a collection of [ItemModels](https://ej2.syncfusion.com/react/documentation/api/toolbar/itemModel/). Actions for custom items are handled in the [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbarclick) event. -By default, Custom toolbar items are in position **Left**. You can change the position by using the [`align`](https://ej2.syncfusion.com/react/documentation/api/toolbar/itemModel/#align) property. In the below sample, we have applied position **Right** for the **Quick Filter** toolbar item. +By default, custom items are aligned to the **Left**. The position can be changed using the [align](https://ej2.syncfusion.com/react/documentation/api/toolbar/itemModel/#align) property. In the sample below, the position is set to **Right** for the **Quick Filter** toolbar item. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -61,17 +57,15 @@ By default, Custom toolbar items are in position **Left**. You can change the po {% include code-snippet/treegrid/toolbar-cs2/app/App.tsx %} {% endhighlight %} {% endtabs %} +{% previewsample "page.domainurl/code-snippet/treegrid/toolbar-cs2" %} - {% previewsample "page.domainurl/code-snippet/treegrid/toolbar-cs2" %} - -> * The [`toolbar`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbar) has options to define both built-in and custom toolbar items. -> * If a toolbar item does not match the built-in items, it will be treated as a custom toolbar item. +> * The [toolbar](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbar) supports both built-in and custom items. +> * Any item that does not match a built-in name is treated as a custom toolbar item. ## Built-in and custom items in toolbar -TreeGrid have an option to use both built-in and custom toolbar items at same time. - -In the below example, **ExpandAll**, **CollapseAll** are built-in toolbar items and *Click* is custom toolbar item. +TreeGrid supports using built-in and custom toolbar items together. +In the example below, **ExpandAll** and **CollapseAll** are built-in items, and **Click** is a custom item. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -81,12 +75,11 @@ In the below example, **ExpandAll**, **CollapseAll** are built-in toolbar items {% include code-snippet/treegrid/toolbar-cs3/app/App.tsx %} {% endhighlight %} {% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/toolbar-cs3" %} +{% previewsample "page.domainurl/code-snippet/treegrid/toolbar-cs3" %} ## Enable or disable toolbar items -You can enable/disable toolbar items by using the `enableItems` method. +Enable or disable toolbar items programmatically using the `enableItems` method. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -96,5 +89,4 @@ You can enable/disable toolbar items by using the `enableItems` method. {% include code-snippet/treegrid/toolbar-cs4/app/App.tsx %} {% endhighlight %} {% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/toolbar-cs4" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/treegrid/toolbar-cs4" %} \ No newline at end of file diff --git a/ej2-react/treegrid/tool-bar/tool-bar.md b/ej2-react/treegrid/tool-bar/tool-bar.md index af6078e2c..739057a6a 100644 --- a/ej2-react/treegrid/tool-bar/tool-bar.md +++ b/ej2-react/treegrid/tool-bar/tool-bar.md @@ -1,17 +1,17 @@ --- layout: post -title: Tool bar in React Treegrid component | Syncfusion -description: Learn here all about Tool bar in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Tool bar +title: Tool bar in React TreeGrid | Syncfusion +description: Learn here all about Tool bar in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. +control: Tool bar platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Tool bar in React Treegrid component +# Tool bar in React TreeGrid -The TreeGrid provides ToolBar support to handle treegrid actions. The [`toolbar`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbar) property accepts either the collection of built-in toolbar items and [`ItemModel`](https://ej2.syncfusion.com/react/documentation/api/toolbar/itemModel/)objects for custom toolbar items or HTML element ID for toolbar template. +The TreeGrid provides toolbar support to handle TreeGrid actions. The [toolbar](https://ej2.syncfusion.com/react/documentation/api/TreeGrid/#toolbar) property accepts a collection of built-in toolbar items, [ItemModel](https://ej2.syncfusion.com/react/documentation/api/toolbar/itemModel/) objects for custom items, or an HTML element ID for a toolbar template. -To use ToolBar, inject **Toolbar** module in the treegrid. +To use the toolbar, inject the **Toolbar** module into the TreeGrid. -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/TreeGrid/TreeGrid-overview) to learn how to present and manipulate data. diff --git a/ej2-react/treegrid/treegrid-styling.md b/ej2-react/treegrid/treegrid-styling.md index 7a8a61f13..5c3fd4ad7 100644 --- a/ej2-react/treegrid/treegrid-styling.md +++ b/ej2-react/treegrid/treegrid-styling.md @@ -1,37 +1,37 @@ --- layout: post -title: Treegrid styling in React Treegrid component | Syncfusion -description: Learn here all about Treegrid styling in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Treegrid styling +title: TreeGrid styling in React TreeGrid | Syncfusion +description: Learn here all about TreeGrid styling in Syncfusion React TreeGrid of Syncfusion Essential JS 2 and more. +control: TreeGrid styling platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Treegrid styling in React Treegrid component +# TreeGrid styling in React TreeGrid -To modify the TreeGrid appearance, you need to override the default CSS of treegrid. Please find the list of CSS classes and its corresponding section in treegrid. Also, you have an option to create your own custom theme for all the React controls using our [`Theme Studio`](https://ej2.syncfusion.com/themestudio/?theme=material). +Modify the TreeGrid appearance by overriding its default CSS. The following table lists CSS classes and their corresponding sections in the TreeGrid. A custom theme for all React controls can be created using the [Theme Studio](https://ej2.syncfusion.com/themestudio/?theme=material). Section|CSS class|Purpose of CSS class -----|-----|----- -**Root**|e-treegrid|This classes are in this root element (div) of the treegrid control. -**Header**|e-gridheader|This class is added in the root element of header element. In this class, You can override thin line between header and content of the treegrid. -||e-table|This class is added at 'table' of the treegrid header. This CSS class makes table width as 100 %. -||e-columnheader|This class is added at 'tr' of the treegrid header. -||e-headercell|This class is added in 'th' element of treegrid header. You can override background color of header and border color. -||e-headercelldiv|This class is add in div which present 'th' element in the header. we recommend you to use the e-headercelldiv to override skeleton of header. -**Body**|e-gridcontent|This class is added at root of body content. This is to override background color of the body. -||e-table|This class is added to table of content. This CSS class makes table width as 100 %. -||e-altrow|This class is added to alternate rows of treegrid. This is to override alternate row color of the treegrid. -||e-rowcell|This class is added to all cells in the treegrid. This is to override cells appearance and styling. -||e-groupcaption|This class is added to the 'td' of group caption which is to change the background color of caption cell. -||e-selectionbackground|This class is added to rowcell's of the treegrid. This is override selection. -||e-hover|This class adds to row of treegrid, while hovering the treegrid rows. -**Pager**|e-pager|This class is added to root element of the pager. This to change appearance of the background color and color of font. -||e-pagercontainer|This class is added to numeric items of the pager. -||e-parentmsgbar|This class is added to pager info of the pager. -**Summary**|e-gridfooter|This class is added to root of the summary div. -||e-summaryrow|This class is added to rows of treegrid summary. -||e-summarycell|This class is added to cells of summary row. This to override background color of summary. +**Root**|e-treegrid|Applied to the root element (div) of the TreeGrid. +**Header**|e-gridheader|Applied to the header root element; customize the dividing line between header and content. +||e-table|Applied to the header table; sets the table width to 100%. +||e-columnheader|Applied to the table row (tr) in the header. +||e-headercell|Applied to the header cell (th); customize header background and border colors. +||e-headercelldiv|Applied to the div inside the header cell (th); recommended for customizing header structure and layout. +**Body**|e-gridcontent|Applied to the content root; customize the body background color. +||e-table|Applied to the content table; sets the table width to 100%. +||e-altrow|Applied to alternate rows; customize alternate row background color. +||e-rowcell|Applied to all data cells; customize cell appearance and styling. +||e-groupcaption|Applied to caption cells (td) in grouped rows; customize caption cell background color. +||e-selectionbackground|Applied to selected cells; customize selection styling. +||e-hover|Applied to rows on hover; customize hover styling. +**Pager**|e-pager|Applied to the pager root element; customize background and font color. +||e-pagercontainer|Applied to pager numeric items. +||e-parentmsgbar|Applied to the pager information area. +**Summary**|e-gridfooter|Applied to the summary (footer) root element. +||e-summaryrow|Applied to summary rows. +||e-summarycell|Applied to summary cells; customize summary background color. -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. \ No newline at end of file +> Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file diff --git a/ej2-react/treegrid/virtual-scroll.md b/ej2-react/treegrid/virtual-scroll.md index fa7ea6db2..ee2f4fa74 100644 --- a/ej2-react/treegrid/virtual-scroll.md +++ b/ej2-react/treegrid/virtual-scroll.md @@ -1,24 +1,24 @@ --- layout: post -title: Virtual scroll in React Treegrid component | Syncfusion -description: Learn here all about Virtual scroll in Syncfusion React Treegrid component of Syncfusion Essential JS 2 and more. -control: Virtual scroll +title: Virtual scroll in React TreeGrid | Syncfusion +description: Learn here all about Virtual scroll in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. +control: Virtual scroll platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Virtual scroll in React Treegrid component +# Virtual scroll in React TreeGrid -TreeGrid allows you to load large amount of data without performance degradation. To use virtualization, you need to inject `VirtualScrollService` in TreeGrid. +TreeGrid loads large data sets without performance degradation. To enable virtualization, inject `VirtualScrollService` in the TreeGrid. ## Row virtualization -Row virtualization allows you to load and render rows only in the content viewport. It is an alternative way of paging in which the rows will be appended while scrolling vertically. To setup the row virtualization, you need to define [`enableVirtualization`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enablevirtualization) as true and content height by [`height`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#height) property. +Row virtualization loads and renders only the rows within the content viewport. It serves as an alternative to paging; rows are appended during vertical scrolling. To set up row virtualization, set [enableVirtualization](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enablevirtualization) to true and define the content height using the [height](https://ej2.syncfusion.com/react/documentation/api/treegrid/#height) property. -The number of records displayed in the TreeGrid is determined implicitly by height of the content area and a buffer records will be maintained in the TreeGrid content in addition to the original set of rows. +The number of records displayed is determined by the content area height, and a buffer of records is maintained in the TreeGrid content in addition to the visible rows. -Expand and Collapse state of any child record will be persisted. +Expand and collapse state of any child record is persisted. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -28,40 +28,36 @@ Expand and Collapse state of any child record will be persisted. {% include code-snippet/treegrid/virtualscroll-cs1/app/App.tsx %} {% endhighlight %} {% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/virtualscroll-cs1" %} - - -### Limitations - -* Row virtual scrolling is not compatible with the following feature - 1. Batch editing - 2. Checkbox selection - 3. Detail template - 4. Row template - 5. Rowspan - 6. Autofill - -* It is necessary to set a static height for the component or its parent container when using row virtualization. The 100% height will work only if the component height is set to 100%, and its parent container has a static height. - -* When row virtual scrolling is activated, compatibility for copy-paste and drag-and-drop operations is limited to the data items visible in the current viewport of the tree grid. -* The cell-based selection is not supported for row virtual scrolling. -* Using different row heights with a template column, when the template height differs for each row, is not supported. -* Due to the element height limitation in browsers, the maximum number of records loaded by the tree grid is limited by the browser capability. -* The height of the tree grid content is calculated using the row height and total number of records in the data source and hence features which changes row height such as text wrapping are not supported. -* If you want to increase the row height to accommodate the content then you can specify the row height as below to ensure all the table rows are in same height. - - ```css - .e-treegrid .e-row { - height: 2em; - } - ``` +{% previewsample "page.domainurl/code-snippet/treegrid/virtualscroll-cs1" %} + +### Limitations + +* Row virtual scrolling is not compatible with the following features: + 1. Batch editing + 2. Checkbox selection + 3. Detail template + 4. Row template + 5. Rowspan + 6. Autofill + +* A static height must be set for the component or its parent container when using row virtualization. A 100% height works only if the component height is set to 100% and its parent container has a static height. +* When row virtual scrolling is active, copy-paste and drag-and-drop operations apply only to the data items visible in the current viewport. +* Cell-based selection is not supported with row virtual scrolling. +* Variable row heights caused by template columns are not supported when template heights differ per row. +* Due to browser element height limits, the maximum number of records loaded is constrained by browser capabilities. +* TreeGrid content height is calculated using row height and total record count; therefore, features that change row height (such as text wrapping) are not supported. +* To increase row height to accommodate content while keeping a consistent height across rows, specify a row height as shown below: +```css +.e-treegrid .e-row { + height: 2em; +} +``` ## Column virtualization -Column virtualization allows you to virtualize columns. It will render column only in the current view port and all other columns are rendered on demand during horizontal scrolling. - -To setup the column virtualization, set the [`enableVirtualization`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enablevirtualization) and [`enableColumnVirtualization`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enablecolumnvirtualization) properties as **true**. +Column virtualization renders only the columns within the current viewport, and other columns are rendered on demand during horizontal scrolling. + +To set up column virtualization, set both [enableVirtualization](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enablevirtualization) and [enableColumnVirtualization](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enablecolumnvirtualization) to **true**. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -71,35 +67,33 @@ To setup the column virtualization, set the [`enableVirtualization`](https://ej2 {% include code-snippet/treegrid/virtualscroll-cs2/app/App.tsx %} {% endhighlight %} {% endtabs %} - - {% previewsample "page.domainurl/code-snippet/treegrid/virtualscroll-cs2" %} - -> Column's [`width`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#width) is required for column virtualization. -If column's width is not defined then tree grid will consider its value as `200px`. - -### Limitations - -* While using column virtual scrolling, column width should be in pixel. Percentage values are not accepted. -* Selected column details are only retained within the viewport. When the next set of columns is loaded, the selection for previously visible columns is lost. -* The cell selection is not supported for column virtual scrolling. -* The **Ctrl + Home** and **Ctrl + End** keys are not supported when using column virtual scrolling. -* The following features are compatible with column virtualization and works only within the viewport: - 1. Column resizing - 2. Column reordering - 3. Auto-fit - 4. Print - 5. Clipboard - 6. Column menu - Column chooser, AutofitAll - -* Column virtual scrolling is not compatible with the following feature - 1. Colspan - 2. Batch editing - 3. Checkbox selection - 4. Column with infinite scrolling - 5. Stacked header - 6. Row template - 7. Detail template - 8. Autofill - 9. Column chooser - -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. +{% previewsample "page.domainurl/code-snippet/treegrid/virtualscroll-cs2" %} + +> Column's [width](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#width) is required for column virtualization. If a column width is not defined, TreeGrid considers `200px`. + +### Limitations + +* With column virtual scrolling, column width must be in pixels; percentage values are not supported. +* Selected column details are retained only within the viewport. When the next set of columns loads, selection for previously visible columns is cleared. +* Cell selection is not supported with column virtual scrolling. +* The keyboard shortcuts **Ctrl + Home** and **Ctrl + End** are not supported with column virtual scrolling. +* The following features are compatible with column virtualization and operate only within the viewport: + 1. Column resizing + 2. Column reordering + 3. Auto-fit + 4. Print + 5. Clipboard + 6. Column menu — Column chooser, AutofitAll + +* Column virtual scrolling is not compatible with the following features: + 1. Colspan + 2. Batch editing + 3. Checkbox selection + 4. Column with infinite scrolling + 5. Stacked header + 6. Row template + 7. Detail template + 8. Autofill + 9. Column chooser + +> Refer to the [React Tree Grid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React Tree Grid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file From 27817dd8450c885a4d52797f4f21f38672e5885a Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Wed, 8 Oct 2025 20:19:23 +0530 Subject: [PATCH 28/34] Integrated latest changes at 10-08-2025 7:31:10 PM --- ej2-react/chart/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ej2-react/chart/getting-started.md b/ej2-react/chart/getting-started.md index 666c58bf5..4791a6c98 100644 --- a/ej2-react/chart/getting-started.md +++ b/ej2-react/chart/getting-started.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## This section explains you the steps required to create a simple chart and demonstrate the basic usage of the chart control. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) To get start quickly with React Charts, you can check on this video: From bbb6311e246f35c69b2a7f43413b0d33793987a1 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Thu, 9 Oct 2025 20:06:30 +0530 Subject: [PATCH 29/34] Integrated latest changes at 10-09-2025 7:30:41 PM --- ej2-react-toc.html | 2 +- ej2-react/ai-coding-assistants/mcp-server.md | 11 +++++------ ej2-react/ai-coding-assistants/overview.md | 18 +++++++++--------- ej2-react/chart/chart-types/area.md | 1 + ej2-react/chart/chart-types/bar.md | 1 + ej2-react/chart/data-labels.md | 1 + ej2-react/chart/data-markers.md | 1 + ej2-react/chart/legend.md | 3 ++- ej2-react/chart/tool-tip.md | 5 +++-- ej2-react/diagram/getting-started.md | 2 +- ej2-react/gantt/getting-started.md | 2 +- ej2-react/grid/getting-started.md | 2 +- ej2-react/image-editor/annotation.md | 6 ++++++ ej2-react/image-editor/open-save.md | 4 ++++ ej2-react/introduction.md | 2 +- ej2-react/pivotview/getting-started.md | 2 +- ej2-react/schedule/getting-started.md | 2 +- 17 files changed, 40 insertions(+), 25 deletions(-) diff --git a/ej2-react-toc.html b/ej2-react-toc.html index 4a79dfb79..229612db3 100644 --- a/ej2-react-toc.html +++ b/ej2-react-toc.html @@ -20,7 +20,7 @@
  • -AI Coding Assistants +AI Coding Assistant
    • Overview
    • MCP Server
      • diff --git a/ej2-react/ai-coding-assistants/mcp-server.md b/ej2-react/ai-coding-assistants/mcp-server.md index bbbf7d313..bd190fadb 100644 --- a/ej2-react/ai-coding-assistants/mcp-server.md +++ b/ej2-react/ai-coding-assistants/mcp-server.md @@ -67,12 +67,11 @@ You need to add your [Syncfusion API key](https://syncfusion.com/account/api-key ### Syncfusion® Code Studio -* In [Code Studio](https://www.syncfusion.com/code-studio/), open MCP Marketplace, find `SyncfusionReactAssistant`, and click Install. -* When prompted, enter your [Syncfusion API key](https://syncfusion.com/account/api-key) and click Submit to register. -* It installs locally on your machine and appears in the Installed list. -* The server is ready for use in Code Studio. - -For additional details, see the Code Studio [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/mcp/marketplace). +* In [Code Studio](https://www.syncfusion.com/code-studio/), open MCP Marketplace and navigate to the `Custom Servers` tab. +* Enter the Server Name as `react-mcp`, choose Server Type as npm package, and set the NPM Package name to `@syncfusion/react-assistant`. +* Add an environment variable as `Syncfusion_API_Key` and value as your [Syncfusion API key](https://syncfusion.com/account/api-key), then click **Install Server**. +* Once installed, the server will appear in the User Installed Server list, and will be added to the **config.yaml** file. +* The server is now ready for use in Code Studio. For more details, refer to the Code Studio [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/mcp/customservers#npm-server). ### VS Code (GitHub Copilot MCP) diff --git a/ej2-react/ai-coding-assistants/overview.md b/ej2-react/ai-coding-assistants/overview.md index dd454da64..0c589a39c 100644 --- a/ej2-react/ai-coding-assistants/overview.md +++ b/ej2-react/ai-coding-assistants/overview.md @@ -1,18 +1,18 @@ --- layout: post -title: Syncfusion AI Coding Assistants Overview | Syncfusion -description: Learn how Syncfusion AI Coding Assistants boost React productivity by generating accurate code snippets, configuration examples, and contextual guidance. -control: Syncfusion AI Coding Assistants Overview +title: Syncfusion AI Coding Assistant Overview | Syncfusion +description: Learn how Syncfusion AI Coding Assistant boost React productivity by generating accurate code snippets, configuration examples, and contextual guidance. +control: Syncfusion AI Coding Assistant Overview platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Syncfusion® AI Coding Assistants Overview +# Syncfusion® AI Coding Assistant Overview -The **Syncfusion® AI Coding Assistants** are designed to streamline your development workflow when building React applications with Syncfusion® components. It uses contextual knowledge of the Syncfusion® component library to generate accurate code snippets, configuration examples, and guided explanations—minimizing documentation searches and maximizing productivity. +The **Syncfusion® AI Coding Assistant** are designed to streamline your development workflow when building React applications with Syncfusion® components. It uses contextual knowledge of the Syncfusion® component library to generate accurate code snippets, configuration examples, and guided explanations—minimizing documentation searches and maximizing productivity. -AI Coding Assistants: +AI Coding Assistant: * **The SyncfusionReactAssistant MCP Server** Processes advanced prompts and returns tailored code suggestions via [MCP-compatible clients](https://modelcontextprotocol.io/clients). @@ -21,7 +21,7 @@ AI Coding Assistants: ## Getting Started -To use the AI Coding Assistants, you need: +To use the AI Coding Assistant, you need: * A [Syncfusion® user account](https://www.syncfusion.com/account) * An active Syncfusion® license (any of the following): @@ -33,7 +33,7 @@ To use the AI Coding Assistants, you need: ## Unlimited Access -Syncfusion® offers unlimited access to the AI Coding Assistants, with no limitations on: +Syncfusion® offers unlimited access to the AI Coding Assistant, with no limitations on: * Number of requests * Components usage @@ -59,7 +59,7 @@ This ensures users can fully leverage Syncfusion® ## Privacy & Data Handling -The Syncfusion® AI Coding Assistants is designed with privacy in mind: +The Syncfusion® AI Coding Assistant is designed with privacy in mind: * The tools do not access your project files or workspace directly. * User prompts are not stored by any of the tools or used for any other purpose. diff --git a/ej2-react/chart/chart-types/area.md b/ej2-react/chart/chart-types/area.md index 121db5d19..bb136dd60 100644 --- a/ej2-react/chart/chart-types/area.md +++ b/ej2-react/chart/chart-types/area.md @@ -280,3 +280,4 @@ The [`pointRender`](https://ej2.syncfusion.com/react/documentation/api/chart/iPo * [Data label](./data-labels/) * [Tooltip](./tool-tip/) +* [Use SVG Linear Gradient](https://support.syncfusion.com/kb/article/21513/how-to-use-svg-linear-gradient-for-react-area-chart-with-css) \ No newline at end of file diff --git a/ej2-react/chart/chart-types/bar.md b/ej2-react/chart/chart-types/bar.md index efed96824..2acb7cb45 100644 --- a/ej2-react/chart/chart-types/bar.md +++ b/ej2-react/chart/chart-types/bar.md @@ -408,3 +408,4 @@ The [`pointRender`](https://ej2.syncfusion.com/react/documentation/api/chart/iPo * [Data label](./data-labels/) * [Tooltip](./tool-tip/) +* [Color a Particular Bar](https://support.syncfusion.com/kb/article/21515/how-to-color-a-particular-bar-in-react-chart-component) \ No newline at end of file diff --git a/ej2-react/chart/data-labels.md b/ej2-react/chart/data-labels.md index f38e19212..2ae94c627 100644 --- a/ej2-react/chart/data-labels.md +++ b/ej2-react/chart/data-labels.md @@ -284,3 +284,4 @@ You can calculate the percentage value based on the sum for each series using th * [Show total stacking values in data label](./how-to/#show-the-total-value-for-stacking-series-in-data-label) * [Prevent the data label when the data value is 0](./how-to/#prevent-the-data-label-when-the-data-value-is-0) +* [Display Data Labels in Lakh](https://support.syncfusion.com/kb/article/21250/how-to-display-data-labels-in-lakh-in-react-accumulation-chart) \ No newline at end of file diff --git a/ej2-react/chart/data-markers.md b/ej2-react/chart/data-markers.md index e7281dbc2..4df0dcfc1 100644 --- a/ej2-react/chart/data-markers.md +++ b/ej2-react/chart/data-markers.md @@ -147,3 +147,4 @@ Marker can be filled with the series color by setting the [`isFilled`](https://e ## See Also * [Customize the marker with different shape](./how-to/#customize-the-marker-with-different-shape) +* [Highlight a Marker in Multicolored Line Series](https://support.syncfusion.com/kb/article/21514/how-to-highlight-a-specific-marker-in-a-multicolored-line-series-in-react-chart) diff --git a/ej2-react/chart/legend.md b/ej2-react/chart/legend.md index f6b0f381f..673729733 100644 --- a/ej2-react/chart/legend.md +++ b/ej2-react/chart/legend.md @@ -398,6 +398,7 @@ The [`layout`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSe >Note: To use legend feature, we need to inject `Legend` module into the `services`. -## See also +## See Also * [Customize each shape in legend](./how-to/#customize-each-shape-in-legend) +* [Add Custom Legend Using SVG](https://support.syncfusion.com/kb/article/21530/how-to-add-custom-legend-using-svg-in-react-chart) \ No newline at end of file diff --git a/ej2-react/chart/tool-tip.md b/ej2-react/chart/tool-tip.md index 129e3ca61..13ef3d699 100644 --- a/ej2-react/chart/tool-tip.md +++ b/ej2-react/chart/tool-tip.md @@ -212,5 +212,6 @@ The [`showNearestTooltip`](https://ej2.syncfusion.com/react/documentation/api/ch ## See also -* [Format the tooltip value](./how-to/tool-tip-format) -* [Create a table in tooltip](./how-to/tool-tip-table) \ No newline at end of file +* [Format the Tooltip Value](./how-to/tool-tip-format) +* [Create a Table in Tooltip](./how-to/tool-tip-table) +* [Show Tooltip Template on Button Click](https://support.syncfusion.com/kb/article/21534/how-to-show-tooltip-template-on-button-click-using-react-chart) \ No newline at end of file diff --git a/ej2-react/diagram/getting-started.md b/ej2-react/diagram/getting-started.md index 557404482..ca185a91f 100644 --- a/ej2-react/diagram/getting-started.md +++ b/ej2-react/diagram/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This section explains the steps required to create a simple diagram and demonstrates the basic usage of the diagram control in React applications. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) ## Prerequisites diff --git a/ej2-react/gantt/getting-started.md b/ej2-react/gantt/getting-started.md index 8f88f5f9b..6c9bacc79 100644 --- a/ej2-react/gantt/getting-started.md +++ b/ej2-react/gantt/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This section explains you the steps required to create a simple Essential® JS 2 Gantt in a React application and demonstrates its basic features. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Developer Tools. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Developer Tools](https://ej2.syncfusion.com/react/documentation/ai-developer-tools/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) To get started quickly with React Gantt Chart the following video explains the project configuration and basic Gantt chart features behaviors: diff --git a/ej2-react/grid/getting-started.md b/ej2-react/grid/getting-started.md index 563f55f36..9d8ac6cdb 100644 --- a/ej2-react/grid/getting-started.md +++ b/ej2-react/grid/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This section explains you the steps required to create a simple Grid and demonstrate the basic usage of the Grid component in React environment. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) To get start quickly with React Grid, you can check on this video: diff --git a/ej2-react/image-editor/annotation.md b/ej2-react/image-editor/annotation.md index 301f467a8..2cbeba64c 100644 --- a/ej2-react/image-editor/annotation.md +++ b/ej2-react/image-editor/annotation.md @@ -451,3 +451,9 @@ In the following example, you can use the `drawImage` method in the button click {% endtabs %} {% previewsample "page.domainurl/code-snippet/image-editor/default-cs37" %} + +## See Also + +* [Type Text After Adding Annotation](https://support.syncfusion.com/kb/article/21312/how-to-type-text-after-adding-annotation-in-react-image-editor) +* [Change 'Enter Text' Placeholder](https://support.syncfusion.com/kb/article/21310/how-to-change-enter-text-placeholder-in-react-image-editor) +* [Draw a Custom Circle](https://support.syncfusion.com/kb/article/21275/how-to-draw-a-custom-circle-on-an-image-in-react-image-editor) \ No newline at end of file diff --git a/ej2-react/image-editor/open-save.md b/ej2-react/image-editor/open-save.md index 0c6cad705..7eafafb1e 100644 --- a/ej2-react/image-editor/open-save.md +++ b/ej2-react/image-editor/open-save.md @@ -313,3 +313,7 @@ The [`created`](https://helpej2.syncfusion.com/react/documentation/api/image-edi ### Destroyed event The [`destroyed`](https://helpej2.syncfusion.com/react/documentation/api/image-editor/#destroyed) event is triggered once the Image Editor component is destroyed or removed from the application. This event serves as a notification that the component and its associated resources have been successfully cleaned up and are no longer active. + +## See Also + +* [Set a Custom File Name in Save Dialog](https://support.syncfusion.com/kb/article/20962/how-to-set-a-custom-file-name-in-react-image-editor-save-dialog) \ No newline at end of file diff --git a/ej2-react/introduction.md b/ej2-react/introduction.md index c620049bd..34243a335 100644 --- a/ej2-react/introduction.md +++ b/ej2-react/introduction.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## Syncfusion® React (Essential® JS 2) is a modern UI components library built from the ground up to be lightweight, responsive, modular, and touch friendly. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) ## Components list diff --git a/ej2-react/pivotview/getting-started.md b/ej2-react/pivotview/getting-started.md index 4e71e8b73..7028b6d81 100644 --- a/ej2-react/pivotview/getting-started.md +++ b/ej2-react/pivotview/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This section guides you through the steps to create a simple [Pivot Table](https://www.syncfusion.com/react-components/react-pivot-table) in a React application. It demonstrates how to set up and use the Pivot Table component to display and analyze data effectively. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) To get started quickly with the React [Pivot Table](https://www.syncfusion.com/react-components/react-pivot-table), watch this video: diff --git a/ej2-react/schedule/getting-started.md b/ej2-react/schedule/getting-started.md index f5ba8880e..ef9a42b64 100644 --- a/ej2-react/schedule/getting-started.md +++ b/ej2-react/schedule/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This section briefly explains how to create [**React Scheduler**](https://www.syncfusion.com/react-components/react-scheduler) component and configure its available functionalities in React environment, using Essential® JS 2 [quickstart](https://github.com/syncfusion/ej2-quickstart.git) seed repository. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) To get start quickly with React Scheduler using the Create React App, you can check on this video: From 40d3886c48dfb3155838698f7c3dbeaf6da8d203 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Fri, 10 Oct 2025 20:23:49 +0530 Subject: [PATCH 30/34] Integrated latest changes at 10-10-2025 7:31:47 PM --- ej2-react/diagram/bezier-controlPoint.md | 16 ++- .../diagram/bezier-segEditOrientation.md | 18 ++- ej2-react/diagram/connector-bezier.md | 45 ++++--- ej2-react/diagram/connector-customization.md | 127 +++++++++++------- ej2-react/diagram/connector-events.md | 84 +++++++----- ej2-react/diagram/connector-interaction.md | 46 +++---- ej2-react/diagram/connector-orthogonal.md | 34 +++-- ej2-react/diagram/connector-segments.md | 12 +- ej2-react/diagram/connector-straight.md | 38 ++++-- ej2-react/diagram/connectors.md | 82 +++++------ ej2-react/diagram/multipleSegments.md | 13 +- ej2-react/treegrid/accessibility.md | 2 + ej2-react/treegrid/columns/column-resizing.md | 2 +- ej2-react/treegrid/context-menu.md | 41 +++--- .../editing/persisting-data-in-server.md | 8 +- ej2-react/treegrid/filtering/filtering.md | 20 +-- ej2-react/treegrid/global-local.md | 20 +-- .../customize-the-empty-record-template.md | 1 + ej2-react/treegrid/module.md | 31 ++--- .../exporting-treegrid-in-server.md | 3 +- ej2-react/treegrid/row/row-drag-and-drop.md | 8 +- ej2-react/treegrid/searching.md | 7 +- ej2-react/treegrid/selection/selection.md | 2 +- ej2-react/treegrid/tool-bar/tool-bar-items.md | 6 +- ej2-react/treegrid/treegrid-styling.md | 42 +++--- 25 files changed, 392 insertions(+), 316 deletions(-) diff --git a/ej2-react/diagram/bezier-controlPoint.md b/ej2-react/diagram/bezier-controlPoint.md index 0cd7a6d87..8a6e5433c 100644 --- a/ej2-react/diagram/bezier-controlPoint.md +++ b/ej2-react/diagram/bezier-controlPoint.md @@ -1,18 +1,20 @@ --- layout: post -title: Bezier control points interaction in React Diagram component | Syncfusion® -description: Learn here all about Connectors in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Bezier Control Points Interaction in React Diagram Component | Syncfusion® +description: Learn how to interact with bezier control points, configure smoothness settings, and control visibility in Syncfusion® React Diagram Component. control: Bezier control points interaction platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Bezier Control points +# Bezier Control Points Interaction -## How to interact with the bezier segments efficiently +Bezier control points determine the curvature and shape of bezier connector segments in React Diagram components. These interactive handles allow users to modify connector paths dynamically while maintaining visual consistency across multiple segments. -While interacting with multiple bezier segments, maintain their control points at the same distance and angle by using the bezierSettings smoothness property of the connector class. +## Configure Bezier Segment Smoothness + +When working with multiple bezier segments, maintain visual consistency by configuring the `smoothness` behavior of control points using the [`bezierSettings`](https://ej2.syncfusion.com/react/documentation/api/diagram/bezierSettingsModel/) property of the connector. The `smoothness` property controls how adjacent control points respond when one is modified. | BezierSmoothness value | Description | Output | |-------- | -------- | -------- | @@ -32,9 +34,9 @@ While interacting with multiple bezier segments, maintain their control points a {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5BezierSegment-cs1" %} -## How to show or hide the bezier segment’s control points +## How to Show or Hide the Bezier Segment’s Control Points -By using the [`controlPointsVisibility`](https://ej2.syncfusion.com/react/documentation/api/diagram/controlPointsVisibility/) property of [`bezierSettings`](https://ej2.syncfusion.com/react/documentation/api/diagram/bezierSettingsModel/), you can enable or disable the visibility of the bezier segment’s control points. +Configure which control points are visible during interaction using the [`controlPointsVisibility`](https://ej2.syncfusion.com/react/documentation/api/diagram/controlPointsVisibility/) property within [`bezierSettings`](https://ej2.syncfusion.com/react/documentation/api/diagram/bezierSettingsModel/). This property provides granular control over control point display for different connector segments. | ControlPointsVisibility value | Description | Output | |-------- | -------- | -------- | diff --git a/ej2-react/diagram/bezier-segEditOrientation.md b/ej2-react/diagram/bezier-segEditOrientation.md index 0429ad0cc..c0bb19c77 100644 --- a/ej2-react/diagram/bezier-segEditOrientation.md +++ b/ej2-react/diagram/bezier-segEditOrientation.md @@ -1,25 +1,31 @@ --- layout: post -title: Bezier Segment edit orientation in React Diagram component | Syncfusion® -description: Learn here all about Connectors in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Bezier Segment edit orientation in React Diagram Component | Syncfusion® +description: Learn to configure Bezier segment orientation in Syncfusion React Diagram Component for custom curved connectors. control: Bezier Segment edit orientation platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Bezier Connector Settings +# Bezier Segment Edit Orientation -## How to edit bezier segments based on bezier connector settings +Bezier connectors in diagrams provide smooth, curved connections between nodes with customizable control points. The segment edit orientation feature allows interactive modification of bezier connector segments to achieve the desired visual flow and connection paths. -The intermediate point of two adjacent bezier segments can be edited interactively based on the [`segmentEditOrientation`](../api/diagram/bezierSegmentEditOrientation/) property of [`bezierSettings`](../api/diagram/bezierSettingsModel/). +## Interactive Editing of Bezier Segments + +The intermediate control points between adjacent bezier segments can be edited interactively during runtime based on the [`segmentEditOrientation`](https://ej2.syncfusion.com/react/documentation/api/diagram/bezierSegmentEditOrientation/) property within the [`bezierSettings`](https://ej2.syncfusion.com/react/documentation/api/diagram/bezierSettingsModel/)configuration. This property determines the directional constraints applied when users drag the intermediate points to reshape the connector. + +### Segment Edit Orientation Options + +The following table describes the available orientation modes and their interactive behavior: | SegmentEditOrientation value | Description | Output | |-------- | -------- | -------- | | Bidirectional |It allows the intermediate points to be dragged in either vertical or horizontal directions. | ![Bidirectional](images/bez-bidirectional.gif) | | Freeform | It allows the intermediate points to be dragged in any direction. | ![Freeform](images/bez-freeform.gif) | -The following code illustrates how to interact with Bezier efficiently by using the [`smoothness`](../api/diagram/bezierSmoothness/) and `segmentEditOrientation` properties of the `bezierSettings`. +The following code demonstrates how to configure bezier connectors with interactive segment editing using both the [`smoothness`](https://ej2.syncfusion.com/react/documentation/api/diagram/bezierSmoothness/) property for curve refinement and the `segmentEditOrientation` property for interaction control: {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/diagram/connector-bezier.md b/ej2-react/diagram/connector-bezier.md index b13c8c585..2731d3014 100644 --- a/ej2-react/diagram/connector-bezier.md +++ b/ej2-react/diagram/connector-bezier.md @@ -1,18 +1,18 @@ --- layout: post -title: Bezier connectors in React Diagram component | Syncfusion® -description: Learn here all about Connectors in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Bezier Connectors in React Diagram Component | Syncfusion® +description: Learn to create, edit, and customize Bezier connectors in the Syncfusion React Diagram. Master smooth, interactive, and precise curved connections. control: Connectors platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Bezier Connectors in EJ2 React Diagram control +# Bezier Connectors in Diagram Component -Bezier segments are used to create curve segments and the curves are configurable either with the control points or with vectors. +Bezier segments create curved paths whose shape can be configured using either control points or vectors. -To create a bezier segment, the [`segment.type`](https://ej2.syncfusion.com/react/documentation/api/diagram/segments) is set as `bezier` and need to specify [`type`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#type) for the connector. +To create a bezier segment, the [`segment.type`](https://ej2.syncfusion.com/react/documentation/api/diagram/segments) is set as **bezier** and need to specify [`type`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#type) for the connector. The following code example illustrates how to create a default bezier segment. @@ -27,23 +27,22 @@ The following code example illustrates how to create a default bezier segment. {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectorsBezier-cs1" %} -## Bezier segment editing +## Bezier Segment Editing -* A segment control point of the Bezier connector is used to change the bezier vectors and points of the connector. +The shape of a Bezier connector can be interactively modified by dragging its segment control points. These points, also known as thumbs, appear along the connector and allow you to adjust the curve's vectors and points. ![Bezier Segment edit Gif](images/Bezier-control.gif) ### Control Points -* Bezier control points can be positioned in two ways. +The curvature of a Bezier segment is determined by its control points. There are two primary ways to define the position of these control points: -* When setting control point positions using the The [`point1`](https://helpej2.syncfusion.com/react/documentation/api/diagram/bezierSegment/#point1) and [`point2`](https://helpej2.syncfusion.com/react/documentation/api/diagram/bezierSegment/#point2) properties, the control point remains fixed in its set position while dragging connector end points. -* When setting control point positions using the [`vector1`](https://helpej2.syncfusion.com/react/documentation/api/diagram/bezierSegment/#vector1) and [`vector2`](https://helpej2.syncfusion.com/react/documentation/api/diagram/bezierSegment/#vector2) properties, the control point dynamically adjusts to maintain the angle and distance originally set while moving the connector end points. +* **Fixed Positioning (`point1`, `point2`)**: When you use the [`point1`](https://helpej2.syncfusion.com/react/documentation/api/diagram/bezierSegment/#point1) and [`point2`](https://helpej2.syncfusion.com/react/documentation/api/diagram/bezierSegment/#point2) properties, the control points are set at fixed coordinates. These points remain stationary even when the connector's start or end points are moved. This is useful for creating static, predictable curves. #### Point -The [`point1`](https://helpej2.syncfusion.com/react/documentation/api/diagram/bezierSegment/#point1) and [`point2`](https://helpej2.syncfusion.com/react/documentation/api/diagram/bezierSegment/#point2) properties of bezier segment enable you to set the control points. The following code example illustrates how to configure the bezier segments with control points. +The `point1 ` and `point2`(https://helpej2.syncfusion.com/react/documentation/api/diagram/bezierSegment/#point2) properties of bezier segment enable you to set the control points. The following code example illustrates how to configure the bezier segments with control points. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -75,9 +74,9 @@ The [`vector1`](https://helpej2.syncfusion.com/react/documentation/api/diagram/b ![Bezier Control point set by vector1 and vector1](images/Bezier-vector1.gif) -### Avoid overlapping with bezier +### Avoid Overlapping with Bezier -By default, when there are no segments defined for a bezier connector, the bezier segments will be created automatically and routed in such a way that avoids overlapping with the source and target nodes. +By default, if no segments are explicitly defined for a Bezier connector, the Diagram component automatically generates segments. This routing logic is designed to prevent the connector from overlapping with its connected source and target nodes, ensuring a clean and readable layout. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -90,15 +89,19 @@ By default, when there are no segments defined for a bezier connector, the bezie {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectorBezierAvoidOverlapping-cs1" %} -### Allow segment reset. +### Allow Segment Reset. -This feature allows users to choose whether to reset the control points of bezier segments when moving the source or target node. This decision empowers users to maintain control over the positioning of bezier curves, enhancing flexibility and precision in diagram editing. +The `allowSegmentReset` property gives you control over whether a Bezier segment’s control points should be reset to their default positions when the source or target node is moved. This provides greater flexibility in maintaining custom curve shapes during diagram editing. -#### With allow segment reset as true. +#### `allowSegmentReset` is **true** (Default) + +When `allowSegmentReset` is **true**, moving a connected node will reset the Bezier control points, recalculating the curve. ![Allow Segment rest true](images/allowsegReset-true.gif) -##### With allow segment reset as false. +#### `allowSegmentReset` is **false** + +When `allowSegmentReset` is **false**, the custom positions of the control points are preserved when a connected node is moved, maintaining the user-defined curve. ![Allow Segment rest false](images/allowsegReset-false.gif) @@ -113,11 +116,11 @@ This feature allows users to choose whether to reset the control points of bezie {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5Segmentreset-cs1" %} -### How to customize Bezier Segment Thumb Size +### How to Customize Bezier Segment Thumb Size -Bezier segment thumbs default to size 10. This can be adjusted globally or for individual connectors using the [`segmentThumbSize`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#segmentthumbsize) property. -To change the thumb size for all Bezier connectors, set the [`segmentThumbSize`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#segmentthumbsize) property in the diagram’s model. -To customize the thumb size for a specific connector, disable the [`InheritSegmentThumbSize`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connectorConstraints/) constraint, then set the desired [`segmentThumbSize`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#segmentthumbsize). +The interactive thumbs used to edit Bezier segments have a default size of 10×10 pixels. This size can be customized either globally for all connectors or individually for each connector using the [`segmentThumbSize`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#segmentthumbsize) property. +To change the thumb size for all Bezier connectors, set the `segmentThumbSize` property in the diagram’s model. +To customize the thumb size for a specific connector, disable the [`InheritSegmentThumbSize`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connectorConstraints/) constraint, then set the desired `segmentThumbSize. {% tabs %} diff --git a/ej2-react/diagram/connector-customization.md b/ej2-react/diagram/connector-customization.md index 84b1aa666..59e1a5404 100644 --- a/ej2-react/diagram/connector-customization.md +++ b/ej2-react/diagram/connector-customization.md @@ -1,27 +1,28 @@ --- layout: post -title: Connector customization in React Diagram component | Syncfusion® -description: Learn here all about Connectors in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Connector Customization in React Diagram Component | Syncfusion® +description: Learn how to customize connector properties such as decorator shapes, styles, and gradient effects in the Syncfusion React Diagram Component. control: Connector customization platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Connector customization -Diagram allows you to customize the connector appearances. The following topics shows how to customize several properties of the connectors. +# Connector Customization -To customize the appearance, padding, and bridging of the connectors in the React Diagram component, refer to the video link below. +The Diagram component provides extensive customization options for connectors, allowing developers to modify visual appearance, behavior, and interaction properties. This guide covers decorator shapes, styling options, spacing controls, bridging effects, and advanced connector features. -{% youtube "https://www.youtube.com/watch?v=pn02S_rwupw" %} +## Decorator Shapes and Customization -## Decorator +Decorators are visual elements that appear at the starting and ending points of connectors, typically used to indicate direction or relationship types such as arrows, circles, diamonds, or custom shapes. + +### Basic Decorator Configuration * Starting and ending points of a connector can be decorated with some customizable shapes like arrows, circles, diamond, or path. The connection end points can be decorated with the [`sourceDecorator`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#sourcedecorator) and [`targetDecorator`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#targetdecorator) properties of the connector. -* The [`shape`](https://helpej2.syncfusion.com/react/documentation/api/diagram/decoratorShapes/) property of `sourceDecorator` allows to define the shape of the decorators. Similarly, the [shape](https://helpej2.syncfusion.com/react/documentation/api/diagram/decoratorShapes/) property of `targetDecorator` allows to define the shape of the decorators. +* The [`shape`](https://helpej2.syncfusion.com/react/documentation/api/diagram/decoratorShapes/) property of `sourceDecorator` allows to define the shape of the decorators. Similarly, the `shape` property of `targetDecorator` allows to define the shape of the decorators. -* To create custom shape for source decorator, use [`pathData`](https://helpej2.syncfusion.com/react/documentation/api/diagram/decorator/#pathdata) property. Similarly, to create custom shape for target decorator, use [`pathData`](https://helpej2.syncfusion.com/react/documentation/api/diagram/decorator/#pathdata) property. +* To create custom shape for source decorator, use the [`pathData`](https://helpej2.syncfusion.com/react/documentation/api/diagram/decorator/#pathdata) property to define SVG path strings for both source and target decorators. * The following code example illustrates how to create decorators of various shapes. @@ -36,13 +37,15 @@ To customize the appearance, padding, and bridging of the connectors in the Reac {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectorDecorators-cs1" %} -### Customize the decorator appearance +### Customize the Decorator Appearance + +The visual appearance of decorators can be customized using stroke and fill properties to match design requirements or highlight specific connector types. * The source decorator’s [`strokeColor`](https://helpej2.syncfusion.com/react/documentation/api/diagram/strokeStyle/#strokecolor), [`strokeWidth`](https://helpej2.syncfusion.com/react/documentation/api/diagram/strokeStyle/#strokewidth), and [`strokeDashArray`](https://helpej2.syncfusion.com/react/documentation/api/diagram/strokeStyle/#strokedasharray) properties are used to customize the color, width, and appearance of the decorator. -* To set the border stroke color, stroke width, and stroke dash array for the target decorator, use [`strokeColor`](https://helpej2.syncfusion.com/react/documentation/api/diagram/strokeStyle/#strokecolor), [`strokeWidth`](https://helpej2.syncfusion.com/react/documentation/api/diagram/strokeStyle/#strokewidth), and [`strokeDashArray`](https://helpej2.syncfusion.com/react/documentation/api/diagram/strokeStyle/#strokedasharray). +* To set the border stroke color, stroke width, and stroke dash array for the target decorator, use [`strokeColor`](https://helpej2.syncfusion.com/react/documentation/api/diagram/strokeStyle/#strokecolor), `strokeWidth` , and `strokeDashArray`. -* To set the size for source and target decorator, use width and height property. +* To set the size for source and target decorator, use width and height properties. The following code example illustrates how to customize the appearance of the decorator. @@ -57,13 +60,15 @@ The following code example illustrates how to customize the appearance of the de {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectorsDecorator-cs1" %} -### Gradient style for decorator. +### Gradient Styling for Decorators -The gradient property is used to set the gradient color for the decorator. There are two types of gradient. - * Linear - * Radial +The gradient property applies smooth color transitions to decorators, providing enhanced visual appeal for complex diagrams or when highlighting important connections. -The following code example illustrates how to apply gradient for the decorator. +The gradient property supports two types of gradients: + * Linear - Creates a straight-line color transition. + * Radial - Creates a circular color transition from center outward. + +The following code example illustrates how to apply gradient effects to decorators. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -76,9 +81,21 @@ The following code example illustrates how to apply gradient for the decorator. {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectorGradient-cs1" %} -## Padding +## Connector Appearance and Styling + +The visual appearance of connector segments can be customized to distinguish different types of connections or match application themes. + +The connector's `strokeWidth`, `strokeColor`, `strokeDashArray`, and [`opacity`](https://helpej2.syncfusion.com/react/documentation/api/diagram/strokeStyle/#opacity) properties are used to customize the appearance of the connector segments. + +The [`visible`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#visible) property of the connector enables or disables the visibility of the connector. + +Default values for all connectors can be set using the `getConnectorDefaults` properties. This is useful when all connectors share the same type or properties, allowing common settings to be centralized. -Padding is used to leave the space between the Connector's end point and the object to where it is connected. +## Spacing and Padding Controls + +### Padding between Connectors and Nodes + +Padding creates visual separation between connector endpoints and the nodes they connect, preventing connectors from appearing to touch or overlap with node boundaries. * The [`sourcePadding`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#sourcepadding) property of connector defines space between the source point and the source node of the connector. @@ -97,10 +114,12 @@ Padding is used to leave the space between the Connector's end point and the obj {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectNode-cs2" %} -## Bridging +## Advanced Connector Features + +### Line Bridging for Intersection Handling -Line bridging creates a bridge for lines to smartly cross over the other lines, at points of intersection. By default, [`bridgeDirection`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#bridgedirection) is set to top. Depending upon the direction given bridging direction appears. -Bridging can be enabled/disabled either with the `connector.constraints` or `diagram.constraints`. The following code example illustrates how to enable line bridging. +Line bridging creates visual bridges where connectors intersect, helping users distinguish between different connection paths in complex diagrams. By default, [`bridgeDirection`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#bridgedirection) is set to top, with the bridge appearing based on the specified direction. +Bridging can be enabled or disabled using either **connector.constraints** or **diagram.constraints**. The following code example illustrates how to enable line bridging. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -113,17 +132,17 @@ Bridging can be enabled/disabled either with the `connector.constraints` or `dia {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectorsBridging-cs1" %} -N> You need to inject connector bridging module into the diagram. +N> The connector bridging module must be injected into the diagram to use this feature. The [`bridgeSpace`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#bridgespace) property of connectors can be used to define the width for line bridging. -Limitation: Bezier segments do not support bridging. +**Limitation**: Bezier segments do not support bridging functionality. -## Hit padding +### Hit Padding for Interaction -* The [`hitPadding`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#hitpadding) property enables you to define the clickable area around the connector path.The default value for hitPadding is 10. +* The [`hitPadding`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#hitpadding) property defines the clickable area around the connector path, making it easier for users to select connectors, especially thin ones. This improves user experience by expanding the interactive zone without changing the visual appearance. The default value for hitPadding is 10. -* The following code example illustrates how to specify hit padding for connector. +* The following code example illustrates how to specify hit padding for connectors. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -136,9 +155,9 @@ Limitation: Bezier segments do not support bridging. {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectorHitPadding-cs1" %} -## Corner radius +## Corner Radius for Rounded Connectors -Corner radius allows to create connectors with rounded corners. The radius of the rounded corner is set with the [`cornerRadius`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#cornerradius) property. +Corner radius creates connectors with rounded corners instead of sharp angles, providing a more polished appearance for diagrams. The radius of the rounded corner is set with the [`cornerRadius`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#cornerradius) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -153,13 +172,13 @@ Corner radius allows to create connectors with rounded corners. The radius of th ## Connector Appearance -* The connector’s [`strokeWidth`](https://helpej2.syncfusion.com/react/documentation/api/diagram/strokeStyle/#strokewidth), [`strokeColor`](https://helpej2.syncfusion.com/react/documentation/api/diagram/strokeStyle/#strokecolor), [`strokeDashArray`](https://helpej2.syncfusion.com/react/documentation/api/diagram/strokeStyle/#strokedasharray), and [`opacity`](https://helpej2.syncfusion.com/react/documentation/api/diagram/strokeStyle/#opacity) properties are used to customize the appearance of the connector segments. +* The connector’s `strokeWidth`, `strokeColor`, `strokeDashArray`, and `opacity`] properties are used to customize the appearance of the connector segments. * The [`visible`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#visible) property of the connector enables or disables the visibility of connector. * Default values for all the `connectors` can be set using the `getConnectorDefaults` properties. For example, if all connectors have the same type or having the same property then such properties can be moved into `getConnectorDefaults`. -### Segment appearance +### Segment Appearance The following code example illustrates how to customize the segment appearance. @@ -174,13 +193,13 @@ The following code example illustrates how to customize the segment appearance. {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectorsAppearance-cs1" %} -## Connector constraints +## Connector Constraints and Behavior * The [`constraints`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#constraints) property of connector allows to enable/disable certain features of connectors. -* To enable or disable the constraints, refer [`constraints`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#constraints). +* To enable or disable the constraints, refer `constraints`. -The following code illustrates how to disable selection. +The following code illustrates how to disable selection for a connector. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -193,9 +212,11 @@ The following code illustrates how to disable selection. {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectorsConstraints-cs1" %} -## Add info for connector +## Additional Connector Properties -The [`addInfo`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#addinfo) property of connectors allow you to maintain additional information to the connectors. +### Adding Custom Information + +The [`addInfo`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#addinfo) property of connectors allows maintaining additional information or metadata associated with connectors for application-specific requirements. ``` ts @@ -210,11 +231,11 @@ var connectors = { ``` -## ZIndex for connector +## ZIndex for Connector -The connectors [`zIndex`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#zindex) property specifies the stack order of the connector. A connector with greater stack order is always in front of a connector with a lower stack order. +The connectors [`zIndex`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#zindex) property specifies the stack order of connectors. A connector with a greater stack order appears in front of connectors with lower stack orders, enabling precise control over visual layering. -The following code illustrates how to render connector based on the stack order. +The following code illustrates how to render connectors based on stack order. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -227,9 +248,11 @@ The following code illustrates how to render connector based on the stack order. {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5zindex-cs1" %} -## Connector spacing +### Connector Spacing for Routing + +* The [`connectorSpacing`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#connectorspacing) property defines the minimum distance between the source node and the connector when automatic routing occurs. This determines how far the connector will reroute around obstacles or the minimum length for new segments. -* The [`connectorSpacing`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#connectorspacing) property allows you to define the distance between the source node and the connector. It is the minimum distance the connector will re-rout or the new segment will create. +The following code example illustrates how to configure connector spacing. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -242,9 +265,9 @@ The following code illustrates how to render connector based on the stack order. {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectorsDecAppearance-cs1" %} -## MaxSegment thumb +#### Maximum Segment Thumbs -The property [`maxSegmentThumb`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#maxsegmentthumb) is used to limit the number of segment thumb in the connector. +The [`maxSegmentThumb`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#maxsegmentthumb)property limits the number of segment manipulation handles displayed on a connector, helping maintain clean interfaces in complex diagrams. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -259,9 +282,9 @@ The property [`maxSegmentThumb`](https://helpej2.syncfusion.com/react/documentat ![maxSegmentThumb](images/maxSegmentThumb.png) -## Reset segments +## Reset Segments -The [`resetSegments`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#resetsegments) method resets the segments of connectors to their default state based on their connection points. This operation removes any custom segments and restores the connectors to their original configuration. The following example demonstrates how to reset connector segments at runtime. +The [`resetSegments`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#resetsegments) method resets connector segments to their default state based on connection points. This operation removes custom segments and restores connectors to their original configuration, useful for cleaning up user modifications. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -274,11 +297,13 @@ The [`resetSegments`](https://helpej2.syncfusion.com/react/documentation/api/dia {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ResetSegment-cs1" %} -## Enable Connector Splitting +## Dynamic Connector Manipulation + +### Enable Connector Splitting -The connectors are used to create a link between two points, ports, or nodes to represent the relationship between them. Split the connector between two nodes when dropping a new node onto an existing connector and create a connection between the new node and existing nodes by setting the [`enableConnectorSplit`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#enableconnectorsplit) as true. The default value of the [`enableConnectorSplit`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#enableconnectorsplit) is false +Connector splitting allows creating new connections when a node is dropped onto an existing connector. The connector splits at the drop point, creating connections between the new node and the existing connected nodes. Enable this feature by setting [`enableConnectorSplit`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#enableconnectorsplit) to **true**. The default value is **false**. -The following code illustrates how to split the connector and create a connection with new node. +The following code illustrates how to enable connector splitting functionality.. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -293,11 +318,11 @@ The following code illustrates how to split the connector and create a connectio ![Enable Connector Split](images/EnableSplit.gif) -### Preserve connector style while connector splitting +### Preserve Connector Styling During Splitting -When splitting a connector using [`enableConnectorSplit`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#enableconnectorsplit), the new connector created will be a normal connector without any specific styles. To ensure the new connector has the same style as the original connector, you can use the collectionChange event to apply the styles. +When splitting a connector using [`enableConnectorSplit`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#enableconnectorsplit), the newly created connector appears as a default connector without inheriting the original connector's styling. To maintain consistent styling, use the collectionChange event to apply the original connector's properties to the new connector. -The following example demonstrates how to apply the same style of the original connector to the newly added connector: +The following example demonstrates how to preserve the original connector's styling for newly created connectors during splitting: {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/diagram/connector-events.md b/ej2-react/diagram/connector-events.md index 570ea2d8b..f1730a833 100644 --- a/ej2-react/diagram/connector-events.md +++ b/ej2-react/diagram/connector-events.md @@ -1,20 +1,22 @@ --- layout: post -title: Connector Events in React Diagram component | Syncfusion® -description: Learn here all about Connectors in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Connector Events in React Diagram Component | Syncfusion® +description: Learn about connector events in Syncfusion® React Diagram Component, including click, selection, position, connection, and segment events with examples. control: Connector Events platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Events +# Connector Events in React Diagram -Diagram provides some events support for connectors that triggers when interacting with the connector. +The Diagram component provides comprehensive event support for connectors, allowing developers to respond to various user interactions and programmatic changes. These events enable dynamic behavior and custom logic when users interact with connectors through clicking, dragging, connecting, or modifying segments. -## Click event +## Click Event -Triggers when the connector is clicked. The following code example explains how to get the [`click`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iClickEventArgs/) event in the diagram. +Triggers when a connector is clicked by the user. This event is useful for implementing custom actions, showing context menus, or displaying connector-specific information. + +The following code example demonstrates how to handle the [`click`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iClickEventArgs/) event in the diagram. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -27,10 +29,11 @@ Triggers when the connector is clicked. The following code example explains how {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ClickEvent-cs1" %} -## Selection change event +## Selection Change Event + +Triggers when a connector is selected or unselected. This event allows you to implement custom selection logic, update property panels, or perform actions based on selection state changes. -When selecting/unselecting the connector, the selection change event will be triggered. -The following code example explains how to get the [`selection change`](https://ej2.syncfusion.com/react/documentation/api/diagram/#selectionchange) event in the diagram. +The following code example demonstrates how to handle the [`selectionChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/#selectionchange) event in the diagram: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -43,7 +46,7 @@ The following code example explains how to get the [`selection change`](https:// {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5SelectionChangeEvent-cs1" %} - You can prevent selection by setting the `cancel` property of [`SelectionChangeEventArgs`](https://ej2.syncfusion.com/react/documentation/api/diagram/iselectionchangeeventargs/) to true, as shown in the code snippet below. + You can prevent selection by setting the `**cancel**` property of [`SelectionChangeEventArgs`](https://ej2.syncfusion.com/react/documentation/api/diagram/iselectionchangeeventargs/) to **true**, as shown in the code snippet below: ```js selectionChange= { (args) => { @@ -56,10 +59,11 @@ The following code example explains how to get the [`selection change`](https:// ``` -## Position change event +## Position Change Event + +Triggers when a connector's position changes during dragging operations. This event is essential for implementing validation, snapping behavior, or custom positioning logic. -Triggers when the connector's position is changed in diagram. -The following code example explains how to get the [`position change`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iDraggingEventArgs/) event in the diagram. +The following code example demonstrates how to handle the [`positionChange`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iDraggingEventArgs/) event in the diagram: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -72,7 +76,7 @@ The following code example explains how to get the [`position change`](https://h {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5PositionChangeEvent-cs1" %} - You can prevent dragging by setting the `cancel` property of [`DraggingEventArgs`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iDraggingEventArgs/) to true, as shown in the code snippet below. + You can prevent dragging by setting the `cancel` property of [`DraggingEventArgs`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iDraggingEventArgs/) to **true**, as shown in the code snippet below. ```js positionChange={ (args) => { @@ -85,10 +89,11 @@ The following code example explains how to get the [`position change`](https://h ``` -## Connection change event +## Connection Change Event -Triggers when the connector’s source or target point is connected or disconnected from the source or target. -The following code example explains how to get the [`connection change`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iConnectionChangeEventArgs/) event in the diagram. +Triggers when a connector's source or target point connects to or disconnects from nodes. This event is crucial for implementing connection validation, automatic routing updates, or maintaining data relationships. + +The following code example demonstrates how to handle the [`connectionChange`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iConnectionChangeEventArgs/) event in the diagram. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -101,10 +106,11 @@ The following code example explains how to get the [`connection change`](https:/ {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectionChangeEvent-cs1" %} -## Source Point change event +## Source Point Change Event + +Triggers when a connector's source point is modified through dragging or programmatic changes. This event enables validation of source connections and implementation of custom connection rules. -Triggers when the connector's source point is changed. -The following code example explains how to get the [`source Point change`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iEndChangeEventArgs/) event in the diagram. +The following code example demonstrates how to handle the [`sourcePointChange`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iEndChangeEventArgs/) event in the diagram. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -117,7 +123,7 @@ The following code example explains how to get the [`source Point change`](https {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5SourcePointchange-cs1" %} - You can prevent source point dragging by setting the `cancel` property of [`EndChangeEventArgs`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iEndChangeEventArgs/) to true, as shown in the code snippet below. + You can prevent source point dragging by setting the `cancel` property of [`EndChangeEventArgs`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iEndChangeEventArgs/) to **true**, as shown in the code snippet below: ```javascript @@ -132,10 +138,11 @@ The following code example explains how to get the [`source Point change`](https ``` -## Target Point change event +## Target Point Change Event -Triggers when the connector's target point is changed. -The following code example explains how to get the [`target Point change`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iEndChangeEventArgs/) event in the diagram. +Triggers when a connector's target point is modified through dragging or programmatic changes. This event allows validation of target connections and enforcement of connection constraints. + +The following code example demonstrates how to handle the [`targetPointChange`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iEndChangeEventArgs/) event in the diagram. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -148,7 +155,7 @@ The following code example explains how to get the [`target Point change`](https {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5TargetPontChange-cs1" %} - You can prevent target point dragging by setting the `cancel` property of [`EndChangeEventArgs`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iEndChangeEventArgs/) to true, as shown in the code snippet below. + You can prevent target point dragging by setting the `cancel` property of [`EndChangeEventArgs`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iEndChangeEventArgs/) to **true**, as shown in the code snippet below. ```javascript @@ -163,12 +170,13 @@ targetPointChange={ (args) => { ``` -## Segment Collection Change event +## Segment Collection Change Event + +Triggers when connector segments are added or removed at runtime. This event is essential for tracking dynamic changes to connector paths and implementing custom segment management logic. -Triggers when the connector's segments added or removed at runtime. -The following code example explains how to get the [`segment collection change`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iSegmentCollectionChangeEventArgs/) event in the diagram. +The following code example demonstrates how to handle the [`segmentCollectionChange`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iSegmentCollectionChangeEventArgs/) event in the diagram: -Use `CTRL+Shift+Click` on connector to add/remove segments. +Use **CTRL+Shift+Click** on connector to add/remove segments. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -181,10 +189,11 @@ Use `CTRL+Shift+Click` on connector to add/remove segments. {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5SegmentCollChange-cs1" %} -## Segment Change event +## Segment Change Event -Triggers when the connector's segments were adjusted or edited. -The following code example explains how to get the [`segment change`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iSegmentChangeEventArgs/) event in the diagram. +Triggers when connector segments are adjusted or edited by the user. This event enables custom validation and modification of segment positions during interactive editing. + +The following code example demonstrates how to handle the [`segmentChange`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iSegmentChangeEventArgs/) event in the diagram: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -197,7 +206,7 @@ The following code example explains how to get the [`segment change`](https://he {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5SegmentChangeEvent-cs1" %} - You can prevent segment editing by setting the `cancel` property of [`SegmentChangeEventArgs`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iSegmentChangeEventArgs/) to true, as shown in the code snippet below. + You can prevent segment editing by setting the `cancel` property of [`SegmentChangeEventArgs`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iSegmentChangeEventArgs/) to **true**, as shown in the code snippet below: ``` javascript segmentChange={ (args) => { @@ -210,10 +219,11 @@ The following code example explains how to get the [`segment change`](https://he ``` -## Collection change event +## Collection Change Event + +Triggers when connectors are added to or removed from the diagram. This event is fundamental for tracking diagram modifications and implementing undo/redo functionality or change tracking systems. -Triggers when the connector is added or removed from diagram. -The following code example explains how to get the [`collection change`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iCollectionChangeEventArgs/) event in the diagram. +The following code example demonstrates how to handle the [`collectionChange`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iCollectionChangeEventArgs/) event in the diagram. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -226,7 +236,7 @@ The following code example explains how to get the [`collection change`](https:/ {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5CollectionChange-cs1" %} -You can prevent changes to the diagram collection, such as adding or deleting connectors, by setting the `cancel` property of [`CollectionChangeEventArgs`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iCollectionChangeEventArgs/) to true, as shown in the code snippet below. +You can prevent changes to the diagram collection, such as adding or deleting connectors, by setting the `cancel` property of [`CollectionChangeEventArgs`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iCollectionChangeEventArgs/) to **true**, as shown in the code snippet below: ``` javascript collectionChange={ (args) => { diff --git a/ej2-react/diagram/connector-interaction.md b/ej2-react/diagram/connector-interaction.md index 516e46713..d080fe9b7 100644 --- a/ej2-react/diagram/connector-interaction.md +++ b/ej2-react/diagram/connector-interaction.md @@ -1,22 +1,22 @@ --- layout: post -title: Connector Interaction in React Diagram component | Syncfusion® -description: Learn here all about Connectors in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Connector Interaction in React Diagram Component | Syncfusion® +description: Explore how to interact with connectors in the Syncfusion React Diagram Component, including selection, dragging, endpoint manipulation, and flipping. control: Connector Interaction platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Connector interaction in EJ2 React Diagram +# Connector Interaction in EJ2 React Diagram Component -Connectors can be selected, dragged, and routed over the diagram page. +Connectors in the React Diagram component support various interaction capabilities including selection, dragging, endpoint manipulation, segment editing, and flipping operations. These interactions enable users to dynamically modify connector behavior and appearance within the diagram. -## Select and unSelect connector. +## Select and Unselect connector -A connector can be selected, simply just by clicking on it. +A connector can be selected by clicking on it. This selection enables further operations such as dragging, editing, or applying transformations. -A connector can be selected at runtime by using the Select method and clear the selection in the diagram using the ClearSelection. The following code explains how to select and clear selection in the diagram. +Connectors can be selected programmatically at runtime using the **select** method and selection can be cleared using the **clearSelection** method. The following code demonstrates how to select and clear selection in the diagram. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -31,7 +31,7 @@ A connector can be selected at runtime by using the Select method and clear the ## Drag Connector -Connector can be dragged by just clicking on the connector and dragging. +Connectors can be repositioned by clicking and dragging them to a new location within the diagram canvas. ![Connector Drag Gif](images/connector-dragGif.gif) @@ -48,15 +48,15 @@ A connector can be dragged at runtime by using the Drag method. The following co {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5DragConnector-cs1" %} -## End point dragging +## End Point Dragging -The connector can be selected by clicking it. When the connector is selected, circles will be added on the starting and ending of the connector that is represented by Thumbs. Clicking and dragging those handles helps you to adjust the source and target points. +When a connector is selected, circular handles (thumbs) appear at the source and target endpoints. These handles allow users to adjust the connector's start and end positions by clicking and dragging them. ![End Point drag GIF](images/EndPointDragGif.gif) -You can also update the endPoints of diagram by using [`dragSourceEnd`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#dragsourceend) and [`dragTargetEnd`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#dragtargetend) methods of diagram. +The end points of connectors can also be updated programmatically using the [`dragSourceEnd`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#dragsourceend) and [`dragTargetEnd`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#dragtargetend) methods of the diagram component. -The following code example shows the ways to drag connector end point at runtime. +The following code example demonstrates how to drag connector end points at runtime. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -69,9 +69,9 @@ The following code example shows the ways to drag connector end point at runtime {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5dragEnd-cs1" %} -## Segment editing +## Segment Editing -Diagram allows you to edit connector segments at runtime. To enable this feature, you need to activate the [`DragSegmentThumb`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#constraints) constraint for the connector. +The diagram allows editing of individual connector segments at runtime. To enable this feature, activate the [`DragSegmentThumb`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#constraints) constraint for the connector. ```ts { connector.constraints = @@ -80,24 +80,22 @@ Diagram allows you to edit connector segments at runtime. To enable this feature ``` -N> To edit a connector segment, you need to inject the `ConnectorEditing` module into the diagram. +N> To edit connector segments, inject the **ConnectorEditing** module into the diagram. ![Connector segmnet edit](images/connectorEditing.gif) ## Flip -The diagram Provides support to flip the connector. The [`flip`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#flip) is performed to give the mirrored image of the original element. +The diagram provides support for flipping connectors to create mirrored versions of the original element. The [`flip`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#flip) operation transforms the connector based on the specified flip direction. -The flip types are as follows: +The available flip types are: -* HorizontalFlip - [`Horizontal`](https://helpej2.syncfusion.com/react/documentation/api/diagram/flipDirection/) is used to interchange the connector source and target x points. +* **Horizontal Flip** - [`Horizontal`](https://helpej2.syncfusion.com/react/documentation/api/diagram/flipDirection/) interchanges the connector source and target x coordinates. -* VerticalFlip -[`Vertical`](https://helpej2.syncfusion.com/react/documentation/api/diagram/flipDirection/) is used to interchange the connector source and target y points. +* **Vertical Flip** - [`Vertical`](https://helpej2.syncfusion.com/react/documentation/api/diagram/flipDirection/) interchanges the connector source and target y coordinates. + +* **Both** - [`Both`](https://helpej2.syncfusion.com/react/documentation/api/diagram/flipDirection/) swaps the source point as the target point and the target point as the source point. -* Both -[`Both`](https://helpej2.syncfusion.com/react/documentation/api/diagram/flipDirection/) is used to interchange the source point as target point and target point as source point {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -110,4 +108,4 @@ The flip types are as follows: {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectNode-cs3" %} - N> The flip is not applicable when the connectors connect in nodes \ No newline at end of file + N> The flip operation is not applicable when connectors are connected to nodes. \ No newline at end of file diff --git a/ej2-react/diagram/connector-orthogonal.md b/ej2-react/diagram/connector-orthogonal.md index 162421808..fe9272a45 100644 --- a/ej2-react/diagram/connector-orthogonal.md +++ b/ej2-react/diagram/connector-orthogonal.md @@ -1,18 +1,18 @@ --- layout: post -title: Orthogonal connectors in React Diagram component | Syncfusion® -description: Learn here all about Connectors in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Orthogonal connectors in React Diagram Component | Syncfusion® +description: Learn to create, customize, and edit orthogonal connectors in the Syncfusion React Diagram Component. Explore segment editing, avoiding overlaps, and custom styling. control: Orthogonal platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Orthogonal Connectors in React EJ2 Diagram control +# Orthogonal Connectors in React Diagram Component -Orthogonal segments is used to create segments that are perpendicular to each other. +Orthogonal connectors use segments that are always perpendicular to each other, which is ideal for creating structured layouts in flowcharts or organizational charts. -Set the segment [`type`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#type) as orthogonal to create a default orthogonal segment and need to specify [`type`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#type). The following code example illustrates how to create a default orthogonal segment. +To create an orthogonal connector, set its [`type`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#type) property to **Orthogonal**. The following code example illustrates how to create a default orthogonal connector. Multiple segments can be defined one after another. To create a connector with multiple segments, define and add the segments to [`connector.segments`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#segments) collection. The following code example illustrates how to create a connector with multiple segments. @@ -31,7 +31,7 @@ The [`length`](https://helpej2.syncfusion.com/react/documentation/api/diagram/or N> You need to mention the segment type as same as what you mentioned in connector type. There should be no contradiction between connector type and segment type. -## Orthogonal segment editing +## Orthogonal Segment Editing * Orthogonal thumbs allow you to adjust the length of adjacent segments by clicking and dragging them. * When necessary, some segments are added or removed automatically, while dragging the segment. @@ -50,9 +50,9 @@ N> You need to mention the segment type as same as what you mentioned in connect ![Orthogonal Segment edit Gif](images/orthoSegEdit.gif) -## Avoid overlapping +## Avoid Overlapping -Orthogonal segments are automatically re-routed, in order to avoid overlapping with the source and target nodes. The following preview illustrates how orthogonal segments are re-routed. +Orthogonal segments automatically reroute themselves to avoid overlapping with their connected source and target nodes. The following example illustrates how an orthogonal connector adjusts its path when a connected node is moved. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -65,9 +65,9 @@ Orthogonal segments are automatically re-routed, in order to avoid overlapping w {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectorsOverlapping-cs1" %} -## How to customize Orthogonal Segment Thumb Shape +## How to Customize Orthogonal Segment Thumb Shape -The orthogonal connector can have any number of segments in between the source and the target point. Segments are rendered with the circle shape by default. The [`segmentThumbShape`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#segmentthumbshape) property allows you to change the default shape of the segment thumb. The following predefined shapes are provided: +The thumbs used to edit orthogonal segments are rendered as a `Circle` by default. You can change this shape using the diagram's[`segmentThumbShape`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#segmentthumbshape) property. The following predefined shapes are available: | Shape name | Shape | |-------- | -------- | @@ -84,7 +84,7 @@ The orthogonal connector can have any number of segments in between the source a | OutdentedArrow | ![OutdentedArrow](images/OutdentedArrow.png) | | DoubleArrow |![DoubleArrow](images/DoubleArrow.png) | -You can customize the style of the thumb shape by overriding the class e-orthogonal-thumb. +You can also customize the style of the thumb shape by overriding the `e-orthogonal-thumb` CSS class. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -99,7 +99,7 @@ You can customize the style of the thumb shape by overriding the class e-orthogo ![Segment Thumb Shape](images/thumbshape.png) -Use the following CSS to customize the segment thumb shape. +Use the following CSS to customize the segment thumb's appearance. ```scss @@ -117,9 +117,9 @@ Use the following CSS to customize the segment thumb shape. ## How to customize Orthogonal Segment Thumb Size -Orthogonal segment thumbs default to size 10. This can be adjusted globally or for individual connectors using the [`segmentThumbSize`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#segmentthumbsize) property. -To change the thumb size for all Orthogonal connectors, set the [`segmentThumbSize`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#segmentthumbsize) property in the diagram’s model. -To customize the thumb size for a specific connector, disable the [`InheritSegmentThumbSize`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connectorConstraints) constraint, then set the desired [`segmentThumbSize`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#segmentthumbsize). +By default, orthogonal segment thumbs have a width and height of 10px. This can be customized for all connectors or for individual ones using the[`segmentThumbSize`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#segmentthumbsize) property. +To change the thumb size for all orthogonal connectors in a diagram, set the `segmentThumbSize` property in the diagram model. +To customize the thumb size for a specific connector, you must first disable its `InheritSegmentThumbSize` property. Then, you can set the connector's unique `segmentThumbSize` value. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -130,6 +130,4 @@ To customize the thumb size for a specific connector, disable the [`InheritSegme {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectorsOrthoThumbSize-cs1" %} - - + {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectorsOrthoThumbSize-cs1" %} \ No newline at end of file diff --git a/ej2-react/diagram/connector-segments.md b/ej2-react/diagram/connector-segments.md index af422f0b9..714166574 100644 --- a/ej2-react/diagram/connector-segments.md +++ b/ej2-react/diagram/connector-segments.md @@ -1,16 +1,20 @@ --- layout: post -title: Segments in React Diagram component | Syncfusion® -description: Learn here all about Connectors in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Segments in React Diagram Component | Syncfusion® +description: Learn here all about Connector Segments in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Segments platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -## Segments in EJ2 React Connector +# Connector Segments in React Diagram Component -The path of the connector is defined with a collection of segments. There are three types of segments. +Connector segments define the path and visual appearance of connectors between nodes or points in a diagram. The path of a connector is constructed using a collection of segments, where each segment represents a portion of the connector's route. Understanding and configuring these segments allows for precise control over connector appearance and routing behavior. + +## Segment Types + +The React Diagram component supports three primary types of connector segments, each serving different visual and functional requirements: * Straight * Orthogonal diff --git a/ej2-react/diagram/connector-straight.md b/ej2-react/diagram/connector-straight.md index 942c3140f..cd34c31d7 100644 --- a/ej2-react/diagram/connector-straight.md +++ b/ej2-react/diagram/connector-straight.md @@ -1,16 +1,20 @@ --- layout: post -title: Straight Connectors in React Diagram component | Syncfusion® -description: Learn here all about Connectors in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Straight Connectors in React Diagram Component | Syncfusion® +description: Learn here all about Straight Connector Segments in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Straight platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -## Straight in EJ2 React Diagram Control +# Straight Connector Segments -To create a straight line, specify the [`type`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#type) of the segment as **straight** and add a straight segment to [`segments`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#segments) collection and need to specify [`type`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#type) for the connector. +Straight connector segments create direct linear connections between two points in a diagram. These segments are the simplest form of connector routing, providing the shortest path between nodes or connection points. Straight segments are ideal when you need clean, unobstructed connections without intermediate directional changes. + +## Creating Straight Segments + +To create a straight line connector, specify the [`type`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#type) of the segment as **straight** and add a straight segment to [`segments`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#segments) collection and need to specify [`type`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#type) property for the connector itself. The following code example demonstrates how to create a basic straight segment connector. The following code example illustrates how to create a default straight segment. @@ -25,9 +29,9 @@ The following code example illustrates how to create a default straight segment. {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectorsSegments-cs1" %} - The [`point`](https://ej2.syncfusion.com/react/documentation/api/diagram/straightSegment/#point) property of straight segment allows you to define the end point of it. - - The following code example illustrates how to define the end point of a straight segment. +## Defining Segment End Points + +The [`point`](https://ej2.syncfusion.com/react/documentation/api/diagram/straightSegment/#point) property of a straight segment allows you to define its end point coordinates. This provides precise control over where each segment terminates, enabling complex connector paths composed of multiple straight segments. The following code example illustrates how to define the end point of a straight segment. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -40,11 +44,23 @@ The following code example illustrates how to create a default straight segment. {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectorsSegmentsPoints-cs1" %} -### Straight segment editing +## Straight Segment Editing + +The end point of each straight segment is represented by a visual thumb control that enables interactive editing of the segment position. This allows users to dynamically modify connector paths by dragging segment endpoints. + +### Adding Segments + +New segments can be inserted into a straight line connector by clicking on the connector while pressing Shift and Ctrl keys simultaneously (Ctrl+Shift+Click). This creates additional control points for more complex routing. + +### Removing Segments + +Straight segments can be removed by clicking the segment end point while holding Ctrl and Shift keys (Ctrl+Shift+Click). This simplifies the connector path by eliminating unnecessary way points. + +### Programmatic Editing + +You can also add or remove segments programmatically using the [`editSegment`](https://ej2.syncfusion.com/react/documentation/api/diagram/#editsegment) method of the diagram component. This provides API-level control over connector segment manipulation. - End point of each straight segment is represented by a thumb that enables to edit the segment. -Any number of new segments can be inserted into a straight line by clicking when Shift and Ctrl keys are pressed (Ctrl+Shift+Click). -Straight segments can be removed by clicking the segment end point when Ctrl and Shift keys are pressed (Ctrl+Shift+Click). You can also add/remove segments by using the [`editSegment`](https://ej2.syncfusion.com/react/documentation/api/diagram/#editsegment) method of diagram. +The following example demonstrates how to add segments to a straight connector programmatically. The following example shows how to add segments at runtime for the straight connector. diff --git a/ej2-react/diagram/connectors.md b/ej2-react/diagram/connectors.md index a70b318aa..d791b97af 100644 --- a/ej2-react/diagram/connectors.md +++ b/ej2-react/diagram/connectors.md @@ -1,20 +1,20 @@ --- layout: post -title: Connectors in React Diagram component | Syncfusion® -description: Learn here all about Connectors in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Connectors in React Diagram Component | Syncfusion® +description: Explore the various types of connectors available in the Syncfusion React Diagram Component and learn how to create, customize, and manage them. control: Connectors platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Connectors in React Diagram component +# Connectors in React Diagram Component -Connectors are objects used to create link between two points, nodes or ports to represent the relationships between them. +Connectors are objects used to create links between two points, nodes, or ports to represent relationships between them. They provide visual connections that help illustrate data flow, process sequences, hierarchical relationships, and other logical connections in diagrams. -## Create connector +## Create Connector -Connector can be created by defining the source and target point of the connector. The path to be drawn can be defined with a collection of segments. To explore the properties of a [`connector`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/), refer to [`Connector Properties`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/). The [`id`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connectorModel/#id) property of a connector is used to define its unique identifier and can later be used to find the connector at runtime for customization. +Connectors can be created by defining the source and target points. The path to be drawn can be defined with a collection of segments. To explore the properties of a [`connector`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/), refer to [`Connector Properties`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/). The [`id`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connectorModel/#id) property of a connector is used to define its unique identifier and can later be used to find the connector at runtime for customization. ```ts let connectors = [{ @@ -26,7 +26,7 @@ let connectors = [{ ``` N> When setting a Connector's ID, ensure that it does not contain white spaces, does not start with numbers or special characters, and does not include special characters like underscores (_) or spaces. -## Add connectors through connectors collection +## Add connectors through Connectors Collection The [`sourcePoint`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#sourcepoint) and [`targetPoint`](https://ej2.syncfusion.com/react/documentation/api/diagram/connector/#targetpoint) properties of connector allow you to define the end points of a connector. @@ -43,9 +43,9 @@ The following code example illustrates how to add a connector through connector {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5Connectors-cs1" %} -## Add/remove connector at runtime +## Add/Remove Connector at Runtime -Connectors can be added at runtime by using public method, [`add`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#add) and can be removed at runtime by using public method, [`remove`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#remove). +Connectors can be added at runtime by using public method, [`add`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#add) and can be removed at runtime by using public method, [`remove`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#remove).These methods are useful when you need to dynamically modify diagram structure based on user interactions or data changes. The following code example illustrates how to add connector at runtime. @@ -60,7 +60,7 @@ The following code example illustrates how to add connector at runtime. {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5Connectorsatruntime-cs1" %} -## Add collection of connectors at runtime +## Add Collection of Connectors at Runtime The collection of connectors can be dynamically added using [`addElements`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#addelements) method.Each time an element is added to the diagram canvas, the [`collectionChange`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#collectionchange) event will be triggered. @@ -77,9 +77,9 @@ The following code illustrates how to add connectors collection at runtime. {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2" %} -## Add Connectors from palette +## Add Connectors from Palette -Connectors can be predefined and added to the symbol palette. You can drop those connectors into the diagram, when required. +Connectors can be predefined and added to the symbol palette. You can drop those connectors into the diagram, when required. This approach is useful for creating reusable connector templates that users can easily drag and drop into their diagrams. The following code example illustrates how to add connectors in palette. @@ -94,11 +94,11 @@ The following code example illustrates how to add connectors in palette. {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5Connectorfrompalette-cs1" %} -## Draw connectors +## Draw Connectors -Connectors can be interactively drawn by clicking and dragging the diagram surface. +Connectors can be interactively drawn by clicking and dragging on the diagram surface. This feature enables users to create connections dynamically during diagram creation or editing. -To draw a shape, you have to activate the drawing tool by setting `DrawOnce` or `ContinuousDraw` to the [`tool`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#tool) property and you need to set the `connector` object by using the [`drawingObject`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#drawingobject) property. +To draw a shape, you have to activate the drawing tool by setting **DrawOnce** or **ContinuousDraw** to the [`tool`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#tool) property and you need to set the `connector` object by using the [`drawingObject`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#drawingobject) property. The following code example illustrates how to draw a connector at runtime. @@ -113,11 +113,13 @@ The following code example illustrates how to draw a connector at runtime. {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectordrawTool-cs1" %} -## Update connector at runtime + For more information about drawing connectors, refer to [`Draw Connectors`](https://ej2.syncfusion.com/react/documentation/api/diagram/#drawingobject). + +## Update Connector at Runtime Various connector properties such as `sourcePoint`, `targetPoint`, `style`, `sourcePortID`, `targetPortID`, etc., can be updated at the runtime. -The following code example illustrates how to update a connector's source point, target point, styles properties at runtime. +The following code example illustrates how to update a connector's source point, target point, styles properties at runtime.This flexibility allows for dynamic modification of connector appearance and behavior based on application logic or user interactions. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -130,11 +132,11 @@ The following code example illustrates how to update a connector's source point, {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5Connectorsupdate-cs1" %} -## Clone connector at runtime +## Clone Connector at Runtime -Cloning a connector creates a new connector instance with identical properties and attributes. +Cloning a connector creates a new connector instance with identical properties and attributes. This feature is useful when you need to duplicate existing connectors while maintaining their configuration. -The following code example illustrates how to clone a connector +The following code example illustrates how to clone a connector. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -147,11 +149,11 @@ The following code example illustrates how to clone a connector {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectorClone-cs1" %} -## Get Connector defaults +## Configure Default Connector Properties -Get Connector defaults helps to define default properties of the connector. It is triggered when the diagram is initialized. In this event, you can customize the connector properties. +The connector defaults functionality allows you to define default properties for all connectors in the diagram. This is triggered when the diagram is initialized, providing an opportunity to customize connector properties globally rather than setting them individually for each connector. -The following code example explains how to customize the connector using [`getConnectorDefaults`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#getconnectordefaults). +The following code example explains how to customize connector defaults using [`getConnectorDefaults`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#getconnectordefaults). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -166,11 +168,11 @@ The following code example explains how to customize the connector using [`getCo ## Connections -### Connection with nodes +### Connection with Nodes -* The [`sourceID`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#sourceid) and [`targetID`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#targetid) properties allow to define the nodes to be connected. +* The [`sourceID`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#sourceid) and [`targetID`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#targetid) properties allow you to define the nodes to be connected. When these properties are set, the connector will automatically attach to the specified nodes and move with them when the nodes are repositioned. -* The following code example illustrates how to connect two nodes. +The following code example illustrates how to connect two nodes. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -185,9 +187,9 @@ The following code example explains how to customize the connector using [`getCo * When you remove NodeConstraints [`InConnect`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeConstraints) from Default, the node accepts only an outgoing connection to dock in it. Similarly, when you remove NodeConstraints [`OutConnect`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeConstraints) from Default, the node accepts only an incoming connection to dock in it. -* When you remove both InConnect and OutConnect NodeConstraints from Default, the node restricts connector to establish connection in it. +When you remove both InConnect and OutConnect NodeConstraints from Default, the node restricts connectors from establishing connections to it. -* The following code illustrates how to disable InConnect constraints. +The following code illustrates how to disable InConnect constraints. ```ts import * as React from "react"; @@ -223,9 +225,9 @@ root.render(); ``` -## Connections with ports +## Connections with Ports -The [`sourcePortID`](https://ej2.syncfusion.com/react/documentation/api/diagram/connector/#sourceportid) and [`targetPortID`](https://ej2.syncfusion.com/react/documentation/api/diagram/connector/#targetportid) properties allow to create connections between some specific points of source/target nodes. +The [`sourcePortID`](https://ej2.syncfusion.com/react/documentation/api/diagram/connector/#sourceportid) and [`targetPortID`](https://ej2.syncfusion.com/react/documentation/api/diagram/connector/#targetportid) properties allow you to create connections between specific points of source and target nodes. This provides more precise control over where connectors attach to nodes. The following code example illustrates how to create port to port connections. @@ -297,11 +299,11 @@ const root = ReactDOM.createRoot(document.getElementById('diagram')); root.render(); ``` -## Automatic line routing +## Automatic Line Routing -Diagram provides additional flexibility to re-route the diagram connectors. A connector will frequently re-route itself when a shape moves next to it.Routing adjusts the geometry of connectors to prevent them from overlapping with any nearby nodes in their path. This feature can be activated by adding the LineRouting constraints property to the diagram. +Diagram provides additional flexibility to re-route diagram connectors automatically. A connector will frequently re-route itself when a shape moves next to it. Routing adjusts the geometry of connectors to prevent them from overlapping with any nearby nodes in their path. This feature can be activated by adding the LineRouting constraints property to the diagram. -* Dependency LineRouting module should be injected to the application as the following code snippet. +The LineRouting module should be injected to the application as shown in the following code snippet. ```ts @@ -312,7 +314,7 @@ Diagram provides additional flexibility to re-route the diagram connectors. A co Diagram.Inject(LineRouting); ``` -* Now, the line routing constraints must be included to the default diagram constraints to enable automatic line routing support like below. +The line routing constraints must be included in the default diagram constraints to enable automatic line routing support as shown below. ```ts /** @@ -357,7 +359,7 @@ The following image illustrates how the connector automatically re-routes the se {% previewsample "page.domainurl/code-snippet/diagram/connectors/es5ConnectorsLineRoutingDisabled-cs1" %} -## Avoid line overlapping +## Avoid Line Overlapping The diagram provides flexibility to prevent connectors from overlapping, ensuring better clarity and readability. This feature intelligently adjusts connector paths to avoid stacking orthogonal connectors on top of each other, reducing visual clutter and enhancing diagram structure. It is especially useful in complex diagrams with multiple orthogonal connectors, where overlapping lines can make interpretation difficult. @@ -408,8 +410,8 @@ N> The `AvoidLineOverlapping` feature applies only to orthogonal connectors and ## See Also -* [How to add annotations to the connector](./labels) -* [How to enable/disable the behavior of the node](./constraints) -* [How to add connectors to the symbol palette](./symbol-palette) -* [How to perform the interaction on the connector](./interaction#connection-editing) -* [How to create diagram connectors using drawing tools](./tools) \ No newline at end of file +* [How to add annotations to the connector.](./labels) +* [How to enable/disable the behavior of the node.](./constraints) +* [How to add connectors to the symbol palette.](./symbol-palette) +* [How to perform the interaction on the connector.](./interaction#connection-editing) +* [How to create diagram connectors using drawing tools.](./tools) \ No newline at end of file diff --git a/ej2-react/diagram/multipleSegments.md b/ej2-react/diagram/multipleSegments.md index 153b1ebad..bdb955707 100644 --- a/ej2-react/diagram/multipleSegments.md +++ b/ej2-react/diagram/multipleSegments.md @@ -1,16 +1,21 @@ --- layout: post -title: Multiple segments in React Diagram component | Syncfusion® -description: Learn here how to create connectors with multiple segments in in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Multiple Segments for Connector in React Diagram Component | Syncfusion® +description: Learn how to create connectors with multiple segments in Syncfusion® React Diagram Component, including configuration and practical examples. control: Multiple segments platform: ej2-react documentation: ug domainurl: ##DomainURL## --- +# Multiple Segments for Connectors +Connectors in the React Diagram component can be composed of multiple segments to create complex routing paths between nodes. Multiple segments allow you to define precise connection routes that navigate around obstacles or follow specific pathways in your diagram layout. -# Create multiple segments +## Understanding Connector Segments +A connector segment represents a portion of the connector's path. By combining multiple segments, you can create connectors that change direction multiple times, forming L-shapes, Z-shapes, or more complex routing patterns. Each segment can have different properties and behaviors depending on the segment type used. -Multiple segments can be defined one after another. To create a connector with multiple segments, define and add the segments to the [`segments`] collection. The following code example illustrates how to create a connector with multiple segments. +## Create Multiple Segments +Multiple segments can be defined sequentially to form a complete connector path. To create a connector with multiple segments, define and add the segments to the [`segments`](https://ej2.syncfusion.com/react/documentation/api/diagram/connector/#segments) collection. +The following example demonstrates how to create a connector with multiple segments that forms a custom routing path: {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/treegrid/accessibility.md b/ej2-react/treegrid/accessibility.md index d95ae1853..7112ac783 100644 --- a/ej2-react/treegrid/accessibility.md +++ b/ej2-react/treegrid/accessibility.md @@ -39,6 +39,7 @@ The accessibility compliance for the TreeGrid component is outlined below.
      No - The component does not meet the requirement.
      ## WAI-ARIA attributes + The TreeGrid component follows [WAI‑ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/) patterns. The following ARIA attributes are used in the TreeGrid component: | Attributes | Purpose | @@ -97,6 +98,7 @@ Interaction Keys | Description ## Ensuring accessibility Accessibility is validated using automated tools such as [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core). The following sample demonstrates TreeGrid accessibility. Open the [sample](https://ej2.syncfusion.com/accessibility/tree-grid.html) in a new window to evaluate accessibility with these tools. + {% previewsample "https://ej2.syncfusion.com/accessibility/tree-grid.html" %} ## See also diff --git a/ej2-react/treegrid/columns/column-resizing.md b/ej2-react/treegrid/columns/column-resizing.md index 87fc2760a..7e03971e6 100644 --- a/ej2-react/treegrid/columns/column-resizing.md +++ b/ej2-react/treegrid/columns/column-resizing.md @@ -30,7 +30,7 @@ To use column resizing, inject the **Resize** module in the TreeGrid. ## Min and max width -Resizing can be constrained using [columns.minWidth`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#minwidth) and [columns.maxWidth](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#maxwidth). +Resizing can be constrained using [columns.minWidth](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#minwidth) and [columns.maxWidth](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#maxwidth). In the following sample, minimum and maximum widths are defined for the **Duration** and **Task Name** columns. diff --git a/ej2-react/treegrid/context-menu.md b/ej2-react/treegrid/context-menu.md index 781650a21..b3547afe6 100644 --- a/ej2-react/treegrid/context-menu.md +++ b/ej2-react/treegrid/context-menu.md @@ -14,26 +14,27 @@ The TreeGrid displays a context menu on right-click. Enable this feature by conf To use the context menu, inject the **ContextMenu** module in the TreeGrid. The default items are listed below. -Items | Description -----|---- -**AutoFit** | Auto-fit the current column. -**AutoFitAll** | Auto-fit all columns. -**Edit** | Edit the current record. -**Delete** | Delete the current record. -**Save** | Save the edited record. -**Cancel** | Cancel the edited state. -**PdfExport** | Export TreeGrid data as a PDF document. -**ExcelExport** | Export TreeGrid data as an Excel document. -**CsvExport** | Export TreeGrid data as a CSV document. -**SortAscending** | Sort the current column in ascending order. -**SortDescending** | Sort the current column in descending order. -**FirstPage** | Go to the first page. -**PrevPage** | Go to the previous page. -**LastPage** | Go to the last page. -**NextPage** | Go to the next page. -**AddRow** | Add a new row to the TreeGrid. -**Indent** | Indent the record by one hierarchy level. -**Outdent** | Outdent the record by one hierarchy level. + +| Items | Description | +|-------|-------------| +| AutoFit | Auto-fit the current column. | +| AutoFitAll | Auto-fit all columns. | +| Edit | Edit the current record. | +| Delete | Delete the current record. | +| Save | Save the edited record. | +| Cancel | Cancel the edited state. | +| PdfExport | Export TreeGrid data as a PDF document. | +| ExcelExport | Export TreeGrid data as an Excel document. | +| CsvExport | Export TreeGrid data as a CSV document. | +| SortAscending | Sort the current column in ascending order. | +| SortDescending | Sort the current column in descending order. | +| FirstPage | Go to the first page. | +| PrevPage | Go to the previous page. | +| LastPage | Go to the last page. | +| NextPage | Go to the next page. | +| AddRow | Add a new row to the TreeGrid. | +| Indent | Indent the record by one hierarchy level. | +| Outdent | Outdent the record by one hierarchy level. | {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/ej2-react/treegrid/editing/persisting-data-in-server.md b/ej2-react/treegrid/editing/persisting-data-in-server.md index ceb25d350..9ff28a4db 100644 --- a/ej2-react/treegrid/editing/persisting-data-in-server.md +++ b/ej2-react/treegrid/editing/persisting-data-in-server.md @@ -132,7 +132,7 @@ public int FindChildRecords(int id) The newly added record is provided in the `value` parameter. The `relationalKey` parameter contains the primary key of the selected record and is used to determine the insert position. -![Insert](images/insert.PNG) +![Insert](../images/insert.PNG) ## Update record @@ -157,7 +157,7 @@ public ActionResult Update(TreeGridData value) The updated record is provided in the `value` parameter. -![Update](images/update.PNG) +![Update](../images/update.PNG) ## Delete record @@ -186,11 +186,11 @@ public ActionResult Remove(List changed, List added, For single delete, the primary key is provided in the `key` parameter. -![Delete](images/remove.PNG) +![Delete](../images/remove.PNG) When deleting a parent record, both parent and child records are provided in the `deleted` parameter. -![Remove](images/delete.PNG) +![Remove](../images/delete.PNG) ## Remote save adaptor diff --git a/ej2-react/treegrid/filtering/filtering.md b/ej2-react/treegrid/filtering/filtering.md index cc68947ae..173c4830f 100644 --- a/ej2-react/treegrid/filtering/filtering.md +++ b/ej2-react/treegrid/filtering/filtering.md @@ -70,17 +70,17 @@ Apply filters on initial render by specifying **predicate** objects in [filterSe Define the operator for each filtered column using the [operator](https://ej2.syncfusion.com/react/documentation/api/grid/predicate/#operator) property in [filterSettings.columns](https://ej2.syncfusion.com/react/documentation/api/treegrid/filterSettings/#columns). -Operator | Description | Supported types +Operator |Description |Supported types -----|-----|----- -startswith | Checks whether the value begins with the specified value. | String -endswith | Checks whether the value ends with the specified value. | String -contains | Checks whether the value contains the specified value. | String -equal | Checks whether the value is equal to the specified value. | String | Number | Boolean | Date -notequal | Checks for values not equal to the specified value. | String | Number | Boolean | Date -greaterthan | Checks whether the value is greater than the specified value. | Number | Date -greaterthanorequal | Checks whether a value is greater than or equal to the specified value. | Number | Date -lessthan | Checks whether the value is less than the specified value. | Number | Date -lessthanorequal | Checks whether the value is less than or equal to the specified value. | Number | Date +startswith |Checks whether the value begins with the specified value. |String +endswith |Checks whether the value ends with the specified value. |String +contains |Checks whether the value contains the specified value. |String +equal |Checks whether the value is equal to the specified value. |String | Number | Boolean | Date +notequal |Checks for values not equal to the specified value. |String | Number | Boolean | Date +greaterthan |Checks whether the value is greater than the specified value. |Number | Date +greaterthanorequal|Checks whether a value is greater than or equal to the specified value. |Number | Date +lessthan |Checks whether the value is less than the specified value. |Number | Date +lessthanorequal |Checks whether the value is less than or equal to the specified value. |Number | Date > By default, the **filterSettings.columns.operator** value is *equal*. diff --git a/ej2-react/treegrid/global-local.md b/ej2-react/treegrid/global-local.md index eea8d0abc..3e77b9cb2 100644 --- a/ej2-react/treegrid/global-local.md +++ b/ej2-react/treegrid/global-local.md @@ -12,8 +12,8 @@ domainurl: ##DomainURL## ## Localization -The [`Localization`](../common/localization) library allows you to localize default text content of the TreeGrid. The treegrid component has static text on some features (like toolbar area text, filter menu text, pager information text, etc.) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the -[`locale`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#locale) value and translation object. +The [Localization](../common/localization) library allows you to localize default text content of the TreeGrid. The treegrid component has static text on some features (like toolbar area text, filter menu text, pager information text, etc.) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the +[locale](https://ej2.syncfusion.com/react/documentation/api/treegrid/#locale) value and translation object. The following list of properties and its values are used in the treegrid. @@ -27,7 +27,7 @@ CollapseAll | Collapse All RowIndent | Indent RowOutdent | Outdent InvalidFilterMessage | Invalid Filter Data -FilterbarTitle | \s filter bar cell +FilterbarTitle | Filter bar cell Add | Add Edit| Edit Cancel| Cancel @@ -109,7 +109,7 @@ All | All ### Loading translations -To load translation object in an application, use [`load`](https://ej2.syncfusion.com/documentation/api/base/l10n/#load) function of the [`L10n`](https://ej2.syncfusion.com/documentation/api/base/l10n/) class. +To load translation object in an application, use [load](https://ej2.syncfusion.com/documentation/api/base/l10n/#load) function of the [L10n](https://ej2.syncfusion.com/documentation/api/base/l10n/) class. The following example demonstrates the TreeGrid in *Deutsch* culture. @@ -124,7 +124,7 @@ The following example demonstrates the TreeGrid in *Deutsch* culture. {% previewsample "page.domainurl/code-snippet/treegrid/internationalization-cs1" %} - ### Localization of dependent components in TreeGrid +### Localization of dependent components in TreeGrid When localizing TreeGrid, it's important to include dependent components like DatePicker, Form Validator, and Grid, as they have their own static text that requires localization. Follow these steps to localize these components: @@ -164,7 +164,7 @@ When localizing TreeGrid, it's important to include dependent components like Da - Below is an example JSON snippet consolidating the localization keys for dependent components used in TreeGrid using [`load`](https://ej2.syncfusion.com/documentation/api/base/l10n/#load) function of the [`L10n`](https://ej2.syncfusion.com/documentation/api/base/l10n/) class and update the `locale` property of treegrid with the culture name used in the `load` function: + Below is an example JSON snippet consolidating the localization keys for dependent components used in TreeGrid using [load](https://ej2.syncfusion.com/documentation/api/base/l10n/#load) function of the [L10n](https://ej2.syncfusion.com/documentation/api/base/l10n/) class and update the `locale` property of treegrid with the culture name used in the `load` function: ```json L10n.load({ @@ -195,7 +195,7 @@ When localizing TreeGrid, it's important to include dependent components like Da ## Internationalization -The [`Internationalization`](../common/internationalization/) library is used to globalize number, date, and time values in treegrid component using format strings in the [`columns.format`](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#format). +The [Internationalization](../common/internationalization) library is used to globalize number, date, and time values in treegrid component using format strings in the [columns.format](https://ej2.syncfusion.com/react/documentation/api/treegrid/column/#format). {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -209,11 +209,11 @@ The [`Internationalization`](../common/internationalization/) library is used to {% previewsample "page.domainurl/code-snippet/treegrid/internationalization-cs2" %} > * In the above sample, *Price* column is formatted by **NumberFormatOptions**. -> * By default, [`locale`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#locale) value is *en-US*. If you want to change the *en-US* culture to a different culture, you have to change the [`locale`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#locale) accordingly. +> * By default, [locale](https://ej2.syncfusion.com/react/documentation/api/treegrid/#locale) value is *en-US*. If you want to change the *en-US* culture to a different culture, you have to change the [locale](https://ej2.syncfusion.com/react/documentation/api/treegrid/#locale) accordingly. ## Right to left (RTL) -RTL provides an option to switch the text direction and layout of the TreeGrid component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable RTL Grid, set the [`enableRtl`](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enablertl) to **true**. +RTL provides an option to switch the text direction and layout of the TreeGrid component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable RTL Grid, set the [enableRtl](https://ej2.syncfusion.com/react/documentation/api/treegrid/#enablertl) to **true**. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -231,4 +231,4 @@ RTL provides an option to switch the text direction and layout of the TreeGrid c * [Internationalization](../common/internationalization) * [Localization](../common/localization) -> You can refer to our [`React Tree Grid`](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`React Tree Grid example`](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. +> You can refer to our [React Tree Grid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [React Tree Grid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to knows how to present and manipulate data. diff --git a/ej2-react/treegrid/how-to/customize-the-empty-record-template.md b/ej2-react/treegrid/how-to/customize-the-empty-record-template.md index f8ebf6b29..00f8bef73 100644 --- a/ej2-react/treegrid/how-to/customize-the-empty-record-template.md +++ b/ej2-react/treegrid/how-to/customize-the-empty-record-template.md @@ -11,6 +11,7 @@ domainurl: ##DomainURL## # Customize the empty record template in React TreeGrid The empty record template feature in the TreeGrid allows custom content such as images, text, or other components when the TreeGrid does not contain any records to display. This feature replaces the default message of **No records to display** typically shown in the TreeGrid. + To activate this feature, set the `emptyRecordTemplate` property of the TreeGrid. The `emptyRecordTemplate` property accepts an HTML element or a function that returns an HTML element. In the following example, an image and text are rendered as a template to indicate that the TreeGrid has no data to display. diff --git a/ej2-react/treegrid/module.md b/ej2-react/treegrid/module.md index 822011199..db5e0e48d 100644 --- a/ej2-react/treegrid/module.md +++ b/ej2-react/treegrid/module.md @@ -14,21 +14,22 @@ The following modules should be injected to extend TreeGrid functionality. | Module | Description | |------|-------------| -| [PageService](../treegrid/paging)| Inject this module to enable paging.| -| [SortService](../treegrid/sorting)| Inject this module to enable sorting.| -| [FilterService](../treegrid/filtering/filtering)| Inject this module to enable filtering.| -| [EditService](../treegrid/editing/edit)| Inject this module to enable editing.| -| [AggregateService](../treegrid/aggregates/aggregates)| Inject this module to enable aggregates.| -| [ColumnMenuService](../treegrid/columns/columns#column-menu)| Inject this module to enable the column menu.| -| [CommandColumnService](../../treegrid/edit#command-column)| Inject this module to enable command columns.| -| [ContextMenuService](../treegrid/context-menu)| Inject this module to enable the context menu.| -| [ResizeService](../treegrid/columns/columns#column-resizing)| Inject this module to enable column resizing.| -| [ReorderService](../treegrid/columns/columns#reorder)| Inject this module to enable column reordering.| -| [PrintService](../treegrid/print)| Inject this module to enable printing; this module is injected by default.| -| [ToolbarService](../treegrid/tool-bar/tool-bar)| Inject this module to enable the toolbar.| -| [ExcelExportService](../treegrid/excel-export/excel-export)| Inject this module to enable Excel export.| -| [PdfExportService](../treegrid/pdf-export/pdf-export)| Inject this module to enable PDF export.| +| [Page](../treegrid/paging)| Inject this module to enable paging.| +| [Sort](../treegrid/sorting)| Inject this module to enable sorting.| +| [Filter](../treegrid/filtering/filtering)| Inject this module to enable filtering.| +| [Edit](../treegrid/editing/edit)| Inject this module to enable editing.| +| [Aggregate](../treegrid/aggregates/aggregates)| Inject this module to enable aggregates.| +| [ColumnChooser](../treegrid/columns/column-chooser) | Inject to enable the column chooser feature. | +| [ColumnMenu](../treegrid/columns/column-menu)| Inject this module to enable the column menu.| +| [CommandColumn](../../treegrid/edit#command-column)| Inject this module to enable command columns.| +| [ContextMenu](../treegrid/context-menu)| Inject this module to enable the context menu.| +| [Resize](../treegrid/columns/column-resizing)| Inject this module to enable column resizing.| +| [Reorder](../treegrid/columns/column-reorder)| Inject this module to enable column reordering.| +| [Print](../treegrid/print)| Inject this module to enable printing; this module is injected by default.| +| [Toolbar](../treegrid/tool-bar/tool-bar)| Inject this module to enable the toolbar.| +| [ExcelExport](../treegrid/excel-export/excel-export)| Inject this module to enable Excel export.| +| [PdfExport](../treegrid/pdf-export/pdf-export)| Inject this module to enable PDF export.| Inject these modules into the TreeGrid using the `Inject` directive. -> Refer to the [React Tree Grid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour for highlights. Explore the [React Tree Grid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file +> Refer to the [React Tree Grid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour for highlights. Explore the [React Tree Grid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. diff --git a/ej2-react/treegrid/pdf-export/exporting-treegrid-in-server.md b/ej2-react/treegrid/pdf-export/exporting-treegrid-in-server.md index 09a8c275c..38ad923f9 100644 --- a/ej2-react/treegrid/pdf-export/exporting-treegrid-in-server.md +++ b/ej2-react/treegrid/pdf-export/exporting-treegrid-in-server.md @@ -1,6 +1,6 @@ --- layout: post -title: Exporting TreeGrid in server in React TreeGrid | Syncfusion +title: PDF Exporting TreeGrid in server in React TreeGrid | Syncfusion description: Learn here all about Exporting TreeGrid in server in Syncfusion React TreeGrid component of Syncfusion Essential JS 2 and more. platform: ej2-react control: Exporting TreeGrid in server @@ -96,6 +96,7 @@ The `PdfHeaderCellRendering` event is triggered while creating a column header f In the following demo, the `DrawString` method from `Graphics` rotates the header text of the column header inside the `BeginCellLayout` event handler. > PDF export does not support rotating the column header on the client side. + ```ts public IActionResult PdfExport(string treeGridModel) { diff --git a/ej2-react/treegrid/row/row-drag-and-drop.md b/ej2-react/treegrid/row/row-drag-and-drop.md index 61b53e3f0..b19ed73d4 100644 --- a/ej2-react/treegrid/row/row-drag-and-drop.md +++ b/ej2-react/treegrid/row/row-drag-and-drop.md @@ -53,10 +53,10 @@ To drag and drop between two TreeGrids, enable [allowRowDragAndDrop](https://ej2 The following events are triggered during row drag and drop: -[rowDragStartHelper](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdragstarthelper) - Triggers when the drag icon or row is clicked; customize the drag element based on criteria.
      -[rowDragStart](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdragstart) - Triggers when a row drag starts.
      -[rowDrag](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdrag) - Triggers while a row is being dragged.
      -[rowDrop](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdrop) - Triggers when the dragged element is dropped on the target element.
      +* [rowDragStartHelper](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdragstarthelper) - Triggers when the drag icon or row is clicked; customize the drag element based on criteria. +* [rowDragStart](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdragstart) - Triggers when a row drag starts. +* [rowDrag](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdrag) - Triggers while a row is being dragged. +* [rowDrop](https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdrop) - Triggers when the dragged element is dropped on the target element. ## Prevent reordering a row as child to another row diff --git a/ej2-react/treegrid/searching.md b/ej2-react/treegrid/searching.md index 2f924bb86..41b9763b2 100644 --- a/ej2-react/treegrid/searching.md +++ b/ej2-react/treegrid/searching.md @@ -12,8 +12,7 @@ domainurl: ##DomainURL## Search records by calling the [search](https://ej2.syncfusion.com/react/documentation/api/treegrid/#search) method with a search key. A search text box can also be placed in the TreeGrid toolbar by adding the search item to the [toolbar](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbar). -To enable searching, inject the **Filter** - module into the TreeGrid. +To enable searching, inject the **Filter** module into the TreeGrid. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -28,7 +27,7 @@ To enable searching, inject the **Filter** ## Initial search -Apply search on initial render by setting [fields](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettings/#fields), `operator`, [key](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettings/#key), and [ignoreCase](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettings/#ignorecase) in [searchSettings](https://ej2.syncfusion.com/react/documentation/api/treegrid/#searchsettings). +Apply search on initial render by setting [fields](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettings/#fields), [operator](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettings/#operator), [key](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettings/#key), and [ignoreCase](https://ej2.syncfusion.com/react/documentation/api/treegrid/searchSettings/#ignorecase) in [searchSettings](https://ej2.syncfusion.com/react/documentation/api/treegrid/#searchsettings). {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -72,7 +71,7 @@ Trigger a search from external UI by invoking the [search](https://ej2.syncfusio {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/treegrid/searching-cs3" %}} + {% previewsample "page.domainurl/code-snippet/treegrid/searching-cs3" %} ## Search specific columns diff --git a/ej2-react/treegrid/selection/selection.md b/ej2-react/treegrid/selection/selection.md index 720d57fee..4758a7317 100644 --- a/ej2-react/treegrid/selection/selection.md +++ b/ej2-react/treegrid/selection/selection.md @@ -55,7 +55,7 @@ TreeGrid supports three selection modes configured via [selectionSettings.mode]( ## Touch interaction -On touch devices, tapping a row selects it. A floating menu ![Multi Row selection](images/selection.jpg) enables multi-row selection. To select multiple rows or cells, tap the menu ![Multi Row or Cells](images/mselection.jpg), then tap the desired targets. +On touch devices, tapping a row selects it. A floating menu ![Multi Row selection](../images/selection.jpg) enables multi-row selection. To select multiple rows or cells, tap the menu ![Multi Row or Cells](../images/mselection.jpg), then tap the desired targets. > Multi-selection requires [selectionSettings.type](https://ej2.syncfusion.com/react/documentation/api/treegrid/selectionSettings/#type) set to **Multiple**. diff --git a/ej2-react/treegrid/tool-bar/tool-bar-items.md b/ej2-react/treegrid/tool-bar/tool-bar-items.md index 276595a6a..c5138efaa 100644 --- a/ej2-react/treegrid/tool-bar/tool-bar-items.md +++ b/ej2-react/treegrid/tool-bar/tool-bar-items.md @@ -14,17 +14,19 @@ domainurl: ##DomainURL## Built-in toolbar items execute standard TreeGrid actions and can be added by defining the [toolbar](https://ej2.syncfusion.com/react/documentation/api/treegrid/#toolbar) property as a collection of built-in items. Each item renders as a button with an icon and text. The following table lists built-in toolbar items and their actions. + | Built-in Toolbar Items | Actions | |------------------------|---------| | ExpandAll | Expands all rows. | | CollapseAll | Collapses all rows. | | Add | Adds a new record. | | Edit | Edits the selected record. | -| Update | Updates the edited record. | +| Update | Saves the current edit. | | Delete | Deletes the selected record. | | Cancel | Cancels the edit state. | -| Search | Searches records by the given key. | +| Search | Searches records by a given key. | | Print | Prints the TreeGrid. | +| ColumnChooser | Opens a dialog to manage column visibility. | | ExcelExport | Exports the TreeGrid to Excel. | | PdfExport | Exports the TreeGrid to PDF. | | WordExport | Exports the TreeGrid to Word. | diff --git a/ej2-react/treegrid/treegrid-styling.md b/ej2-react/treegrid/treegrid-styling.md index 5c3fd4ad7..d14ad78dd 100644 --- a/ej2-react/treegrid/treegrid-styling.md +++ b/ej2-react/treegrid/treegrid-styling.md @@ -12,26 +12,26 @@ domainurl: ##DomainURL## Modify the TreeGrid appearance by overriding its default CSS. The following table lists CSS classes and their corresponding sections in the TreeGrid. A custom theme for all React controls can be created using the [Theme Studio](https://ej2.syncfusion.com/themestudio/?theme=material). -Section|CSS class|Purpose of CSS class ------|-----|----- -**Root**|e-treegrid|Applied to the root element (div) of the TreeGrid. -**Header**|e-gridheader|Applied to the header root element; customize the dividing line between header and content. -||e-table|Applied to the header table; sets the table width to 100%. -||e-columnheader|Applied to the table row (tr) in the header. -||e-headercell|Applied to the header cell (th); customize header background and border colors. -||e-headercelldiv|Applied to the div inside the header cell (th); recommended for customizing header structure and layout. -**Body**|e-gridcontent|Applied to the content root; customize the body background color. -||e-table|Applied to the content table; sets the table width to 100%. -||e-altrow|Applied to alternate rows; customize alternate row background color. -||e-rowcell|Applied to all data cells; customize cell appearance and styling. -||e-groupcaption|Applied to caption cells (td) in grouped rows; customize caption cell background color. -||e-selectionbackground|Applied to selected cells; customize selection styling. -||e-hover|Applied to rows on hover; customize hover styling. -**Pager**|e-pager|Applied to the pager root element; customize background and font color. -||e-pagercontainer|Applied to pager numeric items. -||e-parentmsgbar|Applied to the pager information area. -**Summary**|e-gridfooter|Applied to the summary (footer) root element. -||e-summaryrow|Applied to summary rows. -||e-summarycell|Applied to summary cells; customize summary background color. +| **Section** | **CSS Class** | **Purpose of CSS Class** | +|-------------|-------------------------|------------------------------------------------------------------------| +| **Root** | `e-treegrid` | Applied to the root element (div) of the TreeGrid. | +| **Header** | `e-gridheader` | Applied to the header root element; customize the dividing line between header and content. | +| | `e-table` | Applied to the header table; sets the table width to 100%. | +| | `e-columnheader` | Applied to the table row (tr) in the header. | +| | `e-headercell` | Applied to the header cell (th); customize header background and border colors. | +| | `e-headercelldiv` | Applied to the div inside the header cell (th); recommended for customizing header structure and layout. | +| **Body** | `e-gridcontent` | Applied to the content root; customize the body background color. | +| | `e-table` | Applied to the content table; sets the table width to 100%. | +| | `e-altrow` | Applied to alternate rows; customize alternate row background color. | +| | `e-rowcell` | Applied to all data cells; customize cell appearance and styling. | +| | `e-groupcaption` | Applied to caption cells (td) in grouped rows; customize caption cell background color. | +| | `e-selectionbackground` | Applied to selected cells; customize selection styling. | +| | `e-hover` | Applied to rows on hover; customize hover styling. | +| **Pager** | `e-pager` | Applied to the pager root element; customize background and font color. | +| | `e-pagercontainer` | Applied to pager numeric items. | +| | `e-parentmsgbar` | Applied to the pager information area. | +| **Summary** | `e-gridfooter` | Applied to the summary (footer) root element. | +| | `e-summaryrow` | Applied to summary rows. | +| | `e-summarycell` | Applied to summary cells; customize summary background color. | > Refer to the [React TreeGrid](https://www.syncfusion.com/react-ui-components/react-tree-grid) feature tour page for highlights. Explore the [React TreeGrid example](https://ej2.syncfusion.com/react/demos/#/material/treegrid/treegrid-overview) to learn how to present and manipulate data. \ No newline at end of file From 6cfe8dd080017d235b8b8974a684df7fdebc271f Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Sat, 11 Oct 2025 20:08:29 +0530 Subject: [PATCH 31/34] Integrated latest changes at 10-11-2025 7:30:16 PM --- ej2-react/diagram/accessibility.md | 57 ++-- ej2-react/diagram/commands.md | 123 ++++---- ej2-react/diagram/constraints.md | 321 ++++++++++----------- ej2-react/diagram/container.md | 36 +-- ej2-react/diagram/context-menu.md | 55 ++-- ej2-react/diagram/data-binding.md | 82 +++--- ej2-react/diagram/lane.md | 99 ++++--- ej2-react/diagram/palette-customization.md | 109 +++---- ej2-react/diagram/palette-events.md | 32 +- ej2-react/diagram/phase.md | 54 ++-- ej2-react/diagram/ports-appearance.md | 41 +-- ej2-react/diagram/ports-connector-port.md | 41 +-- ej2-react/diagram/ports-interaction.md | 46 +-- ej2-react/diagram/ports-positioning.md | 33 ++- ej2-react/diagram/ports.md | 63 ++-- ej2-react/diagram/swim-lane.md | 64 ++-- ej2-react/diagram/swimlane-palette.md | 17 +- ej2-react/diagram/symbol-palette.md | 63 ++-- 18 files changed, 680 insertions(+), 656 deletions(-) diff --git a/ej2-react/diagram/accessibility.md b/ej2-react/diagram/accessibility.md index fc68e3406..2284cfe5d 100644 --- a/ej2-react/diagram/accessibility.md +++ b/ej2-react/diagram/accessibility.md @@ -1,18 +1,18 @@ --- layout: post -title: Accessibility in React Diagram component | Syncfusion® -description: Learn here all about Accessibility in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Accessibility in React Diagram Component | Syncfusion® +description: Learn here all about Accessibility in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Accessibility platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Accessibility in React Diagram component +# Accessibility in React Diagram Component -Diagram provides built-in compliance with the [WAI-ARIA](http://www.w3.org/WAI/PF/aria-practices/) specifications. WAI-ARIA Accessibility supports are achieved through the attributes like `aria-label`. It helps to provides information about elements in a document for assistive technology. +The Diagram component provides built-in compliance with the [WAI-ARIA](http://www.w3.org/WAI/PF/aria-practices/) specifications. WAI-ARIA accessibility support is achieved through attributes like `aria-label`, which provide information about elements in a document for assistive technologies such as screen readers. -The accessibility compliance for the diagram component is outlined below. +The following table outlines accessibility compliance for the Diagram component: | Accessibility Criteria | Compatibility | | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | @@ -38,16 +38,16 @@ The accessibility compliance for the diagram component is outlined below.
      No - The component does not meet the requirement.
      -## WAI-ARIA attributes +## WAI-ARIA Attributes -The Diagram component followed the [WAI-ARIA](?) patterns to meet the accessibility. The following ARIA attributes are used in the Diagram component: +The Diagram component follows [WAI-ARIA] patterns to meet accessibility requirements. The following ARIA attributes are used in the Diagram component: | Attributes | Purpose | | --- | --- | | `aria-label` | Provides an accessible name for the Diagram Objects. | -## Aria-label -Attribute provides the text label with some default description for below elements in diagram. +## Aria-Label +The `aria-label` attribute provides text labels with default descriptions for the following elements in the Diagram component: @@ -102,45 +102,60 @@ Attribute provides the text label with some default description for below elemen
      -### Mobile device support +### Screen Reader Support -Syncfusion® Diagram component are more user-friendly and accessible to individuals using mobile devices, including those with disabilities. These are designed to be responsive, adaptable to various screen sizes and orientations, and touch-friendly. +The Diagram component supports screen readers, and its information is properly conveyed by screen readers based on ARIA attributes and content structure. + +### Mobile Device Support + +Syncfusion® Diagram component is designed to be user-friendly and accessible on mobile devices, including for users with disabilities. The component is responsive, adapts to various screen sizes and orientations, and provides touch-friendly interactions. -### Screen Reader Support -The Diagram component supports and its information was dictated properly by the screen readers based on the ARIA attributes and content. -### Keyboard navigation support +### Keyboard Navigation Support -Syncfusion® Diagram component support keyboard navigation, allowing users who rely on alternate methods to effortlessly navigate and interact with the component. +Syncfusion® Diagram component supports keyboard navigation, allowing users who rely on assistive technologies to navigate and interact with the component effectively. -## Keyboard interaction +## Keyboard Interaction -The Diagram component followed the [keyboard interaction](https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Diagram component. +The Diagram component follows [keyboard interaction](https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html) guidelines, making it accessible for users who rely on keyboard navigation. The following keyboard shortcuts are supported: +**Selection and Clipboard Operations** | **Command** | **Action** | | --- | --- | | Ctrl + A | Select All | | Ctrl + X | Cut | -| Ctrl + C |Copy | +| Ctrl + C | Copy | | Ctrl + V | Paste | + +**Edit Operations** +| **Command** | **Action** | +| --- | --- | | Ctrl + Z | Undo | | Ctrl + Y | Redo | | Delete | Delete | + +**Navigation and Movement** +| **Command** | **Action** | +| --- | --- | | Up Arrow | Move selected object to up | | Down Arrow | Move selected object to down | | Left Arrow | Move selected object to left | | Right Arrow | Move selected object to right | + +**Annotation Editing** +| **Command** | **Action** | +| --- | --- | | Enter | Start Annotation Edit | | Escape | End Annotation Edit | -## Ensuring accessibility +## Ensuring Accessibility -The Diagram component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. +The Diagram component's accessibility levels are validated through [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. -The accessibility compliance of the Diagram component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/diagram.html) in a new window to evaluate the accessibility of the Diagram component with accessibility tools. +The accessibility compliance of the Diagram component is demonstrated in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/diagram.html) in a new window to evaluate the accessibility of the Diagram component with accessibility tools. ## See also diff --git a/ej2-react/diagram/commands.md b/ej2-react/diagram/commands.md index e4a9d7a8d..ed591d1ce 100644 --- a/ej2-react/diagram/commands.md +++ b/ej2-react/diagram/commands.md @@ -1,21 +1,21 @@ --- layout: post -title: Commands in React Diagram component | Syncfusion® -description: Learn here all about Commands in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Commands in React Diagram Component | Syncfusion® +description: Learn here all about Commands in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Commands platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Commands in React Diagram component +# Commands in React Diagram Component The commands in diagram control are used to perform various interactions within the diagram when called. Several commands are available in the diagram, as follows: * Alignment commands -* Spacing commands +* Distribute commands * Sizing commands * Clipboard commands * Grouping commands @@ -25,9 +25,9 @@ The commands in diagram control are used to perform various interactions within * FitToPage commands * Undo/Redo commands -## Align commands +## Alignment Commands - The alignment commands enable you to align the selected or defined objects such as nodes and connectors with respect to the selection boundary. Refer to [`align`](https://ej2.syncfusion.com/react/documentation/api/diagram#align) commands which shows how to use align methods in the diagram. +The alignment command enables you to align selected or defined objects, such as nodes and connectors, with respect to the selection boundary or the first selected object. The [`align`](https://ej2.syncfusion.com/react/documentation/api/diagram#align) method parameters are explained below. ### Alignment Options @@ -46,17 +46,17 @@ The [`Alignment Options`](https://ej2.syncfusion.com/react/documentation/api/dia ### Objects -Defines the objects to be aligned. This is an optional parameter. By default, all the nodes and connectors in the selected region of the diagram gets aligned. +Defines the objects to be aligned. This is an optional parameter. By default, all the nodes and connectors in the selected region of the diagram get aligned. ### Alignment Mode -[`Alignment Mode`](https://ej2.syncfusion.com/react/documentation/api/diagram/alignmentMode/) defines the specific mode, with respect to which the objects to be aligned. This is an optional parameter. The default alignment mode is `Object`. The accepted values of the argument "alignment mode" are as follows. +[`Alignment Mode`](https://ej2.syncfusion.com/react/documentation/api/diagram/alignmentMode/) defines the specific mode with respect to which the objects are aligned. This is an optional parameter. The default alignment mode is **Object**. The accepted values of the argument "alignment mode" are as follows. -The below table shows the alignment as `Left` for different alignment modes. +The table below shows the alignment as **Left** for different alignment modes. |Nodes before alignment|Alignment mode|Description|Output image| |----|----|----|----| -|![Align original](images/alignOrginal.png)|Object (Default)|Aligns the objects based on the bounds of first object in the selected list.|![Align Object](images/alignObject.png)| +|![Align original](images/alignOrginal.png)|Object (Default)|Aligns the objects based on the bounds of the first object in the selected list.|![Align Object](images/alignObject.png)| |![Align original](images/alignOrginal.png)|Selector|Aligns the objects based on the selection boundary.|![Align Selector](images/alignSelector.png)| @@ -75,13 +75,13 @@ The following code example illustrates how to align all the selected objects at ![Align Sample](images/Commands_img1.png) -## Distribute commands +## Distribute Commands -The [`distribute`](https://ej2.syncfusion.com/react/documentation/api/diagram#distribute)method enable you to place the selected objects on the page at equal intervals from each other. The selected objects are equally spaced within the selection boundary. The [`distribute`](https://ej2.syncfusion.com/react/documentation/api/diagram#distribute) method parameters are explained below. +The [`distribute`](https://ej2.syncfusion.com/react/documentation/api/diagram#distribute)method enable you to place the selected objects on the page at equal intervals from each other. The selected objects are equally spaced within the selection boundary. The `distribute` method parameters are explained below. -### Distribute options +### Distribute Options -The factor to distribute the shapes [`DistributeOptions`](https://ej2.syncfusion.com/react/documentation/api/diagram/distributeOptions#DistributeOptions) are listed as follows: +The factors for distributing shapes using [`DistributeOptions`](https://ej2.syncfusion.com/react/documentation/api/diagram/distributeOptions#DistributeOptions) are listed as follows: |Distribute option| Description| |----|----| @@ -96,9 +96,9 @@ The factor to distribute the shapes [`DistributeOptions`](https://ej2.syncfusion ### Objects -Defines the objects to be distributed. This is an optional parameter. By default, all the nodes and connectors in the selected region of the diagram gets distributed. +Defines the objects to be distributed. This is an optional parameter. By default, all the nodes and connectors in the selected region of the diagram get distributed. -The following code example illustrates how the nodes are distributed using the `RightToLeft` option. +The following code example illustrates how the nodes are distributed using the **RightToLeft** option. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -113,11 +113,11 @@ The following code example illustrates how the nodes are distributed using the ` ![Distribute Sample](images/Commands_img2.png) -## Sizing commands +## Sizing Commands -The [`sameSize`](https://ej2.syncfusion.com/react/documentation/api/diagram/#samesize) command enables you to size all selected nodes to match the size of the first selected object or the first node in the objects collection you provide as the second parameter. The parameters for the [`sameSize`](https://ej2.syncfusion.com/react/documentation/api/diagram/#samesize) method are explained below. +The [`sameSize`](https://ej2.syncfusion.com/react/documentation/api/diagram/#samesize) command enables you to size all selected nodes to match the size of the first selected object or the first node in the objects collection you provide as the second parameter. The parameters for the `sameSize` method are explained below. -### Sizing options +### Sizing Options [`SizingOptions`](https://ej2.syncfusion.com/react/documentation/api/diagram/sizingOptions) include: @@ -146,18 +146,17 @@ The following code example illustrates how to execute the size commands. ![Sizing Sample](images/Commands_img3.png) -## Clipboard commands +## Clipboard Commands - -Clipboard commands are used to cut, copy, or paste selected elements in the diagram using the [`cut`](https://ej2.syncfusion.com/react/documentation/api/diagram#cut), [`copy`](https://ej2.syncfusion.com/react/documentation/api/diagram#copy), [`paste`](https://ej2.syncfusion.com/react/documentation/api/diagram#paste) methods. You can also use keyboard shortcuts for these actions. For detailed information on using these methods refer the below table. +Clipboard commands are used to cut, copy, or paste selected elements in the diagram using the [`cut`](https://ej2.syncfusion.com/react/documentation/api/diagram#cut), [`copy`](https://ej2.syncfusion.com/react/documentation/api/diagram#copy), and [`paste`](https://ej2.syncfusion.com/react/documentation/api/diagram#paste) methods. You can also use keyboard shortcuts for these actions. For detailed information on using these methods refer to the table below. | Command (Shortcut key) | Description | |---------|-------------| -| `Cut` (CTRL+X) | Removes the selected elements from the diagram and places them onto the diagram’s clipboard. This operation is performed using the [`cut`](https://ej2.syncfusion.com/react/documentation/api/diagram#cut) method. | -| `Copy`(CTRL+C) | Duplicates the selected elements and places them onto the diagram’s clipboard without removing them from their original location. Use the [`copy`](https://ej2.syncfusion.com/react/documentation/api/diagram#copy) method for this operation. | -| `Paste`(CTRL+V) | Inserts the elements stored on the diagram’s clipboard (nodes and connectors) into the diagram. This can be done using the [`paste`](https://ej2.syncfusion.com/react/documentation/api/diagram#paste) method. | +| `Cut` (CTRL+X) | Removes the selected elements from the diagram and places them onto the diagram’s clipboard. This operation is performed using the `cut` method. | +| `Copy`(CTRL+C) | Duplicates the selected elements and places them onto the diagram’s clipboard without removing them from their original location. Use the `copy` method for this operation. | +| `Paste`(CTRL+V) | Inserts the elements stored on the diagram’s clipboard (nodes and connectors) into the diagram. This can be done using the `paste` method. | -The [`paste`](https://ej2.syncfusion.com/react/documentation/api/diagram#paste) method optionally accepts a collection of nodes or connectors to be added to the diagram. +The `paste` method optionally accepts a collection of nodes or connectors to be added to the diagram. The following code illustrates how to execute the clipboard commands. @@ -172,14 +171,14 @@ The following code illustrates how to execute the clipboard commands. {% previewsample "page.domainurl/code-snippet/diagram/commands/es5clipboard-cs1" %} -## Grouping commands +## Grouping Commands -Grouping Commands are used to group or ungroup selected elements in the diagram. Grouping commands help in managing and organizing multiple elements by combining them into a single group or separating them into individual elements. You can also use keyboard shortcuts for these actions. The following table provides more details on these commands: +Grouping commands are used to group or ungroup selected elements in the diagram. Grouping commands help in managing and organizing multiple elements by combining them into a single group or separating them into individual elements. You can also use keyboard shortcuts for these actions. The following table provides more details on these commands: | Commands (Shortcut key) | Description| |----|----| | [`Group`](https://ej2.syncfusion.com/react/documentation/api/diagram#group) (CTRL+G) | Combines the selected nodes and connectors into a single group, allowing you to move, resize, or apply other operations to all grouped elements as a unit. | -| [`Ungroup`](https://ej2.syncfusion.com/react/documentation/api/diagram#ungroup) (CTRL+Shift+U) | Splits a previously grouped set of nodes and connectors into individual elements, enabling you to modify or manipulate them separately. | +| [`Ungroup`](https://ej2.syncfusion.com/react/documentation/api/diagram#ungroup) (CTRL+Shift+U) | Splits a previously grouped set of nodes and connectors into individual elements, enabling you to modify or manipulate them separately. | The following code examples demonstrate how to use the grouping commands in diagram: @@ -194,9 +193,9 @@ The following code examples demonstrate how to use the grouping commands in diag {% previewsample "page.domainurl/code-snippet/diagram/commands/es5grouping-cs1" %} -## Rotate commands +## Rotate Commands -The [`rotate`](https://ej2.syncfusion.com/react/documentation/api/diagram/#rotate) commands in the diagram allow users to rotate selected elements by specified angles. These commands are useful for adjusting the rotate angle of nodes or shapes within the diagram. +The [`rotate`](https://ej2.syncfusion.com/react/documentation/api/diagram/#rotate) commands in the diagram allow users to rotate selected elements by specified angles. These commands are useful for adjusting the rotation angle of nodes or shapes within the diagram. | Parameter | Type | Description | |----------|-------|-------------| @@ -205,7 +204,7 @@ The [`rotate`](https://ej2.syncfusion.com/react/documentation/api/diagram/#rotat | pivot (optional) | PointModel| The reference point with respect to which the objects will be rotated. | | rotateUsingHandle (optional) | boolean | Whether to rotate using the handle. | -You can also use CTRL+R to rotate clockwise and CTRL+L to rotate anti-clockwise. The following example shows how to rotate nodes in clockwise and anti-clockwise direction. +You can also use CTRL+R to rotate clockwise and CTRL+L to rotate anti-clockwise. The following example shows how to rotate nodes in clockwise and anti-clockwise directions. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -218,11 +217,11 @@ You can also use CTRL+R to rotate clockwise and CTRL+L to rotate anti-clockwise. {% previewsample "page.domainurl/code-snippet/diagram/commands/rotate-cs1" %} -## Z-Order command +## Z-Order Command -**Z-Order commands** enable you to visually arrange the selected objects such as nodes and connectors on the page. +**Z-Order Commands** enable you to visually arrange the selected objects such as nodes and connectors on the diagram page. -### Bring To Front command +### Bring To Front Command The [`bringToFront`](https://ej2.syncfusion.com/react/documentation/api/diagram/#bringtofront)command moves the selected element to the front, placing it above all other elements in the diagram. The following code illustrates how to use the `bringToFront` command. @@ -237,9 +236,9 @@ The [`bringToFront`](https://ej2.syncfusion.com/react/documentation/api/diagram/ {% previewsample "page.domainurl/code-snippet/diagram/commands/es5bringfront-cs1" %} -### Send To Back command +### Send To Back Command -The [`sendToBack`](https://ej2.syncfusion.com/react/documentation/api/diagram/#sendtoback) command moves the selected element to the back, placing it behind all other elements in the diagram. The following code illustrates how to use the `sendToBack` command. +The [`sendToBack`](https://ej2.syncfusion.com/react/documentation/api/diagram/#sendtoback) command visually moves the selected element behind all the other overlapped elements. The following code illustrates how to execute the `sendToBack` command. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -252,9 +251,9 @@ The [`sendToBack`](https://ej2.syncfusion.com/react/documentation/api/diagram/#s {% previewsample "page.domainurl/code-snippet/diagram/commands/es5sendback-cs1" %} -### Move Forward command +### Move Forward Command -The [`moveForward`](https://ej2.syncfusion.com/react/documentation/api/diagram/#moveforward) command moves the selected element over the nearest overlapping element. The following code illustrates how to execute the `moveForward` command. +The [`moveForward`](https://ej2.syncfusion.com/react/documentation/api/diagram/#moveforward) command visually moves the selected element over the nearest overlapping element. The following code illustrates how to execute the `moveForward` command. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -267,7 +266,7 @@ The [`moveForward`](https://ej2.syncfusion.com/react/documentation/api/diagram/# {% previewsample "page.domainurl/code-snippet/diagram/commands/es5moveforward-cs1" %} -### sendBackward command +### Send Backward Command The [`sendBackward`](https://ej2.syncfusion.com/react/documentation/api/diagram#sendbackward) command visually moves the selected element behind the underlying element. The following code illustrates how to execute the `sendBackward` command. @@ -325,9 +324,9 @@ root.render(); ``` For more information about zoom refer to the [zoom](./scroll-settings/#update-zoom-at-runtime) -## Nudge command +## Nudge Command -The [`nudge`](https://ej2.syncfusion.com/react/documentation/api/diagram#nudge) commands move the selected elements towards up, down, left, or right by 1 pixel.The parameters of [`nudge`](https://ej2.syncfusion.com/react/documentation/api/diagram#nudge) method is explained below. +The [`nudge`](https://ej2.syncfusion.com/react/documentation/api/diagram#nudge) commands move the selected elements towards up, down, left, or right by 1 pixel.The parameters of the `nudge` method is explained below. | Parameter | Type | Description | |--------------|-----------|-----------| @@ -356,13 +355,13 @@ The following code illustrates how to execute the nudge command. {% previewsample "page.domainurl/code-snippet/diagram/commands/nudge-cs1" %} -### Nudge by using arrow keys +### Nudge by Using Arrow Keys -The arrow keys can be used to move the selected elements towards up, down, left, or right direction by 1 pixel. +The arrow keys can be used to move the selected elements up, down, left, or right by 1 pixel. ![Nudge Command](images/Commands_img4.png) -Nudge commands are particularly useful for accurate placement of elements. +Nudge commands are particularly useful for accurate placement of elements. N> The position change event will not trigger when using keyboard keys to move a node or connector. @@ -370,9 +369,9 @@ N> The position change event will not trigger when using keyboard keys to move a The [`bringIntoView`](https://ej2.syncfusion.com/react/documentation/api/diagram#bringintoview) command brings the specified rectangular region into the viewport of the diagram, ensuring that it is visible within the current view. -The [`bringIntoView`](https://ej2.syncfusion.com/react/documentation/api/diagram#bringintoview) method takes a single parameter, an object that defines the rectangular region to bring into view. This object should include properties such as x, y, width, and height to specify the exact region to be made visible. +The `bringIntoView` method takes a single parameter, an object that defines the rectangular region to bring into view. This object should include properties such as x, y, width, and height to specify the exact region to be made visible. -The following code illustrates how to execute the bringIntoView command: +The following code illustrates how to execute the `bringIntoView` command. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -389,9 +388,9 @@ The following code illustrates how to execute the bringIntoView command: The [`bringToCenter`](https://ej2.syncfusion.com/react/documentation/api/diagram#bringtocenter) command centers the specified rectangular region of the diagram content within the viewport. -The [`bringToCenter`](https://ej2.syncfusion.com/react/documentation/api/diagram#bringtocenter) method takes a single parameter, an object that defines the rectangular region to be centered. This object should include properties such as x, y, width, and height to specify the exact region to be brought to the center. +The `bringToCenter` method takes a single parameter, an object that defines the rectangular region to be centered. This object should include properties such as x, y, width, and height to specify the exact region to be brought to the center. -The following code illustrates how to execute the bringToCenter command. +The following code illustrates how to execute the `bringToCenter` command. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -406,17 +405,17 @@ The following code illustrates how to execute the bringToCenter command. ## FitToPage -The [`fitToPage`](https://ej2.syncfusion.com/react/documentation/api/diagram#fittopage)command adjusts the diagram content to fit within the viewport, considering either width, height, or the entire content. The fitToPage method takes one parameter,[`fitOptions`](https://ej2.syncfusion.com/react/documentation/api/diagram/FitOptions/), which specifies the options for fitting the diagram to the page. +The [`fitToPage`](https://ej2.syncfusion.com/react/documentation/api/diagram#fittopage)command helps to fit the diagram content into the view with respect to either width, height, or the entire content. The fitToPage method takes one parameter,[`fitOptions`](https://ej2.syncfusion.com/react/documentation/api/diagram/FitOptions/), which specifies the options for fitting the diagram to the page. ### FitOptions -The [`mode`](https://ej2.syncfusion.com/react/documentation/api/diagram/fitModes#modes) parameter defines how the diagram should fit into the viewport—horizontally, vertically, or based on the entire bounds of the diagram. +The [`mode`](https://ej2.syncfusion.com/react/documentation/api/diagram/fitModes#modes) parameter defines whether the diagram has to be horizontally/vertically fit into the viewport with respect to width, height, or entire bounds of the diagram. -The [`region`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramRegions#region)parameter specifies the region of the diagram that should be fit within viewport. +The [`region`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramRegions#region) parameter defines the region that has to be drawn as an image. -The [`margin`](https://ej2.syncfusion.com/react/documentation/api/diagram/iFitOptions#margin) parameter sets the margin around the diagram content that should be included in the view. +The [`margin`](https://ej2.syncfusion.com/react/documentation/api/diagram/iFitOptions#margin) parameter defines the region/bounds of the diagram content that is to be fit into the view. -The [`canZoomIn`](https://ej2.syncfusion.com/react/documentation/api/diagram/iFitOptions#canZoomIn) parameter enables or disables zooming in to fit smaller content into a larger viewport. +The [`canZoomIn`](https://ej2.syncfusion.com/react/documentation/api/diagram/iFitOptions#canZoomIn) parameter enables/disables zooming to fit the smaller content into a larger viewport. The [`canZoomOut`](https://ej2.syncfusion.com/react/documentation/api/diagram/iFitOptions/#canzoomout) parameter enables or disables zooming out to fit larger content into a smaller viewport. @@ -435,13 +434,13 @@ The following code illustrates how to execute `FitToPage` command. {% previewsample "page.domainurl/code-snippet/diagram/commands/fitToPage-cs1" %} -## Command manager +## Command Manager The Diagram provides support for mapping or binding command execution to specific key gestures. It includes built-in commands and allows for the definition of custom commands through the [`CommandManager`](https://ej2.syncfusion.com/react/documentation/api/diagram/commandManager#commandManager) Custom commands are executed when the specified key gesture is recognized. -## Custom command +## Custom Command -To define a custom command, specify the following properties: +To define a custom command, you need to specify the following properties: * [`execute`](https://ej2.syncfusion.com/react/documentation/api/diagram/command#execute): A method to be executed when the command is triggered. * [`canExecute`](https://ej2.syncfusion.com/react/documentation/api/diagram/command#canexecute): A method to define whether the command can be executed at the moment. @@ -451,7 +450,7 @@ To define a custom command, specify the following properties: To explore the properties of custom commands, refer to [`Commands`](https://ej2.syncfusion.com/react/documentation/api/diagram/command#commands). -The following code example illustrates how to use the command manager to clone a node and change the fill color of a node while pressing `G` and `Shift+G` or `Alt+G`, respectively: +The following code example illustrates how to use the command manager to clone a node and change the fill color of a node while pressing **G** and **Shift+G** or **Alt+G**, respectively: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -464,9 +463,9 @@ The following code example illustrates how to use the command manager to clone a {% previewsample "page.domainurl/code-snippet/diagram/commands/customCommand-cs1" %} -### Disable/Modify the existing command +### Disable/Modify the Existing Command -When any of the default commands are not desired, they can be disabled. Additionally, if you need to change the functionality of a specific command, it can be completely modified. +When any one of the default commands is not desired, they can be disabled. To change the functionality of a specific command, the command can be completely modified. The following code example illustrates how to disable the default cut and delete commands using CTRL+X and Delete keys, and how to modify the copy command to clone a node using CTRL+C: @@ -481,9 +480,9 @@ The following code example illustrates how to disable the default cut and delete {% previewsample "page.domainurl/code-snippet/diagram/commands/modifyCommand-cs1" %} -## Undo-redo +## Undo-Redo -Undo/redo commands can be executed through shortcut keys. Shortcut key for undo is **`Ctrl+z`** and shortcut key for redo is **`Ctrl+y`**. For more information refer to the [`undo-redo`](./undo-redo) +Undo/redo commands can be executed through shortcut keys. Shortcut key for undo is **Ctrl+z** and shortcut key for redo is **Ctrl+y**. For more information refer to the [`undo-redo`](./undo-redo) ## See Also diff --git a/ej2-react/diagram/constraints.md b/ej2-react/diagram/constraints.md index a6997df67..35769f9fc 100644 --- a/ej2-react/diagram/constraints.md +++ b/ej2-react/diagram/constraints.md @@ -1,42 +1,43 @@ --- layout: post -title: Constraints in React Diagram component | Syncfusion® -description: Learn here all about Constraints in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Constraints in React Diagram Component | Syncfusion® +description: Learn here all about Constraints in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Constraints platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Constraints in React Diagram component +# Constraints in React Diagram Component -Constraints are used to enable/disable certain behaviors of the diagram, nodes and connectors. Constraints are provided as flagged enumerations, so that multiple behaviors can be enabled/disabled using Bitwise operators (&, |, ~, <<, etc.). +Constraints enable or disable specific behaviors of diagrams, nodes, and connectors. These constraints are implemented as flagged enumerations, allowing multiple behaviors to be controlled simultaneously using Bitwise operators (`&, |, ~, <<, etc.`). To know more about Bitwise operators, refer to [`Bitwise Operations`](#bitwise-operations). -## Diagram constraints +## Diagram Constraints -[`Diagram constraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramConstraints/) allows you to enable or disable the following behaviors: +[`Diagram constraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramConstraints/) control the overall behavior and functionality of the diagram canvas. The following table displays the list of all diagram constraints. + | Constraints | Description | | -------- | -------- | -|None|Disable all diagram functionalities.| -|Bridging|Enables or disables Bridging support for connector in diagram.| -|Undo/redo|Enables or disables the Undo/Redo support for the diagram.| -|UserInteraction|Enables or disables user interaction support for the diagram.| -|ApiUpdate|Enables or disables Api update support for the diagram.| -|PageEditable|Enables or disables Page Editable support for the diagram.| -|Zoom|Enables or disables Zoom support for the diagram.| -|PanX|Enables or disables Panning X coordinate support for the diagram.| -|PanY|Enables or disables Panning Y coordinate support for the diagram.| -|Pan|Enables or disables panning both X and Y coordinates support for the diagram.| -|ZoomTextEdit|Enables or disables zooming the text box while editing the text.| -|Tooltip|Enables or disables the tooltip for the diagram.| -|Virtualization|Enables or disables Virtualization support for the diagram.| -|LineRouting|Enables or disables the line routing.| -|Default|Enables or disables all constraints in diagram.| +|None|Disables all diagram functionalities.| +|Bridging|Enables bridging support for connectors in the diagram.| +|Undo/redo|Enables undo and redo functionality for diagram operations.| +|UserInteraction|Enables user interaction capabilities for the diagram.| +|ApiUpdate|Enables programmatic updates through API calls.| +|PageEditable|Enables editing within the page boundaries.| +|Zoom|Enables zooming functionality for the diagram.| +|PanX|Enables horizontal panning of the diagram.| +|PanY|Enables vertical panning of the diagram.| +|Pan|Enables both horizontal and vertical panning.| +|ZoomTextEdit|Enables text box zooming during text editing operations.| +|Tooltip|Enables tooltip display for diagram elements.| +|Virtualization|Enables virtualization support for large diagrams.| +|LineRouting|Enables automatic line routing for connectors.| +|Default|Enables all default constraints for the diagram.| The following example illustrates how to disable page editing using the diagram constraints. @@ -107,43 +108,43 @@ N> By default, the following constraints are enabled in the diagram,
      * PageEditable
      * Default -## Node constraints +## Node Constraints -Node constraints allows to enable or disable the following behaviors of node. They are as follows: +Node constraints control the behavior and interactions available for individual nodes within the diagram. | Constraints | Description | | -------- | -------- | -|None|Disable all node Constraints| -|Select|Enables or disables the node to be selected.| -|Drag|Enables or disables the node to be dragged.| -|Rotate|Enables or disables the node to be rotated.| -|Shadow|Enables or disables the node to display shadow.| -|PointerEvents|Enables or disables the node to provide pointer option.| -|Delete|Enables or disables node to be deleted.| -|InConnect|Enables or disables node to provide in connect option.| -|OutConnect|Enables or disables node to provide out connect option.| -|AllowDrop|Enables node to provide allow to drop option.| -|Individual|Enables node to provide individual resize option | -|ResizeNorthEast|Enable or disable to resize NorthEast side of the node.| -|ResizeEast|Enable or disable to resize East side of the node.| -|ResizeSouthEast|Enable or disable to resize SouthEast side of the node.| -|ResizeSouth|Enable or disable to resize South side of the node.| -|ResizeSouthWest|Enable or disable to resize SouthWest side of the node.| -|ResizeWest|Enable or disable to resize West side of the node.| -|ResizeNorthWest|Enable or disable to resize NorthWest side of the node.| -|ResizeNorth|Enable or disable to resize North side of the node.| -|AspectRatio|Enables the Aspect ratio of the node.| -|ReadOnly|Enables the ReadOnly support for annotation in the node.| -|HideThumbs|Enable to hide all resize thumbs for the node.| -|Tooltip|Enables or disables tooltip for the Nodes.| -|InheritTooltip|Enables or disables inherit tooltip option from the parent object.| -|Resize|Enables or Disables the expansion or compression of a node.| -|Inherit|Enables the node to inherit the interaction option from the parent object.| -|Expandable|Enables node to provide Expandable option| -|AllowMovingOutsideLane| Enables or disables child in parent for the swimLane node | +|None|Disables all node constraints.| +|Select|Enables node selection capability.| +|Drag|Enables node dragging functionality.| +|Rotate|Enables node rotation capability.| +|Shadow|Enables shadow display for the node.| +|PointerEvents|Enables pointer event handling for the node.| +|Delete|Enables node deletion capability.| +|InConnect|Enables incoming connections to the node.| +|OutConnect|Enables outgoing connections from the node.| +|AllowDrop|Enables drop operations on the node.| +|Individual|Enables individual resize handles for the node.| +|ResizeNorthEast|Enables resizing from the northeast corner.| +|ResizeEast|Enables resizing from the east side.| +|ResizeSouthEast|Enables resizing from the southeast corner.| +|ResizeSouth|Enables resizing from the south side.| +|ResizeSouthWest|Enables resizing from the southwest corner.| +|ResizeWest|Enables resizing from the west side.| +|ResizeNorthWest|Enables resizing from the northwest corner.| +|ResizeNorth|Enables resizing from the north side.| +|AspectRatio|Maintains aspect ratio during resize operations.| +|ReadOnly|Enables read-only mode for node annotations.| +|HideThumbs|Hides all resize thumbs for the node.| +|Tooltip|Enables tooltip display for the node.| +|InheritTooltip|Inherits tooltip settings from parent objects.| +|Resize|Enables overall resize functionality for the node.| +|Inherit|Inherits interaction settings from parent objects.| +|Expandable|Enables expand/collapse functionality for the node.| +|AllowMovingOutsideLane|Allows movement outside swim lane boundaries.| |Default|Enables all default constraints for the node.| -The following example illustrates how to disable rotation using the node constraints. +The following example demonstrates how to disable rotation using node constraints: ```ts let nodes: NodeModel[] = [ @@ -163,7 +164,7 @@ const root = ReactDOM.createRoot(document.getElementById("diagram")); root.render(); ``` -The following example shows how to add Shadow constraint to the default constraints of node. +The following example shows how to add shadow constraint to the default node constraints: ```ts let nodes: NodeModel[] = [ @@ -183,7 +184,7 @@ const root = ReactDOM.createRoot(document.getElementById("diagram")); root.render(); ``` -The following code example shows how the tooltip can be enabled for the node. +The following code example shows how to enable tooltip for a node: ```ts let nodes: NodeModel[] = [ @@ -203,7 +204,7 @@ const root = ReactDOM.createRoot(document.getElementById("diagram")); root.render(); ``` -Multiple behaviors can be added or removed from the default constraints using the `Bitwise Operations`. +Multiple behaviors can be added or removed from the default constraints using `Bitwise Operations`. The following code example shows how to remove rotate and resize constraints from node. @@ -261,38 +262,37 @@ N>By default, the following constraints are enabled for the node,
      * InheritTooltip
      * Default -## Connector constraints +## Connector Constraints -Connector constraints allow to enable or disable certain behaviors of connectors. +Connector constraints control the behavior and interactions available for connectors within the diagram. | Constraints | Description | | -------- | -------- | -|None|Disable all connector Constraints.| -|Select|Enables or disables connector to be selected.| -|Delete|Enables or disables connector to be deleted.| -|Drag|Enables or disables connector to be dragged.| -|DragSourceEnd|Enables connectors source end to be selected.| -|DragTargetEnd|Enables connectors target end to be selected.| -|DragSegmentThumb|Enables control point and end point of every segment in a connector for editing.| -|Interaction|Enables or disables Interaction for the connector.| -|AllowDrop|Enables allow drop support to the connector.| -|Bridging|Enables bridging to the connector.| -|InheritBridging|Enables to inherit bridging option from the parent object.| -|BridgeObstacle| Enables or Disables Bridge Obstacles with overlapping of connectors.| -|PointerEvents|Enables to set the pointer events.| -|ConnectToNearByNode|Enables to connect to the nearest node.| -|ConnectToNearByPort|Enables to connect to the nearest port.| -|Tooltip|Enables or disables tooltip for the connectors.| -|LineRouting| Enables or disables routing to the connector.| -|InheritLineRouting|Enables or disables routing to the connector. | -|InheritTooltip|Enables or disables inherit tooltip option from the parent object -|ConnectToNearByElement|Enables to connect to the nearest elements.| -|InheritSegmentThumbShape|Enables or disables to inherit the value of segmentThumbShape.| -|ReadOnly|Enables or disables readonly for the connector.| -|Default|Enables all constraints for the connector.| - - -The following code illustrates how to disable selection by using connector constraints. +|None|Disables all connector constraints.| +|Select|Enables connector selection capability.| +|Delete|Enables connector deletion capability.| +|Drag|Enables connector dragging functionality.| +|DragSourceEnd|Enables dragging of the connector's source endpoint.| +|DragTargetEnd|Enables dragging of the connector's target endpoint.| +|DragSegmentThumb|Enables dragging of segment control points.| +|Interaction|Enables general interaction capabilities for the connector.| +|AllowDrop|Enables drop operations on the connector.| +|Bridging|Enables bridging functionality for the connector.| +|InheritBridging|Inherits bridging settings from parent objects.| +|BridgeObstacle|Enables the connector to act as a bridge obstacle.| +|PointerEvents|Enables pointer event handling for the connector.| +|ConnectToNearByNode|Enables automatic connection to nearby nodes.| +|ConnectToNearByPort|Enables automatic connection to nearby ports.| +|Tooltip|Enables tooltip display for the connector.| +|LineRouting|Enables line routing functionality for the connector.| +|InheritLineRouting|Inherits line routing settings from parent objects.| +|InheritTooltip|Inherits tooltip settings from parent objects.| +|ConnectToNearByElement|Enables automatic connection to nearby elements.| +|InheritSegmentThumbShape|Inherits segment thumb shape from parent objects.| +|ReadOnly|Enables read-only mode for the connector.| +|Default|Enables all default constraints for the connector.| + +The following code demonstrates how to disable selection using connector constraints: ```ts let connectors: ConnectorModel[] = [{ @@ -323,7 +323,7 @@ root.render(); ``` -The following example shows how to add Bridging constraint to the default constraints of connector. +The following example shows how to add bridging constraint to the default connector constraints: ```ts let connectors: ConnectorModel[] = [{ @@ -353,9 +353,9 @@ const root = ReactDOM.createRoot(document.getElementById('diagram')); root.render(); ``` -N> To visualize connector bridging, we need to inject ConnectorBridgin module. +N> To visualize connector bridging, inject the ConnectorBridging module. -The following code example shows how the tooltip can be enabled for the connector. +The following example shows how to enable tooltip for connectors: ```ts let connectors: ConnectorModel[] = [{ @@ -446,20 +446,20 @@ N>By default, the following constraints are enabled for the connector,
      * InheritSegmentThumbShape
      * Default -## Port constraints +## Port Constraints -The constraints property of the Port allows you to enable or disable the following behaviors of port. +Port constraints control the behavior and connection capabilities of ports attached to nodes. | Constraints | Description | | -------- | -------- | -|None|Disable all port Constraints.| -|Draw|Enables to create the connection when mouse hover on the port.| -|Drag|Enables or disables port dragging| -|InConnect|Enables or disables to connect only the target end of connector.| -|OutConnect|Enables or disables to connect only the source end of connector.| -|ToolTip|Enables or disables the Tooltip for the ports.| -|InheritTooltip|Enables or disables the Tooltip for the ports.| -|Default|Enables all constraints for the port.| +|None|Disables all port constraints.| +|Draw|Enables connection creation when hovering over the port.| +|Drag|Enables port dragging functionality.| +|InConnect|Enables incoming connections to the port only.| +|OutConnect|Enables outgoing connections from the port only.| +|ToolTip|Enables tooltip display for the port.| +|InheritTooltip|Inherits tooltip settings from parent objects.| +|Default|Enables all default constraints for the port.| The following code illustrates how to disable creating connections with a port. @@ -478,7 +478,7 @@ let nodes: NodeModel[] = [ ]; ``` -The following code example shows how to modify the port constraints to accept target connection alone. +The following code example shows how to configure port constraints to accept only incoming connections: ```ts let nodes: NodeModel[] = [ @@ -530,19 +530,19 @@ N> By default, the following constraints are enabled for the port,
      * InConnect
      * OutConnect -## Annotation constraints +## Annotation Constraints -The constraints property of the Annotations allows you to enable or disable certain behaviors of annotation. +Annotation constraints control the behavior and edit ability of text annotations on nodes and connectors. | Constraints | Description | | -------- | -------- | -|ReadOnly|Enables or disables the ReadOnly Constraints,| -|InheritReadOnly|Enables or disables to inherit the ReadOnly option from the parent object.| -|Select|Enables or Disable select support for the annotation| -|Drag|Enables or Disable drag support for the annotation| -|Resize| Enables or Disable resize support for the annotation | -|Rotate| Enables or Disable rotate support for the annotation| -|Interaction|Enables interaction of annotation| +|ReadOnly|Enables read-only mode for the annotation.| +|InheritReadOnly|Inherits read-only settings from parent objects.| +|Select|Enables selection capability for the annotation.| +|Drag|Enables dragging functionality for the annotation.| +|Resize|Enables resize capability for the annotation.| +|Rotate|Enables rotation capability for the annotation.| +|Interaction|Enables general interaction capabilities for the annotation.| |None|Disables all constraints for the annotation.| The read-only mode for the annotation is enabled by settings ReadOnly constraints to the annotation. @@ -614,28 +614,28 @@ Refer sample below For more details about annotation constraints, refer to [`AnnotationConstraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/annotationConstraints#AnnotationConstraints). -## Selector constraints +## Selector Constraints -Selector visually represents the selected elements with certain editable thumbs. The visibility of the thumbs can be controlled with selector constraints. The part of selector is categorized as follows: +Selector constraints control the visibility and behavior of selection handles and thumbs that appear when elements are selected. | Constraints | Description | | -------- | -------- | -|None|Hides all the selector elements.| -|ConnectorSourceThumb|Shows or hides the source thumb of the connector.| -|ConnectorTargetThumb|Shows or hides the target thumb of the connector.| -|ResizeSouthEast|Shows or hides the bottom right resize handle of the selector.| -|ResizeSouthWest|Shows or hides the bottom left resize handle of the selector.| -|ResizeNorthEast|Shows or hides the top right resize handle of the selector.| -|ResizeNorthWest|Shows or hides the top left resize handle of the selector.| -|ResizeEast|Shows or hides the middle right resize handle of the selector.| -|ResizeWest|Shows or hides the middle left resize handle of the selector.| -|ResizeSouth|Shows or hides the bottom center resize handle of the selector.| -|ResizeNorth|Shows or hides the top center resize handle of the selector.| -|Rotate|Shows or hides the rotate handle of the selector.| -|UserHandle|Shows or hides the user handles of the selector.| -|ToolTip| Shows or hides the default tooltip for the drag, resize, and rotate operation of nodes and connectors. | -|ResizeAll|Shows or hides all resize handles of the selector.| -|All|Shows all handles of the selector.| +|None|Hides all selector elements.| +|ConnectorSourceThumb|Shows or hides the connector's source thumb.| +|ConnectorTargetThumb|Shows or hides the connector's target thumb.| +|ResizeSouthEast|Shows or hides the bottom-right resize handle.| +|ResizeSouthWest|Shows or hides the bottom-left resize handle.| +|ResizeNorthEast|Shows or hides the top-right resize handle.| +|ResizeNorthWest|Shows or hides the top-left resize handle.| +|ResizeEast|Shows or hides the middle-right resize handle.| +|ResizeWest|Shows or hides the middle-left resize handle.| +|ResizeSouth|Shows or hides the bottom-center resize handle.| +|ResizeNorth|Shows or hides the top-center resize handle.| +|Rotate|Shows or hides the rotation handle.| +|UserHandle|Shows or hides custom user handles.| +|ToolTip|Shows or hides tooltips during drag, resize, and rotate operations.| +|ResizeAll|Shows or hides all resize handles.| +|All|Shows all available handles.| The following code illustrates how to hide rotator. @@ -719,32 +719,32 @@ Refer sample below For more information about selector constraints, refer to [`SelectorConstraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/selectorConstraints). -N> By default, the following constraints are enabled for the selected items, +N> By default, the following constraints are enabled for the selected items:
      * Rotate -
      * UserHandel +
      * UserHandle
      * ResizeAll
      * All
      * ToolTip -## Snap constraints +## Snap Constraints -Snap constraints control the visibility of gridlines and enable/disable snapping. +Snap constraints control the visibility of gridlines and enable or disable snapping functionality for precise element positioning. The following list of snapping constraints are used to enable or disable certain features of snapping. | Constraints | Description | | -------- | -------- | -|None|Disable snapping for the nodes/connectors in diagram.| -|ShowHorizontalLines|Displays only the horizontal gridlines in diagram.| -|ShowVerticalLines|Displays only the Vertical gridlines in diagram.| -|ShowLines|Display both Horizontal and Vertical gridlines.| -|SnapToHorizontalLines|Enables the object to snap only with horizontal gridlines.| -|SnapToVerticalLines|Enables the object to snap only with Vertical gridlines.| -|SnapToLines|Enables the object to snap with both horizontal and Vertical gridlines.| -|SnapToObject|Enables the object to snap with the other objects in the diagram.| -|All|Shows gridlines and enables snapping.| - -The following code illustrates how to show only horizontal gridlines. +|None|Disables snapping for all diagram elements.| +|ShowHorizontalLines|Displays horizontal gridlines in the diagram.| +|ShowVerticalLines|Displays vertical gridlines in the diagram.| +|ShowLines|Displays both horizontal and vertical gridlines.| +|SnapToHorizontalLines|Enables snapping to horizontal gridlines only.| +|SnapToVerticalLines|Enables snapping to vertical gridlines only.| +|SnapToLines|Enables snapping to both horizontal and vertical gridlines.| +|SnapToObject|Enables snapping to other objects in the diagram.| +|All|Shows gridlines and enables all snapping functionality.| + +The following code demonstrates how to show only horizontal gridlines: {% raw %} @@ -803,7 +803,7 @@ Refer sample below For more information about snap constraints, refer to [`SnapConstraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/snapConstraints). -N> By default, the following constraints are enabled for the snap functionality in the diagram, +N> By default, the following constraints are enabled for the snap functionality:
      * ShowLines
      * ShowVerticalLines
      * ShowHorizontalLines @@ -813,17 +813,16 @@ N> By default, the following constraints are enabled for the snap functionality
      * SnapToObject
      * All -## Boundary constraints - -Boundary constraints defines a boundary for the diagram inside which the interaction should be done. +## Boundary Constraints +Boundary constraints define the interaction boundaries for diagram elements, controlling where users can perform operations. The following list of constraints are used to enable or disable certain features of boundary interactions of the diagram. | Constraints | Description | | -------- | -------- | -|Infinity|Allow the interactions to take place at the infinite height and width.| -|Diagram|Allow the interactions to take place around the diagram height and width.| -|Page|Allow the interactions to take place around the page height and width.| +|Infinity|Allows interactions at infinite height and width.| +|Diagram|Limits interactions within the diagram's height and width.| +|Page|Limits interactions within the page boundaries.| The following code illustrates how to limit the interaction done inside a diagram within a page. @@ -860,13 +859,13 @@ Refer sample below {% previewsample "page.domainurl/code-snippet/diagram/constraints/constraints-cs7" %} -For more information about selector constraints, refer to [`BoundaryConstraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/boundaryConstraints). +For more information about boundary constraints, refer to [`BoundaryConstraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/boundaryConstraints). -## Inherit behaviors +## Inherit Behaviors -Some of the behaviors can be defined through both the specific object (node/connector) and diagram. When the behaviors are contradictorily defined through both, the actual behavior is set through inherit options. +When behaviors are defined at both the specific object level (node/connector) and diagram level, inheritance options determine the actual behavior applied. -The following code example illustrates how to inherit the line bridging behavior from the diagram model. +The following code example demonstrates how to inherit line bridging behavior from the diagram model: ```ts let connectors: ConnectorModel[] = [{ @@ -901,36 +900,36 @@ const root = ReactDOM.createRoot(document.getElementById('diagram')); root.render(); ``` -## Bitwise operations +## Bitwise Operations -Bitwise operations are used to manipulate the flagged enumerations [enum]. In this section, Bitwise operations are illustrated by using node constraints. The same is applicable while working with node constraints, connector constraints, or port constraints. +Bitwise operations manipulate flagged enumerations to enable precise control over multiple constraint behaviors simultaneously. -## Add operation +### Add Operation -You can add or enable multiple values at a time by using Bitwise ‘|’ (OR) operator. +Use the Bitwise `|` (OR) operator to add or enable multiple values: ```ts node.constraints = NodeConstraints.Select | NodeConstraints.Rotate; ``` -In the previous example, you can do both the selection and rotation operation. +This example enables both selection and rotation operations for the node. -## Remove Operation +### Remove Operation -You can remove or disable values by using Bitwise ‘&~’ (XOR) operator. +Use the Bitwise `&~` (XOR) operator to remove or disable specific values: ```ts node.constraints = node.constraints & ~NodeConstraints.Rotate; ``` -In the previous example, rotation is disabled but other constraints are enabled. +This example disables rotation while maintaining other enabled constraints. -## Check operation +### Check Operation -You can check any value by using Bitwise ‘&’ (AND) operator. +Use the Bitwise `&` (AND) operator to verify if specific values are enabled: ```ts if ((node.constraints & NodeConstraints.Rotate) == NodeConstraints.Rotate); ``` -In the previous example, check whether the rotate constraints are enabled in a node. When node constraints have rotate constraints, the expression returns a rotate constraint. +This example checks whether rotation constraints are enabled for a node. When the node has rotation constraints enabled, the expression returns the rotate constraint value. \ No newline at end of file diff --git a/ej2-react/diagram/container.md b/ej2-react/diagram/container.md index 07c5454c8..e1bf07abc 100644 --- a/ej2-react/diagram/container.md +++ b/ej2-react/diagram/container.md @@ -1,22 +1,22 @@ --- layout: post -title: Container in React Diagram component | Syncfusion® -description: Learn here all about Container in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Container in React Diagram Component | Syncfusion® +description: Learn here all about Container in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Container platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Container in React Diagram component +# Container in React Diagram Component -A Container is a group of logically related shapes surrounded by a visible boundary. Shapes can be added or removed from the container at runtime. Changes made to the container do not affect its child elements, which can be individually selected, moved, or edited. +A Container is a specialized node that groups logically related shapes within a visible boundary. Unlike regular groups, containers automatically manage child elements while maintaining individual element properties. Common use cases include organizing related components in flowcharts, creating swimlanes in process diagrams, and building composite UI layouts. ## Create Container ### Add a Container -The following code illustrates how to create a container node: +Container nodes require specific configuration to enable child element management and boundary recognition. The following example demonstrates creating a basic container with essential properties: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -31,9 +31,9 @@ The following code illustrates how to create a container node: ### Setting a Header -You can provide a textual description for a container using its [header](https://ej2.syncfusion.com/react/documentation/api/diagram/containerModel/#header) property. Also, users can customize the header's appearance using the header's [style](https://ej2.syncfusion.com/react/documentation/api/diagram/headerModel/#style) property. +Headers provide textual identification for containers and can be fully customized for appearance and behavior. The [`header`](https://ej2.syncfusion.com/react/documentation/api/diagram/containerModel/#header) property accepts text content, while the header's [`style`](https://ej2.syncfusion.com/react/documentation/api/diagram/headerModel/#style) property controls visual formatting including fonts, colors, and alignment. -The following code example explains how to define a container header and its customization: +The following example shows header configuration with custom styling: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -46,17 +46,17 @@ The following code example explains how to define a container header and its cus {% previewsample "page.domainurl/code-snippet/diagram/container/container-2" %} -N> You can edit the header by double-clicking the region of the container's header. +N> Double-click the header region to enable inline text editing functionality. -### Container from symbol palette +### Container from Symbol Palette -Container nodes can be preconfigured and added to the symbol palette. Users can drag and drop these container nodes into the diagram as needed. +Preconfigured container templates can be added to the symbol palette for reusable across diagrams. This approach standardizes container designs and accelerates diagram creation workflows. -To learn more, refer to the [Symbol Palette](./symbol-palette) documentation. +For detailed symbol palette integration steps, refer to the [Symbol Palette](./symbol-palette) documentation. -## Interactively add or remove diagram elements into Container +### Interactively Add or Remove Elements -You can interactively add or remove diagram elements from the Container in the runtime. When a diagram element is dropped near the container's edge, the container automatically resizes to accommodate it. +The diagram supports drag-and-drop operations for adding elements to containers at runtime. When elements approach a container's boundary, visual feedback indicates drop zones, and the container automatically expands to accommodate new children while maintaining proper spacing. ![Container](images/container.gif) @@ -70,8 +70,8 @@ The events triggered when interacting with container nodes are similar to those ## See Also -* [How to add nodes to the symbol palette](./symbol-palette) -* [How to customize nodes](./nodes-customization) -* [How to add ports to the node](./ports) -* [How to enable/disable the behavior of the node](./constraints) -* [How to create diagram nodes using drawing tools](./tools) +* [How to add nodes to the symbol palette.](./symbol-palette) +* [How to customize nodes.](./nodes-customization) +* [How to add ports to the node.](./ports) +* [How to enable/disable the behavior of the node.](./constraints) +* [How to create diagram nodes using drawing tools.](./tools) diff --git a/ej2-react/diagram/context-menu.md b/ej2-react/diagram/context-menu.md index 4d0a3c419..f6aef88b9 100644 --- a/ej2-react/diagram/context-menu.md +++ b/ej2-react/diagram/context-menu.md @@ -1,29 +1,34 @@ --- layout: post -title: Context menu in React Diagram component | Syncfusion® -description: Learn here all about Context menu in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Context menu in React Diagram Component | Syncfusion® +description: Learn here all about Context menu in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Context menu platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Context menu in React Diagram component +# Context Menu in React Diagram Component -In a graphical user interface (GUI), a context menu is a type of menu that appears when you perform a right-click operation. It offers users a set of actions relevant to the current context. In diagrams, context menus can be customized extensively. The Diagram control provides built-in context menu items while also allowing users to define custom menu items through the [`contextMenuSettings`](https://ej2.syncfusion.com/react/documentation/api/diagram/#contextmenusettings) property. This flexibility enables tailoring menus to specific application needs, including creating nested levels of menu items for more intricate user interactions. To ensure the context menu is rendered correctly, make sure to include the necessary CSS references from the Syncfusion® `ej2-navigations` package. This can be achieved by adding the following line in your `src/App.css` file. +In graphical user interfaces, a context menu appears when you perform a right-click operation, offering users a set of actions relevant to the current context. The React Diagram component provides extensive context menu customization capabilities through the [`contextMenuSettings`](https://ej2.syncfusion.com/react/documentation/api/diagram/#contextmenusettings) property. + +The Diagram control includes built-in context menu items and allows you to define custom menu items. This flexibility enables you to tailor menus to specific application needs, including creating nested levels of menu items for complex user interactions. + +## Prerequisites + +To ensure the context menu renders correctly, include the necessary CSS references from the Syncfusion® `ej2-navigations` package by adding the following line to your `src/styles.css` file: `@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";` N> If you want to use contextMenu in diagram, you need to inject `DiagramContextMenu` Module in the diagram. -## Default context menu +## Default Context Menu -Diagram provides some default context menu items to ease the execution of some frequently used commands. The [`show`](https://ej2.syncfusion.com/react/documentation/api/diagram/contextMenuSettings/#show) property helps you to enable/disable the context menu. - -The following code illustrates how to enable the default context menu items. +The Diagram component provides default context menu items for frequently used commands. Use the [`show`](https://ej2.syncfusion.com/react/documentation/api/diagram/contextMenuSettings/#show) property to enable or disable the context menu. +The following code demonstrates how to enable the default context menu items: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -36,22 +41,22 @@ The following code illustrates how to enable the default context menu items. {% previewsample "page.domainurl/code-snippet/diagram/contextmenu/contextmenu-cs1" %} -## Custom context menu - -Context menu can be defined for individual node with the desired context menu items. +## Customize Context Menu -Context menus can be customized for individual nodes by defining specific menu items beyond the default options. To add additional context menu items, you need to define and incorporate them into the [`items`](https://ej2.syncfusion.com/react/documentation/api/diagram/contextMenuSettings/#items) property of the context menu. +You can customize context menus for individual nodes by defining specific menu items beyond the default options. To add custom context menu items, define and incorporate them into the [`items`](https://ej2.syncfusion.com/react/documentation/api/diagram/contextMenuSettings/#items) property of the context menu. Each custom item can be defined with specific text and ID using the[`text`](https://ej2.syncfusion.com/react/documentation/api/diagram/contextMenuItemModel/#items) and [`ID`](https://ej2.syncfusion.com/react/documentation/api/diagram/contextMenuItemModel/#id) properties, respectively. Additionally, you can enhance visual cues by associating icons through the [`iconCss`](https://ej2.syncfusion.com/react/documentation/api/diagram/contextMenuItemModel/#iconcss) for enabling the use of font icons. The [`target`](https://ej2.syncfusion.com/react/documentation/api/diagram/contextMenuItemModel/#target) property specifies where each menu item should appear, and separators can be included using the [`separator`](https://ej2.syncfusion.com/react/documentation/api/diagram/contextMenuItemModel/#separator) property to visually group menu items. This flexibility allows for a tailored user interface that meets specific application needs efficiently. Nested menu items are defined within the [`items`](https://ej2.syncfusion.com/react/documentation/api/diagram/contextMenuItemModel/#items) property of a parent menu item. -### To Display custom menu alone +### Display Custom Menu Only + +To display only custom context menu items, set the [`showCustomMenuOnly`](https://ej2.syncfusion.com/react/documentation/api/diagram/contextMenuSettingsModel/#showcustommenuonly) property to **true**. -To display the custom context menu items alone, set the [`showCustomMenuOnly`](https://ej2.syncfusion.com/react/documentation/api/diagram/contextMenuSettingsModel/#showcustommenuonly) property to true. +### Context Menu Click -### Context menu click +Handle custom menu item actions using the [`contextMenuClick`](https://ej2.syncfusion.com/react/documentation/api/diagram/#contextmenuclick) event. This event triggers when a menu item is clicked and allows you to define specific actions based on the selected item. -Upon clicking custom menu items, actions are handled using the [`contextMenuClick`](https://ej2.syncfusion.com/react/documentation/api/diagram/#contextmenuclick) event in the diagram. This event allows you to define actions based on which menu item is clicked. For instance, in the example below, the cloning of nodes and the change of fill color for nodes and annotations are efficiently managed and implemented through this event. +The following example demonstrates context menu click handling for node cloning and color changes: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -65,11 +70,11 @@ Upon clicking custom menu items, actions are handled using the [`contextMenuClic {% previewsample "page.domainurl/code-snippet/diagram/contextmenu/contextmenu-cs2" %} -### Context menu open +### Context Menu Open -In certain situations, you may want to hide specific menu items based on the selected elements in the diagram. This can be achieved using the [`contextMenuOpen`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramBeforeMenuOpenEventArgs/) event. When the context menu is opened via right-click, the `contextMenuOpen` event is triggered. Within this event, you can create an array of menu items to hide for the selected element and pass it to the [`hiddenItems`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramBeforeMenuOpenEventArgs/#hiddenitems) property of the contextMenuOpen event argument. +In certain situations, you may want to hide specific menu items based on the selected elements in the diagram. This can be achieved using the [`contextMenuOpen`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramBeforeMenuOpenEventArgs/) event. When the context menu opens via right-click, this event triggers and allows you to create an array of menu items to hide for the selected element. Pass this array to the[`hiddenItems`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramBeforeMenuOpenEventArgs/#hiddenitems) property of the contextMenuOpen event argument. -The following example demonstrates how to display different custom menu items for nodes, connectors, and the diagram based on the selection. +The following example shows how to display different custom menu items for nodes, connectors, and the diagram based on selection: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -82,9 +87,9 @@ The following example demonstrates how to display different custom menu items fo {% previewsample "page.domainurl/code-snippet/diagram/contextmenu/contextmenu-cs3" %} -### Context menu with Url +### Context Menu with URL -[`url`](https://ej2.syncfusion.com/react/documentation/api/diagram/contextMenuItemModel#url) property of the menu item is used to set the url of any website which will be opened upon clicking on them. +Use the[`url`](https://ej2.syncfusion.com/react/documentation/api/diagram/contextMenuItemModel#url) property of menu items to set website URLs that open when clicked. The following code example shows the context menu with url for three websites. @@ -153,11 +158,11 @@ root.render(); ``` {% endraw %} -## Template Support for Context menu +## Template Support for Context Menu -Diagram provides template support for the context menu. The template for the context menu items can be customized before rendering by using the [`contextMenuBeforeItemRender`](https://ej2.syncfusion.com/react/documentation/api/diagram/#contextmenubeforeitemrender) event, which triggers while rendering each menu item. +The Diagram component provides template support for context menu customization. Customize menu item templates before rendering using the [`contextMenuBeforeItemRender`](https://ej2.syncfusion.com/react/documentation/api/diagram/#contextmenubeforeitemrender) event, which triggers while rendering each menu item. -In the following example, menu items are rendered with shortcut key codes for specific actions in the context menu using a template. The key codes for cut, copy, and paste actions are displayed at the right corner of the menu items by adding a span element in the `contextMenuBeforeItemRender` event. +The following example renders menu items with shortcut key codes for specific actions. Key codes for cut, copy, and paste actions display in the right corner of menu items by adding a span element in the `contextMenuBeforeItemRender` event: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -170,7 +175,7 @@ In the following example, menu items are rendered with shortcut key codes for sp {% previewsample "page.domainurl/code-snippet/diagram/contextmenu/es5menutemplate-cs1" %} -## Context menu events +## Context Menu Events |Event|Description| |----|----| diff --git a/ej2-react/diagram/data-binding.md b/ej2-react/diagram/data-binding.md index ffbea7a5b..140f76c17 100644 --- a/ej2-react/diagram/data-binding.md +++ b/ej2-react/diagram/data-binding.md @@ -1,18 +1,22 @@ --- layout: post -title: Data binding in React Diagram component | Syncfusion® -description: Learn here all about Data binding in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Data binding in React Diagram Component | Syncfusion® +description: Learn here all about Data binding in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Data binding platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Data binding in React Diagram component +# Data Binding in React Diagram Component -* Diagram can be populated with the `nodes` and `connectors` based on the information provided from an external data source. +The React Diagram component supports data binding to populate nodes and connectors from external data sources. This feature enables dynamic diagram creation based on structured data, making it ideal for visualizing organizational charts, flowcharts, and hierarchical data structures. -* Diagram exposes its specific data-related properties allowing you to specify the data source fields from where the node information has to be retrieved from. +Data binding in the Diagram component works by mapping data source fields to diagram elements through the `dataSourceSettings` property. The component supports both local JSON data and remote data sources, providing flexibility for various application scenarios. + +## Key Data Binding Properties + +The Diagram component exposes several data-related properties that control how data is mapped to diagram elements: * The [`dataManager`](https://ej2.syncfusion.com/react/documentation/api/diagram/dataSourceModel#datamanager) property is used to define the data source either as a collection of objects or as an instance of `DataManager` that needs to be populated in the diagram. @@ -24,16 +28,20 @@ domainurl: ##DomainURL## * To explore those properties, see [`DataSourceSettings`](https://ej2.syncfusion.com/react/documentation/api/diagram/dataSourceModel). -* Diagram supports two types of data binding. They are: +## Data Binding Types + +The Diagram component supports two primary data binding approaches: - 1. Local data - 2. Remote data +1. **Local data binding** - Uses client-side JSON data. +2. **Remote data binding** - Fetches data from server endpoints using DataManager. -## Local data +## Local Data Binding -Diagram can be populated based on the user defined JSON data (Local Data) by mapping the relevant data source fields. +Local data binding allows the diagram to render nodes and connectors based on client-side JSON data. This approach is ideal for static data or scenarios where the entire dataset is available on the client side. -To map the user defined JSON data with diagram, configure the fields of [`dataSourceSettings`](https://ej2.syncfusion.com/react/documentation/api/diagram/dataSourceModel). The following code example illustrates how to bind local data with the diagram. +To implement local data binding, configure the [`dataSourceSettings`]fields to map your JSON data structure to diagram elements. + +The following code example illustrates how to bind local data with the diagram. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -46,15 +54,13 @@ To map the user defined JSON data with diagram, configure the fields of [`dataSo {% previewsample "page.domainurl/code-snippet/diagram/dataBinding/es5LocalBinding-cs1" %} -## Remote data - -You can bind the diagram with remote data by using [`dataManager`]. +## Remote Data Binding -It uses two different classes: `DataManager` for processing and `Query` for serving data. `DataManager` communicates with data source and `Query` generates data queries that are read by the [`dataManager`](https://ej2.syncfusion.com/react/documentation/api/diagram/dataSourceModel). +Remote data binding enables the diagram to fetch data from server endpoints using the DataManager service. This approach is suitable for large datasets, real-time data, or when data needs to be retrieved from databases or web services. -To learn more about data manager, refer to [`Data Manager`](https://ej2.syncfusion.com/react/documentation/api/diagram/dataSourceModel). +The DataManager handles data communication, while Query objects generate the requests that DataManager processes. This architecture provides powerful data manipulation capabilities including filtering, sorting, and paging. -To bind remote data to the diagram,configure the fields of [`dataSourceSettings`](https://ej2.syncfusion.com/react/documentation/api/diagram/dataSourceModel). The following code illustrates how to bind remote data to the diagram. +For comprehensive DataManager information, see the `dataSourceSettings`. The following code illustrates how to bind remote data to the diagram. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -67,35 +73,37 @@ To bind remote data to the diagram,configure the fields of [`dataSourceSettings` {% previewsample "page.domainurl/code-snippet/diagram/dataBinding/es5RemoteBinding-cs1" %} -## CRUD +## CRUD operations with Data Binding -This feature allows you to read the data source and perform add or edit or delete the data in data source at runtime. +The Diagram component supports Create, Read, Update, and Delete (CRUD) operations, allowing real-time synchronization between the diagram and its data source. This functionality enables users to modify diagram elements and persist changes to the backend. -## Read DataSource +### Reading Data from Multiple Sources -* This feature allows you to define the nodes and connectors collection in the data source and connectionDataSource respectively. +The diagram can simultaneously read from two data sources: one for nodes and another for connectors. This separation provides greater flexibility when dealing with complex data relationships. -* You can set the data collection in the model’s dataSourceSettings [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/diagram/dataSourceModel#datasource) property. The nodes will be generated based on the data specified in the data source. +**Node Data Source Configuration:** -* You can set the connector collection in the model’s dataSourceSettings [`connectionDataSource`](https://ej2.syncfusion.com/react/documentation/api/diagram/dataSourceModel#connectiondatasource) property. +* Set the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/diagram/dataSourceModel#datasource) property to define the node data collection -* The dataSourceSettings connectionDataSource [`dataManager`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectionDataSourceModel#datamanager) property is used to set the data source for the connection data source items. +*Use the [`id`](https://ej2.syncfusion.com/react/documentation/api/diagram/dataSourceModel#id) property to specify the unique identifier field -* If you have a data (data will be set in the dataSource property) with parent relationship in the database and also defined the connector in the connectionDataSource simultaneously, then the connectors set in the connectionDataSource will be considered as a priority to render the connector. +**Connector Data Source Configuration:** -* The dataSourceSettings [`crudAction’s`](https://ej2.syncfusion.com/react/documentation/api/diagram/dataSourceModel#crudaction) [`read`](https://ej2.syncfusion.com/react/documentation/api/diagram/crudActionModel#read) property specifies the method, which is used to read the data source and its populate the nodes in the diagram. +* Configure the [`connectionDataSource`](https://ej2.syncfusion.com/react/documentation/api/diagram/dataSourceModel#connectiondatasource) property for connector data. -* The connectionDataSource crudAction’s [`read`](https://ej2.syncfusion.com/react/documentation/api/diagram/crudActionModel#read) specifies the method, which is used to read the data source and its populates the connectors in the diagram. +* Set [`sourceID`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectionDataSourceModel#sourceid) and [`targetID`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectionDataSourceModel#targetid) to establish connections. -* The dataSourceSettings’s [`id`](https://ej2.syncfusion.com/react/documentation/api/diagram/dataSourceModel#id) and connectionDataSource’s [`id`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectionDataSourceModel#id) properties are used to define the unique field of each JSON data. +* Define connection points using [`sourcePointX`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectionDataSourceModel#sourcepointx), [`sourcePointY`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectionDataSourceModel#sourcepointy), [`targetPointX`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectionDataSourceModel#targetpointx), and [`targetPointY`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectionDataSourceModel#targetpointy) -* The connectionDataSource’s [`sourceID`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectionDataSourceModel#sourceid) and [`targetID`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectionDataSourceModel#targetid) properties are used to set the sourceID and targetID for connection data source item. +* The dataSourceSettings connectionDataSource [`dataManager`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectionDataSourceModel#datamanager) property is used to set the data source for the connection data source items. -* The connectionDataSource’s [`sourcePointX`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectionDataSourceModel#sourcepointx), [`sourcePointY`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectionDataSourceModel#sourcepointy), [`targetPointX`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectionDataSourceModel#targetpointx), and [`targetPointY`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectionDataSourceModel#targetpointy) properties are used to define the sourcePoint and targetPoint values for connector from data source. +**Priority handling:** When both parent-child relationships in the main data source and explicit connectors in the connectionDataSource are defined, the explicit connectors take priority for rendering. + +* The dataSourceSettings [`crudAction’s`](https://ej2.syncfusion.com/react/documentation/api/diagram/dataSourceModel#crudaction) [`read`](https://ej2.syncfusion.com/react/documentation/api/diagram/crudActionModel#read) property specifies the method, which is used to read the data source and its populate the nodes in the diagram. -* The dataSourceSettings crudAction’s [`customFields`](https://ej2.syncfusion.com/react/documentation/api/diagram/crudActionModel#customfields) property is used to maintain the additional information for nodes. +* The connectionDataSource crudAction’s `read` specifies the method, which is used to read the data source and its populates the connectors in the diagram. -* Similarly, connectionDataSource’s crudAction’s [`customFields`](https://ej2.syncfusion.com/react/documentation/api/diagram/crudActionModel#customfields) is used to maintain the additional information for connectors. +**Custom fields:** Use the [`customFields`](https://ej2.syncfusion.com/react/documentation/api/diagram/crudActionModel#customfields) property in crudAction to maintain additional information for both nodes and connectors. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -108,17 +116,17 @@ This feature allows you to read the data source and perform add or edit or delet {% previewsample "page.domainurl/code-snippet/diagram/dataBinding/es5connectionDataSource-cs1" %} -## How to perform Editing at runtime +### How to Perform Editing at Runtime * The dataSourceSettings crudAction object allows you to define the method, which is used to get the changes done in the data source defined for shapes from the client-side to the server-side. * Similarly, the connectionDataSource crudAction object allows you to define the method, which is used to get the changes done in the data source defined for connectors from the client-side to the server-side. -## InsertData +#### Creating New Data (InsertData) * The dataSourceSettings crudAction’s [`create`](https://ej2.syncfusion.com/react/documentation/api/diagram/crudActionModel#create) property specifies the method, which is used to get the nodes added from the client-side to the server-side. -* The connectionDataSource crudAction’s [`create`](https://ej2.syncfusion.com/react/documentation/api/diagram/crudActionModel#create) specifies the method, which is used to get the connectors added from the client-side to the server-side. +* The connectionDataSource crudAction’s `create` specifies the method, which is used to get the connectors added from the client-side to the server-side. * The following code example illustrates how to send the newly added or inserted data from the client to server-side. @@ -174,7 +182,7 @@ diagramInstance.insertData(); * The dataSourceSettings crudAction’s [`update`](https://ej2.syncfusion.com/react/documentation/api/diagram/crudActionModel#update) property specifies the method, which is used to get the modified nodes from the client-side to the server-side. -* The connectionDataSource crudAction’s [`update`](https://ej2.syncfusion.com/react/documentation/api/diagram/crudActionModel#update) specifies the method, which is used to get the modified connectors from the client-side to the server-side. +* The connectionDataSource crudAction’s `update` specifies the method, which is used to get the modified connectors from the client-side to the server-side. * The following code example illustrates how to send the updated data from the client to the server side. @@ -230,7 +238,7 @@ diagramInstance.updateData(); * The dataSourceSettings crudAction’s [`destroy`](https://ej2.syncfusion.com/react/documentation/api/diagram/crudActionModel#destroy) property specifies the method, which is used to get the deleted nodes from the client-side to the server-side. -* The connectionDataSource crudAction’s [`destroy`](https://ej2.syncfusion.com/react/documentation/api/diagram/crudActionModel#destroy) specifies the method, which is used to get the deleted connectors from the client-side to the server-side. +* The connectionDataSource crudAction’s `destroy` specifies the method, which is used to get the deleted connectors from the client-side to the server-side. {% raw %} diff --git a/ej2-react/diagram/lane.md b/ej2-react/diagram/lane.md index 822ea8e1e..643be1892 100644 --- a/ej2-react/diagram/lane.md +++ b/ej2-react/diagram/lane.md @@ -1,20 +1,22 @@ --- layout: post -title: Lane in React Diagram component | Syncfusion® -description: Learn here all about Swim lane in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Lane in React Diagram Component | Syncfusion® +description: Learn here all about Swim lane in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Lane platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -## Lanes +# Lane Management in React Diagram Component -Lane is a functional unit or a responsible department of a business process that helps to map a process within the functional unit or in between other functional units. +## Overview -The number of [`lanes`](https://ej2.syncfusion.com/react/documentation/api/diagram/laneModel) can be added to swimlane. The lanes are automatically stacked inside swimlane based on the order they are added. +A lane is a functional unit or responsible department of a business process that helps to map a process within the functional unit or between other functional units. In swimlane diagrams, lanes represent different actors, departments, or systems that participate in the process workflow. -### Create an empty lane +The number of [`lanes`](https://ej2.syncfusion.com/react/documentation/api/diagram/laneModel) can be added to a swimlane. The lanes are automatically stacked inside the swimlane based on the order they are added. + +### Create an Empty Lane * The lane `id` is used to define the name of the lane and its further used to find the lane at runtime and do any customization. @@ -31,7 +33,7 @@ The following code example illustrates how to define a swimlane with lane. {% previewsample "page.domainurl/code-snippet/diagram/swimlane/es5Emptylane-cs1" %} -### Create lane header +### Create Lane Header * The [`header`](https://ej2.syncfusion.com/react/documentation/api/diagram/laneModel#header) property of lane allows you to textually describe the lane and to customize the appearance of the description. @@ -48,7 +50,7 @@ The following code example illustrates how to define a lane header. {% previewsample "page.domainurl/code-snippet/diagram/swimlane/es5Laneheader-cs1" %} -### Customizing lane and lane header +### Customizing Lane and Lane Header * The size of lane can be controlled by using [`width`](https://ej2.syncfusion.com/react/documentation/api/diagram/headerModel#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/diagram/headerModel#height) properties of lane. @@ -69,9 +71,9 @@ The following code example illustrates how to customize the lane header. {% previewsample "page.domainurl/code-snippet/diagram/swimlane/es5Laneheadercustomize-cs1" %} -#### Dynamic customization of lane header +#### Dynamic Customization of Lane Header -You can customize the lane header style and text properties dynamically. The following code illustrates how to dynamically customize the lane header. +Lane header style and text properties can be customized dynamically. The following code illustrates how to dynamically customize the lane header. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -84,9 +86,9 @@ You can customize the lane header style and text properties dynamically. The fol {% previewsample "page.domainurl/code-snippet/diagram/swimlane/es5Dynamiclaneheader-cs1" %} -### Add/remove lane at runtime +### Add and Remove Lanes at Runtime -You can add the a lanes at runtime by using the [`addLanes`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addlanes) method and remove lane at runtime using the [`removeLane`](https://ej2.syncfusion.com/react/documentation/api/diagram/#removelane) method. The following code illustrates how to dynamically add and remove lane in swimlane. +Lanes can be added at runtime by using the [`addLanes`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addlanes) method and remove lane at runtime using the [`removeLane`](https://ej2.syncfusion.com/react/documentation/api/diagram/#removelane) method. The following code illustrates how to dynamically add and remove lane in swimlane. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -99,9 +101,9 @@ You can add the a lanes at runtime by using the [`addLanes`](https://ej2.syncfus {% previewsample "page.domainurl/code-snippet/diagram/swimlane/es5PhaseCustomize-cs1" %} -### Add children to lane +### Add Children to Lane -To add nodes to lane,you should add [`children`](https://ej2.syncfusion.com/react/documentation/api/diagram/laneModel#children) collection of the lane. +To add nodes to a lane, you should add them to the [`children`](https://ej2.syncfusion.com/react/documentation/api/diagram/laneModel#children) collection of the lane. The following code example illustrates how to add nodes to lane. @@ -116,7 +118,7 @@ The following code example illustrates how to add nodes to lane. {% previewsample "page.domainurl/code-snippet/diagram/swimlane/es5Lanechildern-cs1" %} -#### Add child dynamically into the lane. +#### Add Child Dynamically into the Lane. The child node can be inserted into the lane at runtime by using the [`addNodetoLane`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addnodetolane) method. @@ -131,13 +133,13 @@ The child node can be inserted into the lane at runtime by using the [`addNodeto {% previewsample "page.domainurl/code-snippet/diagram/swimlane/es5Lanechildren-cs2" %} -We can also drag nodes from palette or diagram and drop it inside the lane. +Nodes can also be dragged from the palette or diagram and dropped inside the lane. ![Add child into lane](images/addChildToSwimlane.gif) -### Prevent child movement outside lane +### Prevent Child Movement Outside Lane -To prevent child nodes from moving outside their designated lanes, you can use specific constraints. By default, nodes are allowed to move freely. To restrict their movement, you need to set the constraints accordingly. +To prevent child nodes from moving outside their designated lanes, specific constraints can be used. By default, nodes are allowed to move freely. To restrict their movement, the constraints need to be set accordingly. Here is an example of how to apply these constraints: @@ -152,9 +154,9 @@ Here is an example of how to apply these constraints: {% previewsample "page.domainurl/code-snippet/diagram/swimlane/es5Lanechildren-cs3" %} -### AddInfo +### Additional Information Storage -AddInfo for lanes similar to the nodes. we can store additional information about the specific lane by using the [`addInfo`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addinfo). +Additional information storage for lanes is similar to nodes. Additional information about a specific lane can be stored by using the [`addInfo`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addinfo) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -167,23 +169,24 @@ AddInfo for lanes similar to the nodes. we can store additional information abou {% previewsample "page.domainurl/code-snippet/diagram/swimlane/es5Lanechildren-cs4" %} -### Lane interaction +### Lane Interaction -#### Resizing lane +#### Resizing Lane -* Lane can be resized in the bottom and left direction. -* Lane can be resized by using resize selector of the lane. -* Once you resize the lane, the swimlane will be resized automatically. -* The lane can be resized either resizing the selector or the tight bounds of the child object. If the child node move to edge of the lane it can be automatically resized. The following image illustrates how resize the lane. ![Lane Resizing](images/lane-resizeGif.gif) +* Lanes can be resized in the bottom and left directions. +* Lanes can be resized by using the resize selector of the lane. +* Once a lane is resized, the swimlane will be resized automatically. +* The lane can be resized either by using the resize selector or the tight bounds of the child object. If the child node moves to the edge of the lane,it can be automatically resized. The following image illustrates how to resize the lane. +![Lane Resizing](images/lane-resizeGif.gif) -#### Lane swapping +#### Lane Swapping -* Lanes can be swapped using drag the lanes over another lane. -* Helper should intimate the insertion point while lane swapping. The following image illustrates how swapping the lane. ![Lane Swapping](images/swapping.gif) +* Lanes can be swapped by dragging the lanes over another lane. +* A helper should indicate the insertion point while lane swapping. The following image illustrates how to swap lanes. ![Lane Swapping](images/swapping.gif) -#### Disable Swimlane Lane swapping +#### Disable Swimlane Lane Swapping -You can disable swimlane lane swapping by using the property called `canMove`.. +Swimlane lane swapping can be disabled by using the property called `canMove`. The following code illustrates how to disable swimlane lane swapping. @@ -198,24 +201,28 @@ The following code illustrates how to disable swimlane lane swapping. {% previewsample "page.domainurl/code-snippet/diagram/swimlane/es5PhaseCustomize-cs2" %} -#### Resize helper +#### Resize Helper + +* A special resize helper will be used to resize the lanes. +* The resize cursor will be available on the left and bottom directions only. +* Once the lane is resized, the swimlane will be resized automatically. + +#### Children Interaction in Lanes -* The special resize helper will be used to resize the lanes. -* The resize cursor will be available on the left and bottom direction alone. -* Once resize the lane the swimlane will be resized automatically. +* Child nodes can be resized within swimlanes. +* Child nodes can be dragged within lanes. +* Child nodes can be interchanged from one lane to another lane. +* Child nodes can be dragged and dropped from lanes to the diagram. +* Child nodes can be dragged and dropped from the diagram to lanes. +* Based on the child node interactions, the lane size should be updated. -#### Children interaction in lanes +The following image illustrates children interaction in lanes. -* You can resize the child node within swimlanes. -* You can drag the child nodes within lane. -* Interchange the child nodes from one lane to another lane. -* Drag and drop the child nodes from lane to diagram. -* Drag and drop the child nodes from diagram to lane. -* Based on the child node interactions,the lane size should be updated. -The following image illustrates children interaction in lane. ![Lane Children Interaction](images/child-interaction.gif) +![Lane Children Interaction](images/child-interaction.gif) -#### Lane header editing +#### Lane Header Editing -Diagram provides the support to edit Lane headers at runtime. We achieve the header editing by double click event. Double clicking the header label will enables the editing of that. -The following image illustrates how to edit the lane header. ![Lane Header Editing](images/lane-header-edit.gif) +The diagram provides support to edit lane headers at runtime. Header editing is achieved by double-click events. Double-clicking the header label will enable the editing of that header. +The following image illustrates how to edit the lane header. +![Lane Header Editing](images/lane-header-edit.gif) diff --git a/ej2-react/diagram/palette-customization.md b/ej2-react/diagram/palette-customization.md index bc81fc566..e10f74a42 100644 --- a/ej2-react/diagram/palette-customization.md +++ b/ej2-react/diagram/palette-customization.md @@ -1,22 +1,21 @@ --- layout: post -title: Palette customization in EJ2 React Diagram component | Syncfusion® -description: Learn here how to customize symbol palette in React Diagram component of Syncfusion Essential® JS 2 and more. +title: Symbol Palette customization in EJ2 React Diagram Component | Syncfusion® +description: Learn here all about Symbol palette customization in React Diagram Component of Syncfusion Essential® JS 2 and more. platform: ej2-react control: Symbol palette documentation: ug domainurl: ##DomainURL## --- +# Symbol Palette customization in React Diagram Component -# Symbol Palette customization in React Diagram component +## Customize the Palette Header -## Customize the palette header - -Palettes can be annotated with its header texts. +The header of a symbol palette serves as a label that identifies the category or group of symbols it contains. It helps users quickly locate and understand the purpose of each palette. The [`title`](https://ej2.syncfusion.com/react/documentation/api/diagram/paletteModel/#title) property displayed as the header text of palette. -The [`expanded`](https://ej2.syncfusion.com/react/documentation/api/diagram/paletteModel/#expanded) property of palette allows to expand/collapse its palette items. +The [`expanded`](https://ej2.syncfusion.com/react/documentation/api/diagram/paletteModel/#expanded) property of the palette allows users to expand or collapse its palette items. The [`height`](https://ej2.syncfusion.com/react/documentation/api/diagram/paletteModel/#height) property of palette sets the height of the palette / symbol group. @@ -37,7 +36,7 @@ The following code example illustrates how to customize palette headers. ## Animation -The expand and collapse operation of symbol palette can be animated by utilizing the [`enableAnimation`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette/#enableanimation) property of symbol palette. The following example demonstrates, how to enable and disable animation for symbol palette. +The expand and collapse operations of the symbol palette can be animated by utilizing the [`enableAnimation`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette/#enableanimation) property of the symbol palette. The following example demonstrates how to enable and disable animation for the symbol palette. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -50,9 +49,8 @@ The expand and collapse operation of symbol palette can be animated by utilizing {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/custompalette/palette-animate" %} -## Description for symbols - -The [`description`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/) property defines the descriptive text that appears beneath each symbol in the palette. This text provides additional information about the symbol's purpose or usage within the diagramming context. The description can be dynamically retrieved and defined using the [`getSymbolInfo`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette#getsymbolinfo/) property, allowing information to assist users in understanding the function or meaning of each symbol. +## Description for Symbols +The [`description`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/) property defines the descriptive text that appears beneath each symbol in the palette. This text provides additional information about the symbol's purpose or usage within the diagramming context. The description can be dynamically retrieved and defined using the [`getSymbolInfo`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette#getsymbolinfo) property, allowing information to assist users in understanding the function or meaning of each symbol. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -65,11 +63,9 @@ The [`description`](https://ej2.syncfusion.com/react/documentation/api/diagram/s {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/custompalette/symbol-desc" %} -### Text wrapping and text overflow - -The descriptive text that appears beneath each symbol can vary in length. In cases where the text might overlap neighboring symbols in the palette, text wrapping is employed. Text wrapping is controlled using the symbolInfo's [`description`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#symboldescription/) property [`wrap`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#wrap/) , which supports three modes: `Wrap`, `NoWrap`, `WrapWithOverflow`. By default, text wrapping is set to '`Wrap`'. - -Additionally, to handle overflowing text, the [`overflow`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#overflow/) property can be used. By default, textOverflow is set to '`Ellipsis`', which truncates overflowing text with an ellipsis (...). +### Text wrapping and Text Overflow +The descriptive text that appears beneath each symbol can vary in length. In cases where the text might overlap neighboring symbols in the palette, text wrapping is employed. Text wrapping is controlled using the symbolInfo's [`description`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#symboldescription) property [`wrap`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#wrap) , which supports three modes: `Wrap`, `NoWrap`, `WrapWithOverflow`. By default, text wrapping is set to '`Wrap`'. +Additionally, to handle overflowing text, the [`overflow`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#overflow) property can be used. By default, textOverflow is set to '`Ellipsis`', which truncates overflowing text with an ellipsis (...). The following example demonstrates how text wrapping and text overflow are applied based on the symbol ID: @@ -84,9 +80,8 @@ The following example demonstrates how text wrapping and text overflow are appli {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/custompalette/symbol-textWrp" %} -### Appearance of symbol description - -The appearance of a symbol description in the palette can be customized by changing its [`color`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#color/) , [`fill`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#fill/), [`fontSize`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#fontsize/) , [`fontFamily`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#fontfamily/), [`bold`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#bold/) [`italic`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#italic/), [`textDecoration`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#textdecoration/) and [`margin`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#margin/) +### Appearance of Symbol Description +The appearance of a symbol description in the palette can be customized by changing its [`color`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#color) , [`fill`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#fill), [`fontSize`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#fontsize) , [`fontFamily`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#fontfamily), [`bold`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#bold) [`italic`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#italic), [`textDecoration`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#textdecoration) and [`margin`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolDescription/#margin) The following code example shows how to customize the symbol description. @@ -101,11 +96,9 @@ The following code example shows how to customize the symbol description. {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/custompalette/symbol-text" %} -## Symbol size and symbol margin - -The size of the individual symbol can be customized. The [`symbolWidth`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette/#symbolwidth/) and [`symbolHeight`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette/#symbolheight/) properties enables you to define the size of the symbols. - -The [`symbolMargin`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolPaletteModel/#symbolmargin/) property is used to create the space around elements, outside of any defined borders. By setting the symbol margin with specific values for left, right, top, and bottom, you can create consistent spacing on all sides around the shape. +## Symbol Size and Symbol Margin +The size of individual symbols can be customized. The [`symbolWidth`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette/#symbolwidth) and [`symbolHeight`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette/#symbolheight) properties enables you to define the size of the symbols. +The [`symbolMargin`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolPaletteModel/#symbolmargin) property is used to create space around elements, outside of any defined borders. By setting the symbol margin with specific values for left, right, top, and bottom, you can create consistent spacing on all sides around the shape. The following code example illustrates how to set symbol size and symbol margin for the symbol palette. @@ -120,10 +113,10 @@ The following code example illustrates how to set symbol size and symbol margin {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/custompalette/size-cs1" %} -## Symbol preview +## Symbol Preview The symbol preview size of the palette items can be customized using [`symbolPreview`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolPreview) property of symbol palette. -The [`width`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolPreview#width-number/) and [`height`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolPreview#height-number/) properties allow you to define the preview size for all the symbol palette items. The [`offset`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolPreview#offset-PointModel/) property specifies the position of the dragging helper relative to the mouse cursor. +The [`width`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolPreview#width-number) and [`height`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolPreview#height-number) properties allow you to define the preview size for all the symbol palette items. The [`offset`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolPreview#offset-PointModel) property specifies the position of the dragging helper relative to the mouse cursor. The following code example illustrates how to change the preview size of a palette item. @@ -138,9 +131,8 @@ The following code example illustrates how to change the preview size of a palet {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/custompalette/symbol-preview" %} -## Symbol drag size - -The [`symbolDragSize`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolPaletteModel/#symboldragsize) property sets the dimensions (height and width) of a shape while it is being dragged from the palette to the diagram canvas. The following code illustrates how to set `symbolDragSize` for the symbol palette. +## Symbol Drag Size +The [`symbolDragSize`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolPaletteModel/#symboldragsize) property sets the dimensions (height and width) of a shape while it is being dragged from the palette to the diagram canvas. This differs from the preview size, which only affects how symbols appear in the palette itself. The following code illustrates how to set `symbolDragSize` for the symbol palette. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -157,7 +149,7 @@ N> If the size of the symbol is not defined, the default size will be determined ## Expand Mode -You can customize whether to expand all the palettes of symbol palette at a time or to expand only one palette at a time. This customization can be done using the [`expandMode`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette/#expandmode) property of symbol palette. +The [`expandMode`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette/#expandmode) property of the symbol palette allows you to customize whether to expand all palettes simultaneously or to expand only one palette at a time. The following example demonstrates how to set the `expandMode` property to control the expansion behavior of the palettes: @@ -172,9 +164,8 @@ The following example demonstrates how to set the `expandMode` property to contr {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/custompalette/expandMode" %} -### Restrict expand/collapse of the palette - -The symbol palette panel can be restricted from expanding. When we click on the expand icon of the palette, the [paletteExpanding](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolPaletteModel/#paletteexpanding) event is triggered. In this event, we can determine whether the palette's panel should be expanded or collapsed by utilizing the `cancel` argument of the event. By default, the panel is expanded. This restriction can be applied to each palette in the symbol palette as desired. +### Restrict Expand/Collapse of the Palette +The symbol palette panel can be restricted from expanding. When the expand icon of the palette is clicked, the [paletteExpanding](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolPaletteModel/#paletteexpanding) event is triggered. In this event, we can determine whether the palette's panel should be expanded or collapsed by utilizing the **cancel** argument of the event. By default, the panel is expanded. This restriction can be applied to each palette in the symbol palette as desired. In the following code example, the basic shapes palette is restricted from expanding, and the flow shapes palette is restricted from collapsing, whereas the swimlane shapes palette can be expanded or collapsed: @@ -189,22 +180,18 @@ In the following code example, the basic shapes palette is restricted from expan {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/custompalette/restrict-expand" %} -## Tooltip for symbols in symbol palette - -The Symbol palette supports displaying tooltips when mouse hovers over the symbols. You can customize the tooltip for each symbol in the symbol palette. - -### Default tooltip for symbols +## Tooltip for Symbols in Symbol Palette +The symbol palette supports displaying tooltips when the mouse hovers over symbols. You can customize the tooltip for each symbol in the symbol palette. +### Default Tooltip for Symbols When hovering over symbols in the symbol palette, the default tooltip displays the symbol's ID. Refer to the image below for an illustration of the tooltip behavior in the symbol palette. ![SymmbolPaletteTooltip](./images/SymbolPalatteTooltip.gif) -### Custom tooltip for symbols - -To customize the tooltips for symbols in the symbol palette, assign a custom tooltip to the [`content`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramTooltipModel/#content) property of ['tooltip'](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeModel/#tooltip) for each symbol. Once you define the custom tooltip, enable the [`Tooltip`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeConstraints/) constraints for each symbol, ensuring that the tooltips are displayed when users hover over them. - -The code provided below demonstrates how to define tooltip content to symbols within a symbol palette. +### Custom Tooltip for Symbols +To customize tooltips for symbols in the symbol palette, assign a custom tooltip to the [`content`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramTooltipModel/#content) property of ['tooltip'](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeModel/#tooltip) for each symbol. Once you define the custom tooltip, enable the [`Tooltip`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeConstraints/) constraints for each symbol, ensuring that the tooltips are displayed when users hover over them. +The code provided below demonstrates how to define tooltip content for symbols within a symbol palette. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -243,13 +230,11 @@ When a custom tooltip is defined for a symbol, it will be displayed for both the However, to provide distinct tooltips for symbols in the palette and dropped nodes, capture the dragEnter event and assign specific tooltips dynamically. -When a symbol is dragged from the symbol palette and enters the diagram canvas, the [`DragEnter`](https://ej2.syncfusion.com/react/documentation/api/diagram#dragenter/), event is fired, accompanied by an argument of type [`IDragEnterEventArgs`](https://ej2.syncfusion.com/react/documentation/api/diagram/iDragEnterEventArgs/). event is triggered. Within this event, you can define a new tooltip for the dropped node. By assigning custom tooltip content to the Tooltip property of the node, you can provide a distinct tooltip that is specific to the dropped node. +When a symbol is dragged from the symbol palette onto the diagram canvas, the [`DragEnter`](https://ej2.syncfusion.com/react/documentation/api/diagram#dragenter), event is triggered. This event provides an argument of type [`IDragEnterEventArgs`](https://ej2.syncfusion.com/react/documentation/api/diagram/iDragEnterEventArgs). Within this event, you can define a custom tooltip for the dropped node by assigning content to its tooltip property, allowing you to display context-specific information. The following image illustrates the differentiation of tooltips displayed in the Symbol Palette and the Diagram. - ![SymmbolPaletteCustomTooltip](./images/different-tooltip.gif) - -The following code snippet will demonstrate how to define two different tooltip for symbol in the symbol palette and dropped node in the diagram canvas. +The following code snippet demonstrates how to define two different tooltips for symbols in the symbol palette and dropped nodes in the diagram canvas. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -264,8 +249,7 @@ The following code snippet will demonstrate how to define two different tooltip ## Localization -To localize the symbol palette search box, we need to define the [`locale`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette#locale/) property of the symbol palette with our preferred culture. In the example below, we use **'de-DE**', which is the locale code for German as used in Germany. - +To localize the symbol palette search box, we need to define the [`locale`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette#locale) property of the symbol palette with the preferred culture. In the example below, **'de-DE'** is used, which is the locale code for German as used in Germany. The following code shows how to localize symbol palette. {% tabs %} @@ -279,9 +263,8 @@ The following code shows how to localize symbol palette. {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/custompalette/locale" %} -## Restrict symbol dragging from palette - -You can restrict the symbols getting dragged from the symbol palette by setting the [`allowDrag`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette#allowdrag/) property of symbol palette as false. By default, the allowDrag is set as **true**. +## Restrict Symbol Dragging from Palette +You can restrict the symbols getting dragged from the symbol palette by setting the [`allowDrag`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette#allowdrag) property of symbol palette as **false**. By default, the allowDrag is set as **true**. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -294,9 +277,8 @@ You can restrict the symbols getting dragged from the symbol palette by setting {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/custompalette/restrict-drag" %} -## Search symbol - -The diagram provides support for enabling the search option in the palette. The [`enableSearch`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette#enablesearch/) property of the palette is used to show or hide the search textbox in the palette. You can search for symbols in the palette by entering the symbol ID (e.g., “rectangle”) and search keywords into the search text box. The symbols are retrieved by matching the value of the ID property with the string entered in the search textbox. +## Search Symbol +The diagram provides support for enabling the search option in the palette. The [`enableSearch`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette#enablesearch) property of the palette is used to show or hide the search textbox in the palette. You can search for symbols in the palette by entering the symbol ID (e.g., “rectangle”) and search keywords into the search text box. The symbols are retrieved by matching the value of the ID property with the string entered in the search textbox. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -309,11 +291,9 @@ The diagram provides support for enabling the search option in the palette. The {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/custompalette/symbol-search" %} -## Ignore symbols on search - -The [`ignoreSymbolsOnSearch`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette#ignoresymbolsonsearch/) property allows you to specify which symbols should be excluded from search results within the symbol palette. By setting this property, you can control the visibility of specific symbols during a search operation. This feature is useful for hiding certain symbols that you don't want to be shown via search. - -In the following example, we ignored the symbol with the ID of 'plus', so it will not appear in the search results. +## Ignore Symbols on Search +The [`ignoreSymbolsOnSearch`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette#ignoresymbolsonsearch) property allows you to specify which symbols should be excluded from search results within the symbol palette. By setting this property, you can control the visibility of specific symbols during a search operation. This feature is useful for hiding certain symbols that should not be shown through search functionality. +In the following example, the symbol with the ID 'plus' is ignored, so it will not appear in search results. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -326,9 +306,8 @@ In the following example, we ignored the symbol with the ID of 'plus', so it wil {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/custompalette/symbol-search-ig" %} -## Filter search - -You can filter the search results based on your specific requirements. To achieve this, customize the [`filterSymbols`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette#filtersymbols/) method of the symbol palette according to your needs. In the following example, we filter the results to display only flow shapes in the search palette. +## Filter Search +You can filter the search results based on your specific requirements. To achieve this, customize the [`filterSymbols`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette#filtersymbols) method of the symbol palette according to your needs. In the following example, the results are filtered to display only flow shapes in the search palette. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -341,8 +320,8 @@ You can filter the search results based on your specific requirements. To achiev {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/custompalette/symbol-filter" %} -N> The diagram provides support to cancel the drag and drop operation from the symbol palette to the diagram when the ESC key is pressed +N> The diagram provides support to cancel the drag and drop operation from the symbol palette to the diagram when the ESC key is pressed. ## See Also -* [How to add the symbol to the diagram](./nodes) \ No newline at end of file +* [How to add the symbol to the diagram.](./nodes) \ No newline at end of file diff --git a/ej2-react/diagram/palette-events.md b/ej2-react/diagram/palette-events.md index 5c8a1a0dc..5582dbeaa 100644 --- a/ej2-react/diagram/palette-events.md +++ b/ej2-react/diagram/palette-events.md @@ -1,20 +1,20 @@ --- layout: post -title: Symbol Palette Events in EJ2 React Diagram component | Syncfusion® -description: Learn here all about Symbol palette in React Diagram component of Syncfusion Essential® JS 2 and more. +title: Symbol Palette Events in EJ2 React Diagram Component | Syncfusion® +description: Learn here all about Symbol palette events in Syncfusion® React Diagram Component including drag-drop events, palette expansion, and selection change events. platform: ej2-react control: Symbol palette documentation: ug domainurl: ##DomainURL## --- -# Symbol Palette Events in EJ2 React Diagram component +# Symbol Palette Events in EJ2 React Diagram Component -There are some events which will get triggered while interacting with the symbol palette. They are explained below. +The Symbol Palette component provides several events that trigger during user interactions such as dragging symbols, expanding palettes, and changing selections. These events enable developers to customize behavior, provide visual feedback, and implement custom logic during symbol palette operations. -## DragEnter event +## DragEnter Event -[`DragEnter`](https://ej2.syncfusion.com/react/documentation/api/diagram/iDragEnterEventArgs) event triggers when the shape enters the diagram surface while dragging it from symbol palette. You can customize the style of the dragged shape using this event. This allows for dynamic styling changes based on the diagram's context. +The [`DragEnter`](https://ej2.syncfusion.com/react/documentation/api/diagram/iDragEnterEventArgs) event triggers when a symbol enters the diagram surface while being dragged from the symbol palette. This event allows developers to customize the appearance of the dragged symbol or validate drop targets dynamically based on the diagram's current state. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -27,9 +27,9 @@ There are some events which will get triggered while interacting with the symbol {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/events/drag-enter" %} -## DragLeave event +## DragLeave Event -[`DragLeave`](https://ej2.syncfusion.com/react/documentation/api/diagram/iDragLeaveEventArgs) event occurs when a shape leaves the diagram surface after being dragged inside but not dropped. This can be useful for resetting styles or handling any clean-up tasks when a shape is not intended to be placed on the diagram. +The [`DragLeave`](https://ej2.syncfusion.com/react/documentation/api/diagram/iDragLeaveEventArgs) event occurs when a dragged symbol leaves the diagram surface without being dropped. This event is particularly useful for cleaning up temporary visual changes applied during the drag operation or resetting any modified states. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -42,9 +42,9 @@ There are some events which will get triggered while interacting with the symbol {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/events/drag-leave" %} -## DragOver event +## DragOver Event -[`DragOver`](https://ej2.syncfusion.com/react/documentation/api/diagram/iDragOverEventArgs) event triggered when a shape is dragged over diagram while being moved from the symbol palette. This event can be used to provide visual feedback or to determine if the current drop target is valid. +The [`DragOver`](https://ej2.syncfusion.com/react/documentation/api/diagram/iDragOverEventArgs) event triggers continuously while a symbol is being dragged over the diagram surface. This event provides real-time feedback during drag operations and enables developers to implement dynamic drop validation. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -57,9 +57,9 @@ There are some events which will get triggered while interacting with the symbol {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/events/drag-over" %} -## Drop event +## Drop Event -[`Drop`](https://ej2.syncfusion.com/react/documentation/api/diagram/iDropEventArgs/) event triggered when a shape is dropped onto the diagram surface. This event is useful for customizing the shape's appearance and properties after it is dropped. +The [`Drop`](https://ej2.syncfusion.com/react/documentation/api/diagram/iDropEventArgs/) event triggers when a symbol is successfully dropped onto the diagram surface. This event serves as the final step in the drag-and-drop process and provides access to both the dropped symbol and the target location. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -72,9 +72,9 @@ There are some events which will get triggered while interacting with the symbol {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/events/drop" %} -## PaletteExpanding event +## PaletteExpanding Event -[`PaletteExpanding`](https://ej2.syncfusion.com/react/documentation/api/diagram/iPaletteExpandArgs/) event triggered when the palette expanded / collapsed. +The [`PaletteExpanding`](https://ej2.syncfusion.com/react/documentation/api/diagram/iPaletteExpandArgs/) event triggers when a palette group is expanded or collapsed within the symbol palette. This event enables developers to control palette expansion behavior and implement custom logic based on palette state changes. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -87,9 +87,9 @@ There are some events which will get triggered while interacting with the symbol {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/events/palette-expand" %} -## PaletteSelectionChange event +## PaletteSelectionChange Event -[`PaletteSelectionChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/iPaletteSelectionChangeArgs/) event triggered after the selection changes in the symbol palette. This event can be used to enable/disable functionality based on the selected symbol. +The [`PaletteSelectionChange`](https://ej2.syncfusion.com/react/documentation/api/diagram/iPaletteSelectionChangeArgs/) event triggers when the selection changes within the symbol palette. This event provides information about both the previously selected and newly selected symbols, enabling developers to respond to selection changes appropriately. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/diagram/phase.md b/ej2-react/diagram/phase.md index 58a47efab..0c438c44e 100644 --- a/ej2-react/diagram/phase.md +++ b/ej2-react/diagram/phase.md @@ -1,16 +1,18 @@ --- layout: post -title: Phase in React Diagram component | Syncfusion® -description: Learn here all about Swim lane in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Phase in React Diagram Component | Syncfusion® +description: Learn here all about Swim lane in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Phase platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -## Phase +# Phase in React Diagram Component -Phase are the subprocess which will split each lanes as horizontally or vertically based on the swimlane orientation. We can add multiple number of [`Phase`](https://ej2.syncfusion.com/react/documentation/api/diagram/phaseModel)to swimlane. +## Overview + +Phases are subprocesses that split each lane horizontally or vertically based on the swimlane orientation. Phases help organize workflow stages within lanes, making it easier to visualize process steps and milestones. Multiple [`Phase`](https://ej2.syncfusion.com/react/documentation/api/diagram/phaseModel)objects can be added to a swimlane to represent different stages of a process. The following code example illustrates how to create phase. @@ -25,9 +27,11 @@ The following code example illustrates how to create phase. {% previewsample "page.domainurl/code-snippet/diagram/swimlane/es5Phase-cs1" %} -### Dynamically add/remove phase to Lane +### Dynamically Add and Remove Phases from Lanes + +Phases can be added at runtime using the [`addPhases`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addphases) method and removed using the [`removePhase`](https://ej2.syncfusion.com/react/documentation/api/diagram/#removephase) method. This dynamic functionality allows for flexible workflow management as process requirements change. -You can add a phase at runtime by using [`addPhases`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addphases) method and remove phase by using [`removePhase`](https://ej2.syncfusion.com/react/documentation/api/diagram/#removephase) method. The following code example illustrates how to add and remove phase at run time. +The following code example illustrates how to add and remove phases at runtime. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -40,12 +44,14 @@ You can add a phase at runtime by using [`addPhases`](https://ej2.syncfusion.com {% previewsample "page.domainurl/code-snippet/diagram/swimlane/es5PhaseCustomize-cs3" %} -### Customizing phase +### Customizing Phase Appearance and Properties + +Phase appearance and behavior can be customized through several properties: -* The length of the region can be set by using the [`offset`](https://ej2.syncfusion.com/react/documentation/api/diagram/phaseModel#offset) property of the phase. -* Every phase region can be textually described with the [`header`](https://ej2.syncfusion.com/react/documentation/api/diagram/headerModel) property of the phase. -* You can increase the height of phase by using [`phaseSize`](https://ej2.syncfusion.com/react/documentation/api/diagram/swimLaneModel#phaseSize) property of swimlane. -* We can provide additional information to the phase by using the [`addInfo`](https://ej2.syncfusion.com/react/documentation/api/diagram/phaseModel#addInfo) property of the phase. +* The length of each region can be controlled using the[`offset`](https://ej2.syncfusion.com/react/documentation/api/diagram/phaseModel#offset) property of the phase. +* Each phase region can include descriptive text through the[`header`](https://ej2.syncfusion.com/react/documentation/api/diagram/headerModel) property of the phase. +* The height of phases can be increased using the [`phaseSize`](https://ej2.syncfusion.com/react/documentation/api/diagram/swimLaneModel#phaseSize) property of swimlane. +* Additional information can be stored with phases using the [`addInfo`](https://ej2.syncfusion.com/react/documentation/api/diagram/phaseModel#addInfo) property of the phase. The following code example illustrates how to customize the phase in swimlane. @@ -60,9 +66,9 @@ The following code example illustrates how to customize the phase in swimlane. {% previewsample "page.domainurl/code-snippet/diagram/swimlane/es5PhaseCustomize-cs4" %} -#### Dynamic customization of phase +#### Dynamic Customization of Phases -You can customize the phase style and text properties dynamically. The following code illustrates how to dynamically customize the phase. +Phase style and text properties can be customized dynamically during runtime. This capability enables responsive design adjustments based on user interactions or changing data requirements. The following code example illustrates how to customize the phase at runtime. @@ -77,21 +83,23 @@ The following code example illustrates how to customize the phase at runtime. {% previewsample "page.domainurl/code-snippet/diagram/swimlane/es5PhaseCustomize-cs5" %} -### Phase interaction +### Phase Interaction Capabilities -#### Resizing +#### Resizing Phases -* The phase can be resized by using its selector. -* You must select the phase header to enable the phase selection. -* Once the phase can be resized, the lane size will be updated automatically. +* Phases can be resized using their selection handles. +* The phase header must be selected first to enable phase selection. +* When a phase is resized, the associated lane size updates automatically to maintain layout consistency. -#### Resizing helper +#### Resizing Helper Functionality -* The special resize selector will be used to resize the phase. -* The resize cursor will be available on the left and bottom direction for horizontal, and the top and bottom direction for vertical swimlane. +* A specialized resize selector is used for phase resizing operations. +* The resize cursor appears in different directions based on swimlane orientation: left and bottom directions for horizontal swimlanes, and top and bottom directions for vertical swimlanes. -#### Phase header editing +#### Phase Header Editing -Diagram provides the support to edit phase headers at runtime. We achieve the header editing by double click event. Double clicking the header label will enables the editing of that. The following image illustrates how to edit the swimlane header.The following image illustrates how to edit the phase header. ![Phase Header Editing](images/phase-header-edit.gif) +The diagram component provides support for editing phase headers at runtime through double-click interaction. Double-clicking the header label enables inline editing functionality, allowing users to modify phase titles directly within the diagram. +The following image illustrates the phase header editing process: +![Phase Header Editing](images/phase-header-edit.gif) \ No newline at end of file diff --git a/ej2-react/diagram/ports-appearance.md b/ej2-react/diagram/ports-appearance.md index f2bf25030..776d97d17 100644 --- a/ej2-react/diagram/ports-appearance.md +++ b/ej2-react/diagram/ports-appearance.md @@ -1,19 +1,20 @@ --- layout: post -title: Ports appearance in React Diagram component | Syncfusion® -description: Learn here all about Ports in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Ports appearance in React Diagram Component | Syncfusion® +description: Learn how to customize port appearance, visibility, shapes, and constraints in Syncfusion® React Diagram Component for enhanced visual design. control: Ports platform: ej2-react documentation: ug domainurl: ##DomainURL## --- +# Customize Port Appearance in React Diagram Component -## Appearance +## Overview -The appearance of ports can be customized by using [`strokeColor`](https://ej2.syncfusion.com/react/documentation/api/diagram/shapeStyleModel/#strokecolor), [`strokeWidth`](https://ej2.syncfusion.com/react/documentation/api/diagram/shapeStyleModel/#strokewidth),[`fill`](https://ej2.syncfusion.com/react/documentation/api/diagram/shapeStyleModel/#fill) and [`opacity`](https://ej2.syncfusion.com/react/documentation/api/diagram/shapeStyleModel/#opacity) properties of the port. Customize the port size by using the [`width`](https://ej2.syncfusion.com/react/documentation/api/diagram/pointPortModel/#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/diagram/pointPortModel/#height) properties of port. The ports [`visibility`](https://ej2.syncfusion.com/react/documentation/api/diagram/portvisibility/) property allows you to define, when the port should be visible. +Ports serve as connection points on diagram nodes where connectors can be attached. The appearance of ports can be customized using the[`strokeColor`](https://ej2.syncfusion.com/react/documentation/api/diagram/shapeStyleModel/#strokecolor), [`strokeWidth`](https://ej2.syncfusion.com/react/documentation/api/diagram/shapeStyleModel/#strokewidth),[`fill`](https://ej2.syncfusion.com/react/documentation/api/diagram/shapeStyleModel/#fill) and [`opacity`](https://ej2.syncfusion.com/react/documentation/api/diagram/shapeStyleModel/#opacity) properties of the port. Customize the port size by using the [`width`](https://ej2.syncfusion.com/react/documentation/api/diagram/pointPortModel/#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/diagram/pointPortModel/#height) properties of port. The ports [`visibility`](https://ej2.syncfusion.com/react/documentation/api/diagram/portvisibility/) property allows you to define, when the port should be visible. -For more information about port visibility refer [`Port Visibility`](#port-visibility) +For more information about port visibility refer [`PortVisibility`](#port-visibility) The following code illustrates how to change the appearance of port. @@ -28,9 +29,9 @@ The following code illustrates how to change the appearance of port. {% previewsample "page.domainurl/code-snippet/diagram/ports/ports-cs5" %} -### Change appearance of port at runtime +### Change Appearance of Port at Runtime -The appearance of port can be changed at runtime by customizing the style of port.The following code illustrates how to change the appearance of port at runtime. +The appearance of port can be changed at runtime by customizing the style properties of the port. This is useful when you need to provide visual feedback based on user interactions or application state changes. The following code illustrates how to change the appearance of port at runtime. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -43,9 +44,9 @@ The appearance of port can be changed at runtime by customizing the style of por {% previewsample "page.domainurl/code-snippet/diagram/ports/ports-cs6" %} -## Port visibility +## Port Visibility -The visibility of the ports is determined by the [`visibility`](https://ej2.syncfusion.com/react/documentation/api/diagram/portvisibility/) property of port using the [`PortVisibility`](https://ej2.syncfusion.com/react/documentation/api/diagram/portVisibility/) enum, This enum includes properties such as `Connect`, `Hidden`, `Hover`, and `Visible`. By default, the port visibility is set to **Hidden**. +The visibility of the ports is determined by the [`visibility`](https://ej2.syncfusion.com/react/documentation/api/diagram/portvisibility/) property of port using the [`PortVisibility`](https://ej2.syncfusion.com/react/documentation/api/diagram/portVisibility/) enum, This enum includes properties such as **Connect**, **Hidden**, **Hover**, and **Visible**. By default, the port visibility is set to **Hidden**. | Property | Definition | |----|----| @@ -54,23 +55,23 @@ The visibility of the ports is determined by the [`visibility`](https://ej2.sync | Connect | The port becomes visible when you hover the connector thumb over the DiagramElement where the port resides. | | Visible | Port is always visible for the DiagramElement. | -## Port shape +## Port Shape -The shape of port can be changed by using its shape property. To explore the different types of port shapes, refer to [`Port Shapes`](https://ej2.syncfusion.com/react/documentation/api/diagram/portshapes/). By default the port shape is `Square`. +The shape of port can be changed by using its shape property. To explore the different types of port shapes, refer to [`Port Shapes`](https://ej2.syncfusion.com/react/documentation/api/diagram/portshapes/). By default the port shape is **Square**.Different shapes help distinguish between different types of connections or data flow directions. -### Types of port shapes +### Types of Port Shapes -We have provided some basic built-in `PortShapes` for the port. Find the shapes as follows. +The following basic built-in `PortShapes` are available for ports: * Circle * Custom * Square * X -### Customize the port’s shape +### Customize the Port’s Shape -Custom shape support has been provided for port. You can able to add the custom path data instead of build-in shapes. -If you need to render a custom shape, then you can set shape as `Custom` and define path using [`pathData`](https://ej2.syncfusion.com/react/documentation/api/diagram/pointPortModel/#pathdata) property of port. +Custom shape support has been provided for port. You can able to add the custom path data instead of built-in shapes when you need specific visual indicators that match your application's design requirements or represent particular data types. +If you need to render a custom shape, then you can set shape as **Custom** and define path using [`pathData`](https://ej2.syncfusion.com/react/documentation/api/diagram/pointPortModel/#pathdata) property of port. The following code illustrates how to set custom shape to the port. @@ -88,7 +89,7 @@ If you need to render a custom shape, then you can set shape as `Custom` and def ## Constraints -The constraints property allows to enable/disable certain behaviors of ports. For more information about port constraints, refer to [`Port Constraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/portconstraints/). +The constraints property allows you to enable or disable certain behaviors of ports, providing fine-grained control over port functionality. For more information about port constraints, refer to [`PortConstraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/portconstraints/). The PortConstraints may have multiple behaviors like listed below: @@ -104,8 +105,8 @@ The PortConstraints may have multiple behaviors like listed below: ## See also -* [How to interact with the ports](./ports-interaction) +* [How to interact with the ports.](./ports-interaction) -* [How to set the position of the port](./ports-positioning) +* [How to set the position of the port.](./ports-positioning) -* [How to create connector port](./ports-connector-port) \ No newline at end of file +* [How to create connector port.](./ports-connector-port) \ No newline at end of file diff --git a/ej2-react/diagram/ports-connector-port.md b/ej2-react/diagram/ports-connector-port.md index 20728aa2c..fa695976e 100644 --- a/ej2-react/diagram/ports-connector-port.md +++ b/ej2-react/diagram/ports-connector-port.md @@ -1,16 +1,20 @@ --- layout: post -title: Connector ports in React Diagram component | Syncfusion® -description: Learn here all about Ports in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Connector ports in React Diagram Component | Syncfusion® +description: Learn how to create connector ports, configure alignment and displacement, and establish port-to-port connections in Syncfusion® React Diagram Component. control: Ports platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -## Create connector port +# Using Connector Ports in React Diagram Component -The creation of connector ports is similar to the creation of node ports. To create connector ports, you need to define a port collection and assign it to the connector's ports property. +Connector ports serve as connection points along connectors, enabling other connectors to attach at specific locations rather than just the endpoints. This guide covers creating connector ports, configuring their alignment and displacement, and establishing port-to-port connections. + +## Create Connector Port + +Connector ports serve as connection points along connectors, enabling other connectors to attach at specific locations rather than just the endpoints. Creating connector ports follows the same pattern as node ports - define a port collection and assign it to the connector's [`ports`](https://ej2.syncfusion.com/react/documentation/api/diagram/connector/#ports) property. The following code example shows how to create connector port. @@ -26,11 +30,15 @@ The following code example shows how to create connector port. {% previewsample "page.domainurl/code-snippet/diagram/ports/ports-con1"%} -## Port alignment +## Port Alignment -The port can be aligned before, after, or at the center of the connector by utilizing the [`alignment`](https://ej2.syncfusion.com/react/documentation/api/diagram/portAlignment/) property. By default, the port alignment is set to **center**. +Control the position of ports along the connector using the [`alignment`](https://ej2.syncfusion.com/react/documentation/api/diagram/portAlignment/) property. This property determines where the port appears relative to the connector's path: -The following code example shows how to set alignment to the connector port. +- **Before**: Positions the port at the source end of the connector. +- **After**: Positions the port at the target end of the connector. +- **Center**: Positions the port at the midpoint of the connector (default). + +The following code example shows how to set different alignment values for connector ports: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -45,11 +53,11 @@ The following code example shows how to set alignment to the connector port. -## Port displacement +## Port Displacement -The connector port displacement allows users to adjust the position of ports relative to the connector. By setting displacement offsets, ports can be moved to precise locations along the connector. +Fine-tune port positioning using the [`displacement`](https://ej2.syncfusion.com/react/documentation/api/diagram/point/) property, which applies offset values to move ports from their aligned position. Displacement works by shifting the port by specified x and y coordinates relative to the alignment point. -The following code example shows how to set displacement to the connector port. +The following code example demonstrates how to apply displacement to connector ports: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -65,12 +73,11 @@ The following code example shows how to set displacement to the connector port. N> The displacement will work only if we set alignment as after or before. -## Connector port connection - -To establish a connection between connectors, connector ports are utilized. For this connection, the `sourcePortID` or `targetPortID` should be set to the ID of the respective port on the connector. +## Establish Port-to-Port Connections -The following code example explains how to connect connector to the connector port. +Connect one connector to another connector's port by specifying the port ID in the [`sourcePortID`](https://ej2.syncfusion.com/react/documentation/api/diagram/connector/#sourceportid) or [`targetPortID`](https://ej2.syncfusion.com/react/documentation/api/diagram/connector/#targetportid) property. This creates precise connection points along connector paths instead of connecting to endpoints. +The following code example shows how to connect a connector to a connector port: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -85,8 +92,8 @@ The following code example explains how to connect connector to the connector po ## See also -* [How to customize the ports](./ports-appearance) +* [How to customize the ports.](./ports-appearance) -* [How to set the position of the port](./ports-positioning) +* [How to set the position of the port.](./ports-positioning) -* [How to interact with the ports](./ports-interaction) \ No newline at end of file +* [How to interact with the ports.](./ports-interaction) \ No newline at end of file diff --git a/ej2-react/diagram/ports-interaction.md b/ej2-react/diagram/ports-interaction.md index 047238c57..a4ffcf905 100644 --- a/ej2-react/diagram/ports-interaction.md +++ b/ej2-react/diagram/ports-interaction.md @@ -1,16 +1,20 @@ --- layout: post -title: Ports interaction in React Diagram component | Syncfusion® -description: Learn here all about Ports in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Ports interaction in React Diagram Component | Syncfusion® +description: Learn about ports interaction in Syncfusion® React Diagram Component including drawing connectors, drag functionality, and events. control: Ports platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -## Draw connector from port +# Interactive Port Features in React Diagram Component -The port can be used to create connector by enabling `Draw` constraints to the [`constraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/portconstraints/) property. By default, the connector segment type is set to **Orthogonal**. +Ports in React Diagram components support various interactive features that enhance user workflow and diagram creation efficiency. This guide covers drawing connectors from ports, drag functionality, automatic port creation, tooltips, and event handling. + +## Draw Connector from Port + +Ports can serve as connection points for creating connectors dynamically. Enable the `Draw` constraint on the [`constraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/portconstraints/) property to allow users to draw connectors directly from ports. The default connector segment type is **Orthogonal**, providing structured, right-angled connections suitable for flowcharts and organizational diagrams. The following code explains how to draw the connector by using the port constraints. @@ -25,15 +29,13 @@ The following code explains how to draw the connector by using the port constrai {% previewsample "page.domainurl/code-snippet/diagram/ports/ports-int1" %} -### Draw different connector types from port - -You can change the default connector type while drawing the connector from the port by setting the specific connector type in connector defaults. This enables the drawing of various connector types from the port, including: +### Draw Different Connector Types from Port -* Straight -* Bezier -* Orthogonal +The default connector type can be customized when drawing from ports by configuring connector defaults. This flexibility allows creation of various connector styles to match different diagram requirements: -The following code explains how to draw different connectors by using the port constraints. +* **Straight**: Direct linear connections for simple relationships. +* **Bezier**: Curved connections for organic, flowing designs. +* **Orthogonal**: Right-angled connections for structured layouts. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -46,9 +48,9 @@ The following code explains how to draw different connectors by using the port c {% previewsample "page.domainurl/code-snippet/diagram/ports/ports-int2" %} -## Port drag +## Port Drag -The port drag feature allows users to click and drag a port using the mouse. This functionality can be enabled by setting the port constraints to **"Drag"**. +Port drag functionality enables users to reposition ports by clicking and dragging with the mouse. This feature enhances diagram flexibility by allowing dynamic port placement adjustments. Enable this capability by setting the port constraints to **Drag**. The following code explains how to enable port drag. @@ -65,9 +67,9 @@ The following code explains how to enable port drag. ## Automatic Port Creation -The Diagram component allows you to dynamically create ports on nodes or connectors by clicking and dragging the mouse while holding the Control (Ctrl) key. This feature is disabled by default and can be enabled by using the `DiagramConstraints.AutomaticPortCreation` constraint. +The Diagram component supports dynamic port creation through user interaction. Users can create ports on nodes or connectors by clicking and dragging while holding the Control (Ctrl) key. This feature is disabled by default and requires enabling the `DiagramConstraints.AutomaticPortCreation` constraint. -You can also remove a port using the same Ctrl + Click interaction, but only if the port is not currently connected to any connector. +Ports can also be removed using the same Ctrl + Click interaction, provided the port is not connected to any connector. This prevents accidental disconnection of active connections. The following example shows how to enable automatic port creation: @@ -82,9 +84,9 @@ The following example shows how to enable automatic port creation: {% previewsample "page.domainurl/code-snippet/diagram/ports/automaticPortCreation" %} -## Port tooltip +## Port Tooltip -The port tooltip feature allows a tooltip to be displayed when hovering over a port. This functionality can be enabled by setting the port constraints to **"Tooltip"**. +Port tooltips provide contextual information when users hover over ports, improving usability and user guidance. Enable this feature by setting the port constraints to **Tooltip**. The following code explains how to enable port tooltip. @@ -101,7 +103,7 @@ The following code explains how to enable port tooltip. ## Events -There are several events that can be triggered while interacting with ports. These events are listed in the table below. +Port interactions trigger specific events that enable custom handling and application logic. These events provide hooks for implementing validation, logging, or custom behaviors during port operations. | Event| Description| |----|----| @@ -123,12 +125,10 @@ The following example shows how to get these events in diagram. {% previewsample "page.domainurl/code-snippet/diagram/ports/ports-int5" %} - - ## See also -* [How to customize the ports](./ports-appearance) +* [How to customize the ports.](./ports-appearance) -* [How to set the position of the port](./ports-positioning) +* [How to set the position of the port.](./ports-positioning) -* [How to create connector port](./ports-connector-port) +* [How to create connector port.](./ports-connector-port) diff --git a/ej2-react/diagram/ports-positioning.md b/ej2-react/diagram/ports-positioning.md index fc4a3758a..b5705f2ef 100644 --- a/ej2-react/diagram/ports-positioning.md +++ b/ej2-react/diagram/ports-positioning.md @@ -1,23 +1,26 @@ --- layout: post -title: Ports positioning in React Diagram component | Syncfusion® -description: Learn here all about Ports in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Ports positioning in React Diagram Component | Syncfusion® +description: Learn how to position ports on nodes in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Ports platform: ej2-react documentation: ug domainurl: ##DomainURL## --- +# Port positioning in React Diagram Component -# Positioning node's port +The React Diagram component provides flexible options for positioning ports on nodes. Ports can be precisely positioned using offset coordinates, alignment properties, and margin values to create professional diagram layouts that meet specific design requirements. -Diagram allows you to customize the position of the port efficiently. Port can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. +## Understanding Port Offset Positioning -## Port offset +The [`offset`](https://ej2.syncfusion.com/react/documentation/api/diagram/pointModel/) property positions ports using fractional coordinates relative to the node boundaries. The coordinate system uses values from 0 to 1, where: -The [`offset`](https://ej2.syncfusion.com/react/documentation/api/diagram/pointModel/) property is used to align the ports based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height. +- **0** represents the top edge (for Y-axis) or left edge (for X-axis). +- **1** represents the bottom edge (for Y-axis) or right edge (for X-axis). +- **0.5** represents the center point of the width or height. -The following table shows the position of port within the shape. +The following table demonstrates port positioning with different offset values: | Offset values | Output | | -------- | -------- | @@ -31,9 +34,9 @@ The following table shows the position of port within the shape. | (1,0.5) | ![Port offset (1,0.5)](images/port1-0.5.png) | | (1,1) | ![Port offset (1,1)](images/port1-1.png) | -## Horizontal and vertical alignment +## Horizontal and Vertical Alignment Options -The [`horizontalAlignment`](https://ej2.syncfusion.com/react/documentation/api/diagram/horizontalAlignment/) property of the port is used to set how the port is horizontally aligned at the port position. The [`verticalAlignment`](https://ej2.syncfusion.com/react/documentation/api/diagram/verticalAlignment/) property is used to set how the port is vertically aligned at the port position. +The [`horizontalAlignment`](https://ej2.syncfusion.com/react/documentation/api/diagram/horizontalAlignment/) and [`verticalAlignment`](https://ej2.syncfusion.com/react/documentation/api/diagram/verticalAlignment/) properties provide fine-grained control over port positioning at the specified offset coordinates. These properties determine how the port aligns relative to its calculated position. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -47,7 +50,7 @@ The [`horizontalAlignment`](https://ej2.syncfusion.com/react/documentation/api/d {% previewsample "page.domainurl/code-snippet/diagram/ports/ports-pos1" %} -The following table shows all the possible alignments visually with offset (0, 0). +The following table shows all possible alignment combinations when using offset (0, 0): | Horizontal Alignment | Vertical Alignment | Output with Offset(0,0) | | -------- | -------- | -------- | @@ -63,9 +66,9 @@ The following table shows all the possible alignments visually with offset (0, 0 -## Margin for port +## Adding Margin Spacing to Ports -[`Margin`](https://ej2.syncfusion.com/react/documentation/api/diagram/marginModel/) is an absolute value used to add some blank space to any one of its four sides. The ports can be displaced with the margin property. The following code example explains how to align a port based on its offset and margin values. +[`Margin`](https://ej2.syncfusion.com/react/documentation/api/diagram/marginModel/) property applies additional spacing around ports using absolute pixel values. Margin creates blank space on any or all four sides of the port, allowing for precise positioning adjustments beyond the basic offset and alignment settings. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -80,8 +83,8 @@ The following table shows all the possible alignments visually with offset (0, 0 ## See also -* [How to interact with the ports](./ports-interaction) +* [How to interact with the ports.](./ports-interaction) -* [How to customize the ports](./ports-appearance) +* [How to customize the ports.](./ports-appearance) -* [How to create connector port](./ports-connector-port) \ No newline at end of file +* [How to create connector port.](./ports-connector-port) \ No newline at end of file diff --git a/ej2-react/diagram/ports.md b/ej2-react/diagram/ports.md index e458828c2..e4a7b3c92 100644 --- a/ej2-react/diagram/ports.md +++ b/ej2-react/diagram/ports.md @@ -1,43 +1,42 @@ --- layout: post -title: Ports in React Diagram component | Syncfusion® -description: Learn here all about Ports in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Ports in React Diagram Component | Syncfusion® +description: Learn here all about Ports in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Ports platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Ports in React Diagram component +# Ports in React Diagram Component -Port is a special connection point in a Node where you can glue the connectors. When you glue a connector to a node or port, they remain connected even if one of the nodes is moved. +Ports are specialized connection points on nodes that provide precise control over where connectors attach. Unlike node-to-node connections that automatically adjust their attachment points, ports maintain fixed connection locations even when nodes are moved, rotated, or resized. This makes ports essential for creating stable, predictable diagram layouts and professional flowcharts. ![Port](images/Port1.png) -## Types of connections +## Types of Connections -There are two main types of connections, node to node and port to port. The difference between these two connections is whether or not a connector remains glued to a specific connection point when you move the attached node or connector. +The Diagram component supports two distinct connection methods, each serving different use cases depending on the level of connection control required. -### Node to node connection +### Node to Node Connection -A node to node connection is one where the connector will move around the node as you move the node. Diagram will always ensure the connector in the shortest, most direct line possible. You can create a node to node connection by selecting the entire node (rather than the port) and connect it to another shape (rather than to a port). +Node to node connections automatically find the optimal attachment point on a node's boundary. When either connected node moves, the connector dynamically repositions to maintain the shortest path between nodes. This connection type works best for simple diagrams where precise connection points are not critical. - - -When a connector is connected between two nodes, its end points are automatically docked to the node’s nearest boundary as shown in the following Gif. +When a connector is connected between two nodes, its end points are automatically docked to the node's nearest boundary as shown in the following gif. ![Node to Node](images/node-node-gif.gif) -### Port to port connection - -Ports act as the connection points of the node and allows creating connections with only those specific points as shown in the following image. +### Port to Port Connection +Port to port connections attach to specific, predefined points on nodes. These connections remain fixed to their designated ports regardless of node movement, ensuring consistent diagram appearance and reliable connector behavior. This connection type is ideal for technical diagrams, flowcharts, and any scenario requiring precise connector placement. ![Port to port](images/port-port-gif.gif) -## Create port +## Create Port -To add a connection port, define the port object and add it to node’s [`ports`](https://ej2.syncfusion.com/react/documentation/api/diagram/pointPortModel/) collection. The [`offset`](https://ej2.syncfusion.com/react/documentation/api/diagram/pointModel/) property of the port accepts an object of fractions and is used to determine the position of ports. The following code explains how to add ports when initializing the node. +Ports are defined as objects within a node's [`ports`](https://ej2.syncfusion.com/react/documentation/api/diagram/pointPortModel/) collection. The [`offset`](https://ej2.syncfusion.com/react/documentation/api/diagram/pointModel/) property accepts fractional values (0 to 1) that determine the port's position relative to the node's bounds, where (0,0) represents the top-left corner and (1,1) represents the bottom-right corner. + +The following code demonstrates how to add ports during node initialization: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -52,12 +51,11 @@ To add a connection port, define the port object and add it to node’s [`ports` N> When setting a Port's ID, ensure that it does not contain white spaces, does not start with numbers or special characters, and does not include special characters like underscores (_) or spaces. -## Add ports at runtime +## Add Ports at Runtime -You can add ports to the nodes at runtime by using the diagram method [`addPorts`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addports). The following code illustrates how to add ports to node at runtime. +The [`addPorts`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addports) method enables dynamic port creation after the diagram has been initialized. This functionality is useful for interactive applications where users can customize node connection points or when ports need to be added based on business logic. -The port’s ID property is used to define the unique ID for the port and its further used to find the port at runtime. -If ID is not set, then default ID is automatically set. +The port's ID property defines a unique identifier that can be used to reference the port in subsequent operations. If no ID is specified, the system automatically generates a default ID. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -70,9 +68,9 @@ If ID is not set, then default ID is automatically set. {% previewsample "page.domainurl/code-snippet/diagram/ports/ports-cs2" %} -## Remove ports at runtime +## Remove Ports at Runtime -You can remove ports at runtime by using diagram method [`removePorts`](https://ej2.syncfusion.com/react/documentation/api/diagram/#removeports).Refer to the following example which shows how to remove ports at runtime. +The[`removePorts`](https://ej2.syncfusion.com/react/documentation/api/diagram/#removeports) method allows dynamic removal of ports from nodes. When a port is removed, any connectors attached to that port are automatically disconnected. This method is particularly useful for creating adaptive interfaces or cleaning up unused connection points. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -85,9 +83,9 @@ You can remove ports at runtime by using diagram method [`removePorts`](https:// {% previewsample "page.domainurl/code-snippet/diagram/ports/ports-cs3" %} -## Update port at runtime +## Update Port at Runtime -You can change any port properties at runtime and update it through the diagram method [`dataBind`]. +Port properties can be modified at runtime by directly updating the port object and calling the [`dataBind`] method to apply the changes. This approach enables dynamic customization of port appearance, position, and behavior based on application state or user interactions. The following code example illustrates how to change the port offset at runtime. @@ -102,9 +100,9 @@ The following code example illustrates how to change the port offset at runtime. {% previewsample "page.domainurl/code-snippet/diagram/ports/ports-cs4" %} -## Specify connection direction to port +## Specify Connection Direction to Port -The [`connectionDirection`](https://ej2.syncfusion.com/react/documentation/api/diagram/port/#connectiondirection) property of a port allows users to specify the direction in which a connector should establish a connection. This can be either to the port (incoming) or from the port (outgoing). +The [`connectionDirection`](https://ej2.syncfusion.com/react/documentation/api/diagram/port/#connectiondirection) property controls the allowed connection flow through a port. This property accepts values that specify whether connectors can connect to the port (incoming), from the port (outgoing), or both directions. This feature is essential for creating directional flowcharts and enforcing proper data flow in technical diagrams. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -119,9 +117,9 @@ The [`connectionDirection`](https://ej2.syncfusion.com/react/documentation/api/d ![connectionDirection](images\connectionDirection2.png) -## InEdges and outEdges of ports +## InEdges and OutEdges of Ports -The [`inEdges`](https://ej2.syncfusion.com/react/documentation/api/diagram/pointPortModel/#inedges) is used to get the incoming connectors of the port that are connected to the port. [`outEdges`](https://ej2.syncfusion.com/react/documentation/api/diagram/pointPortModel/#outedges)is used to get the outgoing connectors of the port that are connected to the port. +Each port maintains collections of its connected connectors through read-only properties.The [`inEdges`](https://ej2.syncfusion.com/react/documentation/api/diagram/pointPortModel/#inedges) property contains the IDs of all connectors that terminate at the port, while [`outEdges`](https://ej2.syncfusion.com/react/documentation/api/diagram/pointPortModel/#outedges) contains the IDs of connectors that originate from the port. These properties are automatically maintained by the diagram and provide valuable information for traversing connection relationships. The `inEdges` and `outEdges` of the port are read-only and cannot be customized. @@ -138,15 +136,14 @@ The `inEdges` and `outEdges` of the port are read-only and cannot be customized. The following code example shows how to get inEdges and outEdges of port. -## Additional information to port +## Additional Information to Port -The[ `addInfo`](https://ej2.syncfusion.com/react/documentation/api/diagram/pointPortModel/#addinfo) property of the port allows you to maintain additional information to the port. +The[ `addInfo`](https://ej2.syncfusion.com/react/documentation/api/diagram/pointPortModel/#addinfo) property allows attachment of custom metadata to ports. This property accepts any object and is useful for storing application-specific data, configuration settings, or contextual information that needs to be associated with particular ports. The stored information persists with the port throughout its life cycle and can be accessed when processing port-related events or operations. -The following code example shows how to set addInfo to the port. +The following code example shows how to attach additional information to a port: ```ts let port:PointPortModel = {id:'port1',offset:{x:0.5,y:0},addInfo:{position:'TopCenter',id:'port1'}}; -``` - +``` \ No newline at end of file diff --git a/ej2-react/diagram/swim-lane.md b/ej2-react/diagram/swim-lane.md index 684c78c66..867d69f79 100644 --- a/ej2-react/diagram/swim-lane.md +++ b/ej2-react/diagram/swim-lane.md @@ -1,24 +1,23 @@ --- layout: post -title: Swim lane in React Diagram component | Syncfusion® -description: Learn here all about Swim lane in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Swim lane in React Diagram Component | Syncfusion® +description: Learn here all about Swim lane in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Swim lane platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Swim lane in React Diagram component +# Swim lane in React Diagram Component -A swimlane is a type of diagram node commonly used to visualize the relationship between a business process and the department responsible for it. It focuses on illustrating the logical connections between activities, making it simpler to grasp the dynamics of the process and the corresponding departmental responsibilities. +Swimlanes are specialized diagram nodes that visualize business processes by organizing activities into distinct lanes or sections. Each lane typically represents a department, role, or responsibility area, making it easy to understand who is responsible for each step in a process. Swimlanes are particularly useful for workflow documentation, process mapping, and cross-functional process analysis. ![Swimlane](images/swimlane-image.png) -## Create a swimlane +## Create a Swimlane +To create a swimlane, set the node's shape type to [`swimlane`](https://ej2.syncfusion.com/react/documentation/api/diagram/swimLaneModel).Swimlanes are arranged horizontally by default and require proper configuration of headers and lanes to function correctly. -To create a swimlane, the type of shape should be set as [`swimlane`](https://ej2.syncfusion.com/react/documentation/api/diagram/swimLaneModel).By default, swimlanes are arranged horizontally. - -The following code example illustrates how to define a swimlane object. +The following code example demonstrates how to define a basic swimlane object: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -33,11 +32,31 @@ The following code example illustrates how to define a swimlane object. N> When setting a Swimlane's ID, ensure that it does not contain white spaces, does not start with numbers or special characters, and does not include special characters like underscores (_) or spaces. - N> When setting a Swimlane's ID, ensure that it does not contain white spaces, does not start with numbers or special characters, and does not include special characters like underscores (_) or spaces. +## Orientation + +Swimlanes support two orientation modes to accommodate different layout requirements and design preferences. + +### Horizontal Orientation (default) +Lanes are arranged from top to bottom, with the header positioned on the left side. This orientation works well for processes that flow from left to right. + +### Vertical Orientation +Lanes are arranged from left to right, with the header positioned at the top. This orientation suits processes that flow from top to bottom. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/diagram/swimlane/es5SwimlaneOrientation-cs1/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/diagram/swimlane/es5SwimlaneOrientation-cs1/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/diagram/swimlane/es5SwimlaneOrientation-cs1" %} + ## Headers -Header was the primary element for swimlanes. The [`header`](https://ej2.syncfusion.com/react/documentation/api/diagram/headerModel) property of swimlane allows you to define its textual description and to customize its appearance. +The header serves as the primary identifying element of a swimlane, providing a title or description for the entire swimlane container. The [`header`](https://ej2.syncfusion.com/react/documentation/api/diagram/headerModel) property allows customization of both content and appearance. >Note: By using this header, the swimlane interaction will be performed, like selection, dragging,etc. @@ -54,9 +73,9 @@ The following code example illustrates how to define a swimlane header. {% previewsample "page.domainurl/code-snippet/diagram/swimlane/es5Swimlaneheader-cs2" %} -### Customization of headers +### Header Customization -The height and width of the swimlane header can be customized with [`width`](https://ej2.syncfusion.com/react/documentation/api/diagram/headerModel#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/diagram/headerModel#height) properties of swimlane header. set fill color of header by using the [`style`](https://ej2.syncfusion.com/react/documentation/api/diagram/headerModel#style) property. The orientation of swimlane can be customized with the [`orientation`](https://ej2.syncfusion.com/react/documentation/api/diagram/swimLaneModel#header) property of the header. +Swimlane headers can be extensively customized to match design requirements and improve visual clarity. The dimensions can be controlled using [`width`](https://ej2.syncfusion.com/react/documentation/api/diagram/headerModel#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/diagram/headerModel#height) properties. Visual styling, including background color and text formatting, can be applied through the [`style`](https://ej2.syncfusion.com/react/documentation/api/diagram/headerModel#style) property. The swimlane's orientation can be controlled using the [`orientation`](https://ej2.syncfusion.com/react/documentation/api/diagram/swimLaneModel#header) property. >Note: By default, the swimlane orientation is Horizontal. @@ -73,9 +92,9 @@ The following code example illustrates how to customize the swimlane header. {% previewsample "page.domainurl/code-snippet/diagram/swimlane/es5HeaderCustomize-cs1" %} -#### Dynamic customization of swimlane header +### Dynamic Header Customization -You can customize the swimlane header style and text properties dynamically. The following code illustrates how to dynamically customize the swimlane header. +Headers can be modified programmatically during runtime to respond to user interactions or changing business requirements. This capability enables dynamic updating of swimlane titles, styling, and other properties based on application state or user input. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -88,27 +107,12 @@ You can customize the swimlane header style and text properties dynamically. The {% previewsample "page.domainurl/code-snippet/diagram/swimlane/es5Dynamicheader-cs1" %} -### Header editing +### Header Editing Diagram provides the support to edit swimlane headers at runtime. We achieve the header editing by double click event. Double clicking the header label will enables the editing of that. The following image illustrates how to edit the swimlane header. ![Header Editing](images/swimlane-header-edit.gif). -## Orientation - -Swimlanes can be oriented in two ways: horizontally or vertically. This flexibility allows for versatile visualization of business processes and departmental relationships. -The following code example illustrates how to define a swimlane with lane. - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/diagram/swimlane/es5SwimlaneOrientation-cs1/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/diagram/swimlane/es5SwimlaneOrientation-cs1/app/index.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/diagram/swimlane/es5SwimlaneOrientation-cs1" %} ## Limitations diff --git a/ej2-react/diagram/swimlane-palette.md b/ej2-react/diagram/swimlane-palette.md index 31dae0e7d..e0d991fe9 100644 --- a/ej2-react/diagram/swimlane-palette.md +++ b/ej2-react/diagram/swimlane-palette.md @@ -1,16 +1,20 @@ --- layout: post -title: Swim lane in React Diagram component | Syncfusion® -description: Learn here all about Swim lane in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Swim lane in React Diagram Component | Syncfusion® +description: Learn how to add, configure, and customize swimlane shapes in the symbol palette of Syncfusion® React Diagram Component. control: Swim lane in symbol palette platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -## Add swimlane to palette +# Swimlane in Symbol Palette -Diagram provides support to add swimlane and phases to symbol palette. The following code sample illustrate how to add swimlane and phases to palette. +The React Diagram component provides comprehensive support for adding swimlane shapes and phases to the symbol palette. Swimlanes help organize process flows by grouping related activities into lanes, making complex diagrams more readable and structured. + +## Add Swimlane to Palette + +The diagram component supports adding both swimlane containers and individual phases to the symbol palette. This enables users to drag and drop pre-configured swimlane elements into their diagrams. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -23,10 +27,9 @@ Diagram provides support to add swimlane and phases to symbol palette. The follo {% previewsample "page.domainurl/code-snippet/diagram/swimlane/es5Palette-cs1" %} -### Drag and drop swimlane to palette +### Drag and Drop Swimlane to Palette * The drag and drop support for swimlane shapes has been provided. * Horizontal lanes can be added to vertical swimlanes, and vice versa. * The phase will only drop on swimlane shape with same orientation. The following image illustrates how to drag symbol from palette. -![Drag Symbol from Palette](images/swimlane-drag-dropGif.gif) - +![Drag Symbol from Palette](images/swimlane-drag-dropGif.gif) \ No newline at end of file diff --git a/ej2-react/diagram/symbol-palette.md b/ej2-react/diagram/symbol-palette.md index 28ee24a60..dc4fe67e4 100644 --- a/ej2-react/diagram/symbol-palette.md +++ b/ej2-react/diagram/symbol-palette.md @@ -1,19 +1,15 @@ --- layout: post -title: Symbol palette in React Diagram component | Syncfusion® -description: Learn here all about Symbol palette in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Symbol palette in React Diagram Component | Syncfusion® +description: Learn here all about Symbol palette in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Symbol palette platform: ej2-react documentation: ug domainurl: ##DomainURL## --- - -# Symbol palette in React Diagram component - -The [`symbolPalette`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette)  is a gallery of reusable symbols and diagram elements that can be dragged and dropped on the diagram surface multiple times. - -## Create symbol palette - +# Symbol Palette in React Diagram Component +The [`symbolPalette`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette) is a gallery of reusable symbols and diagram elements that can be dragged and dropped on the diagram surface multiple times. It provides an efficient way to organize and access frequently used nodes, connectors, and groups, streamlining the diagram creation process. +## Create Symbol Palette The [`width`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette#height) properties of the symbol palette allows to define the size of the symbol palette. ```ts @@ -32,9 +28,7 @@ root.render(); ``` - -## Add nodes and palettes to SymbolPalette - +## Add Nodes and Palettes to SymbolPalette The collection of predefined symbols can be added to palettes using the [`symbols`](https://ej2.syncfusion.com/react/documentation/api/diagram/paletteModel/#symbols) property. A palette displays a group of related symbols and textually annotates the group with its header. A [`Palettes`](https://ej2.syncfusion.com/react/documentation/api/diagram/palette/) can be added as a collection of symbol groups. @@ -55,7 +49,7 @@ The following code example illustrates how to define symbols in a palette and ho {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/palettes/es5palettes-cs1" %} -## Add connectors in symbol palette +## Add Connectors in Symbol Palette Connectors can be added to the symbol palette by defining them in the symbols array of the palette. The following example shows how to render connectors in the symbol palette: @@ -72,9 +66,8 @@ The following example shows how to render connectors in the symbol palette: {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/palettes/palette-con" %} -## Add group nodes in symbol palette - -The symbol palette supports adding group nodes. To add group nodes to the palette, the child nodes should be defined first, followed by the parent node. Refer to the following code to see how to render group nodes in the symbol palette: +## Add Group Nodes in Symbol Palette +The symbol palette supports adding group nodes. To add group nodes to the palette, define the child nodes first, followed by the parent node. Refer to the following code to see how to render group nodes in the symbol palette: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -111,15 +104,12 @@ Templates can be defined as strings and assigned to the node's `content` propert {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/palettes/palette-contentTemplate" %} -## Drag and drop symbols from palette to diagram - -To drag and drop symbols from the palette to the diagram canvas, mousedown on the desired symbol in the palette, drag it to the desired location on the diagram canvas, and release the mouse button to drop it. - +## Drag and Drop Symbols from Palette to Diagram +To drag and drop symbols from the palette to the diagram canvas, perform a mousedown action on the desired symbol in the palette, drag it to the desired location on the diagram canvas, and release the mouse button to drop it. ![Drag and drop symbols](images/symbol-palette-drag-drop.gif) - -## Add symbols to palette at runtime - -Symbols can be added to palette at runtime by using public method, [`addPaletteItem`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette/#addpaletteitem). The following example shows how to add shapes to the palette at runtime. +## Runtime Palette Operations +### Add Symbols to Palette at Runtime +Symbols can be added to palette at runtime by using public method, [`addPaletteItem`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette/#addpaletteitem). The following example shows how to add shapes to the palette at runtime: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -133,9 +123,8 @@ Symbols can be added to palette at runtime by using public method, [`addPaletteI {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/palettes/symbol-add" %} -## Remove symbols from palette at runtime - -Symbols can be removed from palette at runtime by using public method, [`removePaletteItem`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette/#removepaletteitem). The following example shows how to remove shapes from the palette at runtime. +### Remove Symbols from Palette at Runtime +Symbols can be removed from the palette at runtime using the public method [`removePaletteItem`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette/#removepaletteitem). The following example shows how to remove shapes from the palette at runtime. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -149,7 +138,7 @@ Symbols can be removed from palette at runtime by using public method, [`removeP {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/palettes/symbol-rmv" %} -## Symbol defaults +## Symbol Defaults While adding more symbols such as nodes and connectors to the palette, you can define the default settings for those objects using the [`getNodeDefaults`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette/#getnodedefaults) and the [`getConnectorDefaults`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette/#getconnectordefaults) properties of symbol palette. These properties allow you to specify default configurations for nodes and connectors, ensuring consistency and saving time when adding multiple symbols. By setting these properties, you can predefine attributes such as size, color, shape for nodes and line style, thickness, for connectors. @@ -168,11 +157,9 @@ In the following example, the fill color of node and target decorator shape of c {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/palettes/es5defaultsettings-cs1" %} -## Add palettes at runtime - -You can dynamically add palettes to the symbol palette at runtime to enhance flexibility and customization. This allows you to introduce new groups of symbols as needed without having to reload or reinitialize the diagram. The [`addPalettes`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette/#addpalettes)method of the symbol palette enables you to create and configure new palettes programmatically. This method takes parameters that define the palette's properties, such as the palette `ID`, `title`, and the `symbols` it contains. - -Follow the example below to see how to add a palette at runtime. +### Add Palettes at Runtime +You can dynamically add palettes to the symbol palette at runtime to enhance flexibility and customization. This allows you to introduce new groups of symbols as needed without having to reload or reinitialize the diagram. The [`addPalettes`](https://ej2.syncfusion.com/react/documentation/api/symbol-palette/#addpalettes) method of the symbol palette enables you to create and configure new palettes programmatically. This method takes parameters that define the palette's properties, such as the palette `ID`, `title`, and the `symbols` it contains. +Follow the example below to see how to add a palette at runtime: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -186,7 +173,7 @@ Follow the example below to see how to add a palette at runtime. {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/palettes/palette-add" %} -## Remove palettes at runtime +## Remove Palettes at Runtime You can remove palettes from the symbol palette at runtime. There are two ways to do this: @@ -207,9 +194,11 @@ Follow the example below to see how to remove palettes at runtime. {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/palettes/palette-rmv" %} -## Stretch the symbols into the palette +## Stretch the Symbols into the Palette -The [`fit`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolInfo/#fit) property defines whether the symbol has to be fit inside the size, that is defined by the symbol palette. For example, when you resize the rectangle in the symbol, ratio of the rectangle size has to be maintained rather changing into square shape. The following code example illustrates how to customize the symbol size. +The [`fit`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolInfo/#fit) property determines whether a symbol should automatically scale to fit within the dimensions defined by the symbol palette. +For example, if a symbol contains a rectangle and you resize it, enabling fit ensures that the rectangle maintains its aspect ratio rather than being distorted into a square. +The following code example demonstrates how to customize symbol sizing using the fit property: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -223,7 +212,7 @@ The [`fit`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolInf {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/palettes/es5fit-cs1" %} -## Refresh symbol palette +## Refresh Symbol Palette The `refresh` method allows you to refresh the symbols dynamically in the SymbolPalette. From 51cf2e6a61a53abe79dcb57e7b6b9f04d635c1d4 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Sun, 12 Oct 2025 20:02:24 +0530 Subject: [PATCH 32/34] Integrated latest changes at 10-12-2025 7:30:14 PM --- ej2-react/diagram/layers.md | 76 +++++++++------- ej2-react/diagram/localization.md | 24 ++--- ej2-react/diagram/overview.md | 45 ++++++---- ej2-react/diagram/page-settings.md | 53 +++++------ ej2-react/diagram/print.md | 54 ++++++------ ej2-react/diagram/ruler.md | 42 +++++---- ej2-react/diagram/scroll-settings.md | 89 +++++++++---------- ej2-react/diagram/serialization.md | 91 +++++++++++-------- ej2-react/diagram/shapes.md | 95 +++++++++++--------- ej2-react/diagram/style.md | 112 ++++++++++++++---------- ej2-react/diagram/tools.md | 83 +++++++++--------- ej2-react/diagram/tooltip.md | 60 +++++++------ ej2-react/diagram/umldiagram.md | 70 ++++++++------- ej2-react/diagram/umlsequencediagram.md | 100 +++++++++++++-------- ej2-react/diagram/undo-redo.md | 76 +++++++++------- ej2-react/diagram/user-handle.md | 86 +++++++++--------- ej2-react/diagram/virtualization.md | 32 +++++-- 17 files changed, 669 insertions(+), 519 deletions(-) diff --git a/ej2-react/diagram/layers.md b/ej2-react/diagram/layers.md index a18b111f4..e64d2424c 100644 --- a/ej2-react/diagram/layers.md +++ b/ej2-react/diagram/layers.md @@ -1,29 +1,33 @@ --- layout: post -title: Layers in React Diagram component | Syncfusion® -description: Learn here all about Layers in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Layers in React Diagram Component | Syncfusion® +description: Learn here all about Layers in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Layers platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Layers in React Diagram component +# Layers in React Diagram Component -**Layer** organizes related shapes within a diagram control as named categories. Assigning shapes to different layers enables selective viewing, removal, and locking of distinct shape categories. +**Layers** provide a powerful organizational system for managing diagram elements by grouping related shapes into named categories. This functionality enables developers to build complex diagrams with selective viewing, interaction control, and bulk property management across multiple elements simultaneously. -In a diagram, [Layers](https://ej2.syncfusion.com/react/documentation/api/diagram/layerModel/) facilitate the modification of properties for all shapes assigned to a specific layer. Key properties that can be configured include: +## Core Layer Properties -* Objects -* Visible -* Lock -* AddInfo +In a diagram, [Layers](https://ej2.syncfusion.com/react/documentation/api/diagram/layerModel/) enable modification of properties for all shapes assigned to a specific layer. The primary configurable properties include: + +* **Objects** - Define which elements belong to the layer. +* **Visible** - Control layer visibility. +* **Lock** - Prevent interactions with layer elements. +* **AddInfo** - Store additional custom information. ## Objects -The layer's [objects](https://ej2.syncfusion.com/react/documentation/api/diagram/layer/#objects) property specifies which diagram elements belong to that layer. This property contains a collection where you can define the categories of nodes and connectors that the layer encompasses. +The layer's [objects](https://ej2.syncfusion.com/react/documentation/api/diagram/layer/#objects) property specifies which diagram elements belong to that layer. This property contains a collection of element IDs that defines the categories of nodes and connectors the layer encompasses. + +**Use case**: Separate different types of diagram elements for independent management - for example, keeping background elements in one layer and interactive elements in another. -In the following example, the basic shapes are categorized in layer 1, and the flow shapes are categorized in layer 2. +In the following example, basic shapes are categorized in layer 1, and flow shapes are categorized in layer 2: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -39,9 +43,11 @@ In the following example, the basic shapes are categorized in layer 1, and the f ## Visible -The layer's [visible](https://ej2.syncfusion.com/react/documentation/api/diagram/layer/#visible) property is used to control the visibility of the elements assigned to the layer. You can hide objects in one layer while showing objects in another layer. +The layer's [visible](https://ej2.syncfusion.com/react/documentation/api/diagram/layer/#visible)property controls the visibility of all elements assigned to the layer. This allows selective display of different diagram sections without removing elements permanently. + +**Use case**: Create diagrams with multiple views where users can toggle between different information layers, such as showing only critical path items in a project diagram. -In the following example, the visibility of layer one is set to false. By default, the `visible` property of a layer is set to **true**. +In the following example, the visibility of layer one is set to false. By default, the `visible` property of a layer is set to **true**: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -56,9 +62,11 @@ In the following example, the visibility of layer one is set to false. By defaul ## Lock -The layer's [lock](https://ej2.syncfusion.com/react/documentation/api/diagram/layer/#lock) property is used to prevent or allow changes to the element's dimensions and positions. Locking a layer prevents any interactions with the objects in that layer, such as selecting, dragging, rotating, and connecting. +The layer's [lock](https://ej2.syncfusion.com/react/documentation/api/diagram/layer/#lock) property prevents or allows changes to element dimensions and positions. When a layer is locked, all interactions with objects in that layer are disabled, including selecting, dragging, rotating, and connecting operations. -In the following example the objects in layer one is locked. By default, the `lock` property of a layer is set to **false**. +**Use case**: Protect template elements or background graphics from accidental modification while allowing users to work with other diagram elements. + +In the following example, the objects in layer one are locked. By default, the `lock` property of a layer is set to **false**: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -75,9 +83,11 @@ In the following example the objects in layer one is locked. By default, the `lo ## AddInfo -The [`addInfo`](https://ej2.syncfusion.com/react/documentation/api/diagram/layer/#addinfo) property of layers allow you to maintain additional information to the layers. +The [`addInfo`](https://ej2.syncfusion.com/react/documentation/api/diagram/layer/#addinfo) property allows storage of additional custom information with layers. This can be useful for storing metadata, configuration settings, or application-specific data associated with the layer. + +**Use case**: Store layer descriptions, creation timestamps, owner information, or custom application data for enhanced layer management. -The following code illustrates how to add additional information to the layers. +The following code illustrates how to add additional information to layers: ```ts @@ -155,7 +165,7 @@ root.render(); ``` -### Add layer at runtime +## Add Layer at Runtime Layers can be added at runtime using the [`addLayer`](https://ej2.syncfusion.com/react/documentation/api/diagram/#addlayer) public method. @@ -175,7 +185,7 @@ The following code illustrates how to add a new layer with new connectors stored {% previewsample "page.domainurl/code-snippet/diagram/layers/layers-cs4" %} -### Remove layer at runtime +## Remove Layer at Runtime Layers can be removed at runtime by using the [`removeLayer`](https://ej2.syncfusion.com/react/documentation/api/diagram/#removelayer) public method. @@ -195,7 +205,7 @@ The following code illustrates how to remove a layer. {% previewsample "page.domainurl/code-snippet/diagram/layers/layers-cs5" %} -### moveObjects +### MoveObjects You can move objects from one layer to another dynamically using the [`moveObjects`](https://ej2.syncfusion.com/react/documentation/api/diagram/#moveobjects) public method of the diagram control. This can be useful for managing complex diagrams with multiple layers where you need to update the categorization of elements based on user interaction or other dynamic conditions. @@ -214,12 +224,12 @@ The following code illustrates how to move objects from one layer to another lay ## Z-Index -[`zIndex`](https://ej2.syncfusion.com/react/documentation/api/diagram/layer/#zindex) property of a layer defines its Z order within the diagram. This property allows you to control the layer's position in the stacking order. You can adjust the layer's z-index by moving it forward or backward relative to other layers in the diagram. +[`zIndex`](https://ej2.syncfusion.com/react/documentation/api/diagram/layer/#zindex) property of a layer defines its position in the stacking order within the diagram. Higher z-index values render above lower values, allowing control over which layers appear in front of others. -### bringLayerForward +### Bring Layer Forward -Layers can be moved forward at runtime by using the [`bringLayerForward`](https://ej2.syncfusion.com/react/documentation/api/diagram/#bringlayerforward) public method. +Move a layer forward in the stacking order using the [`bringLayerForward`](https://ej2.syncfusion.com/react/documentation/api/diagram/#bringlayerforward) public method. The following code illustrates how to bring forward to layer. @@ -230,9 +240,9 @@ diagram.bringLayerForward('layer1'); ``` -### sendLayerBackward +### Send Layer Backward -Layers can be moved backward at runtime by using the [`sendLayerBackward`](https://ej2.syncfusion.com/react/documentation/api/diagram/#sendlayerbackward) public method. +Move a layer backward in the stacking order using the [`sendLayerBackward`](https://ej2.syncfusion.com/react/documentation/api/diagram/#sendlayerbackward) public method. ```ts @@ -254,15 +264,17 @@ The following code illustrates how to send the layer forward/backward to another {% previewsample "page.domainurl/code-snippet/diagram/layers/layers-cs7" %} -### Layer and objects rendering order +### Layer and Objects Rendering Order The rendering of diagram elements with layer properties involves grouping them within a `diagram_diagramLayer` for basic shape nodes and `diagram_nativeLayer_svg` for SVG-native elements. Even if different types of nodes are added within the same layer, the rendering at the DOM level occurs in separate layers. Therefore, when executing layering commands like [`bringLayerForward`](https://ej2.syncfusion.com/react/documentation/api/diagram/#bringlayerforward) and [`sendLayerBackward`](https://ej2.syncfusion.com/react/documentation/api/diagram/#sendlayerbackward), the native SVG elements will always render above the basic shape elements. The order of rendering is as follows: HTML shapes -> SVG shapes -> Path data shapes & Basic shapes. -## cloneLayer +## Clone Layer + +Layers can be cloned with its object by using the [`cloneLayer`](https://ej2.syncfusion.com/react/documentation/api/diagram/#clonelayer) public method.This creates an identical copy of the layer and all its assigned elements. -Layers can be cloned with its object by using the [`cloneLayer`](https://ej2.syncfusion.com/react/documentation/api/diagram/#clonelayer) public method. +**Use case**: Create template layers or duplicate complex layer configurations for reuse in different diagram sections. The following code illustrates how clone the layer. @@ -277,15 +289,15 @@ The following code illustrates how clone the layer. {% previewsample "page.domainurl/code-snippet/diagram/layers/layers-cs8" %} -## Active layer +## Active Layer -Active Layer refers to the layer with the highest z-index in a diagram compared to other layers. When adding objects at runtime, they are stored in this active layer. If no layers are explicitly defined in the diagram, a default layer is created and automatically set as the active layer. However, when multiple layers are defined, the layer with the highest z-index takes precedence as the active layer. +The active layer represents the layer with the highest z-index in a diagram. When objects are added at runtime, they are automatically assigned to the active layer. If no layers are explicitly defined, a default layer is created and set as the **active layer**. When multiple layers exist, the layer with the highest z-index becomes the active layer. -Public methods are available to get and set the active layer, which are explained below. +**Use case**: Ensure new elements are added to the appropriate layer in multi-layer diagrams, particularly in interactive editing scenarios. ### Get ActiveLayer -Active layer of the diagram can be retrieved by using the[`getActiveLayer`](https://ej2.syncfusion.com/react/documentation/api/diagram/#getactivelayer) public method. +Retrieve the current active layer of the diagram using the [`getActiveLayer`](https://ej2.syncfusion.com/react/documentation/api/diagram/#getactivelayer) public method. The following code illustrates how fetch active layer from the diagram diff --git a/ej2-react/diagram/localization.md b/ej2-react/diagram/localization.md index 32ce18375..68b38c2b4 100644 --- a/ej2-react/diagram/localization.md +++ b/ej2-react/diagram/localization.md @@ -1,18 +1,18 @@ --- layout: post -title: Localization in React Diagram component | Syncfusion® -description: Learn here all about Layers in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Localization in React Diagram Component | Syncfusion® +description: Learn how to localize context menus and symbol palette functionality in Syncfusion® React Diagram Component with culture-specific text. control: Localization platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Localization in EJ2 React Diagram control +# Localization in EJ2 React Diagram Component -The EJ2 Diagram component supports `localization`. In the Diagram component, the symbol palette search box and context menu items can be localized based on the selected culture. By using the locale property of the diagram, you can change the culture. +The EJ2 React Diagram component supports localization functionality, allowing developers to adapt the user interface to different languages and regions. The diagram's symbol palette search box and context menu items can be localized based on the selected culture. Use the locale property of the diagram to specify the desired culture for localization. -## Localize Diagram context menu +## Localize Diagram Context Menu To localize the diagram context menu, we need to define the [`locale`](https://ej2.syncfusion.com/react/documentation/api/diagram/#locale) property of the diagram with our preferred culture. In the example below, we use **'de-DE**', which is the locale code for German as used in Germany. @@ -27,9 +27,9 @@ To localize the diagram context menu, we need to define the [`locale`](https://e nodes={node}/> ``` -Next, we need to call the `setCulture('de')` function, which sets the default culture for all EJ2 components. This method takes one parameter, cultureName, which specifies the culture name to be set as the default. +Next, call the `setCulture('de')` function to set the default culture for all EJ2 components. This method accepts one parameter, cultureName, which specifies the culture name to be set as the default. -We also need to define the text we want to render in the context menu instead of the default English, as shown below. +Define the localized text for the context menu items to replace the default English text: ```javascript @@ -60,7 +60,7 @@ L10n.load({ ``` -The following code example summarizes the locale settings for the context menu. +The following code example demonstrates the complete locale settings for the context menu: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -73,13 +73,13 @@ The following code example summarizes the locale settings for the context menu. {% previewsample "page.domainurl/code-snippet/diagram/localization/es5localeContextMenu-cs1" %} -## Localize Symbol palette +## Localize Symbol Palette -You can enable the search option in the symbol palette to search for symbols by using the [`enableSearch`](../api/diagram/symbolPaletteModel/#enablesearch) option. This search box can also be localized. +Enable the search functionality in the symbol palette using the [`enableSearch`](../api/diagram/symbolPaletteModel/#enablesearch) property. The search box supports localization to match the application's target language. -To localize the symbol palette search box, we need to define the [`locale`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolPaletteModel/#locale) property of the symbol palette with our preferred culture. In the example below, we use **'de-DE**', which is the locale code for German as used in Germany. +To localize the symbol palette search box, define the [`locale`](https://ej2.syncfusion.com/react/documentation/api/diagram/symbolPaletteModel/#locale) property of the symbol palette with the preferred culture. The example below uses 'de-DE' for German localization. -The following code shows how to localize symbol palette. +The following code demonstrates symbol palette localization: ```javascript // Set the default culture to German diff --git a/ej2-react/diagram/overview.md b/ej2-react/diagram/overview.md index 65626f027..32bda361e 100644 --- a/ej2-react/diagram/overview.md +++ b/ej2-react/diagram/overview.md @@ -1,30 +1,35 @@ --- layout: post title: Overview in React Diagram component | Syncfusion® -description: Learn here all about Overview in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +description: Learn how to implement and use the Overview component in Syncfusion® React Diagram for navigation, zooming, and panning in large diagrams. control: Overview platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Overview in React Diagram component +# Overview Component in React Diagram Component -The Overview control allows you to see a preview or an overall view of the entire content of a diagram. This helps you to grasp the overall picture of a large diagram and navigate, pan, or zoom to a specific position on the page. +The Overview component provides a miniature preview of the entire diagram content, enabling efficient navigation and viewport management for large diagrams. This component displays a scaled-down version of the diagram with a highlighted rectangle representing the current viewport, allowing users to quickly navigate to specific areas without manual zooming and panning. -## Usage scenario +## When to Use Overview -When working on a very large diagram, it can be challenging to know which part you are actually focusing on or to navigate from one section to another. One solution for navigation is to zoom out to view the entire diagram and locate your position. Then, you can zoom in on the specific area you need. However, this method is not ideal for frequent navigation. +The Overview component is essential when working with: -The Overview control addresses these issues by providing a preview, or overall view, of the entire diagram. A rectangle indicates the viewport of the diagram, making navigation easy by dragging this rectangle to the desired section. +* Large diagrams that exceed the visible viewport. +* Complex flowcharts or organizational charts requiring frequent navigation. +* Multi-section diagrams where users need to jump between different areas. +* Applications where users need spatial awareness of their current position within the diagram. -## Create overview -To create an overview, the [`sourceID`](https://ej2.syncfusion.com/react/documentation/api/overview/overviewModel/#sourceid) property of the overview should be set with the corresponding diagram Id for the overall view. +## Create Overview Component -The [`width`](https://ej2.syncfusion.com/react/documentation/api/overview/overviewModel/#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/overview/overviewModel/#height) properties of the overview allow you to define its size. +To implement an overview, configure the [`sourceID`](https://ej2.syncfusion.com/react/documentation/api/overview/overviewModel/#sourceid) property to reference the target diagram's identifier. This establishes the connection between the overview and the main diagram. -The following code illustrates how to create an overview: +Define the overview dimensions using the [`width`](https://ej2.syncfusion.com/react/documentation/api/overview/overviewModel/#width) and [`height`](https://ej2.syncfusion.com/react/documentation/api/overview/overviewModel/#height) properties to ensure optimal visibility and performance. + + +The following code demonstrates basic overview implementation: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -37,16 +42,18 @@ The following code illustrates how to create an overview: {% previewsample "page.domainurl/code-snippet/diagram/overView/es5Node-cs2" %} -### Overview interactions +## Overview Interactions + +The overview displays the current viewport as a red rectangle overlay. This rectangle serves as an interactive control for diagram navigation and zoom operations. -In the overview, the viewport of the diagram is highlighted with a red color rectangle. You can zoom and pan the diagram by interacting with this rectangle. +### Available Interactions -You can interact with the overview as follows: +* **Resize the rectangle**: Adjusts diagram zoom level proportionally. +* **Drag the rectangle**: Pans the diagram to follow rectangle movement. +* **Click on a position**: Instantly navigates to the clicked location. +* **Click and drag selection**: Defines a specific region for navigation and zoom. -* Resize the rectangle: Zooms in/out of the diagram. -* Drag the rectangle: Pans the diagram. -* Click on a position: Navigates to the clicked region. -* Select a specific region by clicking and dragging: Navigates to the specified region. +### Interactive Navigation Example {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -59,6 +66,6 @@ You can interact with the overview as follows: {% previewsample "page.domainurl/code-snippet/diagram/overView/es5Node-cs1" %} -The following Gif image displays the interactions with overview. +The following demonstration shows overview interaction capabilities: -![Overview-interaction](images/overview-interaction.gif) +![Overview-interaction](images/overview-interaction.gif) \ No newline at end of file diff --git a/ej2-react/diagram/page-settings.md b/ej2-react/diagram/page-settings.md index d6f0bc063..3367d9f3c 100644 --- a/ej2-react/diagram/page-settings.md +++ b/ej2-react/diagram/page-settings.md @@ -1,14 +1,14 @@ --- layout: post -title: Page settings in React Diagram component | Syncfusion® -description: Learn here all about Page settings in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Page settings in React Diagram Component | Syncfusion® +description: Learn here all about Page settings in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Page settings platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Page settings in React Diagram component +# Page Settings in React Diagram Component Page settings allow customization of the appearance, size, and orientation of the diagram page. @@ -16,11 +16,11 @@ To customize the diagram page settings, insert page breaks, display multiple pag {% youtube "https://www.youtube.com/watch?v=pn02S_rwupw" %} -## Page size and appearance +## Page Size and Appearance -The [`width`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pageSettings/#width) and [`height`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pageSettings/#height) properties in page settings determine the size of the page. Additionally, the [`background`](https://helpej2.syncfusion.com/react/documentation/api/diagram/backgroundModel/) property allows customization of the page's appearance. The [`color`](https://helpej2.syncfusion.com/react/documentation/api/diagram/backgroundModel/#color) property of background is used to define the color of the page. The [`margin`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/) property defines the page margins. +The diagram page dimensions are controlled through the [`width`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pageSettings/#width) and [`height`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pageSettings/#height) properties in page settings. The page appearance can be customized using the [`background`](https://helpej2.syncfusion.com/react/documentation/api/diagram/backgroundModel/) property, which includes options for setting the background [`color`](https://helpej2.syncfusion.com/react/documentation/api/diagram/backgroundModel/#color) and other visual properties. The [`margin`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/) property defines spacing around the page content. -To explore those properties, refer to [`Page Settings`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pageSettingsModel/) +For comprehensive details on all available properties, refer to the [`Page Settings`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pageSettingsModel/) The following example shows the customization of page settings. @@ -35,9 +35,9 @@ The following example shows the customization of page settings. {% previewsample "page.domainurl/code-snippet/diagram/pagesettings/es5pagesettings-cs1" %} -## Set background image +## Set Background Image -A background image can be attached to the page by using the [`source`](https://helpej2.syncfusion.com/react/documentation/api/diagram/backgroundModel/#source) property of [`background`](https://helpej2.syncfusion.com/react/documentation/api/diagram/backgroundModel/) . The [`scale`](https://helpej2.syncfusion.com/react/documentation/api/diagram/backgroundModel/#scale) property adjusts how the background image stretches, while the [`align`](https://helpej2.syncfusion.com/react/documentation/api/diagram/backgroundModel/#align) property aligns the image within the diagram page. +A background image can be attached to the page by using the [`source`](https://helpej2.syncfusion.com/react/documentation/api/diagram/backgroundModel/#source) property of `background` . The [`scale`](https://helpej2.syncfusion.com/react/documentation/api/diagram/backgroundModel/#scale) property adjusts how the background image stretches, while the [`align`](https://helpej2.syncfusion.com/react/documentation/api/diagram/backgroundModel/#align) property determines the image positioning within the diagram page boundaries. The following code illustrates how to set background image to the diagram page. @@ -52,14 +52,16 @@ The following code illustrates how to set background image to the diagram page. {% previewsample "page.domainurl/code-snippet/diagram/pagesettings/es5BGImage-cs1" %} -## Page orientation +## Page Orientation -There are two types of page orientations: +The diagram supports two page orientations: -- Landscape -- Portrait +- **Landscape**: Wider than tall (default orientation). +- **Portrait**: Taller than wide. -Depending on the orientation selected, the width and height properties are adjusted accordingly. By default, the orientation is set to 'Landscape'. In the following example, the height and width properties of pageSettings are swapped when setting the orientation to 'Portrait'. +When the orientation changes, the diagram automatically swaps the width and height values to maintain the specified page dimensions. For example, if a page is configured with width: 800 and height: 600 in landscape mode, switching to portrait orientation will result in width: 600 and height: 800. + +The following example demonstrates how orientation affects page dimensions by switching from the default landscape to portrait mode. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -72,9 +74,9 @@ Depending on the orientation selected, the width and height properties are adjus {% previewsample "page.domainurl/code-snippet/diagram/pagesettings/es5pagesettings-cs2" %} -## Multiple page and page breaks +## Multiple Page and Page Breaks -When multiple pages are enabled, the page size dynamically adjusts in multiples of the specified width and height, ensuring the entire diagram fits within the page boundaries. Page breaks serve as visual guides indicating how pages are split. +The diagram can extend across multiple pages when the content exceeds the defined page boundaries. When multiple pages are enabled, the total canvas size automatically expands in increments of the specified page width and height to accommodate all diagram elements. Page breaks provide visual indicators showing where one page ends and another begins, which is particularly useful for print layout planning. The [`multiplePage`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pageSettingsModel/#multiplepage) and [`showPageBreak`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pageSettingsModel/#showpagebreaks) properties in page settings control the ability to enable multiple pages and display page break lines, respectively. @@ -91,18 +93,19 @@ The [`multiplePage`](https://helpej2.syncfusion.com/react/documentation/api/diag The color of the page break lines can be customized by overriding the styles of the .e-diagram-page-break class. For more details refer to [`CSS customization`](https://ej2.syncfusion.com/react/documentation/diagram/style#customizing-the-page-breaks) -## Boundary constraints +## Boundary Constraints + +The appearance of page break lines can be customized by overriding the styles of the .e-diagram-page-break CSS class. For detailed styling options, refer to the [`boundaryConstraints`](https://helpej2.syncfusion.com/react/documentation/api/diagram/boundaryConstraints/) property in page settings. -The diagram supports restricting or customizing the interactive region where elements cannot be dragged, resized, or rotated. You can achieve this using the [`boundaryConstraints`](https://helpej2.syncfusion.com/react/documentation/api/diagram/boundaryConstraints/) property in page settings. +The three types of boundary constraints are: -There are three types of boundary constraints. They are: -- Infinity -- Diagram -- Page +- **Infinity**: Elements can be moved without any boundary restrictions. +- **Diagram**: Elements are constrained within the overall diagram area. +- **Page**: Elements are restricted to the defined page boundaries. -To explore these constraints further, refer to [`Boundary Constraints`](https://ej2.syncfusion.com/react/documentation/diagram/constraints#boundary-constraints). +For detailed information about each constraint type and their behavior, refer to the [`Boundary Constraints`](https://ej2.syncfusion.com/react/documentation/diagram/constraints#boundary-constraints). -Below is an example illustrating how to define boundary constraints within the diagram: +The following example shows how to configure boundary constraints to restrict element movement within specific boundaries. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -115,11 +118,11 @@ Below is an example illustrating how to define boundary constraints within the d {% previewsample "page.domainurl/code-snippet/diagram/pagesettings/es5boundaryconstraints-cs1" %} -## Fit options +## Fit Options The [`fitOptions`](https://helpej2.syncfusion.com/react/documentation/api/diagram/fitOptionsModel/) in page settings control how diagram content is fitted within the diagram page. The [`canFit`](https://helpej2.syncfusion.com/react/documentation/api/diagram/fitOptionsModel/#canfit) property within fitOptions centers the content within the viewport during diagram rendering. Additionally, the [`region`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramRegions/) property specifies whether to fit the page or the content to the center of the viewport. Choosing CustomBounds for the [`region`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramRegions/) allows fitting custom bounds within the diagram by defining them in the [`customBounds`](https://helpej2.syncfusion.com/react/documentation/api/diagram/fitOptionsModel/#custombounds) property of fitOptions. The [`canZoomIn`](https://helpej2.syncfusion.com/react/documentation/api/diagram/fitOptionsModel/#canzoomin) property enables zooming in to fit smaller content within the viewport. Additionally, the [`margin`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/) property defines the space around the fitted content within the viewport, while the [`mode`](https://helpej2.syncfusion.com/react/documentation/api/diagram/fitModes/) property sets the fitting mode, typically defaulting to 'Page' but also offering options like 'Width' and 'Height' for specific dimension constraints. -The following example demonstrates how fitOptions are utilized in diagram page settings. +The following example demonstrates the configuration and usage of fit options for automatic content positioning. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/diagram/print.md b/ej2-react/diagram/print.md index b11488920..97d2d1e22 100644 --- a/ej2-react/diagram/print.md +++ b/ej2-react/diagram/print.md @@ -1,6 +1,6 @@ --- layout: post -title: Print in React Diagram control | Syncfusion® +title: Print in React Diagram Component | Syncfusion® description: Check out and learn about getting started with print in React Diagram Component of Syncfusion Essential® JS 2 and more details. control: Print platform: ej2-react @@ -8,9 +8,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Print in React Diagram control +# Print in React Diagram Component -The [`print`](https://ej2.syncfusion.com/react/documentation/api/diagram/#print) method helps to print the diagram as image. +The React Diagram component provides comprehensive printing capabilities that allow users to generate high-quality printed outputs of their diagrams. The [`print`](https://ej2.syncfusion.com/react/documentation/api/diagram/#print) method enables printing the diagram as an image with extensive customization options for different printing scenarios. ```JavaScript @@ -41,25 +41,25 @@ To print the React Diagram elements in various formats, refer to the video link ## Print Options -The diagram can be customized while printing using the following properties of [`printOptions`](https://ej2.syncfusion.com/react/documentation/api/diagram/iPrintOptions/). +The diagram printing behavior can be extensively customized using the [`printOptions`](https://ej2.syncfusion.com/react/documentation/api/diagram/iPrintOptions/)parameter. These options provide control over the printed output's layout, size, and content selection. -The available print options are listed in the table below. +The available print options are detailed in the table below: -| Name | Type | Description| -|-------- | -------- | -------- | -| region | enum | Sets the region of the diagram to be printed. | -| margin | object | Sets the margin of the page to be printed. | -| stretch| enum | Resizes the diagram content to fill its allocated space and printed.| -| multiplePage | boolean | Prints the diagram into multiple pages. | -| pageWidth | number | Sets the page width of the diagram while printing the diagram into multiple pages. | -| pageHeight| number | Sets the page height of the diagram while printing the diagram into multiple pages.| -| pageOrientation | enum | Sets the orientation of the page. | +| Name | Type | Description| Example Values | +|-------- | -------- | -------- | -------- | +| region | enum | Specifies the region of the diagram to be printed. Options include 'Content', 'PageSettings'. | 'Content', 'PageSettings' | +| margin | object | Sets the margin spacing around the printed content in pixels. | { left: 10, top: 10, bottom: 10, right: 10 } | +| stretch| enum | Resizes the diagram content to fit the allocated print space. Options include 'Stretch', 'Meet', 'Slice'. | 'Stretch', 'Meet' | +| multiplePage | boolean | Enables printing the diagram across multiple pages when content exceeds single page dimensions. | true, false | +| pageWidth | number | Defines the width of each page in pixels when using multiple page printing. | 816, 1056 | +| pageHeight| number | Sets the height of each page in pixels for multiple page printing scenarios. | 1056, 816 | +| pageOrientation | enum | Controls the page orientation for the printed output. | 'Landscape', 'Portrait' | ### Region -Printing particular region of diagram is possible by using the [`region`](https://ej2.syncfusion.com/react/documentation/api/diagram/iPrintOptions/#region) property of the [`printOptions`](https://ej2.syncfusion.com/react/documentation/api/diagram/iPrintOptions/). +The [`region`](https://ej2.syncfusion.com/react/documentation/api/diagram/iPrintOptions/#region) property allows selective printing of specific diagram areas. This feature is particularly useful when working with large diagrams where only certain sections need to be printed. -The following code example illustrates how to print the diagram based on region. +The following code example illustrates how to print the diagram based on different regions: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -73,11 +73,11 @@ The following code example illustrates how to print the diagram based on region. {% previewsample "page.domainurl/code-snippet/diagram/print/print-cs1" %} -### Multiple page +### Multiple Page -Printing a diagram across multiple pages is possible by setting the [`multiplePage`](https://ej2.syncfusion.com/react/documentation/api/diagram/iPrintOptions/#multiplepage) property of `printOptions` to true. +Large diagrams can be printed across multiple pages by setting the [`multiplePage`](https://ej2.syncfusion.com/react/documentation/api/diagram/iPrintOptions/#multiplepage) property to true. This feature automatically divides the diagram content across multiple print pages while maintaining proper scaling and alignment. -The following code example demonstrates how to set multiplePage to true: +The following code example demonstrates how to enable multiple page printing: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -107,9 +107,9 @@ The margin for the print region can be set using the [`margin`](https://ej2.sync {% previewsample "page.domainurl/code-snippet/diagram/print/print-cs3" %} -### Page width and Page height +### Page Width and Page Height -The [`pageHeight`](https://ej2.syncfusion.com/react/documentation/api/diagram/iPrintOptions/#pageheight) and [`pageWidth`](https://ej2.syncfusion.com/react/documentation/api/diagram/iPrintOptions/#pagewidth) property of `printOptions` is used to set the size of the printing image. The following example demonstrates how to set the pageWidth and pageHeight. +The [`pageHeight`](https://ej2.syncfusion.com/react/documentation/api/diagram/iPrintOptions/#pageheight) and [`pageWidth`](https://ej2.syncfusion.com/react/documentation/api/diagram/iPrintOptions/#pagewidth) properties control the dimensions of the printed output. These settings are particularly important when printing to specific paper sizes or when precise scaling is required. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -125,12 +125,12 @@ The [`pageHeight`](https://ej2.syncfusion.com/react/documentation/api/diagram/iP ### Page Orientation -[`pageOrientation`](https://ej2.syncfusion.com/react/documentation/api/diagram/iPrintOptions/#pageorientation) of `printOptions` is used to set the orientation of the page to be printed. +[`pageOrientation`](https://ej2.syncfusion.com/react/documentation/api/diagram/iPrintOptions/#pageorientation)property determines how the diagram is oriented on the printed page: -* Landscape - Display with page Width is more than the page Height. -* Portrait - Display with page Height is more than the page width. +* **Landscape** - Prints with page width greater than page height, ideal for wide diagrams +* **Portrait** - Prints with page height greater than page width, suitable for tall diagrams -The following example shows how to set pageOrientation for the printOptions. +The following example shows how to configure page orientation: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -144,11 +144,9 @@ The following example shows how to set pageOrientation for the printOptions. {% previewsample "page.domainurl/code-snippet/diagram/print/print-cs5" %} - ## Limitations - -Currently, printing diagram with native and HTML nodes is not supported. To overcome this limitation, we make use of the Syncfusion® Essential® PDF library. This library incorporates the Syncfusion® Essential® HTML converter, which employs the advanced Blink rendering engine. This converter seamlessly transforms HTML content into images. Refer to [`export Html-and-Native node`](https://support.syncfusion.com/kb/article/15530/how-to-print-or-export-the-html-and-native-node-into-image-format-using-react-diagram) kb for more information. +Currently, printing diagrams containing native and HTML nodes is not directly supported due to browser security restrictions. To address this limitation, Syncfusion provides integration with the Syncfusion® Essential® PDF library. This library includes the Syncfusion® Essential® HTML converter, which utilizes the advanced Blink rendering engine to convert HTML content into printable images.Refer to [`export Html-and-Native node`](https://support.syncfusion.com/kb/article/15530/how-to-print-or-export-the-html-and-native-node-into-image-format-using-react-diagram) kb for more information. ## See Also diff --git a/ej2-react/diagram/ruler.md b/ej2-react/diagram/ruler.md index 1b28f61a4..b31d9cb17 100644 --- a/ej2-react/diagram/ruler.md +++ b/ej2-react/diagram/ruler.md @@ -1,23 +1,23 @@ --- layout: post -title: Ruler in React Diagram component | Syncfusion® -description: Learn here all about Ruler in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Ruler in React Diagram Component | Syncfusion® +description: Learn here all about Ruler in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Ruler platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Ruler in React Diagram component +# Ruler in React Diagram Component -The ruler provides horizontal and vertical guides for measuring in the diagram control. It can be used to measure diagram objects, indicate positions, and align diagram elements, making it especially useful for creating scale models.The ruler also includes a position indicator that displays the precise location of the mouse cursor on the diagram canvas, with the default color of the position indicator marker being red. +The ruler provides horizontal and vertical guides for measuring in the diagram control. It can be used to measure diagram objects, indicate positions, and align diagram elements, making it especially useful for creating scale models. The ruler also includes a position indicator that displays the precise location of the mouse cursor on the diagram canvas, with the default color of the position indicator marker being red. -## Define rulers +The diagram ruler consists of two components: a horizontal ruler displayed along the top edge and a vertical ruler along the left edge of the diagram canvas. Both rulers work together to provide comprehensive positioning and measurement capabilities. -The [`rulerSettings`](https://ej2.syncfusion.com/react/documentation/api/diagram/rulerSettings/) property of diagram is used to control the visibility and appearance of the ruler in the diagram. - -The [`showRulers`](https://ej2.syncfusion.com/react/documentation/api/diagram/rulerSettings/#showrulers) property is used to show or hide the rulers in the diagram. +## Define Rulers +The [`rulerSettings`](https://ej2.syncfusion.com/react/documentation/api/diagram/rulerSettings/) property of diagram controls the visibility and appearance of the ruler in the diagram. +The [`showRulers`](https://ej2.syncfusion.com/react/documentation/api/diagram/rulerSettings/#showrulers) property shows or hides the rulers in the diagram. The following code shows how to add a ruler to the diagram. @@ -34,16 +34,22 @@ The following code shows how to add a ruler to the diagram. ## Customizing the Ruler -[`horizontalRuler`](https://ej2.syncfusion.com/react/documentation/api/diagram/rulerSettings/#horizontalruler) and [`verticalRuler`](https://ej2.syncfusion.com/react/documentation/api/diagram/rulerSettings/#verticalruler) properties of `rulerSettings` are used to customize the rulers appearance in the diagram. +The [`horizontalRuler`](https://ej2.syncfusion.com/react/documentation/api/diagram/rulerSettings/#horizontalruler) and [`verticalRuler`](https://ej2.syncfusion.com/react/documentation/api/diagram/rulerSettings/#verticalruler) properties of `rulerSettings` customize the rulers appearance in the diagram. + +By default, the ruler segments are arranged based on pixel values, with each segment representing a unit of measurement on the diagram canvas. + +### Ruler Spacing and Dimensions +The [`interval`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramRuler/#interval) property defines the spacing between ruler segments, while the [`segmentWidth`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramRuler/#segmentwidth) property sets the width of each segment. +These properties apply to both horizontal and vertical rulers. -By default, the ruler segments are arranged based on pixel values. +### Tick Alignment -The HorizontalRuler’s [`interval`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramRuler/#interval) property defines the spacing between ruler segments, and the[`segmentWidth`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramRuler/#segmentwidth) property sets the width of each segment. Similarly, the VerticalRuler’s [`interval`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramRuler/#interval) and [`segmentWidth`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramRuler/#segmentwidth) properties control the interval and segment width for the vertical ruler. +The [`tickAlignment`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramRuler/#tickalignment) property controls the positioning of ruler tick marks. For the horizontal ruler, ticks can be aligned to the left or right side, while for the vertical ruler, they can be aligned to the top or bottom. -The HorizontalRuler’s [`tickAlignment`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramRuler/#tickalignment) property aligns the ruler ticks to the left or right side, while the VerticalRuler’s [`tickAlignment`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramRuler/#tickalignment) aligns them to the top or bottom. +### Ruler Thickness -The HorizontalRuler’s [`thickness`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramRuler/#thickness) property sets the thickness of the horizontal ruler, and the VerticalRuler’s [`thickness`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramRuler/#thickness) property sets the thickness of the vertical ruler. +The [`thickness`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramRuler/#thickness) property sets the thickness of the ruler display area for both horizontal and vertical rulers. The following code shows how the diagram ruler can be customized. @@ -59,11 +65,11 @@ The following code shows how the diagram ruler can be customized. {% previewsample "page.domainurl/code-snippet/diagram/ruler/customRuler-cs1" %} -### Arrange tick +### Arrange Tick -The HorizontalRuler’s [`arrangeTick`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramRuler/#arrangetick) and VerticalRuler’s [`arrangeTick`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramRuler/#arrangetick) functions allow you to customize the appearance of ruler ticks. These functions are called for each tick rendering. +The [`arrangeTick`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramRuler/#arrangetick) function allows customization of ruler tick appearance for both horizontal and vertical rulers. This function is called during the rendering of each tick mark, providing control over tick properties such as length and style. -The following code demonstrates how to use the `arrangeTick` function to customize the tickLength. +The following code demonstrates how to use the `arrangeTick` function to customize the tick length. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -76,8 +82,8 @@ The following code demonstrates how to use the `arrangeTick` function to customi {% previewsample "page.domainurl/code-snippet/diagram/ruler/customRuler-cs2" %} -### Marker color +### Marker Color -The HorizontalRuler’s [`markerColor`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramRuler/#markercolor) and VerticalRuler’s [`markerColor`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramRuler/#markercolor) properties are used to define the ruler marker color and marker will be shown while hovering mouse over the diagram canvas. +The HorizontalRuler’s [`markerColor`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramRuler/#markercolor)property defines the ruler marker color for both horizontal and vertical rulers. The marker appears when hovering the mouse over the diagram canvas, providing precise position feedback. N> The MarkerColor property can be customized using the [`marker`](./style/#customizing-the-ruler) CSS style. \ No newline at end of file diff --git a/ej2-react/diagram/scroll-settings.md b/ej2-react/diagram/scroll-settings.md index 2a0621ece..7e5927884 100644 --- a/ej2-react/diagram/scroll-settings.md +++ b/ej2-react/diagram/scroll-settings.md @@ -1,26 +1,26 @@ --- layout: post -title: Scroll settings in React Diagram component | Syncfusion® -description: Learn here all about Scroll settings in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Scroll settings in React Diagram Component | Syncfusion® +description: Learn here all about Scroll settings in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Scroll settings platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Scroll settings in React Diagram component +# Scroll Settings in React Diagram Component -The diagram can be scrolled using both the vertical and horizontal scrollbars. Additionally, the mouse wheel can be used to scroll the diagram. The diagram's [`scrollSettings`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/) allow you to read the current scroll status, view port size, current zoom level, and zoom factor. These settings also provide the capability to programmatically control the scrolling of the diagram. +The diagram component provides comprehensive scrolling capabilities through both vertical and horizontal scrollbars, as well as mouse wheel navigation. The diagram's [`scrollSettings`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/) enable developers to monitor the current scroll status, viewport dimensions, zoom levels, and programmatically control diagram navigation. These settings are essential for managing large diagrams and providing smooth user interaction experiences. ## Access and Customize Scroll Settings -Scroll settings in a diagram allow you to access and customize various properties such as [`horizontalOffset`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#horizontaloffset), [`verticalOffset`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#verticaloffset), [`viewPortWidth`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#viewportwidth), [`viewPortHeight`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#viewportheight), [`currentZoom`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#currentzoom), [`zoomFactor`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#zoomfactor), [`maxZoom`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#maxzoom), [`minZoom`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#minzoom), [`scrollLimit`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#scrolllimit), [`canAutoScroll`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#canautoscroll), [`autoScrollBorder`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/), [`padding`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/), [`scrollableArea`](https://helpej2.syncfusion.com/react/documentation/api/diagram/rect/). +Scroll settings in a diagram provide access to various properties that control navigation and viewport behavior, including [`horizontalOffset`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#horizontaloffset), [`verticalOffset`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#verticaloffset), [`viewPortWidth`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#viewportwidth), [`viewPortHeight`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#viewportheight), [`currentZoom`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#currentzoom), [`zoomFactor`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#zoomfactor), [`maxZoom`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#maxzoom), [`minZoom`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#minzoom), [`scrollLimit`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#scrolllimit), [`canAutoScroll`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#canautoscroll), [`autoScrollBorder`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/), [`padding`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/), [`scrollableArea`](https://helpej2.syncfusion.com/react/documentation/api/diagram/rect/). -These properties enable you to read and adjust the scroll status, scroll offset, zoom levels, and more. For a comprehensive overview of these properties, refer to the [`Scroll Settings`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/) +These properties enable developers to read and adjust the scroll status, scroll offsets, zoom levels, and scrolling behavior. For a comprehensive overview of all available properties, refer to the[`Scroll Settings`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/) -## Define scroll offset +## Define Scroll Offset -The diagram allows you to pan before loading, ensuring that any desired region of a large diagram is visible. You can programmatically pan the diagram using the [`horizontalOffset`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#horizontaloffset) and [`verticalOffset`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#verticaloffset) properties of the scroll settings. The following code illustrates how to programmatically pan the diagram upon initialization also defined scrollLimit as 'Infinity' to scroll infinitely in diagram. To learn more about scrollLimit refer to [`scrollLimit`](https://ej2.syncfusion.com/react/documentation/diagram/scroll-settings#scroll-limit) +The diagram allows developers to set the initial scroll position before loading, ensuring that any desired region of a large diagram is immediately visible. The initial scroll position can be programmatically configured using the `horizontalOffset` and `verticalOffset` properties of the scroll settings. The following code illustrates how to programmatically set the diagram's initial scroll position upon initialization, with `scrollLimit` defined as 'Infinity' to enable infinite scrolling. To learn more about scroll limits, refer to the `scrollLimit` In the example below, the vertical scrollbar is scrolled down by 100 px, and the horizontal scrollbar is scrolled to the right by 100 px. @@ -35,18 +35,18 @@ In the example below, the vertical scrollbar is scrolled down by 100 px, and the {% previewsample "page.domainurl/code-snippet/diagram/Tools/polygon-cs1" %} -## Update scroll offset at runtime +## Update Scroll Offset at Runtime -There are several ways to update the scroll offset at runtime: +The diagram provides multiple methods to update scroll offsets during runtime: -* `Scrollbar`: Use the horizontal and vertical scrollbars of the diagram. -* `Mousewheel`: Scroll vertically with the mouse wheel. Hold the Shift key while scrolling to scroll horizontally. -* `Pan Tool`: Activate the ZoomPan [`tool`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramTools/) in the diagram to scroll by panning. -* `Touch`: Use touch pad gestures for scrolling. +* **Scrollbar**: Use the horizontal and vertical scrollbars of the diagram for direct navigation. +* **Mouse wheel**: Scroll vertically with the mouse wheel. Hold the Shift key while scrolling to scroll horizontally. +* **Pan Tool**: Activate the ZoomPan [`tool`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramTools/) in the diagram to scroll by panning. +* **Touch**: Use touch pad gestures for smooth scrolling on touch-enabled devices. -### Programmatically update Scroll Offset +### Programmatically Update Scroll Offset -You can programmatically change the scroll offsets of diagram by customizing the [`horizontalOffset`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#horizontaloffset) and [`verticalOffset`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#verticaloffset) of [`Scroll Settings`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/) at runtime. The following code illustrates how to change the scroll offsets at runtime. +The scroll offsets of the diagram can be programmatically modified by customizing the `horizontalOffset` and `verticalOffset` of [`Scroll Settings`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/)at runtime. The following code demonstrates how to change the scroll offsets dynamically. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -59,33 +59,33 @@ You can programmatically change the scroll offsets of diagram by customizing the {% previewsample "page.domainurl/code-snippet/diagram/Tools/polygon-cs2" %} -## Update zoom at runtime +## Update Zoom at Runtime -### Zoom using mouse wheel +### Zoom Using Mouse Wheel -Another way to zoom in and out the diagram is by using the mouse wheel. This method is a quick and convenient way to zoom in and out without having to use any additional tools or gestures. +The mouse wheel provides a convenient method to zoom in and out of the diagram quickly without requiring additional tools or gestures. -- Zoom in: Press Ctrl+mouse wheel, then scroll upward. +- **Zoom in**: Press Ctrl+mouse wheel, then scroll upward. -- Zoom out: Press Ctrl+mouse wheel, then scroll downward. +- **Zoom out**: Press Ctrl+mouse wheel, then scroll downward. -### Zoom using Keyboard Shortcuts +### Zoom Using Keyboard Shortcuts -Using keyboard shortcuts is a quick and easy way to zoom the diagram without having to use the mouse or touch pad. +Keyboard shortcuts offer a quick and efficient way to zoom the diagram without using the mouse or touch pad. -- Zoom in: Press Ctrl and the plus(+) key. +- **Zoom in**: Press Ctrl and the plus (+) key. -- Zoom out: Press Ctrl and the minus(-) key. +- **Zoom out**: Press Ctrl and the minus (-) key. -### Programmatically update zoom +### Programmatically Update Zoom -You can programmatically change the current zoom of diagram by utilizing the [`zoomTo`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#zoomto) public method. +The current zoom level of the diagram can be programmatically modified by utilizing the [`zoomTo`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#zoomto) public method. #### ZoomOptions The [`zoomTo`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#zoomto) method takes one parameter [`zoomOptions`](https://helpej2.syncfusion.com/react/documentation/api/diagram/zoomOptions/). In that zoomOptions we can specify the [`focusPoint`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pointModel/), [`type`](https://helpej2.syncfusion.com/react/documentation/api/diagram/zoomTypes/) and [`zoomFactor`](https://helpej2.syncfusion.com/react/documentation/api/diagram/zoomOptions/#zoomfactor) -The following example shows how to zoom-in and zoom-out the diagram using zoomTo method +The following example demonstrates how to zoom in and zoom out of the diagram using the zoomTo method: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -102,21 +102,21 @@ For more information on various ways to zoom and pan the diagram, refer to [`zoo ## AutoScroll -The autoscroll feature automatically scrolls the diagram when a node or connector is moved beyond its boundary. This ensures that the element remains visible during operations like dragging, resizing, and selection. +The autoscroll feature automatically scrolls the diagram when a node or connector is moved beyond the visible boundary. This functionality ensures that elements remain visible during operations such as dragging, resizing, and selection, providing a seamless user experience. -The autoscroll behavior triggers automatically when any of the following actions occur towards the edges of the diagram: +The autoscroll behavior activates automatically when any of the following actions occur near the edges of the diagram: -- Node dragging or resizing -- Connector control point editing -- Rubber band selection +- Node dragging or resizing operations. +- Connector control point editing. +- Rubber band selection. -The client-side event [`ScrollChange`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iScrollChangeEventArgs/) is triggered when autoscroll occurs, allowing for customizations. Refer [`scrollChange-event`](https://ej2.syncfusion.com/react/documentation/diagram/scroll-settings#scroll-change-event) for more information. +The client-side event [`ScrollChange`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iScrollChangeEventArgs/) is triggered when autoscroll occurs, enabling custom behavior implementation. Refer to the [`scrollChange-event`](https://ej2.syncfusion.com/react/documentation/diagram/scroll-settings#scroll-change-event) for more information. Autoscroll behavior can be enabled or disabled using the [`canAutoScroll`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#canautoscroll) property of the diagram. ### Autoscroll border -The autoscroll border defines the maximum distance from the mouse pointer to the diagram edge that triggers autoscroll. By default, this distance is set to 15 pixels for all sides (left, right, top, and bottom). You can adjust this using the [`autoScrollBorder`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/) property of the scroll settings. +The autoscroll border defines the maximum distance from the mouse pointer to the diagram edge that triggers autoscroll behavior. By default, this distance is set to 15 pixels for all sides (left, right, top, and bottom). This distance can be customized using the[`autoScrollBorder`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/) property of the scroll settings. The following example demonstrates how to configure autoscroll: @@ -135,7 +135,7 @@ N> To use auto scroll the scrollLimit should be set as 'Infinity' ### Controlling Autoscroll Speed -You can control how often the scrolling needs to be performed automatically in the Diagram component during the auto-scrolling behavior. You can now adjust the frequency, ranging from slow and smooth to quick and rapid, to suit their preferences. To configure, set the value in milliseconds to the [`autoScrollFrequency`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#autoscrollfrequency) property within the scrollSettings class, allowing precise control over how often auto-scrolling occurs. +The frequency of automatic scrolling in the Diagram component during autoscroll behavior can be precisely controlled. The scrolling frequency can be adjusted from slow and smooth to quick and rapid to suit different requirements. Configure this by setting a value in milliseconds to the[`autoScrollFrequency`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#autoscrollfrequency) property within the scrollSettings, allowing precise control over autoscroll timing. ![AutoscrollFrequency GIF](images/AutoscrollFrequency.gif) @@ -143,11 +143,11 @@ You can control how often the scrolling needs to be performed automatically in t The [`scrollLimit`](https://helpej2.syncfusion.com/react/documentation/api/diagram/scrollSettingsModel/#scrolllimit) allows you to define the scrollable region of the diagram. It includes the following options: -* `Infinity`: Allows scrolling in all directions without any restriction. -* `Diagram`: Allows scrolling within the diagram region. -* `Limited`: Allows scrolling within a specified scrollable area. +* **Infinity**: Allows scrolling in all directions without any restriction. +* **Diagram**: Allows scrolling within the diagram region only. +* **Limited**: Allows scrolling within a specified scrollable area. -The `scrollLimit` property in scroll settings helps to define these limits. +The `scrollLimit` property in scroll settings helps to define these scrolling boundaries. ### Scrollable Area @@ -185,7 +185,7 @@ The following code example illustrates how to set scroll padding for the diagram ## Reset scroll -The [`reset`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#reset) method resets the zoom and scroller offsets to their default values. +The [`reset`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#reset) method resets both the zoom level and scroller offsets to their default values. This is useful for returning the diagram to its initial state after user interactions. ``` javascript //Resets the scroll and zoom to default values @@ -193,9 +193,10 @@ diagramInstance.reset(); ``` -## UpdateViewport +## Update Viewport Dimensions + +The [`updateViewPort`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#updateviewport) method is used to update the dimensions of the diagram viewport. This method is typically called when the diagram container size changes or when dynamic resizing is required. -The [`updateViewPort`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#updateviewport) method is used to update the dimensions of the diagram viewport. ```javascript //Updates diagram viewport @@ -205,7 +206,7 @@ diagramInstance.updateViewPort(); ## Events -### Scroll change event +### Scroll Change Event The [`scrollChange`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iScrollChangeEventArgs/) event is triggered whenever the scrollbar is updated. This can occur during actions such as zooming in, zooming out, using the mouse wheel, or panning. The following example shows how to capture the `scrollChange` event. diff --git a/ej2-react/diagram/serialization.md b/ej2-react/diagram/serialization.md index 573c44285..c758f459c 100644 --- a/ej2-react/diagram/serialization.md +++ b/ej2-react/diagram/serialization.md @@ -1,26 +1,33 @@ --- layout: post -title: Serialization in React Diagram component | Syncfusion® -description: Learn here all about Serialization in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Serialization in React Diagram Component | Syncfusion® +description: Learn here all about Serialization in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Serialization platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Serialization in React Diagram component +# Save and Load Diagrams in React Diagram Component -**Serialization** is the process of converting the state of the diagram into a format that can be saved and later restored. This ensures that the diagram's current state, including its nodes, connectors, and configurations, can be persisted across sessions. +**Serialization** is the process of converting the diagram's current state into a storage format that can be saved and later restored. This feature ensures that all diagram elements, including nodes, connectors, and their configurations, persist across application sessions. -Serialization involves saving the diagram's state as a JSON string, which can then be stored in a database, file, or other storage medium. When needed, the serialized string can be deserialized to recreate the diagram in its previous state. +The serialization process converts the diagram into a JSON string format, which can be stored in databases, files, or other storage systems. When needed, this serialized data can be deserialized to recreate the diagram exactly as it was previously configured. -To easily save the contents of the diagram as a JSON string or file stream, and load it from the saved file, refer to the video link below. +Use serialization when you need to: +- Save user-created diagrams for future editing. +- Implement undo/redo functionality. +- Create diagram templates. +- Transfer diagrams between different sessions or users. +To save and load the diagram in React, refer to the below video link. {% youtube "https://www.youtube.com/watch?v=IkWXjhRE-o0" %} -## Save +## Saving Diagrams -The diagram is serialized as string while saving. The client-side method, [`saveDiagram`](https://ej2.syncfusion.com/react/documentation/api/diagram/#savediagram), helps to serialize the diagram as a string. This method captures the entire diagram's configuration and content, converting it into a string representation. +### Basic Save Operation + +The [`saveDiagram`](https://ej2.syncfusion.com/react/documentation/api/diagram/#savediagram) method serializes the entire diagram configuration into a JSON string. This method captures all diagram elements, their properties, and the current state. The following code illustrates how to save the diagram: @@ -32,7 +39,7 @@ saveData = diagramInstance.saveDiagram(); ``` -This JSON string can be stored in local storage for future use. The following code illustrates how to save the serialized string into local storage and how to retrieve it: +The serialized JSON string can be stored in various storage systems. The following example demonstrates local storage implementation: ```ts //Saves the string in to local storage @@ -43,11 +50,15 @@ saveData = localStorage.getItem('fileName'); ``` -The diagram can also be saved as raster or vector image files. For more information about saving the diagram as images, refer to the [`Print`](./print) and [`Export`](./export) section. +### Alternative Save Formats + +The diagram can also be saved as raster or vector image files. For more information about saving the diagram as images, refer to the [`Print`](./print) and [`Export`](./export) sections. + +## Loading Diagrams -## Load +### Basic Load Operation -The diagram can be loaded from serialized string data using the [`loadDiagram`](https://ej2.syncfusion.com/react/documentation/api/diagram/#loaddiagram) method. The saved string should be passed as the parameter of the loadDiagram method. The following code illustrates how to load the diagram from serialized string data: +The [`loadDiagram`](https://ej2.syncfusion.com/react/documentation/api/diagram/#loaddiagram) method recreates the diagram from serialized JSON data. This method accepts the previously saved JSON string as a parameter. ```ts @@ -60,11 +71,11 @@ diagramInstance.loadDiagram(saveData); ``` ->Note: Before loading a new diagram, existing diagram is cleared. +>Note: Before loading a new diagram, the existing diagram content is automatically cleared. -## Loaded Event +### Handling Load Completion -The [`loaded`](https://ej2.syncfusion.com/react/documentation/api/diagram/#loaded) event triggers when all diagram elements are loaded using [`loadDiagram`](https://ej2.syncfusion.com/react/documentation/api/diagram/#loaddiagram) method. You can use this event to customize diagram elements during the loading process. +The [`loaded`](https://ej2.syncfusion.com/react/documentation/api/diagram/#loaded) event triggers when all diagram elements finish loading through the [`loadDiagram`](https://ej2.syncfusion.com/react/documentation/api/diagram/#loaddiagram) method. Use this event to perform post-load customizations or validations. ```ts return ( @@ -76,7 +87,7 @@ The [`loaded`](https://ej2.syncfusion.com/react/documentation/api/diagram/#loade ``` -The event has two arguments such as name, diagram +The loaded event provides the following arguments: **name** @@ -95,11 +106,9 @@ Users can perform customizations or modifications to the diagram elements once t ## Prevent Default Values -The [`preventDefaults`](https://ej2.syncfusion.com/react/documentation/api/diagram/serializationSettingsModel/#preventdefaults) property of [`serializationSettings`](https://ej2.syncfusion.com/react/documentation/api/diagram/serializationSettingsModel/) is used to simplify the saved JSON object by excluding default properties that are inherent to the diagram. This helps reduce the size of the serialized data and improves efficiency when saving and loading diagrams. +The [`preventDefaults`](https://ej2.syncfusion.com/react/documentation/api/diagram/serializationSettingsModel/#preventdefaults) property of [`serializationSettings`](https://ej2.syncfusion.com/react/documentation/api/diagram/serializationSettingsModel/) reduces the size of serialized data by excluding default properties. This optimization improves performance when handling large diagrams or frequent save operations. -By enabling preventDefaults, only properties that you set in diagram are included in the serialized JSON object. This optimization is useful for scenarios where minimizing data size is crucial, such as in applications with large diagrams or when optimizing network transfers. - -The following code illustrates how to enable the preventDefaults property to simplify the JSON object: +When enabled, only explicitly set properties are included in the JSON output, significantly reducing file size and improving load times. ```ts @@ -112,12 +121,16 @@ The following code illustrates how to enable the preventDefaults property to sim ) ``` +# File-Based Save and Load Operations -## Save and load diagram using uploader control +### Using Uploader Component -The JSON files can be uploaded using the uploader component, where they are parsed to extract the JSON data they contain. To achieve this, configure the uploader component with the saveUrl property to receive uploaded files and store them on the server. Similarly, use the removeUrl property to handle file removal operations on the server. +JSON files can be uploaded and processed using the uploader component. Configure the uploader with appropriate server endpoints to handle file operations, then parse the uploaded JSON data to load diagrams. -When a JSON file is uploaded, it undergoes parsing to extract its JSON data. This data is then loaded into the diagram using the [`loadDiagram`](https://ej2.syncfusion.com/react/documentation/api/diagram/#loaddiagram) method. +The uploader requires: +- `saveUrl` property for receiving and storing uploaded files. +- `removeUrl` property for handling file deletion operations. +- File parsing logic to extract JSON data from uploaded files. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -131,13 +144,20 @@ When a JSON file is uploaded, it undergoes parsing to extract its JSON data. Thi {% previewsample "page.domainurl/code-snippet/diagram/serialization/serialization-cs1" %} -## Importing and Exporting Diagrams using Mermaid Syntax +## Mermaid Syntax Integration + +### Overview + +The [`Diagram`](https://ej2.syncfusion.com/react/documentation/api/diagram/) component supports importing and exporting diagrams using Mermaid syntax. Mermaid is a markdown-inspired syntax for creating diagrams programmatically, enabling easy diagram creation and sharing across different platforms. -The [`Diagram`](https://ej2.syncfusion.com/react/documentation/api/diagram/) supports saving diagrams in Mermaid syntax format. Mermaid is a Markdown-inspired syntax that automatically generates diagrams. With this functionality, you can easily create mind maps, flowcharts, and UML sequence diagrams from Mermaid syntax data, simplifying the visualization of complex ideas and processes without manual drawing. Additionally, you can export your mind maps, flowcharts, and UML sequence diagrams to Mermaid syntax, allowing for easy sharing, editing, and use across different platforms. +This functionality supports: +- Mind maps +- Flowcharts +- UML sequence diagrams -### Save diagram as Mermaid syntax +### Saving Diagrams as Mermaid Syntax - The `saveDiagramAsMermaid` method serializes the diagram into a Mermaid-compatible string format. This method is specifically designed for diagrams that utilize Flowchart and Mind map layouts. The following code illustrates how to save the diagram in Mermaid string format. +The [`saveDiagramAsMermaid`](https://ej2.syncfusion.com/react/documentation/api/diagram/#savediagramasmermaid) method converts compatible diagrams into Mermaid syntax format. This method works specifically with Flowchart and Mind map layouts. ```javascript //returns the serialized Mermaid string of the Diagram @@ -145,11 +165,12 @@ let data = diagramInstance.saveDiagramAsMermaid(); ``` -### Load diagram from Mermaid syntax +### Load Diagram from Mermaid Syntax -You can load a [diagram](https://ej2.syncfusion.com/react/documentation/api/diagram/) from the serialized Mermaid syntax data using the `loadDiagramFromMermaid` method. The following code illustrates how to load a diagram from a Mermaid string data. +The [`loadDiagramFromMermaid`](https://ej2.syncfusion.com/react/documentation/api/diagram/#loaddiagramfrommermaid) method creates diagrams from Mermaid syntax data, automatically generating the appropriate layout and styling. +data. -#### Load flowchart layout +#### Load Flowchart Layout The following example shows how to load flowchart diagram from mermaid syntax. @@ -165,9 +186,9 @@ The following example shows how to load flowchart diagram from mermaid syntax. {% previewsample "page.domainurl/code-snippet/diagram/serialization/serialization-cs2" %} -#### Load mindmap layout +#### Loading Mind Map Layout -The following example shows how to load mind map diagram from mermaid syntax. +The following example demonstrates loading a mind map diagram from Mermaid syntax: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -181,9 +202,9 @@ The following example shows how to load mind map diagram from mermaid syntax. {% previewsample "page.domainurl/code-snippet/diagram/serialization/serialization-cs3" %} -#### Load UML Sequence diagram +#### Loading UML Sequence Diagram -The following example shows how to load UML Sequence diagram from mermaid syntax. +The following example demonstrates loading a UML Sequence diagram from Mermaid syntax: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -197,4 +218,4 @@ The following example shows how to load UML Sequence diagram from mermaid syntax {% previewsample "page.domainurl/code-snippet/diagram/serialization/serialization-cs4" %} -N> Mermaid syntax-based serialization and deserialization is supported only for Flowchart layout, Mind map layout, and UML Sequence Diagram. Ensure that your Mermaid data aligns with one of these supported layouts to enable successful diagram loading. \ No newline at end of file +N> Mermaid syntax-based serialization and deserialization supports only Flowchart layout, Mind map layout, and UML Sequence Diagram. Ensure that your Mermaid data aligns with one of these supported layouts for successful diagram loading. \ No newline at end of file diff --git a/ej2-react/diagram/shapes.md b/ej2-react/diagram/shapes.md index 589d8a814..f9ba927f6 100644 --- a/ej2-react/diagram/shapes.md +++ b/ej2-react/diagram/shapes.md @@ -1,30 +1,36 @@ --- layout: post -title: Shapes in React Diagram component | Syncfusion® -description: Learn here all about Shapes in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Shapes in React Diagram Component | Syncfusion® +description: Learn to create and customize text, image, HTML, native, basic, path, and flow shapes in the Syncfusion React Diagram Component with examples. control: Shapes platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Shapes in React Diagram component +# Different Types of Shapes in React Diagram Component -Diagram provides support to add different kind of nodes. They are as follows: +The React Diagram component provides comprehensive support for adding various types of nodes to create rich, interactive diagrams. Shapes serve as the fundamental building blocks for representing data, processes, and visual elements in your diagrams. -* Text node -* Image node -* HTML node -* Native node -* Basic shapes -* Flow shapes +This guide covers the following shape types and their implementation: + +* **Text nodes** - Display formatted text content. +* **Image nodes** - Embed images from various sources. +* **HTML nodes** - Include custom HTML elements. +* **Native nodes** - Integrate SVG elements. +* **Basic shapes** - Use predefined geometric shapes. +* **Path shapes** - Create custom geometric paths. +* **Flow shapes** - Represent process workflows. -## Text +## Text Nodes + +Text nodes enable you to add formatted text content directly to your diagram. They are ideal for labels, annotations, and textual information that enhances diagram readability. + +To create a text node, set the shape property to [`text`](https://ej2.syncfusion.com/react/documentation/api/diagram/node#shape) and define the content object with your desired text and styling options. -Texts can be added to the diagram as [`text`](https://ej2.syncfusion.com/react/documentation/api/diagram/node#shape) node. The shape property of the node allows you to set the type of node and for text nodes, it should be set as **text**. In addition, define the content object that is used to define the text to be added and style is used to customize the appearance of that text. The following code illustrates how to create a text node. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -37,11 +43,11 @@ Texts can be added to the diagram as [`text`](https://ej2.syncfusion.com/react/d {% previewsample "page.domainurl/code-snippet/diagram/shapes/es5Text-cs1" %} -## Image +## Image Nodes -Diagram allows to add images as [`image`](https://helpej2.syncfusion.com/react/documentation/api/diagram/node/#shape) nodes. The shape property of node allows you to set the type of node and for image nodes, it should be set as **image**. In addition, the source property of shape enables you to set the image source. +Image nodes allow you to incorporate visual elements from various sources including URLs, local files, and Base64-encoded data. These nodes are perfect for adding logos, icons, or illustrative content to your diagrams. -The following code illustrates how an image node is created. +To create an image node, set the shape property to [`image`](https://helpej2.syncfusion.com/react/documentation/api/diagram/node/#shape) and specify the image source through the source property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -54,9 +60,9 @@ The following code illustrates how an image node is created. {% previewsample "page.domainurl/code-snippet/diagram/shapes/es5Image-cs1" %} -### Base64 Encoded Image Into The Image Node: +### Base64 Encoded Images -The following code illustrates how to add Base64 image into image node. +For scenarios where you need to embed images directly without external dependencies, use Base64-encoded image data. This approach ensures your diagrams remain self-contained and portable. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -69,17 +75,15 @@ The following code illustrates how to add Base64 image into image node. {% previewsample "page.domainurl/code-snippet/diagram/shapes/es5Image-cs2" %} -N> Deploy your HTML file in the web application and export the diagram (image node) or else the image node will not be exported in the Chrome and Firefox due to security issues. Refer to the following link. +N> When deploying applications with image nodes, ensure your HTML files are served from a web server. Local file access restrictions in Chrome and Firefox may prevent image export functionality due to security policies. For more information, refer to browser-specific documentation on local image handling. Link 1: `http://asked.online/draw-images-on-canvas-locally-using-chrome/2546077/` Link 2: `http://stackoverflow.com/questions/4761711/local-image-in-canvas-in-chrome` -### Image alignment - -Stretch and align the image content anywhere but within the node boundary. +### Image Alignment and Scaling -The scale property of the node allows to stretch the image as you desired (either to maintain proportion or to stretch). By default, the [`scale`](https://helpej2.syncfusion.com/react/documentation/api/diagram/image/#scale) property of the node is set as **meet**. The [`align`](https://helpej2.syncfusion.com/react/documentation/api/diagram/imageAlignment/) property is used to set the alignment of the image. +Control how images appear within node boundaries using alignment and scaling properties. These features ensure your images display correctly regardless of node dimensions. The [`scale`](https://helpej2.syncfusion.com/react/documentation/api/diagram/image/#scale) property of the node is set as **meet**. The [`align`](https://helpej2.syncfusion.com/react/documentation/api/diagram/imageAlignment/) property controls positioning. The following code illustrates how to use scale and align properties to stretch the image. @@ -105,13 +109,15 @@ The following table illustrates all the possible scale options for the image nod N> To visualize the changes in image scaling, it is Essential® to use the align property along with scale. -## HTML +## HTML Nodes -Html elements can be embedded in the diagram through [`Html`](https://helpej2.syncfusion.com/react/documentation/api/diagram/node/#shape) type node. The shape property of node allows you to set the type of node and to create a HTML node it should be set as `HTML`. +HTML nodes provide the flexibility to embed rich HTML content directly into your diagrams. This powerful feature enables you to create highly customized visual elements with advanced formatting, styling, and interactivity. -N> HTML node cannot be exported to image format, like JPEG, PNG, and BMP. It is by design, while exporting the diagram is drawn in a canvas. Further, this canvas is exported into image formats. Currently, drawing in a canvas equivalent from all possible HTML is not feasible. Hence, this limitation. +Set the shape property to [`Html`](https://helpej2.syncfusion.com/react/documentation/api/diagram/node/#shape) to create HTML nodes. You can define content using either inline templates or external node templates. -### HTML Node with contentTemplate. +N> HTML nodes cannot be exported to image formats (JPEG, PNG, BMP) due to canvas rendering limitations. This is by design, as converting arbitrary HTML content to canvas equivalents is not feasible for all HTML elements. + +### HTML Node with Content Template To render an HTML node with a content template, we need to define the desired template string within the [`content`](../api/diagram/htmlModel/#content) property. The following code illustrates how to create an HTML node with a content template: @@ -126,7 +132,7 @@ To render an HTML node with a content template, we need to define the desired te {% previewsample "page.domainurl/code-snippet/diagram/shapes/es5ContentTemplate-cs1" %} -#### Functional content template. +#### Functional Content Template. To render an HTML node using a functional template, we define a function that returns the template string. Within this function, modifications can be made based on the node's ID. @@ -143,7 +149,7 @@ The following code illustrates how to render an HTML node using the function and {% previewsample "page.domainurl/code-snippet/diagram/shapes/es5ContentFunctionalTemplate-cs1" %} -### HTML Node With nodeTemplate +### HTML Node With Node Template To render html node with nodeTemplate we need to define the nodeTemplate in the html file and assign it to the [`nodeTemplate`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#nodetemplate) property of the diagram. The following code illustrates how to render html node with nodeTemplate. @@ -158,7 +164,7 @@ To render html node with nodeTemplate we need to define the nodeTemplate in the {% previewsample "page.domainurl/code-snippet/diagram/shapes/es5NodeTemplate-cs1" %} -#### Functional nodeTemplate +#### Functional NodeTemplate We can define a function which returns a template string and assign it directly to the `nodeTemplate` property of diagram. @@ -175,9 +181,11 @@ Refer the code example below. {% previewsample "page.domainurl/code-snippet/diagram/shapes/es5NodeFunctionalTemplate-cs1" %} -## Native +## Native Nodes + +Native nodes allow you to embed SVG elements directly into your diagrams, providing scalable vector graphics with precise control over visual appearance. This approach is ideal for custom icons, complex shapes, and high-quality graphics that scale well at any size. -Diagram provides support to embed SVG element into a node. The shape property of node allows you to set the type of node. To create a [`native`](https://helpej2.syncfusion.com/react/documentation/api/diagram/node/#shape) node, it should be set as **native**. The following code illustrates how a native node is created. +To create a [`native`](https://helpej2.syncfusion.com/react/documentation/api/diagram/node/#shape) node, set the shape property to **native** and provide SVG content through the content property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -190,13 +198,13 @@ Diagram provides support to embed SVG element into a node. The shape property of {% previewsample "page.domainurl/code-snippet/diagram/shapes/es5Native-cs1" %} -N> Like HTML node, the native node also cannot be exported to image format. Fill color of native node can be overridden by the inline style or fill of the SVG element specified in the template. +N> Similar to HTML nodes, native nodes cannot be exported to image formats due to canvas rendering limitations. Fill colors of native nodes can be overridden by inline SVG styles or fill attributes specified in the SVG template. -### SVG content alignment +### SVG Content Alignment and Scaling Stretch and align the svg content anywhere but within the node boundary. -The scale property of the node allows to stretch the svg content as you desired (either to maintain proportion or to stretch). By default, the [`scale`](https://helpej2.syncfusion.com/react/documentation/api/diagram/nativeModel/#scale) property of native shape is set as **meet**. +Control how SVG content appears within node boundaries using the same scaling principles as image nodes. The [`scale`](https://helpej2.syncfusion.com/react/documentation/api/diagram/nativeModel/#scale) property determines how SVG content fits within the node bounds. The following tables illustrates all the possible scale options for the node. @@ -207,11 +215,11 @@ The following tables illustrates all the possible scale options for the node. | Slice | ![Slice SVG Content Alignment](images/Native3.png) | | Stretch |![Stretch SVG Content Alignment](images/Native4.png) | -## Basic shapes +## Basic Shapes -* The [`Basic`](https://helpej2.syncfusion.com/react/documentation/api/diagram/node/#shape) shapes are common shapes that are used to represent the geometrical information visually. To create basic shapes, the type of the shape should be set as **basic**. Its shape property can be set with any one of the built-in shape. +Basic shapes provide a comprehensive set of predefined geometric forms commonly used in diagrams, flowcharts, and technical drawings. These shapes offer consistency and quick deployment for standard diagram elements. -* To render a rounded rectangle, you need to set the type as basic and shape as rectangle. Set the [`cornerRadius`](https://helpej2.syncfusion.com/react/documentation/api/diagram/basicShapeModel/#cornerradius) property to specify the radius of rounded rectangle. +To create [`Basic`](https://helpej2.syncfusion.com/react/documentation/api/diagram/node/#shape) shapes, set the type property to **basic** and choose from the available built-in shapes. For rounded rectangles, use the [`cornerRadius`](https://helpej2.syncfusion.com/react/documentation/api/diagram/basicShapeModel/#cornerradius) property to specify the radius. The following code example illustrates how to create a basic shape. @@ -236,11 +244,12 @@ The list of basic shapes are as follows. ![BasicShapes](images/Basic.png) -## Path +The basic shapes library includes rectangles, ellipses, triangles, polygons, stars, and many other geometric forms suitable for various diagramming needs. -The [`Path`](https://helpej2.syncfusion.com/react/documentation/api/diagram/node/#shape) shape is a commonly used basic shape that allows visually to represent the geometrical information. As node path data, any geometrical data can be provided. You can create your own Geometry and assign it to data if you want anything different from the standard figures. A geometry does not require any dimension specifications, such as width or height, because it specifies its own size. If the node’s size is set, the geometry is extended to fit the node’s dimensions. +## Path Shapes -To create a path node, specify the shape as Path. The [`data`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pathModel/#data) property of node allows you to define the path to be drawn. The following code illustrates how a path node is created. +Path shapes provide ultimate flexibility for creating custom geometric forms using SVG path data. This approach allows you to define any shape imaginable through precise path coordinates and commands. +To create a [`Path`](https://helpej2.syncfusion.com/react/documentation/api/diagram/node/#shape) node, set the shape property to **path** and define the geometry through the [`data`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pathModel/#data) property using standard SVG path syntax. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -255,7 +264,9 @@ To create a path node, specify the shape as Path. The [`data`](https://helpej2.s ## Flow Shapes -The [`flow`](https://helpej2.syncfusion.com/react/documentation/api/diagram/node/#shape) shapes are used to represent the process flow. It is used for analyzing, designing, and managing for documentation process. To create a flow shape, specify the shape type as **flow**. Flow shapes and by default, it is considered as **process**. The following code example illustrates how to create a flow shape. +Flow shapes are specialized elements designed for process modeling, workflow diagrams, and business process documentation. These standardized shapes follow common flowchart conventions and enhance diagram readability. + +To create [`flow`](https://helpej2.syncfusion.com/react/documentation/api/diagram/node/#shape) shapes, set the shape type to **flow** and specify the desired flow shape variant. The default flow shape is **process**. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -270,4 +281,4 @@ The [`flow`](https://helpej2.syncfusion.com/react/documentation/api/diagram/node The list of flow shapes are as follows. -![FlowShapes](images/FlowShapes.png) +![FlowShapes](images/FlowShapes.png) \ No newline at end of file diff --git a/ej2-react/diagram/style.md b/ej2-react/diagram/style.md index 130ac43aa..4a6012f82 100644 --- a/ej2-react/diagram/style.md +++ b/ej2-react/diagram/style.md @@ -1,18 +1,24 @@ --- layout: post -title: Style in React Diagram component | Syncfusion® -description: Learn here all about Style in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Style in React Diagram Component | Syncfusion® +description: Learn here all about Style in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Style platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Style in React Diagram component +# Style in React Diagram Component -## Customizing the connector end point handle +The React Diagram component provides extensive styling capabilities through CSS classes. This guide demonstrates how to customize various visual elements including connector handles, selection indicators, and interactive controls using CSS overrides. -Use the following CSS to customize the connector end point handle. +## Customizing Connector Endpoint Handles + +The connector endpoint handles are visual indicators that appear when hovering over or interacting with connector endpoints. These handles can be styled to match application themes or improve visibility. + +### Default Endpoint Handle Styling + +Use the following CSS to customize the connector endpoint handle appearance: ```scss @@ -25,24 +31,22 @@ Use the following CSS to customize the connector end point handle. ``` ![Connector End point](images/connectorEndPoint.png) -## Customizing the connector end point handle when connected +### Connected Endpoint Handle Styling -Use the following CSS to customize the connector end point handle when connected. +When a connector endpoint is connected to a node or another connector, apply different styling to indicate the connected state: ```scss - .e-diagram-endpoint-handle.e-connected { fill: red; stroke: green; stroke-width: 3px; } - ``` ![Connector End point connected](images/connectorEndPoint2.png) -## Customizing the connector end point handle when disabled +### Disabled Endpoint Handle Styling -Use the following CSS to customize the connector end point handle when disabled. +For disabled connector endpoints, customize the appearance to clearly indicate the non-interactive state: ```scss @@ -55,9 +59,13 @@ Use the following CSS to customize the connector end point handle when disabled. ``` ![Connector End point disabled](images/connectorEndPoint3.png) -## Customizing the bezier segment thumb +## Customizing Connector Segment Handles -Use the following CSS to customize the bezier segment thumb. +Connector segment handles allow users to manipulate different types of connector paths. Each connector type has specific handle styling options. + +### Bezier Segment Handles + +The Bezier segment handles control the curvature of Bezier connectors: ```scss @@ -70,9 +78,9 @@ Use the following CSS to customize the bezier segment thumb. ``` ![Bezier segment thumb](images/bezier-segmentThumb.png) -## Customizing the bezier control points +### Bezier Control Point Handles -Use the following CSS to customize the bezier control points. +Control points define the curve shape of Bezier connectors and can be styled independently: ```scss @@ -85,9 +93,9 @@ Use the following CSS to customize the bezier control points. ``` ![Bezier Control points](images/bezier-control-point.png) -## Customizing the orthogonal segment thumb +### Orthogonal Segment Handles -Use the following CSS to customize the orthogonal segment thumb. +Orthogonal connectors use segment handles for adjusting right-angled path segments: ```scss @@ -100,9 +108,9 @@ Use the following CSS to customize the orthogonal segment thumb. ``` ![Orthogonal segment thumb](images/ortho-segmentThumb.png) -## Customizing the straight segment thumb +### Straight Segment Handles -Use the following CSS to customize the straight segment thumb. +Straight connectors provide handles for direct path manipulation: ```scss @@ -115,9 +123,13 @@ Use the following CSS to customize the straight segment thumb. ``` ![Straight segment thumb](images/straight-segmentThumb.png) -## Customizing the resize handle +## Customizing Selection and Manipulation Handles + +Selection handles and related controls provide visual feedback during object manipulation operations. + +### Resize Handles -Use the following CSS to customize the resize handle. +Resize handles appear on selected objects to enable size adjustments: ```scss @@ -130,9 +142,9 @@ Use the following CSS to customize the resize handle. ![Resize handle](images/resize-handle.png) -## Customizing the selector +### Selection Indicator -Use the following CSS to customize the selector. +The selector outline indicates which objects are currently selected: ```scss @@ -144,7 +156,7 @@ Use the following CSS to customize the selector. ![Selector](images/selector.png) -## Customizing the selector pivot line +## Customizing the Selector Pivot Line Use the following CSS to customize the line between the selector and rotate handle. @@ -158,9 +170,9 @@ Use the following CSS to customize the line between the selector and rotate hand ``` ![Pivot line](images/pivot-line.png) -## Customizing the selector border +### Selection Border -Use the following CSS to customize the selector border. +Customize the border that surrounds selected objects: ```scss @@ -170,7 +182,7 @@ Use the following CSS to customize the selector border. ``` -## Customizing the rotate handle +## Customizing the Rotate Handle Use the following CSS to customize the rotate handle properties. @@ -182,11 +194,16 @@ Use the following CSS to customize the rotate handle properties. } ``` + ![Rotate handle](images/rotate-handle.png) -## Customizing the symbolpalette while hovering +## Customizing Symbol Palette Interactions + +The Symbol Palette provides drag-and-drop functionality with interactive states that can be styled. -Use the following CSS to customize the symbolpalette while hovering. +### Hover state styling + +Customize the appearance when hovering over symbols in the palette: ```scss @@ -197,9 +214,9 @@ Use the following CSS to customize the symbolpalette while hovering. ``` ![Symbol palette hover](images/symbol-palette-hover.png) -## Customizing the symbolpalette when selected +### Selection state styling -Use the following CSS to customize the symbolpalette when selected. +Style the selected symbol appearance in the palette: ```scss @@ -211,9 +228,13 @@ Use the following CSS to customize the symbolpalette when selected. ![Symbol palette selected](images/symbol-palette-selected.png) -## Customizing the ruler +## Customizing Ruler Elements + +The ruler provides measurement guidance and can be styled to match the application design. -Use the following CSS to customize the ruler properties. +### Ruler Background and Text + +Customize the ruler's background color and font properties: ```scss @@ -225,9 +246,9 @@ Use the following CSS to customize the ruler properties. ``` ![Ruler](images/ruler.png) -## Customizing the ruler overlap +### Ruler Overlap Area -Use the following CSS to ruler overlap properties. +The overlap area where horizontal and vertical rulers intersect can be styled separately: ```scss @@ -238,9 +259,9 @@ Use the following CSS to ruler overlap properties. ``` ![Ruler overlap](images/ruler2.png) -## Customizing the ruler marker color +### Ruler Measurement Markers -Use the following CSS to customize the marker color +Customize the color and thickness of measurement markers on the ruler: ```scss @@ -252,9 +273,13 @@ Use the following CSS to customize the marker color ``` ![Ruler Marker](images/ruler3.png) -## Customizing the text edit +## Customizing Text Editing Interface + +The text editing interface appears when editing text content within diagram objects. -Use the following CSS to customize the text edit properties. +### Text Edit Container + +Style the text editing container that appears during text input: ```scss @@ -271,12 +296,11 @@ Use the following CSS to customize the text edit properties. ``` ![Text edit box](images/text-edit-box.png) ![Text edit box clicked](images/text-edit-box2.png) -## Customizing the text edit on selection +### Text Selection Highlighting -Use the following CSS to customize the text edit on selection properties. +Customize the appearance of selected text within the editing interface: ```scss - .e-diagram-text-edit::selection { background: yellow; color: green; @@ -285,9 +309,9 @@ Use the following CSS to customize the text edit on selection properties. ``` ![Text edit box selected](images/text-edit-box3.png) -## Customizing the page breaks +## Customizing Page Break Indicators -Use the following CSS to customize the page breaks line color +Page break lines help visualize page boundaries when printing or exporting diagrams. ```scss .e-diagram-page-break { diff --git a/ej2-react/diagram/tools.md b/ej2-react/diagram/tools.md index a297168ee..e3c9bea8f 100644 --- a/ej2-react/diagram/tools.md +++ b/ej2-react/diagram/tools.md @@ -1,30 +1,34 @@ --- layout: post -title: Tools in React Diagram component | Syncfusion® -description: Learn here all about Tools in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Tools in React Diagram Component | Syncfusion® +description: Learn how to use drawing tools, selection tools, and pan tools in Syncfusion® React Diagram Component for interactive diagram creation and navigation. control: Tools platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Tools in React Diagram component +# Tools in React Diagram Component -The tools in the diagram control can perform various actions such as selecting, panning, and drawing. These tools are explained below. +The React Diagram component provides a comprehensive set of interactive tools that enable users to create, modify, and navigate diagrams efficiently. These tools facilitate real-time interaction with diagram elements through mouse and keyboard operations. -- `Select`: Allows you to choose specific elements within the diagram. -- `Pan`: Enables you to move the view of the diagram to different areas without altering the elements. -- `Draw`: Provides the ability to draw new shapes, connectors, on the diagram surface. +## Overview -These tools are Essential® for creating, editing, and navigating complex diagrams efficiently. +The diagram control offers three primary tool categories: -## Drawing tools +- **Select**: Choose and manipulate specific elements within the diagram. +- **Pan**: Navigate the diagram view to different areas without modifying elements. +- **Draw**: Create new shapes, connectors, and freehand drawings on the diagram surface. -Drawing tool allows you to draw any kind of node/connector during runtime by clicking and dragging on the diagram page. +These tools are essential for building complex diagrams and provide the foundation for user interaction within the diagram environment. -### Draw nodes +## Drawing Tools -To draw a shape, set the JSON of that shape to the [`drawingObject`](https://ej2.syncfusion.com/react/documentation/api/diagram/#drawingobject) property of the diagram and activate the drawing tool by using the [`tool`](https://ej2.syncfusion.com/react/documentation/api/diagram/#tool) property. The following code example illustrates how to draw a rectangle at runtime. +Drawing tools enable real-time creation of diagram elements by clicking and dragging on the diagram canvas. All drawing operations are configured through the [`drawingObject`](https://ej2.syncfusion.com/react/documentation/api/diagram/#drawingobject) property and activated using the [`tool`](https://ej2.syncfusion.com/react/documentation/api/diagram/#tool) property. + +### Draw Nodes + +To draw shapes during runtime, configure the JSON representation of the desired shape in the `drawingObject` property and set the tool to drawing mode. The following example demonstrates how to draw a rectangle shape: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -37,7 +41,7 @@ To draw a shape, set the JSON of that shape to the [`drawingObject`](https://ej2 {% previewsample "page.domainurl/code-snippet/diagram/Tools/tools-cs1" %} -The following code example illustrates how to draw a path shape. +Path shapes can be drawn using the same approach with custom path data. The following example shows how to draw a path shape: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -52,7 +56,8 @@ The following code example illustrates how to draw a path shape. ### Text Nodes -Similarly, you can draw a text node by setting the type of shape as 'Text' in the [`drawingObject`](https://ej2.syncfusion.com/react/documentation/api/diagram/#drawingobject) property. The [`text`](https://ej2.syncfusion.com/react/documentation/api/diagram/textModel/) type node contains a property called content, which specifies the text within the node. You can add the content to the text node once you finish drawing the node. Here is how you can draw a text node at runtime: +Similarly, you can draw a text node by setting the type of shape as 'Text' in the `drawingObject` property. The [`text`](https://ej2.syncfusion.com/react/documentation/api/diagram/textModel/) node includes a content property that defines the displayed text. Users can add or modify the content after completing the drawing operation: + {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -67,7 +72,8 @@ Similarly, you can draw a text node by setting the type of shape as 'Text' in th ### Draw Connectors -To draw connectors, set the JSON of the connector to the drawType property. The drawing [`tool`](https://ej2.syncfusion.com/react/documentation/api/diagram/#tool) can be activated by using the tool property. The following code example illustrates how to draw a straight line connector. +Connectors are drawn by defining the connector configuration in the `drawingObject` property. The drawing tool supports various connector types including straight, orthogonal, and bezier connectors: + {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -80,13 +86,9 @@ To draw connectors, set the JSON of the connector to the drawType property. The {% previewsample "page.domainurl/code-snippet/diagram/Tools/tools-cs4" %} -### Polygon shape +### Polygon Shapes -The diagram allows you to create polygon shapes by clicking and moving the mouse at runtime on the diagram page. This interactive feature enables users to define custom shapes with multiple sides by specifying points directly on the diagram canvas. - -To draw a polygon shape, you need to set the [`drawingObject`](https://ej2.syncfusion.com/react/documentation/api/diagram/#drawingobject) property with the appropriate JSON configuration for a `polygon`. This includes specifying the type as 'Polygon'. - -The following code illustrates how to draw a polygon shape at runtime: +The diagram supports interactive polygon creation through point-and-click interaction. Users can define custom shapes with multiple sides by specifying vertices directly on the diagram canvas. To enable polygon drawing, set the `drawingObject` type as **Polygon**: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -101,11 +103,9 @@ The following code illustrates how to draw a polygon shape at runtime: ![Polygon drawing](images/polygon-drawing.gif) -### Polyline Connector - -Diagram allows to create the polyline segments with straight lines and angled vertices at the control points by clicking and moving the mouse at runtime on the diagram page. +### Polyline Connectors -To draw a polyline connector, set the type of the [`drawingObject`](https://ej2.syncfusion.com/react/documentation/api/diagram/#drawingobject) as '`Polyline`'. +Polyline connectors enable creation of multi-segment connections with straight lines and angled vertices. Users can interactively add control points by clicking on the diagram canvas. To draw polyline connectors, set the `drawingObject` type as **Polyline**: The following code illustrates how to draw a polyline connector. @@ -128,7 +128,7 @@ N> To make the segment thumb visible, inject the [`ConnectorEditing`](https://ej ### Freehand Drawing -The diagram supports free-hand drawing, allowing users to draw anything independently on the diagram page. Free-hand drawing is enabled by setting the type of the [`drawingObject`](https://ej2.syncfusion.com/react/documentation/api/diagram/#drawingobject) property to '`Freehand`'. +The diagram supports free-hand drawing, allowing users to draw anything independently on the diagram page. Free-hand drawing is enabled by setting the type of the `drawingObject` property to '`Freehand`'. The following code illustrates how to perform freehand drawing: @@ -147,31 +147,28 @@ The segments of a freehand connector can be adjusted at runtime by dragging the ![Freehand connector drawing](images/freehand-draw.gif) -## Tool selection +## Tool Selection and Precedence -There are some functionalities that can be achieved by clicking and dragging on the diagram surface. They are as follows. +The diagram supports multiple tool configurations that can be combined for different interaction scenarios. When multiple tools are enabled simultaneously, the system follows a specific precedence order to determine which tool takes priority: -* Draw selection rectangle: MultipleSelect tool -* Pan the diagram: Zoom pan -* Draw nodes/connectors: DrawOnce/DrawOnce +### Tool Precedence Hierarchy -As all the three behaviors are completely different, you can achieve only one behavior at a time based on the tool that you choose. -When more than one of those tools are applied, a tool is activated based on the precedence given in the following table. +The following table shows the precedence order from highest to lowest priority: -|Precedence|Tools|Description| +|Precedence|Tool|Description| |----------|-----|-----------| -|1st|ContinuesDraw|Allows you to draw the nodes or connectors continuously. Once it is activated, you cannot perform any other interaction in the diagram.| -|2nd|DrawOnce|Allows you to draw a single node or connector. Once you complete the DrawOnce action, SingleSelect, and MultipleSelect tools are automatically enabled.| -|3rd|ZoomPan|Allows you to pan the diagram. When you enable both the SingleSelect and ZoomPan tools, you can perform the basic interaction as the cursor hovers node/connector. Panning is enabled when cursor hovers the diagram.| -|4th|MultipleSelect|Allows you to select multiple nodes and connectors. When you enable both the MultipleSelect and ZoomPan tools, cursor hovers the diagram. When panning is enabled, you cannot select multiple nodes.| -|5th|SingleSelect|Allows you to select individual nodes or connectors.| -|6th|None|Disables all tools.| +|1st|ContinuesDraw|Enables continuous drawing mode. Once activated, prevents all other interactions until deactivated.| +|2nd|DrawOnce|Allows drawing a single element. After completion, automatically enables SingleSelect and MultipleSelect tools.| +|3rd|ZoomPan|Enables diagram panning. When combined with SingleSelect, panning activates when cursor hovers over empty diagram areas.| +|4th|MultipleSelect|Enables selection of multiple elements. When combined with ZoomPan, selection takes priority over panning when hovering over elements.| +|5th|SingleSelect|Enables selection of individual elements.| +|6th|None|Disables all interactive tools.| These tools provide flexibility and functionality for creating and interacting with elements within the diagram interface. -### Zoom pan tool +### Zoom Pan Tool -To activate panning mode set the [`tool`](https://ej2.syncfusion.com/react/documentation/api/diagram/#tool) property of the diagram as `ZoomPan`. The following code illustrates how to enable Zoom pan in the diagram +The pan tool enables users to navigate large diagrams by dragging the view area. To activate panning mode, set the [`tool`](https://ej2.syncfusion.com/react/documentation/api/diagram/#tool) property to `ZoomPan`: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -188,7 +185,7 @@ N> Please note that panning the diagram is not possible when 'multiplePage' is s ## Events -[`elementDraw`](https://ej2.syncfusion.com/react/documentation/api/diagram/#elementdraw) event is triggered when node or connector is drawn using drawing tool. +The [`elementDraw`](https://ej2.syncfusion.com/react/documentation/api/diagram/#elementdraw) event triggers whenever users create nodes or connectors using drawing tools. This event provides access to the newly created element and enables custom logic during the drawing process: {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/diagram/tooltip.md b/ej2-react/diagram/tooltip.md index d20893070..8a1138d06 100644 --- a/ej2-react/diagram/tooltip.md +++ b/ej2-react/diagram/tooltip.md @@ -1,28 +1,34 @@ --- layout: post -title: Tooltip in React Diagram component | Syncfusion® -description: Learn here all about Tooltip in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Tooltip in React Diagram Component | Syncfusion® +description: Learn here all about Tooltip in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Tooltip platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Tooltip in EJ2 React Diagram component +# Tooltip in EJ2 React Diagram Component -In a Graphical User Interface (GUI), a tooltip is a message that appears when the mouse hovers over an element. The diagram control provides tooltip support while dragging, resizing, rotating a node, and when the mouse hovers over any diagram element. +In Graphical User Interface (GUI), a tooltip is a message that appears when the mouse hovers over an element. Tooltips enhance user experience by providing contextual information, guidance, and feedback without cluttering the interface. The diagram component provides comprehensive tooltip support while dragging, resizing, rotating nodes, and when the mouse hovers over any diagram element. -## Default tooltip +## Default Tooltip -By default, the diagram displays a tooltip showing size, position, and angle information while dragging, resizing, or rotating a node. The following images illustrate how the diagram displays node information during these interactions. +By default, the diagram displays a tooltip showing size, position, and angle information while dragging, resizing, or rotating a node. This provides real-time feedback during interactive operations: + +- **Drag**: Shows current X and Y coordinates of the node. +- **Resize**: Displays current width and height dimensions. +- **Rotate**: Indicates the current rotation angle in degrees. + +The following images illustrate how the diagram displays node information during these interactions. | Drag | Resize | Rotate | |---|---|---| | ![ToolTip During Drag](images/Tooltip_img1.png) | ![ToolTip During Resize](images/Tooltip_img2.png) | ![ToolTip During Rotate](images/Tooltip_img3.png) | -### Disable default tooltip +### Disable Default Tooltip The default tooltip that appears while interacting with nodes can be disabled by removing the tooltip constraints from the [`selectorConstraints`](https://helpej2.syncfusion.com/react/documentation/api/diagram/selectorConstraints/) of the [`selectedItems`](https://helpej2.syncfusion.com/react/documentation/api/diagram/selectorModel/) property of the diagram. @@ -37,7 +43,7 @@ The default tooltip that appears while interacting with nodes can be disabled by {% previewsample "page.domainurl/code-snippet/diagram/tooltip/es5tooltip-cs1" %} -## Tooltip for a specific node/connector +## Tooltip for a Specific Node/Connector The tooltip can be customized for each node and connector. Remove the **InheritTooltip** option from the [`constraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/#constraints) of that node/connector. The following code example illustrates how to customize the tooltip for individual elements. @@ -52,7 +58,7 @@ The tooltip can be customized for each node and connector. Remove the **InheritT {% previewsample "page.domainurl/code-snippet/diagram/tooltip/es5TooltipNodes-cs1" %} -## Inherit diagram tooltip +## Inherit Diagram Tooltip The diagram supports inheriting the diagram tooltip when the mouse hovers over any node or connector. To show a tooltip on mouse over, set the diagram's [`tooltip`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#tooltip) property with the tooltip [`content`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramTooltip/#content) and [`position`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramTooltip/#position). Ensure that the nodes and connectors have their constraints set to **InheritTooltip**, as shown in the following example. @@ -67,9 +73,9 @@ The diagram supports inheriting the diagram tooltip when the mouse hovers over a {% previewsample "page.domainurl/code-snippet/diagram/tooltip/es5InheritTooltip-cs1" %} -### Disable tooltip at runtime +### Disable Tooltip at Runtime -The tooltip on mouse over can be disabled by setting the diagram's [`tooltip`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#tooltip) property to `null`. The following code example illustrates how to disable the mouse over tooltip at runtime. +The tooltip on mouse over can be disabled by assigning the diagram's `tooltip` property as **null**. The following code example illustrates how to disable the mouse over tooltip at runtime. ```ts @@ -87,7 +93,7 @@ The tooltip on mouse over can be disabled by setting the diagram's [`tooltip`](h The tooltip feature has been implemented to support Ports, providing the ability to display information or descriptions when the mouse hovers over them. -To display tooltips on mouseover, set the desired tooltip [`content`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramTooltip/#content) by utilizing the [`tooltip`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#tooltip) property. +To display tooltips on mouseover, set the desired tooltip [`content`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramTooltip/#content) by utilizing the `tooltip` property. Tooltips for Ports can be enabled or disabled using the [`PortConstraints`](https://helpej2.syncfusion.com/react/documentation/api/diagram/port/#constraints) Tooltip property. @@ -131,7 +137,7 @@ The following image illustrates how the diagram displays tooltips during an inte ![Tooltip](images/PortTooltip.gif) -## Tooltip template content +## Tooltip Template Content The tooltip template content allows you to customize the tooltip by using HTML templates. This means you can define the structure and style of the tooltip using HTML, providing greater flexibility and control over its appearance. By leveraging HTML templates, you can include rich content such as formatted text, images, and other HTML elements within the tooltip, enhancing the user experience with more informative and visually appealing tooltips. @@ -148,11 +154,11 @@ The following code example illustrates how to add formatted HTML content to the {% previewsample "page.domainurl/code-snippet/diagram/tooltip/es5TooltipTemplate-cs1" %} -## Tooltip alignments +## Tooltip Alignments -### Tooltip relative to object +### Tooltip Relative to Object -The diagram supports displaying a tooltip around the node or connector that is hovered over by the mouse. The tooltip's alignment can be adjusted using the [`position`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramTooltip/#position) property. The [`relativeMode`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramTooltip/#relativemode) property specifies whether the tooltip should be displayed around the object or at the mouse position. +The diagram provides support to show tooltip around the node/connector that is hovered by the mouse. The tooltip can be aligned by using the [`position`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramTooltip/#position) property. The [`relativeMode`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramTooltip/#relativemode) property of the tooltip defines whether the tooltip has to be displayed around the object or at the mouse position. The following code example illustrates how to position the tooltip around object. @@ -167,9 +173,9 @@ The following code example illustrates how to position the tooltip around object {% previewsample "page.domainurl/code-snippet/diagram/tooltip/es5TooltipObject-cs1" %} -### Tooltip relative to mouse position +### Tooltip Relative to Mouse Position -To display the tooltip at the mouse position, set the **mouse** option in the [`relativeMode`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramTooltip/#relativemode) property of the tooltip. +To display the tooltip at the mouse position, set the **mouse** option in the `relativeMode` property of the tooltip. The following code example illustrates how to show tooltip at mouse position. @@ -184,9 +190,9 @@ The following code example illustrates how to show tooltip at mouse position. {% previewsample "page.domainurl/code-snippet/diagram/tooltip/es5TooltipMouse-cs1" %} -## Tooltip animation +## Tooltip Animation -To animate the tooltip, you can use a range of animation effects controlled by the [`animation`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramTooltip/#animation) property. This property allows you to customize the delay, duration, and various other effects according to your preferences. +To animate the tooltip, a set of specific animation effects are available, and it can be controlled by using the [`animation`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramTooltip/#animation) property. The animation property also allows you to set delay, duration, and various other effects of your choice. Refer the following sample where we used zoomIn animation for tooltip open and zoomOut animation for tooltip close with delay and duration. @@ -201,7 +207,7 @@ Refer the following sample where we used zoomIn animation for tooltip open and z {% previewsample "page.domainurl/code-snippet/diagram/tooltip/es5TooltipAnimation-cs1" %} -## Sticky tooltip +## Sticky Tooltip A sticky tooltip will remain visible even after you move the mouse away from the node or connector. You can activate this feature by setting the [`isSticky`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramTooltip/#issticky) property of the tooltip. @@ -218,9 +224,9 @@ The following example shows how to render sticky tooltip. {% previewsample "page.domainurl/code-snippet/diagram/tooltip/es5stickyTooltip-cs1" %} -## Hide tooltip pointer +## Hide Tooltip Pointer -The [`showTipPointer`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramTooltip/#showtippointer) property allows to control the visibility of tooltip pointer. By default, the `showTipPointer` is set as true. +The [`showTipPointer`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramTooltip/#showtippointer) property allows to control the visibility of tooltip pointer. By default, the `showTipPointer` is set as **true**. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -233,7 +239,7 @@ The [`showTipPointer`](https://helpej2.syncfusion.com/react/documentation/api/di {% previewsample "page.domainurl/code-snippet/diagram/tooltip/es5hideTooltip-cs1" %} -## Tooltip size +## Tooltip Size By default, the size of the tooltip is calculated based on its content. If you want to customize the size, you can use the [`width`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramTooltip/#width) and [`height`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramTooltip/#height) properties of the tooltip. @@ -250,7 +256,7 @@ The following code example shows how to set the size for the tooltip: {% previewsample "page.domainurl/code-snippet/diagram/tooltip/es5ToolTipSize-cs1" %} -## Show/Hide tooltip at runtime +## Show/Hide Tooltip at Runtime You can show or hide the tooltip dynamically using a button click with the [`showTooltip`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#showtooltip) and [`hideTooltip`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#hidetooltip) methods of the diagram. This allows you to control the tooltip visibility programmatically rather than relying on user hover actions. In some cases, you may want to display the tooltip without requiring the user to hover over the object. @@ -270,8 +276,8 @@ The following example demonstrates how to show or hide the tooltip at runtime: ## Tooltip for Annotation Tooltips can be added to annotations to display additional information on mouseover. -To display tooltips on mouseover, set the desired tooltip text to the [`tooltip`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#tooltip) property of the annotation. -Tooltips for Annotations can be enabled or disabled by setting the [`AnnotationConstraints`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationConstraints/) property as [`Tooltip`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#tooltip). +To display tooltips on mouseover, set the desired tooltip text to the `tooltip` property of the annotation. +Tooltips for Annotations can be enabled or disabled by setting the [`AnnotationConstraints`](https://helpej2.syncfusion.com/react/documentation/api/diagram/annotationConstraints/) property as `Tooltip`. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/diagram/umldiagram.md b/ej2-react/diagram/umldiagram.md index a106f3bf9..c789db70a 100644 --- a/ej2-react/diagram/umldiagram.md +++ b/ej2-react/diagram/umldiagram.md @@ -1,20 +1,22 @@ --- layout: post -title: Umldiagram in React Diagram component | Syncfusion® -description: Learn here all about Umldiagram in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Umldiagram in React Diagram Component | Syncfusion® +description: Learn how to create and customize UML Class and Activity diagrams in Syncfusion® React Diagram Component with comprehensive examples and API references. control: Umldiagram platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# UML diagram in React Diagram component +# UML Diagrams in React Diagram Component + +This guide demonstrates how to create and customize UML (Unified Modeling Language) diagrams using the Syncfusion React Diagram component. You'll learn to build UML Class diagrams for object-oriented system modeling and UML Activity diagrams for workflow visualization. ## UML Class Diagram -A class diagram visually depicts the static structure of an application and is extensively employed in modeling object-oriented systems. It holds a unique position in UML diagrams, as it directly aligns with object-oriented languages. The diagram also facilitates the automatic generation of class diagram shapes based on business logic, streamlining the translation from conceptual models to practical implementation. +A class diagram visually depicts the static structure of an application and is extensively employed in modeling object-oriented systems. It holds a unique position in UML diagrams, as it directly aligns with object-oriented languages. The diagram also facilitates automatic generation of class diagram shapes based on business logic, streamlining the translation from conceptual models to practical implementation. -## Uml Class Diagram Shapes +## UML Class Diagram Shapes The UML class diagram shapes are explained as follows. @@ -45,9 +47,9 @@ The UML class diagram shapes are explained as follows. ### Interface -An [`interface`](https://ej2.syncfusion.com/react/documentation/api/diagram/umlClassifierShapeModel#interface) is a specific type of classifier that signifies a declaration of a cohesive set of public features and obligations. When creating an interface, involves defining the classifier property using the notation. This foundational concept in object-oriented programming outlines a contract for classes to adhere to, specifying the required methods and behaviors without delving into the implementation details. +An [`interface`](https://ej2.syncfusion.com/react/documentation/api/diagram/umlClassifierShapeModel#interface) is a specific type of classifier that represents a declaration of a cohesive set of public features and obligations. When creating an interface, define the classifier property using the interface notation. This concept in object-oriented programming outlines a contract for classes to implement, specifying the required methods and behaviors without providing implementation details. -Additionally, you can define the [`name`](https://ej2.syncfusion.com/react/documentation/api/diagram/umlInterfaceModel#name), [`attributes`](https://ej2.syncfusion.com/react/documentation/api/diagram/umlInterfaceModel#attributes), and [`methods`](https://ej2.syncfusion.com/react/documentation/api/diagram/umlInterfaceModel#methods) of the interface using the interface property of the node. +Additionally, you can define the `name`, `attributes`, and `methods` of the interface using the interface property of the node. The attributes' name, type, and scope properties allow you to specify the name, data type, and visibility of each attribute. @@ -70,9 +72,9 @@ The following code example illustrates how to create an interface: ### Enumeration -To establish an enumeration, designate the classifier property of the node as [enumeration](https://ej2.syncfusion.com/react/documentation/api/diagram/umlClassifierShapeModel#enumeration). Additionally, define the [`name`](https://ej2.syncfusion.com/react/documentation/api/diagram/umlEnumerationModel/#name) and enumerate the [`members`](https://ej2.syncfusion.com/react/documentation/api/diagram/umlEnumerationMemberModel/) of the enumeration using the appropriate enumeration property of the node. This process encapsulates a set of distinct values within the enumeration, allowing for a clear representation of specific,and named constants within a system. +To establish an enumeration, designate the classifier property of the node as [enumeration](https://ej2.syncfusion.com/react/documentation/api/diagram/umlClassifierShapeModel#enumeration). Additionally, define the `name` and enumerate the [`members`](https://ej2.syncfusion.com/react/documentation/api/diagram/umlEnumerationMemberModel/) of the enumeration using the appropriate enumeration property of the node. This process encapsulates a set of distinct values within the enumeration, allowing for a clear representation of specific,and named constants within a system. -You can set a name for the enumeration members collection using the [`name`](https://ej2.syncfusion.com/react/documentation/api/diagram/umlEnumerationModel/#name) property of members collection. +You can set a name for the enumeration members collection using the `name` property of members collection. The following code example illustrates how to create an enumeration. @@ -89,7 +91,7 @@ The following code example illustrates how to create an enumeration. ## UML Class Relationships -* A class may be involved in one or more relationships with other classes. A relationship can be one of the following types: +A class may be involved in one or more relationships with other classes. The relationship types available are as follows: | Shape | Image | | ----------- | ------------------------------------ | @@ -106,7 +108,7 @@ The following code example illustrates how to create an enumeration. 1.Directional 2.BiDirectional -The association property allows you to define the type of association. The default value of association is `“Directional”`. The following code example illustrates how to create an association. +The association property allows you to define the type of association. The default value of association is **Directional**. The following code example illustrates how to create an association. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -138,7 +140,7 @@ The following code example illustrates how to create an aggregation. ### Composition -Composition is a strong form of `aggregation`. The composition is decorated with a black diamond. To create a composition shape, define the [`relationship`](https://ej2.syncfusion.com/react/documentation/api/diagram/relationShipModel/#relationship) property of the connector as “Composition”. +Composition is a strong form of `aggregation`. The composition is decorated with a black diamond. To create a composition shape, define the `relationship` property of the connector as “Composition”. The following code example illustrates how to create a composition. @@ -157,7 +159,7 @@ The following code example illustrates how to create a composition. Inheritance is also called a “generalization”. Inheritance is a binary taxonomic directed relationship between a more general classifier (superclass) and a more specific classifier (subclass).Inheritance is shown as a line with a hollow triangle. -To create an inheritance, define the [`relationship`](https://ej2.syncfusion.com/react/documentation/api/diagram/relationShipModel/#relationship) as “inheritance”. +To create an inheritance, define the `relationship` as “inheritance”. The following code example illustrates how to create an inheritance. @@ -174,7 +176,7 @@ The following code example illustrates how to create an inheritance. ### Dependency -Dependency is a directed relationship, which is used to show that some UML elements need or depend on other model elements for specifications. Dependency is shown a dashed line with an opened arrow. To create a dependency, define the [`relationship`](https://ej2.syncfusion.com/react/documentation/api/diagram/relationShipModel/#relationship) property of the connector as “dependency”. +Dependency is a directed relationship, which is used to show that some UML elements need or depend on other model elements for specifications. Dependency is shown a dashed line with an opened arrow. To create a dependency, define the `relationship` property of the connector as “dependency”. The following code example illustrates how to create a dependency. @@ -193,22 +195,22 @@ The following code example illustrates how to create a dependency. ### Multiplicity -Multiplicity is a definition of an inclusive interval of non-negative integers to specify the allowable number of instances of a described element. The type of multiplicity are as follows. +Multiplicity defines an inclusive interval of non-negative integers to specify the allowable number of instances of the described element. The types of multiplicity are as follows: - 1.OneToOne - 2.ManyToOne - 3.OneToMany - 4.ManyToMany +1. OneToOne +2. ManyToOne +3. OneToMany +4. ManyToMany -By default the multiplicity will be considered as “OneToOne”. +By default, the multiplicity is considered as **OneToOne**. -The multiplicity property in UML allows you to specify large number of elements or some collection of elements. +The multiplicity property in UML allows you to specify a large number of elements or some collection of elements. -The shape multiplicity’s [`source`](https://ej2.syncfusion.com/react/documentation/api/diagram/classifierMultiplicityModel/#source) property is used to set the source label to the connector and the [`target`](https://ej2.syncfusion.com/react/documentation/api/diagram/classifierMultiplicityModel/#target) property is used to set the target label to the connector. +The shape multiplicity’s [`source`](https://ej2.syncfusion.com/react/documentation/api/diagram/classifierMultiplicityModel/#source) property sets the source label to the connector and the [`target`](https://ej2.syncfusion.com/react/documentation/api/diagram/classifierMultiplicityModel/#target) property is used to set the target label to the connector. To set an optionality or cardinality for the connector source label, use the optional property. -The [`lowerBounds`](https://ej2.syncfusion.com/react/documentation/api/diagram/multiplicityLabelModel#lowerBounds) and [`upperBounds`](https://ej2.syncfusion.com/react/documentation/api/diagram/multiplicityLabelModel#upperBounds) could be natural constants or constant expressions evaluated to a natural (non negative) number. The upper bound could also be specified as an asterisk ‘\*’ which denotes an unlimited number of elements. The upper bound should be greater than or equal to the lower bound. +The [`lowerBounds`](https://ej2.syncfusion.com/react/documentation/api/diagram/multiplicityLabelModel#lowerBounds) and [`upperBounds`](https://ej2.syncfusion.com/react/documentation/api/diagram/multiplicityLabelModel#upperBounds) can be natural constants or constant expressions evaluated to natural (non-negative) numbers. Upper bound can also be specified as asterisk '*' which denotes unlimited number of elements. Upper bound should be greater than or equal to the lower bound. The following code example illustrates how to customize the multiplicity. @@ -223,11 +225,11 @@ The following code example illustrates how to customize the multiplicity. {% previewsample "page.domainurl/code-snippet/diagram/umldiagramshapes/es5multiplicity-cs1" %} -## How to add UML child at runtime +## How to Add UML Child at Runtime In UML nodes, child elements such as members, methods and attributes can be added either programmatically or interactively. -### Adding UML child through code +### Adding UML Child Through Code The [addChildToUmlNode](https://ej2.syncfusion.com/react/documentation/api/diagram#addchildtoumlnode) method is employed for dynamically adding a child to the UML node during runtime, providing flexibility in modifying the diagram structure programmatically. @@ -244,15 +246,15 @@ The following code example illustrates how to add members, methods and attribute {% previewsample "page.domainurl/code-snippet/diagram/umldiagramshapes/es5Method-cs1" %} -### Adding UML child through user interaction +### Adding UML Child Through User Interaction To include a child, select a node, move the mouse outside it, and position the pointer near the right side. A highlighter emerges between the two child elements. Click the highlighter to add a child type to the chosen UML node seamlessly. The following gif illustrates how to add a Child through user interaction. ![UML child](images/UMLChild.gif) -## Adding UML Nodes in Symbol palette +## Adding UML Nodes in Symbol Palette -UML built-in shapes are efficiently rendered in a symbol palette. The [`symbols`](https://ej2.syncfusion.com/react/documentation/api/diagram/paletteModel/#symbols) property of [`palettes`](https://ej2.syncfusion.com/react/documentation/api/diagram/paletteModel/) is used to define UML symbols with the necessary classes and methods. By incorporating this feature, you can seamlessly augment the palette with a curated collection of predefined UML symbols, thereby enhancing the versatility of your UML diagramming application. +UML built-in shapes are efficiently rendered in a symbol palette. The [`symbols`](https://ej2.syncfusion.com/react/documentation/api/diagram/paletteModel/#symbols) property of [`palettes`](https://ej2.syncfusion.com/react/documentation/api/diagram/paletteModel/) is used to define UML symbols with the necessary classes and methods. This feature allows you to add a collection of predefined UML symbols to the palette, making your UML diagramming application more versatile. The following code example showcases the rendering of UML built-in shapes in a symbol palette. @@ -267,7 +269,7 @@ The following code example showcases the rendering of UML built-in shapes in a s {% previewsample "page.domainurl/code-snippet/diagram/umldiagramshapes/es5preview-cs4" %} -## Editing in UML nodes +## Editing in UML Nodes You can edit the name, attributes, and methods of the class diagram shapes just double clicking, similar to editing a node annotation. @@ -275,7 +277,7 @@ The following image illustrates how the text editor looks in an edit mode. ![Editing Class Diagram](images/Editing.gif) -## UML Activity diagram +## UML Activity Diagram An Activity diagram functions as a visual flowchart, illustrating the progression from one activity to the next within a system. Each activity corresponds to a system operation, providing a clear depiction of the sequential flow in a dynamic process.. @@ -287,9 +289,9 @@ The purpose of an activity diagram can be described as follows. 3. Describe the parallel, branched, and concurrent flow of the system. -### UML Activity diagram Shapes +### UML Activity Diagram Shapes -To create a UmlActivity, define the [`type`](https://ej2.syncfusion.com/react/documentation/api/diagram/umlActivityShapeModel/#type) as "UmlActivity" and set the list of built-in shapes in the [`shape`](https://ej2.syncfusion.com/react/documentation/api/diagram/umlActivityShapeModel/#shape) property as demonstrated below. +To create a UmlActivity, define the `type` as "UmlActivity" and set the list of built-in shapes in the `shape` property as demonstrated below. | Shape | Image | | -------------- | ---------------------------------------- | @@ -320,9 +322,9 @@ The following code illustrates how to create a UmlActivity shapes. {% previewsample "page.domainurl/code-snippet/diagram/umldiagramshapes/es5UmlActivity-cs1" %} -### Uml Activity connector +### UML Activity Connector -To establish a UML Activity connector, specify the [`type`](https://ej2.syncfusion.com/react/documentation/api/diagram/relationShipModel/#type) of connector shape as "UmlActivity" and define the flow as either "Exception," "Control," or "Object." This configuration delineates the nature of the connection, allowing for a precise representation of the interaction within the activity diagram. +To establish a UML Activity connector, specify the `type` of connector shape as "UmlActivity" and define the flow as either "Exception," "Control," or "Object." This configuration delineates the nature of the connection, allowing for a precise representation of the interaction within the activity diagram. The following code illustrates how to create a UmlActivity connector. diff --git a/ej2-react/diagram/umlsequencediagram.md b/ej2-react/diagram/umlsequencediagram.md index 2f53711f0..3126716b5 100644 --- a/ej2-react/diagram/umlsequencediagram.md +++ b/ej2-react/diagram/umlsequencediagram.md @@ -1,36 +1,45 @@ --- layout: post -title: UmlSequenceDiagram in React Diagram component | Syncfusion® -description: Learn here all about UmlSequenceDiagram in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: UmlSequenceDiagram in React Diagram Component | Syncfusion® +description: Learn how to create and customize UML sequence diagrams in Syncfusion® React Diagram Component with participants, messages, activation boxes, and fragments. control: UmlSequenceDiagram platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# UML Sequence Diagram in React Diagram component +# UML Sequence Diagram in React Diagram Component +A UML sequence diagram is a type of interaction diagram that visualizes how objects communicate with each other over time. These diagrams show the sequence of messages exchanged between participants, making them essential for understanding system interactions, API workflows, and process flows. -A UML sequence diagram is an interaction diagram that demonstrates how objects interact with each other and the order of these interactions. The Syncfusion® diagram control provides comprehensive support for creating and visualizing UML sequence diagrams through the [UmlSequenceDiagramModel](https://ej2.syncfusion.com/react/documentation/api/diagram/UmlSequenceDiagramModel/). To enable this functionality, assign the `UmlSequenceDiagramModel` to the [model](https://ej2.syncfusion.com/react/documentation/api/diagram/#model) property of the diagram control. +The Syncfusion® React Diagram component provides comprehensive support for creating and visualizing UML sequence diagrams through the [`UmlSequenceDiagramModel`](https://ej2.syncfusion.com/react/documentation/api/diagram/UmlSequenceDiagramModel/). This specialized model enables the creation of sequence diagrams with proper UML notation and automated layout capabilities. ## UML Sequence Diagram Elements -A sequence diagram includes several key elements such as participants, messages, activation boxes, and fragments. The sections below demonstrate how to define and configure these components using the diagram control. +A sequence diagram comprises several essential elements that work together to represent system interactions. The following sections demonstrate how to define and configure these components. ### Participants -[UmlSequenceParticipantModel](https://ej2.syncfusion.com/react/documentation/api/diagram/UmlSequenceParticipantModel/) in a sequence diagram represent the entities that interact with each other, appearing at the top of the diagram with lifelines extending vertically downward. +[`UmlSequenceParticipantModel`](https://ej2.syncfusion.com/react/documentation/api/diagram/UmlSequenceParticipantModel/) represents the entities that participate in the interaction sequence. Participants appear as rectangular boxes at the top of the diagram, with lifelines extending vertically downward to show their existence throughout the interaction timeline. + +#### Participant Types + +Participants can be displayed in two forms: +- **Actors**: Human users or external systems (displayed with stick figure notation). +- **Objects**: System components, classes, or services (displayed as rectangular boxes). #### UmlSequenceParticipantModel Properties | Property | Type | Description | |---|---|---| -| id | string \| number | A unique identifier for the participant | -| content | string | The display text for the participant | -| isActor | boolean | Specifies whether the participant is displayed as an actor (true) or an object (false) | -| showDestructionMarker | boolean | Indicates whether a destruction marker (X) is shown at the end of the lifeline | -| activationBoxes | UmlSequenceActivationBoxModel[] | A collection of activation boxes associated with the participant | +| id | string \| number | A unique identifier for the participant. | +| content | string | The display text for the participant.. | +| isActor | boolean | Specifies whether the participant is displayed as an actor (true) or an object (false). | +| showDestructionMarker | boolean | Indicates whether a destruction marker (X) is shown at the end of the lifeline. | +| activationBoxes | UmlSequenceActivationBoxModel[] | A collection of activation boxes associated with the participant .| + +#### Creating Participants -The following code example illustrates how to create participants: +The following code example demonstrates how to create different types of participants: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -45,9 +54,11 @@ The following code example illustrates how to create participants: ### Messages -[UmlSequenceMessageModel](https://ej2.syncfusion.com/react/documentation/api/diagram/UmlSequenceMessageModel/) represents communication between participants and are displayed as arrows connecting lifelines. +[`UmlSequenceMessageModel`](https://ej2.syncfusion.com/react/documentation/api/diagram/UmlSequenceMessageModel/) represents communication between participants . Messages are displayed as arrows connecting lifelines and indicate the flow of information or requests between system components. -#### Types of Messages +#### Message Types and Usage + +Different message types serve specific purposes in sequence diagrams: | Message Type | Description | Example | |---|---|---| @@ -62,13 +73,15 @@ The following code example illustrates how to create participants: | Property | Type | Description | |---|---|---| -| id | string \| number | A unique identifier for the message | -| content | string | The display text for the message | -| fromParticipantID | string \| number | ID of the participant sending the message | +| id | string \| number | A unique identifier for the message. | +| content | string | The display text for the message. | +| fromParticipantID | string \| number | ID of the participant sending the message.. | | toParticipantID | string \| number | ID of the participant receiving the message | -| type | UmlSequenceMessageType | Type of the message (Synchronous, Asynchronous, Reply, Create, Delete, Self) | +| type | UmlSequenceMessageType | Type of the message (Synchronous, Asynchronous, Reply, Create, Delete, Self). | + +#### Creating Messages -The following code example illustrates how to create messages: +The following example shows how to create different types of messages between participants: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -83,17 +96,19 @@ The following code example illustrates how to create messages: ### Activation Boxes -[UmlSequenceActivationBoxModel](https://ej2.syncfusion.com/react/documentation/api/diagram/UmlSequenceActivationBoxModel/) represents periods when a participant is active and processing a message. They appear as thin rectangles on participant lifelines. +[`UmlSequenceActivationBoxModel`](https://ej2.syncfusion.com/react/documentation/api/diagram/UmlSequenceActivationBoxModel/) represents periods when a participant is actively processing or executing operations. Activation boxes appear as thin rectangles overlaid on participant lifelines, indicating the duration of active processing between specific messages. #### UmlSequenceActivationBoxModel Properties | Property | Type | Description | |---|---|---| -| id | string \| number | A unique identifier for the activation box | -| startMessageID | string \| number | ID of the message that initiates the activation | -| endMessageID | string \| number | ID of the message that terminates the activation | +| id | string \| number | A unique identifier for the activation box. | +| startMessageID | string \| number | ID of the message that initiates the activation.. | +| endMessageID | string \| number | ID of the message that terminates the activation. | -The following code example illustrates how to create activation boxes: +#### Creating Activation Boxes + +The following example demonstrates how to create activation boxes that span specific message sequences: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -108,11 +123,20 @@ The following code example illustrates how to create activation boxes: ### Fragments -[UmlSequenceFragmentModel](https://ej2.syncfusion.com/react/documentation/api/diagram/UmlSequenceFragmentModel/) groups a set of messages based on specific conditions in a sequence diagram. They are displayed as rectangular enclosures that visually separate conditional or looping interactions. +[`UmlSequenceFragmentModel`](https://ej2.syncfusion.com/react/documentation/api/diagram/UmlSequenceFragmentModel/) represents logical groupings of messages based on specific conditions or control structures. Fragments appear as rectangular enclosures that visually organize conditional logic, loops, and alternative execution paths within sequence diagrams. + +#### Fragment Applications + +Fragments are essential for modeling: +- Conditional logic (if-then-else statements). +- Iterative processes (loops and repetitions). +- Optional operations that may or may not execute. +- Error handling and exception flows. +- Parallel processing scenarios. -#### Types of Fragments +#### Fragment Types -The [UmlSequenceFragmentType](https://ej2.syncfusion.com/react/documentation/api/diagram/UmlSequenceFragmentType/) enum defines the following fragment types: +The [`UmlSequenceFragmentType`](https://ej2.syncfusion.com/react/documentation/api/diagram/UmlSequenceFragmentType/) enum defines the following fragment types: | Fragment Type | Description | Example | |---------------|-------------|--------| @@ -124,19 +148,21 @@ The [UmlSequenceFragmentType](https://ej2.syncfusion.com/react/documentation/api | Property | Type | Description | |---|---|---| -| id | string \| number | A unique identifier for the fragment | -| type | UmlSequenceFragmentType | Type of the fragment (Optional, Loop, Alternative) | -| conditions | UmlSequenceFragmentConditionModel[] | Collection of conditions for the fragment | +| id | string \| number | A unique identifier for the fragment. | +| type | UmlSequenceFragmentType | Type of the fragment (Optional, Loop, Alternative). | +| conditions | UmlSequenceFragmentConditionModel[] | Collection of conditions for the fragment. | #### UmlSequenceFragmentConditionModel Properties | Property | Type | Description | |---|---|---| -| content | string | Text describing the condition or parameter | -| messageIds | (string \| number)[] | Collection of message IDs included in this condition section | -| fragmentIds | string[] | Collection of nested fragments ids (for complex structures) | +| content | string | Text describing the condition or parameter. | +| messageIds | (string \| number)[] | Collection of message IDs included in this condition section. | +| fragmentIds | string[] | Collection of nested fragments ids (for complex structures). | -The following code example illustrates how to create fragments: +#### Creating Fragments + +The following example illustrates how to create fragments with different condition types: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -149,9 +175,11 @@ The following code example illustrates how to create fragments: {% previewsample "page.domainurl/code-snippet/diagram/umlsequencediagram/umlsequencediagram-4" %} -### Customizing Participant Spacing in Sequence Diagram +## Customization Options + +### Adjusting Participant Spacing -The [spaceBetweenParticipants](https://ej2.syncfusion.com/react/documentation/api/diagram/UmlSequenceDiagramModel/#spaceBetweenParticipants) property in `UmlSequenceDiagramModel` controls the horizontal spacing between participants. The default value is 100, and it can be adjusted based on your layout requirements. +The [`spaceBetweenParticipants`](https://ej2.syncfusion.com/react/documentation/api/diagram/UmlSequenceDiagramModel/#spaceBetweenParticipants) property controls the horizontal spacing between participants in the sequence diagram. Adjust this value to accommodate longer message labels or improve diagram readability. ```javascript // Define the UML Sequence Diagram model diff --git a/ej2-react/diagram/undo-redo.md b/ej2-react/diagram/undo-redo.md index 0e44738f6..2f964f7e7 100644 --- a/ej2-react/diagram/undo-redo.md +++ b/ej2-react/diagram/undo-redo.md @@ -1,30 +1,32 @@ --- layout: post -title: Undo redo in React Diagram component | Syncfusion® -description: Learn here all about Undo redo in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Undo redo in React Diagram Component | Syncfusion® +description: Learn how to implement undo and redo functionality with history management in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Undo redo platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Undo redo in React Diagram component +# Undo and Redo in React Diagram Component -Diagram tracks the history of actions that are performed after initializing the diagram and provides support to reverse and restore those changes. +The React Diagram component automatically tracks all user interactions and programmatic changes, providing robust undo and redo functionality. This feature enables users to reverse or restore actions, making diagram editing more intuitive and error-tolerant. -## Undo and redo +## Basic Undo and Redo Operations -Diagram provides built-in support to track the changes that are made through interaction and through public APIs. The changes can be reverted or restored either through shortcut keys or through commands. +The diagram provides built-in support to track changes made through both user interactions and public API calls. These changes can be reversed or restored using keyboard shortcuts or programmatic commands. -N> If you want to use Undo-Redo in diagram, you need to inject UndoRedo in the diagram. +N> The UndoRedo module must be injected to access undo/redo features in the diagram component. -## Undo/redo through shortcut keys +### Keyboard Shortcuts -Undo/redo commands can be executed through shortcut keys. Shortcut key for undo is **`Ctrl+z`** and shortcut key for redo is **`Ctrl+y`**. +Use these standard keyboard shortcuts for quick undo/redo operations: +- **Undo**: `Ctrl+Z` +- **Redo**: `Ctrl+Y` -## Undo/redo through public APIs +### Programmatic undo and redo -The client-side methods [`undo`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#undo) and [`redo`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#redo) help you to revert/restore the changes. The following code example illustrates how to undo/redo the changes through script. +The [`undo`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#undo) and [`redo`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#redo) methods allow you to control undo/redo operations programmatically. The following example demonstrates how to implement these methods: ```ts @@ -47,16 +49,21 @@ diagramInstance.undo(); // Restores the last undone action diagramInstance.redo(); ``` +### Enabling and Disabling Undo/Redo -Undo/Redo for diagram can be enabled/disabled with the [`constraints`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramConstraints/) property of diagram. +Undo/Redo for diagram can be enabled/disabled with the [`constraints`](https://helpej2.syncfusion.com/react/documentation/api/diagram/diagramConstraints/) property of the diagram component. -When a change in the diagram is reverted or restored (undo/redo), the [`historyChange`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#historychange) event gets triggered. +### History Change Events -## Group multiple changes +The [`historyChange`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#historychange) event triggers whenever an action is undone or redone, allowing you to respond to history state changes. -History list allows to revert or restore multiple changes through a single undo/redo command. For example, revert/restore the fill color change of multiple elements at a time. +## Advanced history management -The diagram method [`startGroupAction`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#startgroupaction) allows you to log multiple actions at a time in the history manager stack. It is easier to undo or revert the changes made in the diagram in a single undo/redo process instead of reverting every actions one by one.The diagram method [`endGroupAction`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#endgroupaction) allows you to end the group actions that are stored in the stack history. The following code illustrates how to undo/redo multiple fillColor change of a node at a time. +### Grouping multiple actions + +Group related changes into a single undo/redo operation using the history grouping feature. This approach allows users to undo or redo multiple related changes simultaneously rather than reversing each action individually. + +Use [`startGroupAction`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#startgroupaction)to begin grouping actions and [`endGroupAction`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#endgroupaction) to complete the group. The following example shows how to group multiple fill color changes: {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -69,9 +76,8 @@ The diagram method [`startGroupAction`](https://helpej2.syncfusion.com/react/doc {% previewsample "page.domainurl/code-snippet/diagram/undoredo/groupAction-cs1" %} -## Stack Limit - -The [`stackLimit`](https://helpej2.syncfusion.com/react/documentation/api/diagram/history/#stacklimit) property of history manager is used to limits the number of actions to be stored on the history manager. +### Managing History Stack Size +The [`stackLimit`](https://helpej2.syncfusion.com/react/documentation/api/diagram/history/#stacklimit) property controls the maximum number of actions stored in the history manager. Setting an appropriate limit helps manage memory usage in applications with extensive editing operations. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -84,9 +90,9 @@ The [`stackLimit`](https://helpej2.syncfusion.com/react/documentation/api/diagra {% previewsample "page.domainurl/code-snippet/diagram/undoredo/es5Connect-cs6" %} -## Restrict Undo/Redo +### Restricting History Logging -Undo, Redo process can be avoided for particular element by using [`canLog`](https://helpej2.syncfusion.com/react/documentation/api/diagram/history/#canlog) property in the history manager. The following example illustrates how to prevent history entry using `canLog` function. +Prevent specific actions from being recorded in the history using the [`canLog`](https://helpej2.syncfusion.com/react/documentation/api/diagram/history/#canlog) property. This feature is useful when certain operations should not be undoable. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -99,7 +105,9 @@ Undo, Redo process can be avoided for particular element by using [`canLog`](htt {% previewsample "page.domainurl/code-snippet/diagram/undoredo/es5Connect-cs5" %} -## undo/redo stack +## History Stack Inspection + +### Accessing Undo and Redo Stacks The [`undoStack`](https://helpej2.syncfusion.com/react/documentation/api/diagram/history/#undostack) property is used to get the collection of undo actions which should be performed in the diagram. The [`redoStack`](https://helpej2.syncfusion.com/react/documentation/api/diagram/history/#redostack) property is used to get the collection of redo actions which should be performed in the diagram. The undoStack/redoStack is the read-only property. @@ -126,9 +134,9 @@ let undoStack = diagramInstance.historyManager.undoStack; let redoStack = diagramInstance.historyManager.redoStack; ``` -## canUndo/canRedo +### Checking Availability of Undo and Redo Operations -The [`canUndo`](https://helpej2.syncfusion.com/react/documentation/api/diagram/history/#canundo) property returns true if there are actions in the undo history stack; otherwise, it returns false. This property helps identify whether any actions are present in the undo stack.The [`canRedo`](https://helpej2.syncfusion.com/react/documentation/api/diagram/history/#canredo) property returns true if there are actions in the redo history stack; otherwise, it returns false. This property helps identify whether any actions are present in the redo stack. +The [`canUndo`](https://helpej2.syncfusion.com/react/documentation/api/diagram/history/#canundo) and [`canRedo`](https://helpej2.syncfusion.com/react/documentation/api/diagram/history/#canredo) properties indicate whether undo or redo operations are available. These properties return **true** when actions exist in their respective history stacks. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -141,9 +149,9 @@ The [`canUndo`](https://helpej2.syncfusion.com/react/documentation/api/diagram/h {% previewsample "page.domainurl/code-snippet/diagram/undoredo/es5CurrentEntry-cs1" %} -## Current entry +### Current Entry Tracking -While performing interactions with a node or connector, the current history entry is added to the [`currentEntry`](https://helpej2.syncfusion.com/react/documentation/api/diagram/history/#currententry) property of the [`historyManager`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#historymanager). +During user interactions with nodes or connectors, the current history entry is stored in the [`currentEntry`](https://helpej2.syncfusion.com/react/documentation/api/diagram/history/#currententry) property of the [`historyManager`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#historymanager). The following code shows how to get the current entry from the diagram history: @@ -158,18 +166,20 @@ The following code shows how to get the current entry from the diagram history: {% previewsample "page.domainurl/code-snippet/diagram/undoredo/es5CurrentEntry-cs1" %} -## Clear history +## History Management Utilities + +### Clearing History -The [`clearHistory`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#clearhistory) method of diagram is used to remove all the recorded actions from the undo and redo history. +The [`clearHistory`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#clearhistory) method to remove all recorded actions from both undo and redo history stacks: ```ts //Clears all the histories diagramInstance.clearHistory(); ``` -## Get history stack +### Retrieving History Stacks -The [`getHistoryStack`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#gethistorystack) method of the diagram retrieves the [`undoStack`](https://helpej2.syncfusion.com/react/documentation/api/diagram/history/#undostack) or [`redoStack`](https://helpej2.syncfusion.com/react/documentation/api/diagram/history/#redostack) from the historyManager. This method takes a single parameter, isUndoStack. Pass true to get the undoStack or false to get the redoStack. +The [`getHistoryStack`](https://helpej2.syncfusion.com/react/documentation/api/diagram/#gethistorystack) method retrieves either the [`undoStack`](https://helpej2.syncfusion.com/react/documentation/api/diagram/history/#undostack) or [`redoStack`](https://helpej2.syncfusion.com/react/documentation/api/diagram/history/#redostack) from the history manager. Pass **true** to get the undo stack or false to get the redo stack: ```ts // Fetch undoStack from history manager @@ -180,9 +190,11 @@ diagramInstance.getHistoryStack(false) ``` -## History change event +## Event Handling + +### History Change Event -The [`historyChange`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iHistoryChangeArgs/) event triggers, whenever the interaction of the node and connector is take place. When interacting, the entries get added to the history manager to trigger this event. The following example shows how to get this event in diagram. +The [`historyChange`](https://helpej2.syncfusion.com/react/documentation/api/diagram/iHistoryChangeArgs/) event triggers whenever interactions with nodes and connectors occur. This event provides an opportunity to implement custom logic or UI updates based on history state changes: {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/diagram/user-handle.md b/ej2-react/diagram/user-handle.md index 2df1a8b91..1477b8bde 100644 --- a/ej2-react/diagram/user-handle.md +++ b/ej2-react/diagram/user-handle.md @@ -1,20 +1,24 @@ --- layout: post -title: User handle in React Diagram component | Syncfusion® -description: Learn here all about User handle in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: User handle in React Diagram Component | Syncfusion® +description: Learn here all about User handle in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: User handle platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# User handle in React Diagram component +# User Handle in React Diagram Component -User handles are used to add frequently used commands around the selector. +User handles are interactive UI elements that provide quick access to frequently used commands around selected diagram elements. They appear as customizable icons positioned around nodes and connectors, enabling users to perform actions like cloning, deleting, or editing without accessing traditional menus or toolbars. + +The React Diagram component supports two types of user handles: +- **User handles**: Appear when elements are selected and are defined globally for all selected items. +- **Fixed user handles**: Permanently visible on specific nodes or connectors, regardless of selection state. ## Create user handle -To create user handles, define and add them to the [`userHandles`](https://helpej2.syncfusion.com/react/documentation/api/diagram/selectorModel/#userhandles) collection of the [`selectedItems`](https://ej2.syncfusion.com/react/documentation/api/diagram#selecteditems) property. The [`name`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#name) property of userHandles is used to define the name of the user handle, which can then be used at runtime for identification and customization. The [`pathData`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#pathdata) property is used to define the path data of userhandle. +To create user handles, define and add them to the [`userHandles`](https://helpej2.syncfusion.com/react/documentation/api/diagram/selectorModel/#userhandles) collection of the [`selectedItems`](https://ej2.syncfusion.com/react/documentation/api/diagram#selecteditems) property. The [`name`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#name) property of userHandles is used to define the name of the user handle, which can then be used at runtime for identification and customization. The [`pathData`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#pathdata) property is used to define the SVG path data that determines the visual appearance of the user handle icon. The following example shows how to render user handle. @@ -29,9 +33,9 @@ The following example shows how to render user handle. {% previewsample "page.domainurl/code-snippet/diagram/interaction/es5UserHandle-cs3" %} -## Customize User handle click +## Customize User Handle Click -When the user handle is clicked, the [`onUserHandleMouseDown`](https://ej2.syncfusion.com/react/documentation/api/diagram/#onuserhandlemousedown) event allows us to identify which user handle was clicked using the name property of userHandle. Based on this name, we can customize the diagram elements accordingly. Several events are triggered while interacting with a user handle. In the following example, we use the [`onUserHandleMouseDown`](https://ej2.syncfusion.com/react/documentation/api/diagram/#onuserhandlemousedown) event to clone nodes on user handle click. +When the user handle is clicked, the [`onUserHandleMouseDown`](https://ej2.syncfusion.com/react/documentation/api/diagram/#onuserhandlemousedown) event allows us to identify which user handle was clicked using the name property of userHandle. Based on this name, we can customize the diagram elements accordingly. Several events are triggered while interacting with a user handle. In the following example, we use the [`onUserHandleMouseDown`](https://ej2.syncfusion.com/react/documentation/api/diagram/#onuserhandlemousedown) event is used to clone nodes on user handle click. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -46,23 +50,23 @@ When the user handle is clicked, the [`onUserHandleMouseDown`](https://ej2.syncf ## Alignment -User handles can be aligned relative to the node boundaries. It has [`margin`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#margin), [`offset`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#offset), [`side`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#side), [`horizontalAlignment`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#horizontalalignment), and [`verticalAlignment`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#verticalalignment) properties to align user handle based on user's needs. +User handles can be precisely positioned relative to node boundaries using alignment properties. The positioning system provides [`margin`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#margin), [`offset`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#offset), [`side`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#side), [`horizontalAlignment`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#horizontalalignment), and [`verticalAlignment`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#verticalalignment) properties to align user handles based on specific requirements. ### Offset -The [`offset`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#offset), property of [`userHandles`](https://helpej2.syncfusion.com/react/documentation/api/diagram/selectorModel/#userhandles) aligns the user handle based on fractions. For example, 0 represents the top-left corner, 1 represents the top-right corner, and 0.5 represents the top-center. +The [`offset`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#offset), property of `userHandles` aligns the user handle based on fractions. For example, 0 represents the top-left corner, 1 represents the top-right corner, and 0.5 represents the top-center. ### Side -The [`side`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#side) property of [`userHandles`](https://helpej2.syncfusion.com/react/documentation/api/diagram/selectorModel/#userhandles) aligns the user handle using the following options: [`Top`](https://ej2.syncfusion.com/react/documentation/api/diagram/side#top), [`Bottom`](https://ej2.syncfusion.com/react/documentation/api/diagram/side#bottom), [`Left`](https://ej2.syncfusion.com/react/documentation/api/diagram/side#left), and [`Right`](https://ej2.syncfusion.com/react/documentation/api/diagram/side#right). +The [`side`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#side) property of `userHandles` aligns the user handle using the following options: [`Top`](https://ej2.syncfusion.com/react/documentation/api/diagram/side#top), [`Bottom`](https://ej2.syncfusion.com/react/documentation/api/diagram/side#bottom), [`Left`](https://ej2.syncfusion.com/react/documentation/api/diagram/side#left), and [`Right`](https://ej2.syncfusion.com/react/documentation/api/diagram/side#right). -### Horizontal and vertical alignments +### Horizontal and Vertical Alignments -The [`horizontalAlignment`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#horizontalalignment) property of [`userHandles`](https://helpej2.syncfusion.com/react/documentation/api/diagram/selectorModel/#userhandles) is used to set how the user handle is horizontally aligned at the position based on the [`offset`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#offset). The [`verticalAlignment`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#verticalalignment) property is used to set how user handle is vertically aligned at the position. +The `horizontalAlignment` property of `userHandles` is used to set how the user handle is horizontally aligned at the position based on the `offset`. The `verticalAlignment` property determines how user handle is vertically aligned at the position.. -### Margin for the user handle +### Margin for the User Handle -The [`margin`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#margin) property adds blank space to any of the four sides of the user handle, allowing for precise displacement. +The [`margin`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#margin) property adds blank space to any of the four sides of the user handle, providing precise displacement from the calculated position. In the following example, the user handle is aligned to the bottom-right corner of the node. @@ -90,7 +94,7 @@ The following table shows all the possible alignments of user handle around the | 1 | Top |![user handle for node](images/userhandleAlign7.png)| | 1 | Bottom |![user handle for node](images/userhandleAlign8.png)| -## User handle tooltip +## User Handle Tooltip The diagram provides support to show a tooltip when the mouse hovers over any user handle. To show the tooltip on mouse hover, set the [`tooltip`](https://helpej2.syncfusion.com/react/documentation/api/diagram/userHandleModel/#tooltip) property of the user handle with the tooltip [`content`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramTooltipModel/#content) as shown in the following example. @@ -105,7 +109,7 @@ The diagram provides support to show a tooltip when the mouse hovers over any us {% previewsample "page.domainurl/code-snippet/diagram/interaction/es5UserHandle-cs6" %} -You can also customize other properties of the tooltip, such as [`position`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramTooltipModel/#position), [`width`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramTooltipModel/#width), [`height`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramTooltipModel/#height), etc. For more information refer to the [`tooltip`](./tooltip) section. +Additional tooltip properties can be customized, such as [`position`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramTooltipModel/#position), [`width`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramTooltipModel/#width), [`height`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramTooltipModel/#height), etc. For more information refer to the [`tooltip`](./tooltip) section. ## Appearance @@ -124,13 +128,13 @@ The following example demonstrates, how to use these properties to customize the {% previewsample "page.domainurl/code-snippet/diagram/interaction/es5UserHandle-cs2" %} -## Multiple user handle +## Multiple User Handle -Multiple user handles can be rendered for the selected objects (nodes/connectors) at a time to perform different operations. +Multiple user handles can be rendered for the selected objects (nodes/connectors) simultaneously to perform different operations on the same element. -### Disable Nodes and disable Connectors +### Disable Nodes and Disable Connectors -User handles are typically defined within the [`selectedItems`](https://ej2.syncfusion.com/react/documentation/api/diagram#selecteditems) property of the diagram, applying them universally to both nodes and connectors. However, in some scenarios, specific user handles may need to be excluded from connectors or nodes selectively. To address this, the disableNodes and disableConnectors properties come into play. These properties allow certain user handles to be disabled based on the type of selected item. +User handles are typically defined within the [`selectedItems`](https://ej2.syncfusion.com/react/documentation/api/diagram#selecteditems) property of the diagram, applying them universally to both nodes and connectors. However, in some scenarios, specific user handles may need to be excluded from connectors or nodes selectively. To address this requirement, the disableNodes and disableConnectors properties are available. These properties allow certain user handles to be disabled based on the type of selected item. In the example below, multiple user handles are utilized for various functionalities, with some handles hidden selectively for nodes or connectors depending on their intended functionality. @@ -145,9 +149,9 @@ In the example below, multiple user handles are utilized for various functionali {% previewsample "page.domainurl/code-snippet/diagram/interaction/es5MultipleUserHandle-cs1" %} -## Different types of user handle +## Different Types of User Handle -Diagram provides support to render different types of user handles: +The diagram provides support to render different types of user handles based on the content source: * `Source`: Renders an image as a user handle using an image source. * `Content`: Renders a user handle using SVG content. @@ -161,9 +165,9 @@ The precedence order for user handles is as follows: 3. Source 4. userHandleTemplate -This means that if multiple options are used for the user handle, the one with higher precedence will be rendered. +This means that if multiple options are specified for the same user handle, the one with higher precedence will be rendered. -The below example code demonstrating different types of user handles. +The below example code demonstrates different types of user handles. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -176,9 +180,9 @@ The below example code demonstrating different types of user handles. {% previewsample "page.domainurl/code-snippet/diagram/interaction/es5UserHandleTypes-cs1" %} -## User handle events +## User Handle Events -When interacting with user handles, certain events are triggered that can be used to customize the appearance and functionality of the handles. The user handle events are explained below. +When interacting with user handles, specific events are triggered that can be used to customize the appearance and functionality of the handles. The user handle events are explained below. * [`click`](https://ej2.syncfusion.com/react/documentation/api/diagram/#click) - Triggered when the user handle is clicked. @@ -200,13 +204,13 @@ In the following example, the above events are used to customize the appearance {% previewsample "page.domainurl/code-snippet/diagram/interaction/es5UserHandleEvents-cs1" %} -## Fixed user handles +## Fixed User Handles -Fixed user handles are used to perform specific actions when interacted with. Unlike regular user handles, [`fixedUserHandles`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/) are defined within the node/connector object, allowing different fixed user handles to be added to different nodes. +Fixed user handles are used to perform specific actions when interacted with. Unlike regular user handles, [`fixedUserHandles`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/) are defined within individual node or connector objects. This allows different fixed user handles to be added to different elements, and these handles remain visible and positioned consistently, regardless of selection state. -### Create fixed user handles +### Create Fixed User Handles -To create the [`fixedUserHandles`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/), define and add them to the collection of [`nodes`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeModel/) and [`connectors`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectorModel/). The [`pathData`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/#pathdata) property of [`fixedUserHandles`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/) is used to define the path data for the fixed user handle. The [`id`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/#id) property in `fixedUserHandles` assigns a unique identifier to each handle. This identifier helps locate and modify fixed user handles during runtime. You can handle the click event of a fixed user handle using the [`fixedUserHandleClick`](https://ej2.syncfusion.com/react/documentation/api/diagram/#fixeduserhandleclick) event. This event allows customization based on the type of fixed user handle clicked. +To create the [`fixedUserHandles`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/), define and add them to the collection of [`nodes`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeModel/) and [`connectors`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectorModel/). The [`pathData`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/#pathdata) property of `fixedUserHandles` is used to define the path data for the fixed user handle. The [`id`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/#id) property in `fixedUserHandles` assigns a unique identifier to each handle. This identifier helps locate and modify fixed user handles during runtime. You can handle the click event of a fixed user handle using the [`fixedUserHandleClick`](https://ej2.syncfusion.com/react/documentation/api/diagram/#fixeduserhandleclick) event. This event allows customization based on the type of fixed user handle clicked. The following code example demonstrates how to create fixed user handles for nodes and connectors and how to handle fixed user handle click: @@ -225,16 +229,16 @@ The following code example demonstrates how to create fixed user handles for nod ### Alignment -Fixed user handles can be aligned relative to the node boundaries. It has [`margin`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/marginModel/), [`offset`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/#offset), [`padding`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/#padding) properties to align them based on user's needs. +Fixed user handles can be aligned relative to the node boundaries. It has [`margin`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/marginModel/), `offset`, [`padding`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/#padding) properties to align them based on user's needs. #### Margin -Margin is an absolute value used to add some blank space in any one of its four sides. The fixed user handle can be displaced with the [`margin`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/marginModel/) property. +Margin is an absolute value used to add some blank space in any one of its four sides. The fixed user handle can be displaced with the `margin` property. #### Offset -The [`offset`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/#offset) property of fixed user handle is used to align the user handle based on the `x` and `y` points. (0,0) represents the top-left corner and (1,1) represents the bottom-right corner. +The `offset` property of fixed user handle is used to align the user handle based on the `x` and `y` points. (0,0) represents the top-left corner and (1,1) represents the bottom-right corner. #### Padding @@ -268,13 +272,13 @@ The following table shows all the possible alignments of fixed user handle aroun >Note: Both `displacement` and `alignment` are applicable only to connector fixed user handles. -#### Customizing the connector fixed user handle +#### Customizing the Connector Fixed User Handle The connector fixed user handle can be aligned relative to the connector boundaries. It has alignment, displacement and offset settings. The [`displacement`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectorFixedUserHandleModel/#displacement) property displaces the handle from its aligned position and its functioning only when the [`alignment`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectorFixedUserHandleModel/#alignment) property is set to 'After' or 'Before'. ##### Offset -The [`offset`](https://ej2.syncfusion.com/react/documentation/api/diagram/connectorFixedUserHandleModel/#offset), property of fixed user handle aligns the fixed user handle based on fractions. For example, 0 represents the left or top corner, 1 represents the bottom or right corner, and 0.5 represents the center. +The `offset`, property of fixed user handle aligns the fixed user handle based on fractions. For example, 0 represents the left or top corner, 1 represents the bottom or right corner, and 0.5 represents the center. ##### Alignment @@ -322,7 +326,7 @@ The following code explains how to customize the alignment of connector fixed us {% previewsample "page.domainurl/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs1" %} -### Fixed user handle tooltip +### Fixed User Handle Tooltip The diagram provides support to show a tooltip when the mouse hovers over any fixed user handle. To show the tooltip on mouse hover, set the [`tooltip`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/#tooltip) property of the fixed user handle with the tooltip [`content`](https://ej2.syncfusion.com/react/documentation/api/diagram/diagramTooltipModel/#content) as shown in the following example. @@ -349,13 +353,13 @@ The [`height`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFi #### Style -The fixed user handle's [`iconStrokeColor`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/#iconstrokecolor) and [`iconStrokeWidth`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/#iconstrokewidth) property used to change the stroke color and stroke width of the given `pathData`. +The fixed user handle's [`iconStrokeColor`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/#iconstrokecolor) and `iconStrokeWidth` property used to change the stroke color and stroke width of the given `pathData`. -The fixed user handle's [`handleStrokeColor`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/#handlestrokecolor) and [`handleStrokeWidth`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/#handlestrokewidth), properties are used to define the stroke color and stroke width of the fixed user handle and the [`fill`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/#fill), property is used to define the fill color of fixed user handle. +The fixed user handle's `handleStrokeColor`and `handleStrokeWidth`, properties are used to define the stroke color and stroke width of the fixed user handle and the [`fill`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/#fill), property is used to define the fill color of fixed user handle. -The [`cornerRadius`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/#cornerradius) property of the fixed user handle is used to apply border radius for the fixed user handle. +The `cornerRadius` property of the fixed user handle is used to apply border radius for the fixed user handle. -The [`visibility`](https://ej2.syncfusion.com/react/documentation/api/diagram/nodeFixedUserHandleModel/#visibility) property of the fixed user handle enables or disables the visibility of fixed user handle. +The `visibility` property of the fixed user handle enables or disables the visibility of fixed user handle. The following example demonstrates, how to use these properties to customize the appearance of the fixed user handle. @@ -385,7 +389,7 @@ Fixed user handles are interactive elements added to nodes and connectors. Their {% previewsample "page.domainurl/code-snippet/diagram/interaction/es5FixedUserHandleTemplate-cs1" %} -### Fixed user handle events +### Fixed User Handle Events When interacting with fixed user handles, certain events are triggered that can be used to customize the appearance and functionality of the handles. The fixed user handle events are explained below. diff --git a/ej2-react/diagram/virtualization.md b/ej2-react/diagram/virtualization.md index b396c9ecb..115f8ce7c 100644 --- a/ej2-react/diagram/virtualization.md +++ b/ej2-react/diagram/virtualization.md @@ -1,22 +1,40 @@ --- layout: post -title: Virtualization in React Diagram component | Syncfusion® -description: Learn here all about Virtualization in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. +title: Virtualization in React Diagram Component | Syncfusion® +description: Learn here all about Virtualization in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more. control: Virtualization platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Virtualization in React Diagram component +# Virtualization in React Diagram Component -Virtualization is a technique to optimize the performance of diagrams, especially when working with larger diagrams +Virtualization is a performance optimization technique that significantly improves diagram rendering and interaction speed, particularly when working with large-scale diagrams containing hundreds or thousands of nodes and connectors. -## Virtualization in Diagram +## Understanding Virtualization in Diagram -Virtualization optimizes the diagram performance by loading only the diagramming objects within the visible area, or ViewPort, of the Scroll Viewer. This means that only the nodes and connectors that are currently in view are loaded, while the remaining objects are loaded dynamically as they come into view. +Virtualization enhances diagram performance by implementing on-demand loading of diagramming objects. Only the nodes and connectors currently visible within the diagram's viewport are rendered and processed, while objects outside the visible area remain unloaded until they enter the view during scrolling or panning operations. -This feature significantly enhances performance, especially when working with diagrams containing a large number of nodes and connectors. By reducing the number of objects that need to be processed at any given time, virtualization ensures smoother interactions, such as loading and dragging items within the diagram. +This selective rendering approach provides substantial performance benefits: + +* **Reduced Memory Usage**: Only visible objects consume memory resources. +* **Faster Initial Load**: Diagrams render quickly regardless of total object count. +* **Smooth Interactions**: Dragging, zooming, and panning remain responsive. +* **Scalable Performance**: Performance remains consistent as diagram size increases. + +## When to Enable Virtualization + +Virtualization is recommended for diagrams that meet any of these criteria: + +* Contain 100 or more nodes and connectors. +* Experience performance issues during scrolling or zooming. +* Require frequent updates to large datasets. +* Display complex organizational charts, network diagrams, or flowcharts. + +## Enabling Virtualization + +To activate virtualization, include the `Virtualization` constraint in the diagram's constraints property. The virtualization feature works in conjunction with the diagram's scrolling capabilities to manage object loading dynamically. To enable virtualization in a diagram, you need to include the virtualization constraint in the diagram's constraints. For more information, refer to the [`diagram constraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/#constraints). From 67022a5dbf7317c20756a726c186be676f20e7ba Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Mon, 13 Oct 2025 20:16:21 +0530 Subject: [PATCH 33/34] Integrated latest changes at 10-13-2025 7:30:14 PM --- ej2-react/kanban/getting-started.md | 2 +- ej2-react/rich-text-editor/getting-started.md | 2 +- .../react-richtexteditor-paste-prompt.png | Bin 0 -> 19156 bytes ej2-react/rich-text-editor/paste-cleanup.md | 50 ++++++++++++------ 4 files changed, 37 insertions(+), 17 deletions(-) create mode 100644 ej2-react/rich-text-editor/images/react-richtexteditor-paste-prompt.png diff --git a/ej2-react/kanban/getting-started.md b/ej2-react/kanban/getting-started.md index 2fee31596..fb3c533bd 100644 --- a/ej2-react/kanban/getting-started.md +++ b/ej2-react/kanban/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This article provides a step-by-step introduction to get started with the Syncfusion® React Kanban component. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) ## Overview diff --git a/ej2-react/rich-text-editor/getting-started.md b/ej2-react/rich-text-editor/getting-started.md index a7a2918a5..387405953 100644 --- a/ej2-react/rich-text-editor/getting-started.md +++ b/ej2-react/rich-text-editor/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## The Syncfusion React Rich Text Editor is a WYSIWYG (What You See Is What You Get) editor that enables users to create, edit, and format rich text content with features like multimedia insertion, lists, and links. This section explains the steps to create a simple React Rich Text Editor component and configure its core functionalities. -> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) To get started quickly with the React Rich Text Editor, refer to this video tutorial: diff --git a/ej2-react/rich-text-editor/images/react-richtexteditor-paste-prompt.png b/ej2-react/rich-text-editor/images/react-richtexteditor-paste-prompt.png new file mode 100644 index 0000000000000000000000000000000000000000..3f558c9058b3424716b1181298ae3e4a231af8f6 GIT binary patch literal 19156 zcmd^nXH=8h)^04w#;8~}prBwyrHb^99qG~u21KNWCJ;gg1w=)PNQZ!^v_L`)C7~-F zLQSXv1py&Is0k1t_lxPR__#}FZT%X-(EYtH9+=3MKIp3Z}#hj|Z! zK%k=!)$i(qKnIdRpnb3ZI0Sssap$rG@ZUZU{Rg)}7{b{(;E#iLx3q78K*iDE9V<5A zZw@zgGY=5xq$lg&zHwUtZxBes;o;p|hTay7WUxQi29n7{oOA+d9+$GOQr8SlIDhzC zQ!qOCUQx%rio-$>=&eC>O`bT_1Oa3Gw%WC~+&tp>tt1HcJbJp1yNqq&@XG#Nb-jZk zhyQ#CyKHzlK9srDnauIQ%3VO6AYV8;wF0-T^^i}z{Iz;Fuujq;-1_Hsi|StHE`v^q z5U-6XOUv{=%hdg1kU* zi+scovuS_K$jb|T;+2HD1vV|pJ}aKn+&7%tn+}1bw8!Pg6ixhQofV@;x5fyR^mzjF z77=|QhPV3hT&NaBY#+!9g|9CHpAaU!bYRYoQe4Sw*i_xciRf2Or8`Y$0zmEjyI zApO)tVPp(&%3-y6)cng#92lHhF$sT<-P_y~GX@2Jdpi4^=|g_oqU!pxBONur@5>=^ z69tpdwBw+IM(|r!28G^JH)=4fGpFH5>>3U^u{-NGrLEjx16n44r4&KeF)}&mWKh&(o!TFG)8+XErl;hwQ=r%g|DwPQ3o`+M+OB%1&-!zI6#FAt?eJlsje~6BLXD&|OeN5Hp8?Nt zPMyf0@l(d^=eJJW+-I1N0&^6CK(V?*KI5sgW1JrafyZHMUl%E`KDC6;1{4zN#GDjC zdEqe}Uy`;TgN9TZb{pq`=UixCQ(+qa{^H~9A-1p##ETzXAhlK0QkrFd$!yQnpx*2a z*hY|eT|uI?&0@Z*Lx0rMbMAvC`X%=Y_a^QydhzVLj42y>_@judT;?%La3K~OK=i-F z>LVJiN(!5sB`@7JC<=IEt5jutW$9@=gf`e^@BsB0@7)>a+#ef$m^iBnTZ1TKe>Py- zx1xL7o#%|Ddseo0>sL;AUHDE6(+*iPUZ`@gv9VF`Uj8^z<}g*j4!RsYIr&uDb^P&} zGiNk(brJlqNv>0As*aGoWEFouWO<;wdKaXObbZ*FcyTIYdx6>{wAV7L;Mv$VKa!KE zquM(-UTlrrE7P8L4@|F}H{Pc%V&Nj^BAOh=X^|_rddR*$__OBt8FHNLf@7EIqn|G1 zfrb9;D`4z=O~}&f^Ky^)^d!8#Ik{=xnb=;X3v)Ku73$5cuK&ejY`3#vQF%ldFqKnY zwRFIGsff+xeY-Zhlo4EEm<}}{oj}RR8N*l_B#KSw6$Z@}uGJDX7gM=l6uv?VxhB&& z1$1)kxntW{p3mn)ux49CF>jT@-p2`x#3?c96MpHWBv(;VuBv#CQBD=Sr9a9CXWuHQ z?H^QrsLII5JnJEuU#~kcFn{I5uDU~;7QYqGK`WjkGDiuFh`KAK&ZFf7FQ9EJZC5i4 zhhyh}UXz{1%lzs#KX#4Lxo_U5{XOl7Yrxp-$kq&HWcAHJHY}Z>uzNSFKbGTi_0)K* z*~9x$hoCZ$&(=0StIkbRubX>MIHBdfi%Fdb>+b4*RrEDx0p=1BEr1H~x3oMoc+&b=PwahTXQ_l>j&d;UHd^Pw&Jz zc75^1^D*j~?WM^1Cl7A#_Nh{9ZJ*QxRL9L@E#N(in zQkA1$Ob^~O(A#BW1DzipU{*7$j>R{L-H=38ecNGp)nEgWq^c}8*D4*SUaj!jkD{m4 zxwX$fOK=?RYeLyqFDPk+;40T5F^0nFJ`kK!*&&-sBe`P=jyrcMgiSQdHg#RNcwM@M zy8LYKbRo2(o{L@77$1=26zvzQAas*X-Pm`&ia7H)Xnot*G4SPjcL;+#ecVz*b$h?m z+Fh(l9#+SN$%SN@_2bA>H!DO2bhEYlh+o-ZYU5{c%eQ2orpxG;W~Bdu5uKi~8~>`P zqvqy|QK`n?E9aE7KKrVVmiIfz+!W1ftV*0K!AC2l=d?$Jo7V3PZwjvuVT_AA!rK2x z1jRt+y~b6|79n=O*6J1qR4Qh!p=(hV0c&wQ`h@NKepolz12L7nSDz&~_oFODdq+eS zjeb5}v=ye0%t5OB%kRr%rc(Z_Sq7tjDQSFtYQ-M8p!*?;w?e*cqTK=UebMXv%wmz^ znU+Dz^-w-N*vKH((cLX|)4TWW)Hk_NEsJTz?7=MAXHI#}vj)Y5YZd{cM)G@7Zk_cj z^CGaACFU;k8l7{{@Nmk5=Lcp!iA6iMy<3Z$HctH>b_lSa(v3S z+m%gF;c#kk7abRw_MAIy{+g|YJ*!2y*{QZL-oPFE^AI?GrAs*?$Sq=B&p&m-!elgH zs$qSb?lRc^c9B2PrP4xkOjO8+x(~X}c(mlT($c=*Ke=zN_)_7@o@RwGJ&YpEW*EN6 zIN*Sx!tcAJXEro^bbyn&VTRf*`3Gj7*7Hae)-r!#O2g^Suh}{~u-C5g-!R`2JMZYx zun(lpPeju5cV#p0nIMO+Xojl#boH1=3mN1;aS8|LQl;5%3=z`>9`N-4rPVbx(xkhV4@M$r|4t+6a zgsL~6cd1MyC_3&;ws-%r=uN&GX_zVF>>+$MtS`6f#cT-a>4a(*>0Q^Qjm^oGVzhFI z)aXkj-mq=vtah5w)|;$zg$y*q0*Y*bO*R!H*2j%28f_S_YIH;l377#~O8%(jYK<$^ zJ0j7fcixQMrKfXi!v^PDE^esxUxa6iutUYj){XGfiD2Op;w-j(cR$*SQqmb?D{e zX_xF3Vrm(s}_`#`zi zAdvG)yoEx}gb5MlnKSNd6QZ*7?hD74w}O3883Qvk+3ZyH4b|~u1+UqlbEx7w!i{d$ zlpsnCubG_DV3_Cgcf!4|7=`@gE-TW80V=ed3M-J?xl>Wl?ZaYc060xL{rF&Y~2}fl02L< zsmvZgHE-v4(gUCJOe04%7j=hn(5}@O1bsE>tnY&(+D|=HT*+H!Z+>)oK;9E`9HW4+&EXT;{!u(+^on+(~tJMUWz0 zZ+4$nZr&@C+sRhKK603d;*}9H@wFyqg5=OpkUx+UiPw&O6MgS-!88{l1e*0w zc0g>8XgjeP8JzHITLa;Z-i2Muu@kw-?YI(ATZ3jJA`3-m3VRRU51BslLq=TX$0v}i zL%Fp<>Mp$*v;9OIrS5Fig&vAIHd;{o{PnCRo%7*{g`rFWGJ26~sr;%~UzjAAoORr+ zir0q%#ZgLB+S}bIQB_FD&0Q-r)+GlMLPht*iVpKCl;lJmIn|}ld|m;2W{o}Be0wW4 zc}=LM+Y$SYt(SQgJ@(oK;^`Em>eTsc=e{ZtE{&ClCPaFk1$+qObJ-UeHFjDy83o5^G>+u^7mU<*dSq;9TcNP zTO#MrbfxB-mD&P`(*y#6G)WaCp|S%lpj$cS*d;V4wr;p>`~F1fKy8@8(en*HRX-}j zwEhDNi%V(_n??5CDp$|v_g526W7jmk+I!nJC^F-wzWj->jj0Vr@A|ip9A#!n-_*nT zy!K$&MH(wCs+kJlc!b@iz zd~I5fOe>L!9>fAn8p|94cVET4;q5iz27Xm@1{e(Mv-dxmRn^}9!Dli>+{$V230iU4F)%is ziOYUIl>tp*lEG3GD55x4%LYr$bd9XJ#q^n0gSUF-e;_$(6KWoIjAfzLD;MvH@(wmY z_XmIWk=<)+ZFPG~E(+&kf^s=z_x8o?*Dxw!Xp7>hg3uUMV~=s6=alFV2S$yS$Ifb3 zUbLhiYdSzGD(K3X&D&EURclMeISACpo7Lqn>-8vXM99WsH&7WPAK}f_0X>M6+ zZrhUeT9|hGFAG9$?i*kiO$Np4v2XCn+`Th)lg92*X1}4Yz4;1{TezaUx#nH3?h8z& zUktIGD@F$dK_EF5fVjq*+wwsD$j1@4MzFPd_m-4^?)&th^{*-k0{m9KsaoC_#o}2Ub`(f+M zwrzfNYQv&Jt8~GZx>=QS_AJ=c_>*i##5oVQz$TfkkQT>P4_DNePV$VY@OZ&J$rguD zs`Aen&VeBgkM+KAtBFv!0Zpa<89Is>S1oNRdo*e=GQc;nG@cIqIb-o@tC*Uz{xwmG zf;-VpwSgB?x8M5tw}=xl)1^`_l?;C0VY-5*c)$YYm_m^zZ{y7V9!Xo2f>n|n25 z8g%TzoJ2yqdS?!}OiSpm$FJa~X4yuT{5XZK_oa#}qd0hu5w*dvO*a9;Al9U- z&r$Yxg7M|8OBxlOgF`<~NdCIehcnZQq%p6$xifFw8{s8yNQ_lPBr&^ zy!JW)Bi8du_HfyDg|6esG;~0rR%6Rxs>OFk6;~+@fVdR}VZ=H@xI+d;;5t>-YH{gv zgqY8Hn#y4r`>(>98?DmHlcUvZxi0=Uj(dGBTjGcMj^5-lQ}1Xs-jnWMZ+*$LG5PX= z)MARijpD?;_r?=G=p}FYGUvhK^&e&j3#B?~S#?Oi&-`1?3x0v?_m3(OpO z=xj0kUYi49Y60#e1aKdhulxBwd@(bjr2oOvJ^$t_`?0L?wF`A$b`(wWpEO8CD(6I$ zl$Ijm?O(zn(cD?bZGPvfAS&TgK(kI~9RC z-Hp@gNU(u@ch+^>cy*hLoBNe&xFoHnD?{Hp-(M!*R58p%FS5BvH3`H)=`gF0uIw?y)SmPvU>D_(k*{- z&Gtj++)cOg} zjVt{#uEGk^uP0@Hw)|mF44^7C9?V5piI{$#q>u<>1ACR#acPPurMz* z6IdMiD9c=x-R+VcUsZ1{OK5q{>uvW!()Ffp_uy-Z!C%e7?5I2Hnx-2svSnT@zaC-x zG@^91G=#uQx-_mZ$JuZ2G-E9#hSZYO#cAS(_P3fGGY1LP%^}ailfFDCS>r-7q-qN%+^9rbd^Yxw?Wd^oG784i4 zG0?q4#tVmOfy0%qo>J3Z7;EqVW<>Hhj`l)6Wr~~6+;sVVX8#phZm^m07n=&pk2^aj zcx6}km2qzG6VSsLDEAGrMDnfS&lv;r^47#AWy85}Hi+khHtzev3*20rEPSBG0k!tS zi#V%t3u`>>ag!W;rWD3_kLbzr@UE9KGqZ?renVSC*a^>}$KD1O8nqePa!tU-+7z<% z>kDqRrKWf|*KQxFy(>#r(Ok1uRmH#faOy^Wz&Q}et$;Oq-yfTw1slqg-^kCx3w`fO zPIO$I+_csxVJGLB5xRm7mt_{|g>fE@cK!3BU#pa8fOSZMih|kKZnv){B1M>5*8h;wB-^m%_lSsiDtdio(jx&<;cj<8M-J0~QI80e zGmfrxqzW5A#iAz)>^Fq@(x~%IZ=?k+fOZ`L+V$ll5wc#uhgz_e;?(VNo1IZLTakFP z_aHsA?KNBK8irWF#wO%VyT9RffHd=9CZ9xq(e>-2j)m^jpp5+;EW%d#z7EAu;#k>} zE^{tusIYL~E4YRCQjUuDg}Oxxl$`~9mI+Tt*pmw^{j?ynA~@4`$7q6$2Lw9n2gtYA z=bpr8VpcEdI>y3DS9p87px1_T0+tpYMIFW{4^WjVu9W>e)3v=Nv8cqi^bRbw>WK*4 z(&}=D91<2b+b~d`8C$<3r^gznX8ra7-M)*tQFgFV}VYX0Q38a@E0$7u?=psY)}`7r*j z1(WO%o-IjWsmbOop?9hr_Z4;_T|w8%qw!s|iLO3vo~H5enncqx&ljI{K}9p$jz zZzoo$3!gZAXZkOs_-hjbd|^94ax3`IC15xnp2PUu7gxDqT%!w5m69wOu&KwUto2=l zjw)LinPJ4LoGX1Rx{VWf^yBghXf@J10g|a@lc;_Fa;s2!@)JwoOm#q-TKs|rDSseQ9 z3C|ihI5;ew1%15!z52*^Q@|wtXYU^zC*eA-6v-#6!+z|n8!WbeAkP5lF5)~=_7F%m znz*=N)@p#8cmrL_TaY()EQp9Q()q=~o&Ug749C&O{ftaab62KX@UYl$o=+d9 z5m$#*IHS(-yY4@K7#NzPq@jwh;zB}wMOI(adP;pa9ItMAPm|1D;T0Mx+-F}MJ2$Tt zo%8bLejr7YXV;zXqWv@%6-M_i+u_%3qxrb`uXvvVJz~LEd(sBHJ??sYM@RqabVocA zxrljFYFvIRVcKZ)fT9=TcS3?c@KmwG;Vw}O@ZjeG;( zek(KK8R5d}PZHM6XNfP(kTrgE1v0EgBGn2Ct`V!;D@Iz$RuoVA5T&PwA5cjhjg@;O?iul~gWq)omo zc1x^UthTU*25Bm%rC4q3?e0?hRSb$E+?G8yD^{B4YnL0rI>kPI6A?V($IunsQvrza z)Ay;n!vo_VoGBA3t#y&{mb>#NgmPj)T{f=!2hSJ=lhHC2AZx+lr_2yBuD13bC9RtQ zG&+LyUIEJu>?74arS9(TV<{=a-i>@NmA7IDgw^Ll1EkpO{6?MDLNUsqGuF>J79yo<$bohNOeBalzmXtfU_dAT5#L}pPD-A?r? zIJF#IV*w<@)0RfYXV+fR(v|&$#-jr`X=^1_H5CF56|0!s(gQVSPn zi>G#eJy1n?p2cT=2xxwC8r?+&91Q<$!Qi+)930k_u8f~-9BoDohgD-=L)3~^2Ml!O zZ?y=FI4Oc(aI4oOq+9N-CK77>`ZTz?Egrr)u#^GVLvWQTp@I3*}&K;01e z(|c;VVBBIN=pC-)xSYp~)~so^WnExQEv3(%p|E;5&Ds11R1ltF5@RVE?Oh5P32M8>X)k7~_3YKeN9ZLU__CmCyJe9mm4N36OY0tKH3%p}z2Rujau z8iRRMWDWTP^$-flekUu|(-?wH*&D6fO+9sEabssnD5Pn^MplCqYmau{TM4o#egF-H z+n_a|brIKwyUC4sI1%l#V`X5H+WiB|fB!1RoXEKjXYq zVO)D2=1{_|2(}}g>%-l975Q+@Mg31wz(8Y2WcOP0uo2z2B{uBclf>3-6czDYWS9 z{drhK?sv^dp&gWv9v*eq?>K24p|FmEme; z6c8}f{VlMZbY+B(>iA;$1v|gnQV#?<;vaqkTt_qR1Hq_nZ_v{VgEQ4H@VGU*4 zfjX-425JNRDh{jNe7l>6_jus_ zm*5Q`8l(eI!eyYLshRq-YO2aar6bZ~appsq*()b^Ed4ylL`e6~NYvC-;3%qK5g z3!GTW?W$kcKWcy1;=u;R_w7i9!;gYd=uVZz=(emVw8DT-RfP2OkuparNRJKhZriNl zq~?F#<9c{!UU$JD-{@X8zImM#Tv*`&`-=8)EnI>uXA=nW_xf9CaM-@z0d#x$wxBg@ zR)Ul8D)JvEw9n~V*GrX0I>Q)4wLmw%K6c@h+U-)Y64Fa~YW6x3%;D2ol#6^vlIjBC;fE$R*x{SeVE}5%Un>o8vQ)eeMMJO}09YN&){duRZSn#knueH_bvRi-jMH+x*@_mn5_s66=ow^zH#0OT6C{J z%Bscj4;VJ>rp;Rg&tGcw09m=tQkSiUJ#H*YTnXgd4fL?DUmsE!ZSH2B``T}*>H*$s zv9B{(k|POtK-TY|RmUxm>wPTSu48F;=`r!;=#a#M=>|}uq=bH4rC(~-ZS3V$ZtfQf z|9noyDaqZ#13*8&<+wa-&K+%U^L@ zGpW&sV@_Sw@odaS6qvi#NPGUiH;@#HDXQ(u&hp|3S`ur5yH2zt^C510im%S)V`z(` zIS&K^47awn<_8Ni%*}_zgSIqh@2i*z#D64n3!;E`aCb(}sp^6|SDV0C|S1gM*>A21vGp>G*W@@|@rY&UReAvq?bFa4QXpu>ZKambN}T6`@xtM&K!)fM`(z-9oV4tQW* zKGv*CRYK*krsT2sc)av;5~OMs1IAKbwRY-sIjyReSlbnkT#z$*VDVf%f&2-kU;ttp>h+QOa8M_Xvl z>cZI*We)vm5+78zd!y6v?T}xkD@j&RhuO|#gA+oFOQp5|af^2ux3-e@9vr%w?%gO~ z-qQSXB&i1=Vtr_!(e{sZTD5d_2Y-AGM;->LO95WQD7;*Bqp;sn0Yz~-J=$E34RD&s zHO)LV|G$&WAq>RgWwU{!Yu*GIo znLUrbFAup!O~JY3ESZHB;AKE920#kdpBJ1M&fFfXQ$Rda`Voqvw*GOxIBYliav?z# zsCd)#@u`v&6&Ci;0F>>Kio%Jb9#LVl7F%lnl?yFxi5r4GTNG54Ina3{N^aps@FVT!D~D4#@2I*E^Px)`R(dEr$3 z%H7t3dOThMn?Q};uMW$-5`(lD2jPM~vD4^#r9k>Q?O^cbsl7at$-nZX594Bz-vRS0 z>MG#uM~Wzocfya&_3Nq{t<7{1%bm@0YA-(HExgyCq7Xm?#i|WWl$r3P@uqTegOi&D zZZc?*E?SpRfWL85LR;3=>bFV}!?dQl*ngvrlZm_9qcNIz*HG*eU!gE9P@C|AF8OcO z+^J0osK{IsQ3t8H591Mq{X(}ifpGKv1OQR~Kap{?Mt+<|@T;8!GYsf|DPM7kiHiLt zB{y@?syneJr)pceUJhR7fgz1tcw$hQWZ>wJHTgXjm+ zZ69h4-Em`{C?q0MaIIq8Hy_Uh+|-e!ZJYizsqPE|o*4f8d;LD`)@?of&!R(yI6;QK?FK&3#cSfFklu}wjBq&q!!RO zxt}>zHq}yPU5$YVW^N$Mt=|&Km!s@Q`xPlW?$+$4@^|zWehH`#K+rQPsJQ99{6srN zDo;On3<$6Hqxly@wE>Sx?a2)3j~}!EV(fQsmV#^wD1W^<8G-X+#Ef%aqu|xmv=Nw& zIyUtH)@iseuXH7q$I`zz-FN=_)w2-r-1=Ol)w?dErx$m4dYnKr)Loy6hdW$t( z8mlVR*R%!3FfJp5D%Ru!^`5&42Ey6_);P`+^Akyhmeju*Xk-q|5unT?p&yCG6vX%8 z+E|(z*NxHaae^a_G;)UK{UU?zj=$m=M6mGl=8K;1-6TNn=2bgNVjU}6s;jgTD#-}|qc|3JtnLu6dkl;-5kQnMBAirS?CdNsT2Z?Yg`u?`=d(U@*3x00 zgtxUoG(2dx%QbMSGb4aD%*7Z&+AuaKvje&SgZ25djip+`xov}Jr5O@}fD9z%;}E_W zxCx527|Ou?UB<%VpAg}X@qj3&Alu*|#Bxnpnu#cb9G&^mib9;%BI<*VLYtXg^z~wV z>xg!s(~)fWd$cZC5cFlgpP@bwQ{vyh{}ESKCY6q?OxseJy~3n;n+mO$iSv{Pl~f%)dU zF`u>Xz#%y}DA>)9zQl_C|Lfxv*70AN0DUee!;wNlL+S!+RJMOz0w&7KA`Xxd5Jvue zHZ2=KHcD#Oik3E4V@50UP=6u9bcUso(ke zLD%!^QCT^jJ6J0!v$%!dV6@yBSR`~@jb#pFo9utHOtZvbhu@GDYkgK2c*%YsDPd@6 z_>%-!$>ra!%GUY@I>HIMKf8ri9I$vAj&&poP0!5m8;Kao7#cQs&JW~eQhS9%ErBer z$UoWTfYhNllTz`F=t?-#Pq056pH`rjkYR0A#!GN{iSYJFnT|2?S_ z7=4FdJ(+|7Rl-e_L_E!Rk3JPCjI|zx9h}IJ<=>c9Wmav|sf8>O$;QT}z*s0n+W2L# zSTWGZ^S8On7r1wglt-pne6DIX-Q1zzCy;LO>{g~%num`5Gt^Ll$fO78@=`YKafc$q z%6f258urfy3_Y)Tp2aPN#xE@lmtuX^Y-a=b!09ZyDp|gk0>ku+tb^oy z8U*?x_B)(pYx4zc&*d!X@3NxvQ5#Wz5{mv=U^lmYB`)O9QTOJ@zD{@`y<^{=_7$7cP1qA|G5*;YiEMlrXURb!s()Dp3n=UwRyo62D+@jjM_>@aw<>X;I zKfuNRR(Jn3c>Sihvt?qwWG&GGGtG}Y2lJ<>G{=Skh@>iGK@zdp3jw%f8TYnNLs2c% z7EQzgLi%qid@Aw7htILGv2TG_z9woq9zZ8=6AJ^UL!sa*V6?1$bKF9UnzF!MUqs#> zYvgflIm_gOQYp&5A5^K#&ySOU0V{T3@fJr*H)Ul4&(* z#1WlL+p8)D!bYCWh2O70=T`r3`Zm@3)?p#4)XdBb z0zd#j4{#&dU?ql3wfH{BJM?|gm{LGz^)*}gu91A_$Y<>*zrE4V>muu02cGT{o@~0;j#vh*OmgZ;c9nou;TUqi7NSj zH9#Kq`YS;l(<+y7;Prl>p&?mWSydjO;JeLRXVv}$3?4ZCm-6-X5>1QC`#w7S_&cvH zmtA>I1tcY!mbmXM46rre_`jI{|KKIpjAW1b_D=>iJv~h*D=6r^4j6_ZAm*hl?o*E- z@i-7NRQeK>**$ZWB$z(V3F+BOIoN^FHO0Bu+F=)Ga$H4M#X)O44@bw#yFeFB<>cMI2Ya~K6H)P}wDcqu>y{?!Cbsq35|2}~=cD&afxvm=U!MB`bY*URpU;X1^P1d;npQ5+djlj~z zTyt4CpR}$bSqP+lkM*pS7)f^8z}t+p9A#BS%M6u2#r>8R3%MpJxsqgOrHKqT3;$Gy z2{+iJLJ&UMOOA1@FW)46fh3sJhlFf=yBxV?oQ^YdD~**^Rj2V@m!ezhPWXdv9ZEaT$GGNJD8+l2umst6wNrvJ@;m@ zue%ag?`J{wy@?pXaF1UWl%`=(II{DpZakOO3$75Q@rRqor$4kLpr?!;n73<=mgY&Y4^NqT?ujIn8?x z%t^`J$>EB1aD~eAILD@4Nkda^a1xIyMpa41Vz*S143{`#Htzwf^;-BYb^w%enN`gb z>FmZAKrS)d3KaF0sor?rQiAlY`Zfc}od}lEL1sjL^{>v5w&L&W=olw)j=vea8uzKm zcbi`9(5y$^_;9QJ?Vxdka8Zn#4u!H1S z&PuABX6fFnH{Txu(VzDI8ojaF5}sD|p?0i2*;rlmQFKsCvsD76=A}08MoTxDi^Fyb zg2v8Oh!4~!=xAd}dvsCX%8!NtwUUs};(X{#`K*!hr>~mFN|x1cc*fbUIP=Ui3ZKD- zn(oAZFhj-4&dxb9y+&spIxCugT@`nFO`LYLU-151hdc#N_nUs!TH>4{>l^HnTxZc9 zT{qtP*x{>Wh5a(TVemlk03gVLKIUysf@>BCq=#Ox4G+j|%?+CQ8^q^~&t*@J^DD#(!? zc@6@x;*6TX`}9X$+5xDQ=kEhop8Gg4xp@O@1c1sG#U2@W_}(1Bu+X~j?BZhyUCC_n zCy5Z&@+kANZ)T;sSK|3S`W~4?^7(#YEIRB;=i<96N4bENKre@+C_>uI=gb%voFaAy z5mxN*CSh#S?~6vozU?-?l?{R3I1UikUxTO1DKERx+a{XN@!Hvw(6%y)TH5lv(d(Zn zpj7vO8gL?Y*PTxrLpxTcZR&M3ho~oBNF2GDlkKQOCn^C&wXe8qYc0>!$!nali;S+& zoSNxF7kzN~+#8J=`ok1Ti(G*dsZG1r4= zm>?F=(QTqo%Wi63(?mJGOEC6vB$Ihxfoue}v-l#xi7|T5B%rhIK^Wf-KuR=)MoJ|u z22t>PbW*IUXu^gsx|Fah-FmbFp^Os^{G6eofTGq7<;VS+%OLd21PR0DWRz>{L+~Kb zjlUcjSDn8(y&7hHqMx``fPw5xtzl)dsxpDq1557d=muV;Yr1x65^5&hkF#ou z&yrUb_T1e!`yS$!6Y^3NRve+;b~P7mwM52r&Y>6HnO4>?Z%=RVeKyZ-igJj4ur;n^ zmbSR|l_A|{;Wl*yIz;`nxjh6sM!@T-UUyR%-4A;FyY-=_YH4_#L1w19>*(n&Qyr)D zWXw!)P#)*rlqA};>fx+bkcsdZI-iEv{mzE)pW(RbxZX6;)3f>Z;QPEZ3b#FZwTd^$ zC933RR;;oj*25(4rs8^U>-7p)+{T;50DR!{ZoTPe!`7PIj$2V@$=GGF=@w3XJF{8y ziqR?@3Q>MjQ^vljklWF!K?lB&eyXnDnRLF(qFk+lGqNV9uW@smNA~*K!b%EbcaH$< zdGZ|CM`X+g^ibp<8m_*D#gbM>dwZJuf2>sFSGO7du(v?ClJjYJ!hIH10dO*;&rI^t zN#4oDiV0&NJ35v%_WHV~9j}O>95rJ*j0h||Ec>4q96Nbk3=p{kRY_G&Z{&xE0vI9YK>$eo8LPK>a~Tez)=cf@799aE07jJA_ud97 z#t?~mmb7yt2mo!rWx1FG+H!RtN+41miLv1Uf($1t5ul2*7xv0*Nf`l%e>oG{Cu?rK zsuLMj@@`1~W|=*|mrBI%O8~x;l^|*ka17^>3ReNE(qjww5^86yBIDR1{$TLk`2P+K zdYyRoubMskc~OYv7x^GSU8J4u$z1)mGfQL<12b4dfoA=>@b&ADoEVeWX$roBk{ zo!|y^ZtV+CATYj|*>_kVz&b3<2TLBY816GuU}{?loWkxcWWpu9J0s=+uw&&lNxlLMWv zdY;a%X9=9O(aiP-=<-zp6~y}zpe;HtdHBOQ1-xc~(vtJu7FXT&=L!SBQ(;X^4%nv# z8F4~P4cL@q$cIdzzFJfKU2l*(crSF(dOCx-a}}Koin+T`y@Z^ipi~$jbrs+N#KZWW zJLg1j|fWWJN*IDdvqnMyl1Dq7!{&rWu6-X8o zvGz=%=Pyl!es@nAaXN5b9_YZ(!}!yGSUhjr90^{*r39Nlx|#NdFW-j3QCE*UMsRJGVS0 zY6A#t5re2Upbw?Ay)flZXBUft&%E+b2p&<7fd0`}cU1j^RnXF&LMlDs>rBmLSnCrc zymVE=);1ebX8%JgAOB<@=&b6v{OHno7&=h~>oynvL^wOXNCDVwW~JMYl@9_^eKEHi z_r`YN6F#V)^{wRBdg37}?wi78S=1R-Tz`@j1`->RA(I*^UfVh#YicA!w~!G^|0 zPrzVbAm>b@4au_fdtNV!3EuMVCn3k*{>R=nps?~s!U%%!<63h zsRQ=yIUjGtHPrYrJ;<>M9KWX!ly}{8o4z*lHT!p66VHWH>JnB#s}{&0WEX=%F@MSM z>)6X%=?>3xPzHT@nbMdN6mVmGctE&e8pqAt;|~hZV`, `