Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
id: GlobalConfig.copyStylesToShadowDom
type: Boolean
default: true
---
---
##### shortDescription
<!-- Description goes here -->

---
<!-- Description goes here -->
16 changes: 8 additions & 8 deletions concepts/05 UI Components/Diagram/05 Overview/05 Elements.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<img src="/images/diagram/diagram-elements.png" alt="Diagram elements"/>

1. [Toolbar](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/mainToolbar/)
2. [Toolbox](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/toolbox/)
3. [View Toolbar](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/viewToolbar/)
4. [Diagram Page](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/pageSize/)
5. [Shape](/Documentation/ApiReference/UI_Components/dxDiagram/Interfaces/dxDiagramShape/)
6. [Connector](/Documentation/ApiReference/UI_Components/dxDiagram/Interfaces/dxDiagramConnector/)
7. [Properties Panel](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/propertiesPanel/)
8. [Properties Panel Button](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/propertiesPanel/#visibility)
1. [Toolbar](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/mainToolbar '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/mainToolbar/')
2. [Toolbox](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/toolbox '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/toolbox/')
3. [View Toolbar](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/viewToolbar '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/viewToolbar/')
4. [Diagram Page](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/pageSize '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/pageSize/')
5. [Shape](/api-reference/10%20UI%20Components/dxDiagram/7%20Interfaces/dxDiagramShape '/Documentation/ApiReference/UI_Components/dxDiagram/Interfaces/dxDiagramShape/')
6. [Connector](/api-reference/10%20UI%20Components/dxDiagram/7%20Interfaces/dxDiagramConnector '/Documentation/ApiReference/UI_Components/dxDiagram/Interfaces/dxDiagramConnector/')
7. [Properties Panel](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/propertiesPanel '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/propertiesPanel/')
8. [Properties Panel Button](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/propertiesPanel/visibility.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/propertiesPanel/#visibility')

You can use the DevExtreme Diagram component to create and edit a variety of diagrams, including:

Expand Down
28 changes: 14 additions & 14 deletions concepts/05 UI Components/Diagram/05 Overview/10 Key Features.md
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
- **Configurable Diagram Creation and Editing**
The Diagram component allows users to create and edit diagrams. You can configure [editing](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/editing/) permissions and enable/disable certain actions such as shape [deletion](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/editing/#allowDeleteShape), [resizing](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/editing/#allowResizeShape) and [adding](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/editing/#allowAddShape). The component also supports custom permission logic implemented in the [edit request handler](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#onRequestEditOperation).
The Diagram component allows users to create and edit diagrams. You can configure [editing](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/editing '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/editing/') permissions and enable/disable certain actions such as shape [deletion](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/editing/allowDeleteShape.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/editing/#allowDeleteShape'), [resizing](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/editing/allowResizeShape.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/editing/#allowResizeShape') and [adding](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/editing/allowAddShape.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/editing/#allowAddShape'). The component also supports custom permission logic implemented in the [edit request handler](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/onRequestEditOperation.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#onRequestEditOperation').

- **Data Binding**
DevExtreme Diagram can load and display diagrams from different [data source](/Documentation/ApiReference/Data_Layer/DataSource/) types. The component supports two-way data binding and integrates with [DevExtreme DataSource push services](/Documentation/Guide/Data_Binding/Data_Layer/#Data_Modification/Integration_with_Push_Services). Diagram accepts data in the following structures:
- [Node and Connector Arrays](/Documentation/Guide/UI_Components/Diagram/Data_Binding/#Node_and_Edge_Arrays)
- [Plain Node Arrays](/Documentation/Guide/UI_Components/Diagram/Data_Binding/#Linear_Array)
- [Hierarchical Node Arrays](/Documentation/Guide/UI_Components/Diagram/Data_Binding/#Hierarchical_Array)
DevExtreme Diagram can load and display diagrams from different [data source](/api-reference/30%20Data%20Layer/DataSource '/Documentation/ApiReference/Data_Layer/DataSource/') types. The component supports two-way data binding and integrates with [DevExtreme DataSource push services](/concepts/70%20Data%20Binding/5%20Data%20Layer/3%20Data%20Modification/30%20Integration%20with%20Push%20Services.md '/Documentation/Guide/Data_Binding/Data_Layer/#Data_Modification/Integration_with_Push_Services'). Diagram accepts data in the following structures:
- [Node and Connector Arrays](/concepts/05%20UI%20Components/Diagram/10%20Data%20Binding/10%20Node%20and%20Edge%20Arrays.md '/Documentation/Guide/UI_Components/Diagram/Data_Binding/#Node_and_Edge_Arrays')
- [Plain Node Arrays](/concepts/05%20UI%20Components/Diagram/10%20Data%20Binding/20%20Linear%20Array.md '/Documentation/Guide/UI_Components/Diagram/Data_Binding/#Linear_Array')
- [Hierarchical Node Arrays](/concepts/05%20UI%20Components/Diagram/10%20Data%20Binding/30%20Hierarchical%20Array.md '/Documentation/Guide/UI_Components/Diagram/Data_Binding/#Hierarchical_Array')

- **Automatic Layouts**
You can bind Diagram to a data source that does not specify node coordinates. Configure an [automatic layout type](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/autoLayout/#type) and choose a diagram [orientation](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/autoLayout/#orientation) to generate diagram layouts.
You can bind Diagram to a data source that does not specify node coordinates. Configure an [automatic layout type](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/autoLayout/type.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/autoLayout/#type') and choose a diagram [orientation](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/autoLayout/orientation.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/autoLayout/#orientation') to generate diagram layouts.

- **Built-In Shape Types**
The Diagram component ships with 40 resizable [shape types](/Documentation/Guide/UI_Components/Diagram/Shape_Types/). These include shapes that contain images, flowchart shapes, and container shapes.
The Diagram component ships with 40 resizable [shape types](/concepts/05%20UI%20Components/Diagram/40%20Shape%20Types.md '/Documentation/Guide/UI_Components/Diagram/Shape_Types/'). These include shapes that contain images, flowchart shapes, and container shapes.

- **Custom Shapes**
You can configure [custom](/Documentation/Guide/UI_Components/Diagram/Custom_Shapes/) shape [text](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/customShapes/#defaultText) and [connection points](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/customShapes/connectionPoints/), as well as add [inner](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/customShapes/#defaultImageUrl) and [background images](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/customShapes/#backgroundImageUrl).
You can configure [custom](/concepts/05%20UI%20Components/Diagram/20%20Custom%20Shapes '/Documentation/Guide/UI_Components/Diagram/Custom_Shapes/') shape [text](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/customShapes/defaultText.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/customShapes/#defaultText') and [connection points](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/customShapes/connectionPoints '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/customShapes/connectionPoints/'), as well as add [inner](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/customShapes/defaultImageUrl.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/customShapes/#defaultImageUrl') and [background images](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/customShapes/backgroundImageUrl.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/customShapes/#backgroundImageUrl').

- **Connector Customization**
You can customize node connectors and arrange them as needed. You can add [points](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/edges/#pointsExpr) and [text](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/edges/#textExpr), specify a [line style](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/edges/#styleExpr), and [lock](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/edges/#lockedExpr) specific connectors.
You can customize node connectors and arrange them as needed. You can add [points](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/edges/pointsExpr.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/edges/#pointsExpr') and [text](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/edges/textExpr.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/edges/#textExpr'), specify a [line style](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/edges/styleExpr.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/edges/#styleExpr'), and [lock](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/edges/lockedExpr.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/edges/#lockedExpr') specific connectors.

- **Interaction Functionality**
DevExtreme Diagram includes user interaction features such as [zoom](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/zoomLevel/) and pan, [snap to grid](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#snapToGrid), and undo/redo.
DevExtreme Diagram includes user interaction features such as [zoom](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/zoomLevel '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/zoomLevel/') and pan, [snap to grid](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/snapToGrid.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#snapToGrid'), and undo/redo.

- **Export**
You can [export](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/export/) diagrams as raster and vector image files. The component can export files in the following formats:
You can [export](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/export '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/export/') diagrams as raster and vector image files. The component can export files in the following formats:
- JPG
- PNG
- SVG

- **Adaptability and RTL**
The component adapts its layout to fit screens of all sizes, including portrait orientation screens. Diagram also ships with [right-to-left](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#rtlEnabled) (RTL) representation support.
The component adapts its layout to fit screens of all sizes, including portrait orientation screens. Diagram also ships with [right-to-left](/api-reference/10%20UI%20Components/DOMComponent/1%20Configuration/rtlEnabled.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#rtlEnabled') (RTL) representation support.

- **Keyboard Navigation**
DevExtreme Diagram supports [keyboard navigation](/Documentation/Guide/UI_Components/Diagram/Keyboard_Support/).
DevExtreme Diagram supports [keyboard navigation](/concepts/05%20UI%20Components/Diagram/45%20Keyboard%20Support.md '/Documentation/Guide/UI_Components/Diagram/Keyboard_Support/').

- **Customization**
You can customize the component appearance and configure diagram visual settings such as [page size](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/pageSize/) and [grid visibility](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#showGrid). You can also toggle [Diagram tools](/Documentation/Guide/UI_Components/Diagram/Diagram_Tools/) as needed or enable [readOnly](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#readOnly) to hide all tools.
You can customize the component appearance and configure diagram visual settings such as [page size](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/pageSize '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/pageSize/') and [grid visibility](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/showGrid.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#showGrid'). You can also toggle [Diagram tools](/concepts/05%20UI%20Components/Diagram/30%20Diagram%20Tools.md '/Documentation/Guide/UI_Components/Diagram/Diagram_Tools/') as needed or enable [readOnly](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/readOnly.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#readOnly') to hide all tools.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
- [Getting Started with Diagram](/Documentation/Guide/UI_Components/Diagram/Getting_Started_with_Diagram/)
- [Getting Started with Diagram](/concepts/05%20UI%20Components/Diagram/00%20Getting%20Started%20with%20Diagram '/Documentation/Guide/UI_Components/Diagram/Getting_Started_with_Diagram/')

- [API](/Documentation/ApiReference/UI_Components/dxDiagram/)
- [API](/api-reference/10%20UI%20Components/dxDiagram '/Documentation/ApiReference/UI_Components/dxDiagram/')

- [Demos](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Diagram/Overview/)
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<img src="/images/FileManager/filemanager-elements.png" alt="FileManager elements"/>

1. [Toolbar](/Documentation/ApiReference/UI_Components/dxFileManager/Configuration/toolbar/)
2. [Root Folder](/Documentation/ApiReference/UI_Components/dxFileManager/Configuration/#rootFolderName)
1. [Toolbar](/api-reference/10%20UI%20Components/dxFileManager/1%20Configuration/toolbar '/Documentation/ApiReference/UI_Components/dxFileManager/Configuration/toolbar/')
2. [Root Folder](/api-reference/10%20UI%20Components/dxFileManager/1%20Configuration/rootFolderName.md '/Documentation/ApiReference/UI_Components/dxFileManager/Configuration/#rootFolderName')
3. **Child Folder**
4. **Item View Header**
5. [Item View Column Headers](/Documentation/ApiReference/UI_Components/dxFileManager/Configuration/itemView/details/columns/)
6. [Items](/Documentation/ApiReference/UI_Components/dxFileManager/Configuration/itemView/)
5. [Item View Column Headers](/api-reference/10%20UI%20Components/dxFileManager/1%20Configuration/itemView/details/columns.md '/Documentation/ApiReference/UI_Components/dxFileManager/Configuration/itemView/details/columns/')
6. [Items](/api-reference/10%20UI%20Components/dxFileManager/1%20Configuration/itemView '/Documentation/ApiReference/UI_Components/dxFileManager/Configuration/itemView/')
Loading
Loading