From 83d24c8d1c211c73601522feb3d535703cff2adc Mon Sep 17 00:00:00 2001 From: "AzureAD\\PriyadharshiniKandha" Date: Tue, 14 Jul 2026 10:41:27 +0530 Subject: [PATCH 01/14] 1038294: angular --- diagram-sdk/angular/container.md | 2 +- diagram-sdk/angular/context-menu.md | 6 +++--- diagram-sdk/angular/data-binding.md | 8 ++++---- diagram-sdk/angular/entity-relationship-diagram.md | 8 ++++---- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/diagram-sdk/angular/container.md b/diagram-sdk/angular/container.md index 76e539addc..dd248b772f 100644 --- a/diagram-sdk/angular/container.md +++ b/diagram-sdk/angular/container.md @@ -32,7 +32,7 @@ Container nodes require specific configuration to enable child element managemen ### Setting a Header -Headers provide textual identification for containers and can be fully customized for appearance and behavior. The [header](https://ej2.syncfusion.com/angular/documentation/api/diagram/containerModel#header) property accepts text content, while the header's [style](https://ej2.syncfusion.com/angular/documentation/api/diagram/headerModel#style) property controls visual formatting including fonts, colors, and alignment. +Headers provide textual identification for containers and can be fully customized for appearance and behavior. The [header](https://ej2.syncfusion.com/angular/documentation/api/diagram/headermodel) property accepts text content, while the header's [style](https://ej2.syncfusion.com/angular/documentation/api/diagram/headerModel#style) property controls visual formatting including fonts, colors, and alignment. The following example shows header configuration with custom styling: diff --git a/diagram-sdk/angular/context-menu.md b/diagram-sdk/angular/context-menu.md index f9859581c0..4b2a740db7 100644 --- a/diagram-sdk/angular/context-menu.md +++ b/diagram-sdk/angular/context-menu.md @@ -12,7 +12,7 @@ domainurl: https://help.syncfusion.com/diagram-sdk -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 Angular Diagram component provides extensive context menu customization capabilities through the [`contextMenuSettings`](https://ej2.syncfusion.com/angular/documentation/api/diagram#contextmenusettings) property. +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 Angular Diagram component provides extensive context menu customization capabilities through the [`contextMenuSettings`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextmenusettingsmodel) 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. @@ -49,7 +49,7 @@ You can customize context menus for individual nodes by defining specific menu i Each custom item can be configured with the following properties: - [`text`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuItemModel#text): Display text for the menu item - [`ID`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuItemModel#id): Unique identifier for the menu item -- [`iconCss`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuItemModel#iconCss): CSS class for font icons +- [`iconCss`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuItemModel#iconcss): CSS class for font icons - [`target`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuItemModel#target): Specifies where the menu item should appear - [`separator`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuItemModel#separator): Adds visual separation between menu items @@ -57,7 +57,7 @@ For nested menu structures, define child items within the [`items`](https://ej2. ### Display Custom Menu Only -To display only custom context menu items, set the [`showCustomMenuOnly`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuSettingsModel#showCustomMenuOnly) property to true. +To display only custom context menu items, set the [`showCustomMenuOnly`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuSettingsModel#showcustommenuonly) property to true. ### Context Menu Click diff --git a/diagram-sdk/angular/data-binding.md b/diagram-sdk/angular/data-binding.md index 1bdfd182bf..8633624ad1 100644 --- a/diagram-sdk/angular/data-binding.md +++ b/diagram-sdk/angular/data-binding.md @@ -83,13 +83,13 @@ The diagram can simultaneously read from two data sources: one for nodes and ano * Use the [`id`](https://ej2.syncfusion.com/angular/documentation/api/diagram/dataSourceModel#id) property to specify the unique identifier field **Connector data source configuration:** -* Configure the [`connectionDataSource`](https://ej2.syncfusion.com/angular/documentation/api/diagram/dataSourceModel#connectionDataSource) property for connector data -* Set [`sourceID`](https://ej2.syncfusion.com/angular/documentation/api/diagram/connectionDataSourceModel#sourceID) and [`targetID`](https://ej2.syncfusion.com/angular/documentation/api/diagram/connectionDataSourceModel#targetID) to establish connections -* Define connection points using [`sourcePointX`](https://ej2.syncfusion.com/angular/documentation/api/diagram/connectionDataSourceModel#sourcePointX), [`sourcePointY`](https://ej2.syncfusion.com/angular/documentation/api/diagram/connectionDataSourceModel#sourcePointY), [`targetPointX`](https://ej2.syncfusion.com/angular/documentation/api/diagram/connectionDataSourceModel#targetPointX), and [`targetPointY`](https://ej2.syncfusion.com/angular/documentation/api/diagram/connectionDataSourceModel#targetPointY) +* Configure the [`connectionDataSource`](https://ej2.syncfusion.com/angular/documentation/api/diagram/dataSourceModel#connectiondatasource) property for connector data +* Set [`sourceID`](https://ej2.syncfusion.com/angular/documentation/api/diagram/connectionDataSourceModel#sourceid) and [`targetID`](https://ej2.syncfusion.com/angular/documentation/api/diagram/connectionDataSourceModel#targetid) to establish connections +* Define connection points using [`sourcePointX`](https://ej2.syncfusion.com/angular/documentation/api/diagram/connectionDataSourceModel#sourcepointx), [`sourcePointY`](https://ej2.syncfusion.com/angular/documentation/api/diagram/connectionDataSourceModel#sourcepointy), [`targetPointX`](https://ej2.syncfusion.com/angular/documentation/api/diagram/connectionDataSourceModel#targetpointx), and [`targetPointY`](https://ej2.syncfusion.com/angular/documentation/api/diagram/connectionDataSourceModel#targetpointy) **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. -**Custom fields:** Use the [`customFields`](https://ej2.syncfusion.com/angular/documentation/api/diagram/crudActionModel#customFields) property in crudAction to maintain additional information for both nodes and connectors. +**Custom fields:** Use the [`customFields`](https://ej2.syncfusion.com/angular/documentation/api/diagram/crudActionModel#customfields) property in crudAction to maintain additional information for both nodes and connectors. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/diagram-sdk/angular/entity-relationship-diagram.md b/diagram-sdk/angular/entity-relationship-diagram.md index 9333d9f515..f43e7fc980 100644 --- a/diagram-sdk/angular/entity-relationship-diagram.md +++ b/diagram-sdk/angular/entity-relationship-diagram.md @@ -13,7 +13,7 @@ domainurl: https://help.syncfusion.com/diagram-sdk An Entity Relationship (ER) diagram is a visual representation of a database structure. It displays entities (such as tables), their attributes (such as columns), and the relationships between those entities. In the Syncfusion® Diagram control, ER diagrams can be created by configuring nodes with [ErShapeModel](https://ej2.syncfusion.com/angular/documentation/api/diagram/erShapeModel) and connectors with [ErConnectorShapeModel](https://ej2.syncfusion.com/angular/documentation/api/diagram/erConnectorShapeModel). -ER entity nodes are added to the [nodes](https://ej2.syncfusion.com/angular/documentation/api/diagram#nodes) property, and ER relationships are defined as connectors and added to the [connectors](https://ej2.syncfusion.com/angular/documentation/api/diagram#connectors) property. +ER entity nodes are added to the [nodes](https://ej2.syncfusion.com/angular/documentation/api/diagram/nodemodel) property, and ER relationships are defined as connectors and added to the [connectors](https://ej2.syncfusion.com/angular/documentation/api/diagram/connectormodel) property. ## ER Diagram Elements @@ -45,9 +45,9 @@ The header is the top section of an ER entity node that displays the entity name | ER Header Property | Description | |---|---| -| [annotation](https://ej2.syncfusion.com/angular/documentation/api/diagram/erHeaderModel#annotation) | Defines the text content displayed in the header. | +| [annotation](https://ej2.syncfusion.com/angular/documentation/api/diagram/shapeannotationmodel) | Defines the text content displayed in the header. | | [height](https://ej2.syncfusion.com/angular/documentation/api/diagram/erHeaderModel#height) | Defines the height of the header area in pixels. | -| [style](https://ej2.syncfusion.com/angular/documentation/api/diagram/erHeaderModel#style) | Defines style properties such as fill color, text color, and font settings. | +| [style](https://ej2.syncfusion.com/angular/documentation/api/diagram/shapestylemodel) | Defines style properties such as fill color, text color, and font settings. | {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -83,7 +83,7 @@ Fields represent the columns or attributes of an entity. They can be defined usi | [isForeignKey](https://ej2.syncfusion.com/angular/documentation/api/diagram/erFieldModel#isforeignkey) | Indicates whether the field is a foreign key that references another entity. | | [constraints](https://ej2.syncfusion.com/angular/documentation/api/diagram/erFieldModel#constraints) | Defines additional constraints applied to the field. Accepts one or more [ErFieldConstraint](./api/diagram/erfieldconstraint) values. | | [style](https://ej2.syncfusion.com/angular/documentation/api/diagram/erFieldModel#style) | Defines the visual style of the ER field row. Supports standard shape style properties such as fill, stroke color, stroke width, opacity, and other supported diagram style values. Field-level style values override applicable values from field defaults. | -| [annotation](https://ej2.syncfusion.com/angular/documentation/api/diagram/erFieldModel#annotation) | Defines text styling for the ER field row. Only annotation [style](https://ej2.syncfusion.com/angular/documentation/api/diagram/shapeannotation#style) property is applicable. The annotation [content](https://ej2.syncfusion.com/angular/documentation/api/diagram/shapeannotation#content) property is ignored. | +| [annotation](https://ej2.syncfusion.com/angular/documentation/api/diagram/shapeannotationmodel) | Defines text styling for the ER field row. Only annotation [style](https://ej2.syncfusion.com/angular/documentation/api/diagram/shapeannotation#style) property is applicable. The annotation [content](https://ej2.syncfusion.com/angular/documentation/api/diagram/shapeannotation#content) property is ignored. | {% tabs %} {% highlight ts tabtitle="app.component.ts" %} From 98da2ec8a90bdb48665d264f9f2ec1b30fdac05c Mon Sep 17 00:00:00 2001 From: "AzureAD\\PriyadharshiniKandha" Date: Tue, 14 Jul 2026 15:25:46 +0530 Subject: [PATCH 02/14] 1038294: angular --- diagram-sdk/angular/grid-lines.md | 6 +++--- diagram-sdk/angular/group.md | 4 ++-- diagram-sdk/angular/interaction.md | 2 +- diagram-sdk/angular/scroll-settings.md | 2 +- diagram-sdk/angular/shapes.md | 14 +++++++------- diagram-sdk/angular/tools.md | 4 ++-- diagram-sdk/angular/tooltip.md | 2 +- diagram-sdk/angular/umlsequencediagram.md | 2 +- diagram-sdk/angular/user-handle.md | 2 +- 9 files changed, 19 insertions(+), 19 deletions(-) diff --git a/diagram-sdk/angular/grid-lines.md b/diagram-sdk/angular/grid-lines.md index 9dd91be2db..b3c2f3801e 100644 --- a/diagram-sdk/angular/grid-lines.md +++ b/diagram-sdk/angular/grid-lines.md @@ -12,7 +12,7 @@ domainurl: https://help.syncfusion.com/diagram-sdk Gridlines are crisscross lines drawn in diagram pages similar to lines on traditional graph paper. They help position diagram elements precisely on the diagram page. -The model's [`snapSettings`](https://ej2.syncfusion.com/angular/documentation/api/diagram#snapsettings) property is used to customize the gridlines and control the snapping behavior in the diagram. +The model's [`snapSettings`](https://ej2.syncfusion.com/angular/documentation/api/diagram/snapsettingsmodel) property is used to customize the gridlines and control the snapping behavior in the diagram. ## Customize the gridlines visibility @@ -110,7 +110,7 @@ When you draw, resize, or move a diagram element on the page, you can set it to This feature allows the diagram objects to snap to the nearest intersection of gridlines while being dragged or resized. This feature enables easier alignment during layout or design. -Snapping to gridlines can be enabled or disabled using the [`snapConstraints`](https://ej2.syncfusion.com/angular/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`](https://ej2.syncfusion.com/angular/documentation/api/diagram/snapconstraints) property of the SnapSettings class. The default value is All. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -206,4 +206,4 @@ By default, the objects are snapped towards the nearest gridline. The gridline o ## Snap constraints -The [`snapConstraints`](https://ej2.syncfusion.com/angular/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/angular/documentation/diagram/constraints#snap-constraints). \ No newline at end of file +The [`snapConstraints`](https://ej2.syncfusion.com/angular/documentation/api/diagram/snapconstraints) property allows you to enable or disable the certain features of the snapping, for detailed information refer to [`constraints`](https://ej2.syncfusion.com/angular/documentation/diagram/constraints#snap-constraints). \ No newline at end of file diff --git a/diagram-sdk/angular/group.md b/diagram-sdk/angular/group.md index 47d97fcfdf..9191fb2889 100644 --- a/diagram-sdk/angular/group.md +++ b/diagram-sdk/angular/group.md @@ -18,7 +18,7 @@ A group functions as a container for its children (nodes, groups, and connectors ## Add group when initializing diagram -A group can be added to the diagram model through the [`nodes`](https://ej2.syncfusion.com/angular/documentation/api/diagram#nodes) collection. To define an object as a group, add the child objects to the [`children`](https://ej2.syncfusion.com/angular/documentation/api/diagram/node#children) collection of the group. The following code illustrates how to create a group node. +A group can be added to the diagram model through the [`nodes`](https://ej2.syncfusion.com/angular/documentation/api/diagram/nodemodel) collection. To define an object as a group, add the child objects to the [`children`](https://ej2.syncfusion.com/angular/documentation/api/diagram/node#children) collection of the group. The following code illustrates how to create a group node. **Important:** When creating a group, child nodes must be declared before the group declaration. @@ -166,7 +166,7 @@ this.diagram.removeChildFromGroup (groupNode, childNode); ### Group padding -The [`padding`](https://ej2.syncfusion.com/angular/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 [`padding`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/marginModel) 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: diff --git a/diagram-sdk/angular/interaction.md b/diagram-sdk/angular/interaction.md index baabb091b3..893d666ef3 100644 --- a/diagram-sdk/angular/interaction.md +++ b/diagram-sdk/angular/interaction.md @@ -85,7 +85,7 @@ export class AppComponent { ### Get selected items -Access the currently selected [`nodes`](https://ej2.syncfusion.com/angular/documentation/api/diagram/selectorModel#nodes) and [`connectors`](https://ej2.syncfusion.com/angular/documentation/api/diagram/selectorModel#connectors) through the [`selectedItems`](https://ej2.syncfusion.com/angular/documentation/api/diagram#selecteditems) property: +Access the currently selected [`nodes`](https://ej2.syncfusion.com/angular/documentation/api/diagram/nodemodel) and [`connectors`](https://ej2.syncfusion.com/angular/documentation/api/diagram/connectormodel) through the [`selectedItems`](https://ej2.syncfusion.com/angular/documentation/api/diagram/selectormodel) property: ```ts this.selectedNodes = this.diagram.selectedItems.nodes; diff --git a/diagram-sdk/angular/scroll-settings.md b/diagram-sdk/angular/scroll-settings.md index 8f1b2ebc25..497d4a5e0e 100644 --- a/diagram-sdk/angular/scroll-settings.md +++ b/diagram-sdk/angular/scroll-settings.md @@ -145,7 +145,7 @@ The frequency of automatic scrolling in the Diagram component during autoscroll ## Scroll Limit -The [`scrollLimit`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#scrolllimit) property allows developers to define the scrollable region of the diagram. It includes the following options: +The [`scrollLimit`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrolllimit) property allows developers 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 only. diff --git a/diagram-sdk/angular/shapes.md b/diagram-sdk/angular/shapes.md index 1177429b8f..d88868a3f2 100644 --- a/diagram-sdk/angular/shapes.md +++ b/diagram-sdk/angular/shapes.md @@ -29,7 +29,7 @@ This guide covers the following shape types and their implementation: 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/angular/documentation/api/diagram/node#shape) and define the content object with your desired text and styling options. +To create a text node, set the shape property to [`text`](https://ej2.syncfusion.com/angular/documentation/api/diagram/textmodel) and define the content object with your desired text and styling options. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -47,7 +47,7 @@ To create a text node, set the shape property to [`text`](https://ej2.syncfusion 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. -To create an image node, set the shape property to [`image`](https://ej2.syncfusion.com/angular/documentation/api/diagram/node#shape) and specify the image source through the source property. +To create an image node, set the shape property to [`image`](https://ej2.syncfusion.com/angular/documentation/api/diagram/imagemodel) and specify the image source through the source property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -112,7 +112,7 @@ N> Combine the align property with scale settings to achieve precise image posit 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. -Set the shape property to [`HTML`](https://ej2.syncfusion.com/angular/documentation/api/diagram/node#shape) to create HTML nodes. You can define content using either inline templates or external node templates. +Set the shape property to [`HTML`](https://ej2.syncfusion.com/angular/documentation/api/diagram/htmlmodel) to create HTML nodes. You can define content using either inline templates or external node templates. 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. @@ -152,7 +152,7 @@ For complex HTML structures, use the [`nodeTemplate`](https://ej2.syncfusion.com 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. -To create a [`native`](https://ej2.syncfusion.com/angular/documentation/api/diagram/node#shape) node, set the shape property to **native** and provide SVG content through the content property. +To create a [`native`](https://ej2.syncfusion.com/angular/documentation/api/diagram/nativemodel) node, set the shape property to **native** and provide SVG content through the content property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -185,7 +185,7 @@ Control how SVG content appears within node boundaries using the same scaling pr 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 create [`basic`](https://ej2.syncfusion.com/angular/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://ej2.syncfusion.com/angular/documentation/api/diagram/basicShapeModel#cornerradius) property to specify the radius. +To create [`basic`](https://ej2.syncfusion.com/angular/documentation/api/diagram/basicshapemodel) shapes, set the type property to **basic** and choose from the available built-in shapes. For rounded rectangles, use the [`cornerRadius`](https://ej2.syncfusion.com/angular/documentation/api/diagram/basicShapeModel#cornerradius) property to specify the radius. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -211,7 +211,7 @@ The basic shapes library includes rectangles, ellipses, triangles, polygons, sta 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://ej2.syncfusion.com/angular/documentation/api/diagram/node#shape) node, set the shape property to **path** and define the geometry through the [`data`](https://ej2.syncfusion.com/angular/documentation/api/diagram/pathModel#data) property using standard SVG path syntax. +To create a [`path`](https://ej2.syncfusion.com/angular/documentation/api/diagram/pathmodel) node, set the shape property to **path** and define the geometry through the [`data`](https://ej2.syncfusion.com/angular/documentation/api/diagram/pathModel#data) property using standard SVG path syntax. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -229,7 +229,7 @@ To create a [`path`](https://ej2.syncfusion.com/angular/documentation/api/diagra 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://ej2.syncfusion.com/angular/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**. +To create [`flow`](https://ej2.syncfusion.com/angular/documentation/api/diagram/flowshapemodel) shapes, set the shape type to **flow** and specify the desired flow shape variant. The default flow shape is **process**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/diagram-sdk/angular/tools.md b/diagram-sdk/angular/tools.md index a70fccedca..452132d064 100644 --- a/diagram-sdk/angular/tools.md +++ b/diagram-sdk/angular/tools.md @@ -24,7 +24,7 @@ These tools are essential for building complex diagrams and provide the foundati ## Drawing tools -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/angular/documentation/api/diagram#drawingobject) property and activated using the [`tool`](https://ej2.syncfusion.com/angular/documentation/api/diagram#tool) property. +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/angular/documentation/api/diagram#drawingobject) property and activated using the [`tool`](https://ej2.syncfusion.com/angular/documentation/api/diagram/diagramtools) property. ### Draw nodes @@ -161,7 +161,7 @@ These tools provide flexibility and functionality for creating and interacting w ## Pan tool -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/angular/documentation/api/diagram#tool) property to `ZoomPan`: +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/angular/documentation/api/diagram/diagramtools) property to `ZoomPan`: {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/diagram-sdk/angular/tooltip.md b/diagram-sdk/angular/tooltip.md index 9b8ffcdb48..eabb830248 100644 --- a/diagram-sdk/angular/tooltip.md +++ b/diagram-sdk/angular/tooltip.md @@ -46,7 +46,7 @@ The default tooltip that appears while interacting with nodes can be disabled by ## Tooltip for specific nodes and connectors -The tooltip can be customized for each node and connector. To show different tooltips for different diagram elements on mouse over, set the [`tooltip`](https://helpej2.syncfusion.com/angular/documentation/api/diagram#tooltip) property of the node or connector with the tooltip [`content`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltip#content) and [`position`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltip#position). The following code example illustrates how to customize the tooltip for individual elements. +The tooltip can be customized for each node and connector. To show different tooltips for different diagram elements on mouse over, set the [`tooltip`](https://ej2.syncfusion.com/angular/documentation/api/diagram/diagramtooltipmodel) property of the node or connector with the tooltip [`content`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltip#content) and [`position`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltip#position). The following code example illustrates how to customize the tooltip for individual elements. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/diagram-sdk/angular/umlsequencediagram.md b/diagram-sdk/angular/umlsequencediagram.md index 02db7129e2..976259c61b 100644 --- a/diagram-sdk/angular/umlsequencediagram.md +++ b/diagram-sdk/angular/umlsequencediagram.md @@ -209,7 +209,7 @@ The following example illustrates how to create fragments with different conditi ### Adjusting Participant Spacing -The [spaceBetweenParticipants](https://ej2.syncfusion.com/angular/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. +The [spaceBetweenParticipants](https://ej2.syncfusion.com/angular/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. ```ts // Define the UML Sequence Diagram model with custom spacing diff --git a/diagram-sdk/angular/user-handle.md b/diagram-sdk/angular/user-handle.md index 29740ce82f..7efa2d8c3e 100644 --- a/diagram-sdk/angular/user-handle.md +++ b/diagram-sdk/angular/user-handle.md @@ -18,7 +18,7 @@ The Angular Diagram component supports two types of user handles: ## Create user handle -To create user handles, define and add them to the [`userHandles`](https://ej2.syncfusion.com/angular/documentation/api/diagram/selectorModel#userhandles) collection of the [`selectedItems`](https://ej2.syncfusion.com/angular/documentation/api/diagram/selectorModel) property. The [`name`](https://ej2.syncfusion.com/angular/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://ej2.syncfusion.com/angular/documentation/api/diagram/userHandleModel#pathdata) property is used to define the SVG path data that determines the visual appearance of the user handle icon. +To create user handles, define and add them to the [`userHandles`](https://ej2.syncfusion.com/angular/documentation/api/diagram/userhandlemodel) collection of the [`selectedItems`](https://ej2.syncfusion.com/angular/documentation/api/diagram/selectorModel) property. The [`name`](https://ej2.syncfusion.com/angular/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://ej2.syncfusion.com/angular/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. From 06e69cec12f17c438415e18cb32611d20fce2a96 Mon Sep 17 00:00:00 2001 From: "AzureAD\\PriyadharshiniKandha" Date: Tue, 14 Jul 2026 15:41:32 +0530 Subject: [PATCH 03/14] 1038294: er --- diagram-sdk/angular/entity-relationship-diagram.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/diagram-sdk/angular/entity-relationship-diagram.md b/diagram-sdk/angular/entity-relationship-diagram.md index f43e7fc980..a69862fdd6 100644 --- a/diagram-sdk/angular/entity-relationship-diagram.md +++ b/diagram-sdk/angular/entity-relationship-diagram.md @@ -101,7 +101,7 @@ N> If no fields are specified, a default single field is automatically added to ### Add or remove ER fields at runtime -ER fields can be updated after the diagram is rendered by using the [addErField](https://ej2.syncfusion.com/angular/documentation/api/diagram#addErField) and [removeErField](https://ej2.syncfusion.com/angular/documentation/api/diagram#removeErField) methods. These methods help add new fields to an ER entity node or remove existing fields without recreating the diagram. +ER fields can be updated after the diagram is rendered by using the [addErField](https://ej2.syncfusion.com/angular/documentation/api/diagram#adderfield) and [removeErField](https://ej2.syncfusion.com/angular/documentation/api/diagram#removeerfield) methods. These methods help add new fields to an ER entity node or remove existing fields without recreating the diagram. The `addErField` method adds a field to an ER entity node. @@ -139,7 +139,7 @@ if (fieldToRemove) { ### Configure default field appearance -The [fieldDefaults](https://ej2.syncfusion.com/angular/documentation/api/diagram/erFieldDefaults) property defines the default visual appearance for all fields in an ER entity node. These settings are applied to every field unless they are overridden by individual field-level style settings. +The [fieldDefaults](https://ej2.syncfusion.com/angular/documentation/api/diagram/erfielddefaults) property defines the default visual appearance for all fields in an ER entity node. These settings are applied to every field unless they are overridden by individual field-level style settings. | ER Field Defaults Property | Description | |---|---| @@ -167,7 +167,7 @@ The appearance of ER entities and their fields can be customized using style pro N> Field-level styles override applicable node-level and field default styles. -The [erEntityChanged](https://ej2.syncfusion.com/angular/documentation/api/diagram#erEntityChanged) event is triggered when ER entity fields are added, removed, or reordered. This event provides the previous and updated entity states, which can be used to track modifications, validate field changes, or synchronize updates with an external data source. +The [erEntityChanged](https://ej2.syncfusion.com/angular/documentation/api/diagram#erentitychanged) event is triggered when ER entity fields are added, removed, or reordered. This event provides the previous and updated entity states, which can be used to track modifications, validate field changes, or synchronize updates with an external data source. ```typescript From 8a16d06804372b3646af19aabe97d4fd62b7bd8c Mon Sep 17 00:00:00 2001 From: "AzureAD\\PriyadharshiniKandha" Date: Tue, 14 Jul 2026 18:49:07 +0530 Subject: [PATCH 04/14] 1038294: angular --- diagram-sdk/angular/automatic-layout/flowchart-layout.md | 4 ++-- .../angular/automatic-layout/layout-customization.md | 2 +- diagram-sdk/angular/automatic-layout/mindmap-layout.md | 2 +- diagram-sdk/angular/bpmn-shapes/bpmn-activities.md | 2 +- diagram-sdk/angular/bpmn-shapes/bpmn-flows.md | 6 +++--- diagram-sdk/angular/bpmn-shapes/bpmn-textAnnotation.md | 2 +- diagram-sdk/angular/connectors/connectors.md | 2 +- diagram-sdk/angular/labels/label-interaction.md | 4 ++-- diagram-sdk/angular/nodes/nodes-customization.md | 4 ++-- diagram-sdk/angular/nodes/nodes-expandAndCollapse.md | 2 +- diagram-sdk/angular/ports/ports.md | 2 +- diagram-sdk/angular/swimlane/lane.md | 4 ++-- diagram-sdk/angular/swimlane/swim-lane.md | 2 +- 13 files changed, 19 insertions(+), 19 deletions(-) diff --git a/diagram-sdk/angular/automatic-layout/flowchart-layout.md b/diagram-sdk/angular/automatic-layout/flowchart-layout.md index 7b3460e6d9..16c3055f77 100644 --- a/diagram-sdk/angular/automatic-layout/flowchart-layout.md +++ b/diagram-sdk/angular/automatic-layout/flowchart-layout.md @@ -51,7 +51,7 @@ Different flowchart symbols have specific meanings used to represent various sta ## Render flowchart layout with data source -To render a flowchart layout, set the [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/diagram/layout#type) property to `Flowchart`. The following code example demonstrates how to render a flowchart layout using a data source. +To render a flowchart layout, set the [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/diagram/layouttype) property to `Flowchart`. The following code example demonstrates how to render a flowchart layout using a data source. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -114,7 +114,7 @@ This structure enables comprehensive customization of the flowchart's visual ele ## Render flowchart layout with nodes and connectors -The following example demonstrates how to render a flowchart layout using predefined nodes and connectors. Define the [`nodes`](https://ej2.syncfusion.com/angular/documentation/api/diagram/nodeModel) and [`connectors`](https://ej2.syncfusion.com/angular/documentation/api/diagram/connectormodel) collections and assign them to the diagram. Set the [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/diagram/layout#type) to `Flowchart` to enable automatic arrangement. +The following example demonstrates how to render a flowchart layout using predefined nodes and connectors. Define the [`nodes`](https://ej2.syncfusion.com/angular/documentation/api/diagram/nodeModel) and [`connectors`](https://ej2.syncfusion.com/angular/documentation/api/diagram/connectormodel) collections and assign them to the diagram. Set the [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/diagram/layouttype) to `Flowchart` to enable automatic arrangement. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/diagram-sdk/angular/automatic-layout/layout-customization.md b/diagram-sdk/angular/automatic-layout/layout-customization.md index 3113b261bc..55e10068b9 100644 --- a/diagram-sdk/angular/automatic-layout/layout-customization.md +++ b/diagram-sdk/angular/automatic-layout/layout-customization.md @@ -106,7 +106,7 @@ The layout orientation determines the primary direction in which the layout flow |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.| -The [`orientation`](https://ej2.syncfusion.com/angular/documentation/api/diagram/layout#orientation) property can be customized to match specific design requirements or cultural reading patterns. +The [`orientation`](https://ej2.syncfusion.com/angular/documentation/api/diagram/layoutorientation) property can be customized to match specific design requirements or cultural reading patterns. N> The default orientation in diagram is `TopToBottom`. diff --git a/diagram-sdk/angular/automatic-layout/mindmap-layout.md b/diagram-sdk/angular/automatic-layout/mindmap-layout.md index cd2c769e97..0af69ea639 100644 --- a/diagram-sdk/angular/automatic-layout/mindmap-layout.md +++ b/diagram-sdk/angular/automatic-layout/mindmap-layout.md @@ -23,7 +23,7 @@ Diagram.Inject(MindMap); ## Mind Map Orientation -The [`orientation`](https://ej2.syncfusion.com/angular/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 [`orientation`](https://ej2.syncfusion.com/angular/documentation/api/diagram/layoutorientation) 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: diff --git a/diagram-sdk/angular/bpmn-shapes/bpmn-activities.md b/diagram-sdk/angular/bpmn-shapes/bpmn-activities.md index c23671dfd6..5cc2d2c44f 100644 --- a/diagram-sdk/angular/bpmn-shapes/bpmn-activities.md +++ b/diagram-sdk/angular/bpmn-shapes/bpmn-activities.md @@ -158,7 +158,7 @@ An [`adhoc`](https://ej2.syncfusion.com/angular/documentation/api/diagram/bpmnSu ## Boundary Types -The [`boundary`](https://ej2.syncfusion.com/angular/documentation/api/diagram/bpmnSubProcess#boundary) property defines the visual boundary style of a subprocess, indicating different subprocess characteristics. The default value is **default**. +The [`boundary`](https://ej2.syncfusion.com/angular/documentation/api/diagram/bpmnboundary) property defines the visual boundary style of a subprocess, indicating different subprocess characteristics. The default value is **default**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/diagram-sdk/angular/bpmn-shapes/bpmn-flows.md b/diagram-sdk/angular/bpmn-shapes/bpmn-flows.md index e029916157..e7bf14a161 100644 --- a/diagram-sdk/angular/bpmn-shapes/bpmn-flows.md +++ b/diagram-sdk/angular/bpmn-shapes/bpmn-flows.md @@ -22,7 +22,7 @@ BPMN flows are categorized into three main types: ## Association flow -[`BPMN Association`](https://ej2.syncfusion.com/angular/documentation/api/diagram/bpmnFlow) 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. +[`BPMN Association`](https://ej2.syncfusion.com/angular/documentation/api/diagram/bpmnassociationflows) 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: @@ -56,7 +56,7 @@ N> The default value for the property `association` is **default**. ## Sequence flow -A [`Sequence`](https://ej2.syncfusion.com/angular/documentation/api/diagram/bpmnFlow) 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. +A [`Sequence`](https://ej2.syncfusion.com/angular/documentation/api/diagram/bpmnsequenceflows) 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. The sequence flow supports three types: @@ -90,7 +90,7 @@ N> The default value for the property `sequence` is **normal**. ## Message flow -A [`Message`](https://ej2.syncfusion.com/angular/documentation/api/diagram/bpmnFlow) 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/angular/documentation/api/diagram/bpmnmessageflows) 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. The message flow supports three types: diff --git a/diagram-sdk/angular/bpmn-shapes/bpmn-textAnnotation.md b/diagram-sdk/angular/bpmn-shapes/bpmn-textAnnotation.md index c45192853c..3cb2108aeb 100644 --- a/diagram-sdk/angular/bpmn-shapes/bpmn-textAnnotation.md +++ b/diagram-sdk/angular/bpmn-shapes/bpmn-textAnnotation.md @@ -20,7 +20,7 @@ The annotation element can be switched from one BPMN node to another by simply d ## Key properties -The [`textAnnotationDirection`](https://helpej2.syncfusion.com/angular/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. +The [`textAnnotationDirection`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/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. To set the size for text annotation, use the [`width`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/node#width) and [`height`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/node#height) properties of the node. diff --git a/diagram-sdk/angular/connectors/connectors.md b/diagram-sdk/angular/connectors/connectors.md index 6f10cf38b0..c36b362ae9 100644 --- a/diagram-sdk/angular/connectors/connectors.md +++ b/diagram-sdk/angular/connectors/connectors.md @@ -103,7 +103,7 @@ The following code example illustrates how to add connectors to the palette. 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 connector, you have to activate the drawing tool by setting `DrawOnce` or `ContinuousDraw` to the [`tool`](https://ej2.syncfusion.com/documentation/api/diagram#tool) property and you need to set the `connector` object by using the [`drawingObject`](https://ej2.syncfusion.com/documentation/api/diagram#drawingobject) property. The following code example illustrates how to draw a connector at runtime. +To draw a connector, you have to activate the drawing tool by setting `DrawOnce` or `ContinuousDraw` to the [`tool`](https://ej2.syncfusion.com/documentation/api/diagram/diagramtools) property and you need to set the `connector` object by using the [`drawingObject`](https://ej2.syncfusion.com/documentation/api/diagram#drawingobject) property. The following code example illustrates how to draw a connector at runtime. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/diagram-sdk/angular/labels/label-interaction.md b/diagram-sdk/angular/labels/label-interaction.md index ce5464e4d5..4e33fa0ea2 100644 --- a/diagram-sdk/angular/labels/label-interaction.md +++ b/diagram-sdk/angular/labels/label-interaction.md @@ -26,7 +26,7 @@ The Diagram component allows labels to be interactive through selecting, draggin ## Constraints -The [`constraints`](https://ej2.syncfusion.com/angular/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. +The [`constraints`](https://ej2.syncfusion.com/angular/documentation/api/diagram/annotationconstraints) property of labels allows enabling or disabling specific label behaviors. Use these constraints to control which interaction types are available for each label. ## Label Editing @@ -56,7 +56,7 @@ Double-clicking any label enables editing mode. When the editor loses focus, the ## Label Rotation -The [`rotationReference`](https://ej2.syncfusion.com/angular/documentation/api/diagram/shapeAnnotation#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. +The [`rotationReference`](https://ej2.syncfusion.com/angular/documentation/api/diagram/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 ts tabtitle="app.component.ts" %} diff --git a/diagram-sdk/angular/nodes/nodes-customization.md b/diagram-sdk/angular/nodes/nodes-customization.md index b3c090f91a..57e6ec7efc 100644 --- a/diagram-sdk/angular/nodes/nodes-customization.md +++ b/diagram-sdk/angular/nodes/nodes-customization.md @@ -137,7 +137,7 @@ The following code shows how to set the rotate angle and corner radius for nodes ## Apply shadow effect to nodes -Diagram provides support to add [`shadow`](https://ej2.syncfusion.com/angular/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. +Diagram provides support to add [`shadow`](https://ej2.syncfusion.com/angular/documentation/api/diagram/shadowmodel) 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: @@ -199,7 +199,7 @@ export class AppComponent { ## Constraints -The [`constraints`](https://ej2.syncfusion.com/angular/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](https://ej2.syncfusion.com/angular/documentation/diagram/constraints#node-constraints) documentation. +The [`constraints`](https://ej2.syncfusion.com/angular/documentation/api/diagram/nodeconstraints) 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](https://ej2.syncfusion.com/angular/documentation/diagram/constraints#node-constraints) documentation. ## Stack order diff --git a/diagram-sdk/angular/nodes/nodes-expandAndCollapse.md b/diagram-sdk/angular/nodes/nodes-expandAndCollapse.md index 746a6ae184..9246fd5378 100644 --- a/diagram-sdk/angular/nodes/nodes-expandAndCollapse.md +++ b/diagram-sdk/angular/nodes/nodes-expandAndCollapse.md @@ -36,7 +36,7 @@ For detailed API information, refer to [`expandIcon`](https://ej2.syncfusion.com Define the size of icons using the [`width`](https://ej2.syncfusion.com/angular/documentation/api/diagram/iconShapeModel#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/diagram/iconShapeModel#height) properties. -The [`shape`](https://ej2.syncfusion.com/angular/documentation/api/diagram/iconShapeModel#shape) property of expandIcon and collapseIcon allows customization of the icon appearance. +The [`shape`](https://ej2.syncfusion.com/angular/documentation/api/diagram/iconshapemodel) property of expandIcon and collapseIcon allows customization of the icon appearance. The following code example demonstrates how to create icons with various shapes: diff --git a/diagram-sdk/angular/ports/ports.md b/diagram-sdk/angular/ports/ports.md index c7fd5b8145..9acbb10d83 100644 --- a/diagram-sdk/angular/ports/ports.md +++ b/diagram-sdk/angular/ports/ports.md @@ -107,7 +107,7 @@ The following code example illustrates how to change port properties dynamically ## Specify connection direction to port -The [`connectionDirection`](https://ej2.syncfusion.com/angular/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. +The [`connectionDirection`](https://ej2.syncfusion.com/angular/documentation/api/diagram/portconnectiondirection) 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 ts tabtitle="app.component.ts" %} diff --git a/diagram-sdk/angular/swimlane/lane.md b/diagram-sdk/angular/swimlane/lane.md index db7e0bb197..3e8648934b 100644 --- a/diagram-sdk/angular/swimlane/lane.md +++ b/diagram-sdk/angular/swimlane/lane.md @@ -40,7 +40,7 @@ The following code example illustrates how to define a swimlane with a lane. ### Create lane header -The [`header`](https://ej2.syncfusion.com/angular/documentation/api/diagram/laneModel#header) property of a lane allows you to textually describe the lane and customize the appearance of the description. +The [`header`](https://ej2.syncfusion.com/angular/documentation/api/diagram/headermodel) property of a lane allows you to textually describe the lane and customize the appearance of the description. The following code example illustrates how to define a lane header. @@ -60,7 +60,7 @@ The following code example illustrates how to define a lane header. The size of a lane can be controlled by using the [`width`](https://ej2.syncfusion.com/angular/documentation/api/diagram/laneModel#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/diagram/laneModel#height) properties of the lane. -The appearance of a lane can be customized by using the [`style`](https://ej2.syncfusion.com/angular/documentation/api/diagram/laneModel#style) properties. +The appearance of a lane can be customized by using the [`style`](https://ej2.syncfusion.com/angular/documentation/api/diagram/shapestylemodel) properties. The appearance of the header annotation can be customized by using the `style` property of the header annotation. diff --git a/diagram-sdk/angular/swimlane/swim-lane.md b/diagram-sdk/angular/swimlane/swim-lane.md index fd16b0df30..216491d903 100644 --- a/diagram-sdk/angular/swimlane/swim-lane.md +++ b/diagram-sdk/angular/swimlane/swim-lane.md @@ -77,7 +77,7 @@ The following code example shows how to define and configure a swimlane header: ### Header customization -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/angular/documentation/api/diagram/headerModel#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/diagram/headerModel#height) properties. Visual styling, including background color and text formatting, can be applied through the [`style`](https://ej2.syncfusion.com/angular/documentation/api/diagram/headerModel#style) property. The swimlane's orientation can be controlled using the [`orientation`](https://ej2.syncfusion.com/angular/documentation/api/diagram/swimLaneModel#orientation) property. +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/angular/documentation/api/diagram/headerModel#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/diagram/headerModel#height) properties. Visual styling, including background color and text formatting, can be applied through the [`style`](https://ej2.syncfusion.com/angular/documentation/api/diagram/headerModel#style) property. The swimlane's orientation can be controlled using the [`orientation`](https://ej2.syncfusion.com/angular/documentation/api/diagram/orientation) property. The following code example demonstrates comprehensive header customization: From 4fc17b258400f6e9d15bb2cc2f216f08b90f6526 Mon Sep 17 00:00:00 2001 From: "AzureAD\\PriyadharshiniKandha" Date: Tue, 14 Jul 2026 18:55:29 +0530 Subject: [PATCH 05/14] 1038294: angular --- diagram-sdk/angular/labels/label-interaction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/diagram-sdk/angular/labels/label-interaction.md b/diagram-sdk/angular/labels/label-interaction.md index 4e33fa0ea2..0c05bff8da 100644 --- a/diagram-sdk/angular/labels/label-interaction.md +++ b/diagram-sdk/angular/labels/label-interaction.md @@ -26,7 +26,7 @@ The Diagram component allows labels to be interactive through selecting, draggin ## Constraints -The [`constraints`](https://ej2.syncfusion.com/angular/documentation/api/diagram/annotationconstraints) property of labels allows enabling or disabling specific label behaviors. Use these constraints to control which interaction types are available for each label. +The [`constraints`](https://ej2.syncfusion.com/angular/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. ## Label Editing From 361e49f3200d570bf80ae0a07ed3e411b4a4e7d5 Mon Sep 17 00:00:00 2001 From: "AzureAD\\PriyadharshiniKandha" Date: Wed, 15 Jul 2026 17:21:36 +0530 Subject: [PATCH 06/14] 1038294: core --- diagram-sdk/angular/umldiagram.md | 2 +- diagram-sdk/asp-net-core/automatic-layout.md | 4 +-- .../mvc-app-collaborative-editing.md | 4 +-- diagram-sdk/asp-net-core/commands.md | 24 ++++++++--------- diagram-sdk/asp-net-core/connectors.md | 26 +++++++++---------- diagram-sdk/asp-net-core/constraints.md | 2 +- diagram-sdk/asp-net-core/data-binding.md | 24 ++++++++--------- diagram-sdk/asp-net-core/group.md | 2 +- .../asp-net-core/interaction/appearance.md | 2 +- diagram-sdk/asp-net-core/labels.md | 10 +++---- diagram-sdk/asp-net-core/layers.md | 16 ++++++------ diagram-sdk/asp-net-core/nodes.md | 2 +- diagram-sdk/asp-net-core/ports.md | 6 ++--- diagram-sdk/asp-net-core/scroll-settings.md | 2 +- diagram-sdk/asp-net-core/serialization.md | 6 ++--- diagram-sdk/asp-net-core/shapes.md | 6 ++--- diagram-sdk/asp-net-core/swim-lane.md | 26 +++++++++---------- diagram-sdk/asp-net-core/umldiagram.md | 16 ++++++------ diagram-sdk/asp-net-core/undo-redo.md | 6 ++--- diagram-sdk/asp-net-core/user-handle.md | 8 +++--- 20 files changed, 97 insertions(+), 97 deletions(-) diff --git a/diagram-sdk/angular/umldiagram.md b/diagram-sdk/angular/umldiagram.md index 1036c37568..d69b0985b1 100644 --- a/diagram-sdk/angular/umldiagram.md +++ b/diagram-sdk/angular/umldiagram.md @@ -22,7 +22,7 @@ The UML class diagram shapes are explained as follows. ### Class -A class defines a group of objects that share common specifications, features, constraints, and semantics. To create a class object, the classifier should be defined using the [`class`](https://ej2.syncfusion.com/angular/documentation/api/diagram/umlClassifierShapeModel#class) notation. This notation serves as a foundational element in object-oriented programming, encapsulating the characteristics and behavior that objects belonging to the class will exhibit. +A class defines a group of objects that share common specifications, features, constraints, and semantics. To create a class object, the classifier should be defined using the [`class`](https://ej2.syncfusion.com/angular/documentation/api/diagram/classifiershape) notation. This notation serves as a foundational element in object-oriented programming, encapsulating the characteristics and behavior that objects belonging to the class will exhibit. Define the [`name`](https://ej2.syncfusion.com/angular/documentation/api/diagram/umlClassModel#name), [`attributes`](https://ej2.syncfusion.com/angular/documentation/api/diagram/umlClassModel#attributes), and [`methods`](https://ej2.syncfusion.com/angular/documentation/api/diagram/umlClassModel#methods) of the class using the class property of node. diff --git a/diagram-sdk/asp-net-core/automatic-layout.md b/diagram-sdk/asp-net-core/automatic-layout.md index b8f720d348..bade4edeb8 100644 --- a/diagram-sdk/asp-net-core/automatic-layout.md +++ b/diagram-sdk/asp-net-core/automatic-layout.md @@ -384,7 +384,7 @@ Complex hierarchical tree layout is the extended version of the hierarchical tre ### 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://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_ConnectionPointOrigin) property of layout is used to enable or disable the line distribution in layout. By default, ConnectionPointOrigin will be `SamePoint`. +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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.ConnectionPointOrigin.html) property of layout is used to enable or disable the line distribution in layout. By default, ConnectionPointOrigin will be `SamePoint`. ```cs @@ -398,7 +398,7 @@ Line distribution is used to arrange the connectors without overlapping in autom ### 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://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_Arrangement) 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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.ChildArrangement.html) property of layout is used to enable or disable the linear arrangement in layout. By default, Arrangement will be `Nonlinear`. N> Linear arrangement is applicable only for complex hierarchical tree layout. diff --git a/diagram-sdk/asp-net-core/collaborative-editing/mvc-app-collaborative-editing.md b/diagram-sdk/asp-net-core/collaborative-editing/mvc-app-collaborative-editing.md index 35e57e5c64..16af81f6c5 100644 --- a/diagram-sdk/asp-net-core/collaborative-editing/mvc-app-collaborative-editing.md +++ b/diagram-sdk/asp-net-core/collaborative-editing/mvc-app-collaborative-editing.md @@ -20,7 +20,7 @@ This guide explains how to configure SignalR Hub in an ASP.NET Core application ## How to create ASP.NET Core application -To create an ASP.NET Core application, follow the steps outlined in the ASP.NET Core [Getting Started](../../diagram/getting-started) documentation. +To create an ASP.NET Core application, follow the steps outlined in the ASP.NET Core [Getting Started](../getting-started) documentation. ## How to add packages in the ASP.NET Core application @@ -41,7 +41,7 @@ To enable real-time collaboration, configure SignalR HubConnection in your ASP.N * Connect to the `/diagramHub` endpoint with WebSocket transport `skipNegotiation: true` and enable automatic reconnect to handle transient network issues. * Subscribe to the `OnConnectedAsync` callback to receive the unique connection ID, confirming a successful handshake with the server. * Join a SignalR group by calling `JoinDiagram(roomName)` after connecting. This ensures updates are shared only with users in the same diagram session. -* Refer to Create ASP.NET Core [Simple Diagram](../../diagram/getting-started) +* Refer to Create ASP.NET Core [Simple Diagram](../getting-started) {% if page.publishingplatform == "aspnet-core" %} diff --git a/diagram-sdk/asp-net-core/commands.md b/diagram-sdk/asp-net-core/commands.md index 574b6104af..de8c3bfd69 100644 --- a/diagram-sdk/asp-net-core/commands.md +++ b/diagram-sdk/asp-net-core/commands.md @@ -583,15 +583,15 @@ diagram.bringToCenter(bound); The [`fitToPage`](https://ej2.syncfusion.com/documentation/api/diagram/#fittopage) command helps to fit the diagram content into the view with respect to either width, height, or at the whole. -The [`mode`](https://ej2.syncfusion.com/documentation/api/diagram/fitModes/) parameter defines whether the diagram has to be horizontally/vertically fits into the viewport with respect to width, height, or entire bounds of the diagram. +The [`mode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramFitOptions.html#Syncfusion_EJ2_Diagrams_DiagramFitOptions_Mode) parameter defines whether the diagram has to be horizontally/vertically fits into the viewport with respect to width, height, or entire bounds of the diagram. -The [`region`](https://ej2.syncfusion.com/documentation/api/diagram/diagramRegions/) parameter defines the region that has to be drawn as an image. +The [`region`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramFitOptions.html#Syncfusion_EJ2_Diagrams_DiagramFitOptions_Region) parameter defines the region that has to be drawn as an image. -The [`margin`](https://ej2.syncfusion.com/documentation/api/diagram/iFitOptions/) parameter defines the region/bounds of the diagram content that is to be fit into the view. +The [`margin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramFitOptions.html#Syncfusion_EJ2_Diagrams_DiagramFitOptions_Margin) parameter defines the region/bounds of the diagram content that is to be fit into the view. -The [`canZoomIn`](https://ej2.syncfusion.com/documentation/api/diagram/iFitOptions#canZoomIn/) parameter enables/disables zooming to fit the smaller content into a larger viewport. +The [`canZoomIn`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramFitOptions.html#Syncfusion_EJ2_Diagrams_DiagramFitOptions_CanZoomIn) parameter enables/disables zooming to fit the smaller content into a larger viewport. -The [`customBounds`](../api/diagram/iFitOpthttps://ej2.syncfusion.com/documentation/api/diagram/iFitOptions#customBounds) parameter the custom region that has to be fit into the viewport. +The [`customBounds`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramFitOptions.html#Syncfusion_EJ2_Diagrams_DiagramFitOptions_CustomBounds) parameter the custom region that has to be fit into the viewport. The following code illustrates how to execute `FitToPage` command. @@ -634,18 +634,18 @@ diagram.fitToPage({ ## Command manager -Diagram provides support to map or bind command execution with desired combination of key gestures. Diagram provides some built-in commands. [`CommandManager`](https://ej2.syncfusion.com/documentation/api/diagram/commandManager/) provides support to define custom commands. The custom commands are executed, when the specified key gesture is recognized. +Diagram provides support to map or bind command execution with desired combination of key gestures. Diagram provides some built-in commands. [`CommandManager`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramCommandManager.html) provides support to define custom commands. The custom commands are executed, when the specified key gesture is recognized. ## Custom command To define a custom command, specify the following properties: -* [`execute`](https://ej2.syncfusion.com/documentation/api/diagram/commandModel/#execute): A method to be executed. -* [`canExecute`](https://ej2.syncfusion.com/documentation/api/diagram/commandModel/#canexecute): A method to define whether the command can be executed at the moment. -* [`gesture`](https://ej2.syncfusion.com/documentation/api/diagram/commandModel/#gesture): A combination of [`keys`](https://ej2.syncfusion.com/documentation/api/diagram/keys/) and [`KeyModifiers`](https://ej2.syncfusion.com/documentation/api/diagram/keyModifiers/). -* [`parameter`](https://ej2.syncfusion.com/documentation/api/diagram/commandModel/#parameter): Defines any additional parameters that are required at runtime. -* [`name`](https://ej2.syncfusion.com/documentation/api/diagram/commandModel/#name): Defines the name of the command. +* [`execute`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramCommand.html#Syncfusion_EJ2_Diagrams_DiagramCommand_Execute): A method to be executed. +* [`canExecute`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramCommand.html#Syncfusion_EJ2_Diagrams_DiagramCommand_CanExecute): A method to define whether the command can be executed at the moment. +* [`gesture`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramCommand.html#Syncfusion_EJ2_Diagrams_DiagramCommand_Gesture): A combination of [`keys`](https://ej2.syncfusion.com/documentation/api/diagram/keys/) and [`KeyModifiers`](https://ej2.syncfusion.com/documentation/api/diagram/keyModifiers/). +* [`parameter`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramCommand.html#Syncfusion_EJ2_Diagrams_DiagramCommand_Parameter): Defines any additional parameters that are required at runtime. +* [`name`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramCommand.html#Syncfusion_EJ2_Diagrams_DiagramCommand_Name): Defines the name of the command. -To explore the properties of custom commands, refer to [`Commands`](https://ej2.syncfusion.com/documentation/api/diagram/command#commands). +To explore the properties of custom commands, refer to [`Commands`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramCommand.html). {% if page.publishingplatform == "aspnet-core" %} diff --git a/diagram-sdk/asp-net-core/connectors.md b/diagram-sdk/asp-net-core/connectors.md index 0dbcf7b9d4..6b49028e40 100644 --- a/diagram-sdk/asp-net-core/connectors.md +++ b/diagram-sdk/asp-net-core/connectors.md @@ -15,7 +15,7 @@ Connectors are objects used to create link between two points, nodes or ports to ## 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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html), refer to [`Connector Properties`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html). +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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html), refer to [`Connector Properties`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html#properties). ## Add connectors through connectors collection @@ -286,7 +286,7 @@ The path of the connector is defined with a collection of segments. There are th ## Straight -To create a straight line, specify the [`type`](https://ej2.syncfusion.com/documentation/api/diagram/segments/) of the segment as **straight** and add a straight segment to [`segments`](https://ej2.syncfusion.com/documentation/api/diagram/connector/#segments) collection and need to specify [`type`](https://ej2.syncfusion.com/documentation/api/diagram/connector/#type-Segments) for the connector. +To create a straight line, specify the [`type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html#Syncfusion_EJ2_Diagrams_DiagramConnector_Type) of the segment as **straight** and add a straight segment to [`segments`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html#Syncfusion_EJ2_Diagrams_DiagramConnector_Segments) collection and need to specify [`type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html#Syncfusion_EJ2_Diagrams_DiagramConnector_Type) for the connector. {% if page.publishingplatform == "aspnet-core" %} @@ -313,7 +313,7 @@ To create a straight line, specify the [`type`](https://ej2.syncfusion.com/docum -The [`point`](https://ej2.syncfusion.com/documentation/api/diagram/straightSegment/#point-PointModel) property of straight segment allows to define the end point of it. +The [`point`](https://ej2.syncfusion.com/documentation/api/diagram/straightSegment/#point) property of straight segment allows to define the end point of it. {% if page.publishingplatform == "aspnet-core" %} @@ -344,9 +344,9 @@ The [`point`](https://ej2.syncfusion.com/documentation/api/diagram/straightSegme Orthogonal segments is used to create segments that are perpendicular to each other. -Set the segment [`type`](https://ej2.syncfusion.com/documentation/api/diagram/segments/) as orthogonal to create a default orthogonal segment and need to specify [`type`](https://ej2.syncfusion.com/documentation/api/diagram/connector/#segments). +Set the segment [`type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html#Syncfusion_EJ2_Diagrams_DiagramConnector_Type) as orthogonal to create a default orthogonal segment and need to specify [`type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html#Syncfusion_EJ2_Diagrams_DiagramConnector_Type). -Multiple segments can be defined one after another. To create a connector with multiple segments, define and add the segments to [`connector.segments`](https://ej2.syncfusion.com/documentation/api/diagram/connector/#segments) collection. +Multiple segments can be defined one after another. To create a connector with multiple segments, define and add the segments to [`connector.segments`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Segments.html) collection. {% if page.publishingplatform == "aspnet-core" %} @@ -370,7 +370,7 @@ Multiple segments can be defined one after another. To create a connector with m -The [`length`](https://ej2.syncfusion.com/documentation/api/diagram/orthogonalSegment/#length) and [`direction`](https://ej2.syncfusion.com/documentation/api/diagram/orthogonalSegment/) properties allows to define the flow and length of segment. +The [`length`](https://ej2.syncfusion.com/documentation/api/diagram/orthogonalsegment#length) and [`direction`](https://ej2.syncfusion.com/documentation/api/diagram/orthogonalsegment#direction) properties allows to define the flow and length of segment. {% if page.publishingplatform == "aspnet-core" %} @@ -398,9 +398,9 @@ N> You need to mention the segment type as same as what you mentioned in connect ## 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://ej2.syncfusion.com/documentation/api/diagram/segments/) property. -To change the thumb size for all Orthogonal connectors, set the [`segmentThumbSize`](https://ej2.syncfusion.com/documentation/api/diagram/segments/) property in the diagram’s model. -To customize the thumb size for a specific connector, disable the [`InheritSegmentThumbSize`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.ConnectorConstraints.html) constraint, then set the desired [`segmentThumbSize`](https://ej2.syncfusion.com/documentation/api/diagram/segments/). +Orthogonal segment thumbs default to size 10. This can be adjusted globally or for individual connectors using the [`segmentThumbSize`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SegmentThumbShapes.html) property. +To change the thumb size for all Orthogonal connectors, set the [`segmentThumbSize`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SegmentThumbShapes.html) property in the diagram’s model. +To customize the thumb size for a specific connector, disable the [`InheritSegmentThumbSize`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.ConnectorConstraints.html#Syncfusion_EJ2_Diagrams_ConnectorConstraints_InheritSegmentThumbSize) constraint, then set the desired [`segmentThumbSize`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SegmentThumbShapes.html). {% if page.publishingplatform == "aspnet-core" %} @@ -452,7 +452,7 @@ Orthogonal segments are automatically re-routed, in order to avoid overlapping w Bezier segments are used to create curve segments and the curves are configurable either with the control points or with vectors. -To create a bezier segment, the [`segment.type`](https://ej2.syncfusion.com/documentation/api/diagram/segments/) is set as `bezier` and need to specify [`type`](https://ej2.syncfusion.com/documentation/api/diagram/connector/#type-Segments) for the connector. +To create a bezier segment, the [`segment.type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Segments.html) is set as `bezier` and need to specify [`type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Segments.html) for the connector. {% if page.publishingplatform == "aspnet-core" %} @@ -502,9 +502,9 @@ The [`vector1`](https://ej2.syncfusion.com/documentation/api/diagram/bezierSegme ## 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://ej2.syncfusion.com/documentation/api/diagram/segments/) property. -To change the thumb size for all Bezier connectors, set the [`segmentThumbSize`](https://ej2.syncfusion.com/documentation/api/diagram/segments/) property in the diagram’s model. -To customize the thumb size for a specific connector, disable the [`InheritSegmentThumbSize`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.ConnectorConstraints.html)constraint, then set the desired [`segmentThumbSize`](https://ej2.syncfusion.com/documentation/api/diagram/segments/). +Bezier segment thumbs default to size 10. This can be adjusted globally or for individual connectors using the [`segmentThumbSize`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SegmentThumbShapes.html) property. +To change the thumb size for all Bezier connectors, set the [`segmentThumbSize`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SegmentThumbShapes.html) property in the diagram’s model. +To customize the thumb size for a specific connector, disable the [`InheritSegmentThumbSize`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.ConnectorConstraints.html#Syncfusion_EJ2_Diagrams_ConnectorConstraints_InheritSegmentThumbSize)constraint, then set the desired [`segmentThumbSize`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SegmentThumbShapes.html). {% if page.publishingplatform == "aspnet-core" %} diff --git a/diagram-sdk/asp-net-core/constraints.md b/diagram-sdk/asp-net-core/constraints.md index c754f96628..fc83c955a5 100644 --- a/diagram-sdk/asp-net-core/constraints.md +++ b/diagram-sdk/asp-net-core/constraints.md @@ -47,7 +47,7 @@ Diagram constraints allows to enable or disable the following behaviors: -For more information about diagram constraints, refer to [`DiagramConstraints`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConstraints.htmll). +For more information about diagram constraints, refer to [`DiagramConstraints`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConstraints.html). ## Node constraints diff --git a/diagram-sdk/asp-net-core/data-binding.md b/diagram-sdk/asp-net-core/data-binding.md index d570133776..551ba036be 100644 --- a/diagram-sdk/asp-net-core/data-binding.md +++ b/diagram-sdk/asp-net-core/data-binding.md @@ -100,7 +100,7 @@ This feature allows to read the data source and perform add or edit or delete th * This feature allows to define the nodes and connectors collection in the data source and connectionDataSource respectively. -* You can set the data collection in the model’s dataSourceSettings [`dataManager`](https://ej2.syncfusion.com/documentation/api/diagram/connectionDataSourceModel/#datamanager) property. The nodes will be generated based on the data specified in the data source. +* You can set the data collection in the model’s dataSourceSettings [`dataManager`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramDataSource.html#Syncfusion_EJ2_Diagrams_DiagramDataSource_DataManager) property. The nodes will be generated based on the data specified in the data source. * You can set the connector collection in the model’s dataSourceSettings [`connectionDataSource`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnectionDataSource.html) property. @@ -108,19 +108,19 @@ This feature allows to read the data source and perform add or edit or delete th * 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. -* The dataSourceSettings [`crudAction’s`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramDataSource.html#Syncfusion_EJ2_Diagrams_DiagramDataSource_CrudAction) [`read`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnectionDataSource.html) property specifies the method, which is used to read the data source and it populates the nodes in the diagram. +* The dataSourceSettings [`crudAction’s`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramDataSource.html#Syncfusion_EJ2_Diagrams_DiagramDataSource_CrudAction) [`read`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramCrudAction.html#Syncfusion_EJ2_Diagrams_DiagramCrudAction_Read) property specifies the method, which is used to read the data source and it populates the nodes in the diagram. -* The connectionDataSource crudAction’s [`read`](https://ej2.syncfusion.com/documentation/api/diagram/dataSourceModel/#read) specifies the method, which is used to read the data source and it populates the connectors in the diagram. +* The connectionDataSource crudAction’s [`read`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramCrudAction.html#Syncfusion_EJ2_Diagrams_DiagramCrudAction_Read) specifies the method, which is used to read the data source and it populates the connectors in the diagram. * The dataSourceSettings’s [`id`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramDataSource.html#Syncfusion_EJ2_Diagrams_DiagramDataSource_Id) and connectionDataSource’s [`id`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnectionDataSource.html#Syncfusion_EJ2_Diagrams_DiagramConnectionDataSource_Id) properties are used to define the unique field of each JSON data. * The connectionDataSource’s [`sourceID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnectionDataSource.html#Syncfusion_EJ2_Diagrams_DiagramConnectionDataSource_SourceID) and [`targetID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnectionDataSource.html#Syncfusion_EJ2_Diagrams_DiagramConnectionDataSource_TargetID) properties are used to set the sourceID and targetID for connection data source item. -* The connectionDataSource’s [`sourcePointX`](https://ej2.syncfusion.com/documentation/api/diagram/dataSourceModel/), [`sourcePointY`](https://ej2.syncfusion.com/documentation/api/diagram/dataSourceModel/), [`targetPointX`](https://ej2.syncfusion.com/documentation/api/diagram/dataSourceModel/), and [`targetPointY`](https://ej2.syncfusion.com/documentation/api/diagram/dataSourceModel/) properties are used to define the sourcePoint and targetPoint values for connector from data source. +* The connectionDataSource’s [`sourcePointX`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnectionDataSource.html#Syncfusion_EJ2_Diagrams_DiagramConnectionDataSource_SourcePointX), [`sourcePointY`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnectionDataSource.html#Syncfusion_EJ2_Diagrams_DiagramConnectionDataSource_SourcePointY), [`targetPointX`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnectionDataSource.html#Syncfusion_EJ2_Diagrams_DiagramConnectionDataSource_TargetPointX), and [`targetPointY`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnectionDataSource.html#Syncfusion_EJ2_Diagrams_DiagramConnectionDataSource_TargetPointY) properties are used to define the sourcePoint and targetPoint values for connector from data source. -* The dataSourceSettings crudAction’s [`customFields`](https://ej2.syncfusion.com/documentation/api/diagram/dataSourceModel/#crudaction) property is used to maintain the additional information for nodes. +* The dataSourceSettings crudAction’s [`customFields`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramCrudAction.html#Syncfusion_EJ2_Diagrams_DiagramCrudAction_CustomFields) property is used to maintain the additional information for nodes. -* Similarly, connectionDataSource’s crudAction’s [`customFields`](https://ej2.syncfusion.com/documentation/api/diagram/dataSourceModel/#crudaction) is used to maintain the additional information for connectors. +* Similarly, connectionDataSource’s crudAction’s [`customFields`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramCrudAction.html#Syncfusion_EJ2_Diagrams_DiagramCrudAction_CustomFields) is used to maintain the additional information for connectors. ## How to perform Editing at runtime @@ -130,9 +130,9 @@ This feature allows to read the data source and perform add or edit or delete th ## InsertData -* The dataSourceSettings crudAction’s [`create`](https://ej2.syncfusion.com/documentation/api/diagram/dataSourceModel/#crudaction) property specifies the method, which is used to get the nodes added from the client-side to the server-side. +* The dataSourceSettings crudAction’s [`create`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramCrudAction.html#Syncfusion_EJ2_Diagrams_DiagramCrudAction_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/documentation/api/diagram/crudActionModel/) specifies the method, which is used to get the connectors added from the client-side to the server-side. +* The connectionDataSource crudAction’s [`create`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramCrudAction.html#Syncfusion_EJ2_Diagrams_DiagramCrudAction_Create) specifies the method, which is used to get the connectors added from the client-side to the server-side. {% if page.publishingplatform == "aspnet-core" %} @@ -165,9 +165,9 @@ diagram.insertData(); ## UpdateData -* The dataSourceSettings crudAction’s [`update`](https://ej2.syncfusion.com/documentation/api/diagram/dataSourceModel/#crudaction) property specifies the method, which is used to get the modified nodes from the client-side to the server-side. +* The dataSourceSettings crudAction’s [`update`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramCrudAction.html#Syncfusion_EJ2_Diagrams_DiagramCrudAction_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/documentation/api/diagram/crudActionModel/) specifies the method, which is used to get the modified connectors from the client-side to the server-side. +* The connectionDataSource crudAction’s [`update`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramCrudAction.html#Syncfusion_EJ2_Diagrams_DiagramCrudAction_Update) specifies the method, which is used to get the modified connectors from the client-side to the server-side. {% if page.publishingplatform == "aspnet-core" %} @@ -201,9 +201,9 @@ diagram.updateData(); ## DeleteData -* The dataSourceSettings crudAction’s [`destroy`](https://ej2.syncfusion.com/documentation/api/diagram/crudActionModel/) property specifies the method, which is used to get the deleted nodes from the client-side to the server-side. +* The dataSourceSettings crudAction’s [`destroy`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramCrudAction.html#Syncfusion_EJ2_Diagrams_DiagramCrudAction_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/documentation/api/diagram/crudActionModel/) specifies the method, which is used to get the deleted connectors from the client-side to the server-side. +* The connectionDataSource crudAction’s [`destroy`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramCrudAction.html#Syncfusion_EJ2_Diagrams_DiagramCrudAction_Destroy) specifies the method, which is used to get the deleted connectors from the client-side to the server-side. {% if page.publishingplatform == "aspnet-core" %} diff --git a/diagram-sdk/asp-net-core/group.md b/diagram-sdk/asp-net-core/group.md index 42c7084dba..a7fdfc7e90 100644 --- a/diagram-sdk/asp-net-core/group.md +++ b/diagram-sdk/asp-net-core/group.md @@ -171,7 +171,7 @@ Containers are used to automatically measure and arrange the size and position o * Stack panel is used to arrange its children in a single line or stack order, either vertically or horizontally. -* It controls spacing by setting margin properties of child and padding properties of group. By default, a stack panel’s [`orientation`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.html) is vertical. +* It controls spacing by setting margin properties of child and padding properties of group. By default, a stack panel’s [`orientation`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Orientation.html) is vertical. {% if page.publishingplatform == "aspnet-core" %} diff --git a/diagram-sdk/asp-net-core/interaction/appearance.md b/diagram-sdk/asp-net-core/interaction/appearance.md index 31ef91568a..df11ac9f1d 100644 --- a/diagram-sdk/asp-net-core/interaction/appearance.md +++ b/diagram-sdk/asp-net-core/interaction/appearance.md @@ -27,7 +27,7 @@ The [`offset`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diag ## Side -The [`side`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html#Syncfusion_EJ2_Diagrams_DiagramUserHandle_Side) property of [`userHandles`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html) is used to align the user handle by using the [`Top`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Side.html), [`Bottom`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Side.html), [`Left`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Side.html), and [`Right`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Side.html) options. +The [`side`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html#Syncfusion_EJ2_Diagrams_DiagramUserHandle_Side) property of [`userHandles`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html) is used to align the user handle by using the [`Top`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Side.html#Syncfusion_EJ2_Diagrams_Side_Top), [`Bottom`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Side.html#Syncfusion_EJ2_Diagrams_Side_Bottom), [`Left`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Side.html#Syncfusion_EJ2_Diagrams_Side_Left), and [`Right`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Side.html#Syncfusion_EJ2_Diagrams_Side_Right) options. ## Horizontal and vertical alignments diff --git a/diagram-sdk/asp-net-core/labels.md b/diagram-sdk/asp-net-core/labels.md index 44c43924cd..36d26a5c56 100644 --- a/diagram-sdk/asp-net-core/labels.md +++ b/diagram-sdk/asp-net-core/labels.md @@ -46,7 +46,7 @@ An annotation can be added to a node/connector by defining the annotation object ## Add annotations at runtime -* Annotations can be added at runtime by using the client-side method [`addLabels`](../api/diagram/#addLabels). +* Annotations can be added at runtime by using the client-side method [`addLabels`](https://ej2.syncfusion.com/documentation/api/diagram/#addlabels). * The annotation's [`ID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramNodeAnnotation.html#Syncfusion_EJ2_Diagrams_DiagramNodeAnnotation_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. @@ -90,7 +90,7 @@ diagram.dataBind(); ## Remove annotation -A collection of annotations can be removed from the node by using client-side method [`removeLabels`](../api/diagram/#removeLabels). +A collection of annotations can be removed from the node by using client-side method [`removeLabels`](https://ej2.syncfusion.com/documentation/api/diagram/#removelabels). {% if page.publishingplatform == "aspnet-core" %} @@ -130,7 +130,7 @@ diagram.removeLabels(diagram.nodes[0], annotation); ## Update annotation at runtime -You can change any annotation properties at runtime and update it through the client-side method [`dataBind`](../api/diagram/#dataBind). +You can change any annotation properties at runtime and update it through the client-side method [`dataBind`](https://ej2.syncfusion.com/documentation/api/diagram/#databind). {% if page.publishingplatform == "aspnet-core" %} @@ -549,13 +549,13 @@ Diagram allows annotation to be interacted by selecting, dragging, rotating, and 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; -* Programmatically - By using [`startTextEdit`](../api/diagram/#startTextEdit) method, edit the text through programmatically. +* Programmatically - By using [`startTextEdit`](https://ej2.syncfusion.com/documentation/api/diagram/#starttextedit) method, edit the text through programmatically. * Interactively 1. By double-clicking the annotation. 2. By selecting the item and pressing the F2 key. -Double-clicking any annotation will enable editing and the node enables first annotation editing. 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`](../api/diagram/#doubleClick--emittypeidoubleClickeventargs) event gets triggered. +Double-clicking any annotation will enable editing and the node enables first annotation editing. 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://ej2.syncfusion.com/documentation/api/diagram/#doubleclick) event gets triggered. ## Read-only annotations diff --git a/diagram-sdk/asp-net-core/layers.md b/diagram-sdk/asp-net-core/layers.md index b63ff40ddf..31d7ef21cc 100644 --- a/diagram-sdk/asp-net-core/layers.md +++ b/diagram-sdk/asp-net-core/layers.md @@ -315,7 +315,7 @@ let diagram: Diagram = new Diagram({ ### Add layer at runtime -Layers can be added at runtime by using the [`addLayer`](../api/diagram#addLayer) public method. +Layers can be added at runtime by using the [`addLayer`](https://ej2.syncfusion.com/documentation/api/diagram/#addlayer) public method. The layer's [`ID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramLayer.html#Syncfusion_EJ2_Diagrams_DiagramLayer_Id) property defines the ID of the layer, and its further used to find the layer at runtime and do any customization. @@ -346,7 +346,7 @@ diagram.addLayer({ ### Remove layer at runtime -Layers can be removed at runtime by using the [`removeLayer`](../api/diagram#removeLayer) public method. +Layers can be removed at runtime by using the [`removeLayer`](https://ej2.syncfusion.com/documentation/api/diagram/#removelayer) public method. ```typescript @@ -359,7 +359,7 @@ diagram.removeLayer([diagram.model.layers[i]]); ### moveObjects -Objects of the layers can be moved by using the [`moveObjects`](../api/diagram#moveObjects) public method. +Objects of the layers can be moved by using the [`moveObjects`](https://ej2.syncfusion.com/documentation/api/diagram/#moveobjects) public method. ```typescript @@ -372,7 +372,7 @@ diagram.moveObjects(['connector1'], 'layer2'); ### bringLayerForward -Layers can be moved forward at runtime by using the [`bringLayerForward`](../api/diagram#bringLayerForward) public method. +Layers can be moved forward at runtime by using the [`bringLayerForward`](https://ej2.syncfusion.com/documentation/api/diagram/#bringlayerforward) public method. ```typescript @@ -385,7 +385,7 @@ diagram.bringLayerForward('layer1'); ### sendLayerBackward -Layers can be moved backward at runtime by using the [`sendLayerBackward`](../api/diagram#sendLayerBackward) public method. +Layers can be moved backward at runtime by using the [`sendLayerBackward`](https://ej2.syncfusion.com/documentation/api/diagram/#sendlayerbackward) public method. ```typescript @@ -398,7 +398,7 @@ diagram.sendLayerBackward('layer1'); ### cloneLayer -Layers can be cloned with its object by using the [`cloneLayer`](../api/diagram#cloneLayer) public method. +Layers can be cloned with its object by using the [`cloneLayer`](https://ej2.syncfusion.com/documentation/api/diagram/#cloneLayer) public method. ```typescript @@ -411,7 +411,7 @@ diagram.cloneLayer('layer2'); ### getActiveLayer -To get the active layers back in diagram, use the [`getActiveLayer`](../api/diagram#getActiveLayer) public method. +To get the active layers back in diagram, use the [`getActiveLayer`](https://ej2.syncfusion.com/documentation/api/diagram/#getactivelayer) public method. ```typescript @@ -424,7 +424,7 @@ diagram.getActiveLayer(); ### setActiveLayer -Set the active layer by using the [`setActiveLayer`](../api/diagram#setActiveLayer) public method. +Set the active layer by using the [`setActiveLayer`](https://ej2.syncfusion.com/documentation/api/diagram/#setactivelayer) public method. ```typescript diff --git a/diagram-sdk/asp-net-core/nodes.md b/diagram-sdk/asp-net-core/nodes.md index dad2b7a04a..e17fea0f49 100644 --- a/diagram-sdk/asp-net-core/nodes.md +++ b/diagram-sdk/asp-net-core/nodes.md @@ -418,7 +418,7 @@ The nodes z-order property specifies the stack order of the node. A node with gr ## Data flow -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 find these connectors by using the [`getObject`](../api/diagram#getObject) method in the diagram. +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 find these connectors by using the [`getObject`](https://ej2.syncfusion.com/documentation/api/diagram/#getobject) method in the diagram. {% if page.publishingplatform == "aspnet-core" %} diff --git a/diagram-sdk/asp-net-core/ports.md b/diagram-sdk/asp-net-core/ports.md index f7bfd697c6..eb7c4d7588 100644 --- a/diagram-sdk/asp-net-core/ports.md +++ b/diagram-sdk/asp-net-core/ports.md @@ -55,7 +55,7 @@ To add a connection port, define the port object and add it to node’s ports co ## Add ports at runtime -Add ports at runtime by using the client-side method [`addPorts`](../api/diagram#addPorts). +Add ports at runtime by using the client-side method [`addPorts`](https://ej2.syncfusion.com/documentation/api/diagram/#addports). 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. @@ -123,7 +123,7 @@ diagram.addPorts(diagram.nodes[0], port); ## Remove ports at runtime -Remove ports at runtime by using client-side method [`removePorts`](../api/diagram#removePorts). +Remove ports at runtime by using client-side method [`removePorts`](https://ej2.syncfusion.com/documentation/api/diagram/#removeports). {% if page.publishingplatform == "aspnet-core" %} @@ -164,7 +164,7 @@ diagram.removePorts(diagram.nodes[0], ports); ## Update port at runtime -You can change any port properties at runtime and update it through the client-side method [`dataBind`](../api/diagram#dataBind). +You can change any port properties at runtime and update it through the client-side method [`dataBind`](https://ej2.syncfusion.com/documentation/api/diagram/#databind). {% if page.publishingplatform == "aspnet-core" %} diff --git a/diagram-sdk/asp-net-core/scroll-settings.md b/diagram-sdk/asp-net-core/scroll-settings.md index 8aa8ce652e..0c9d300ca6 100644 --- a/diagram-sdk/asp-net-core/scroll-settings.md +++ b/diagram-sdk/asp-net-core/scroll-settings.md @@ -249,4 +249,4 @@ Scrolling beyond any particular rectangular area can be restricted by using the ## UpdateViewport -The [`updateViewPort`](../api/diagram) method is used to update the diagram page and view size at runtime. \ No newline at end of file +The [`updateViewPort`](https://ej2.syncfusion.com/documentation/api/diagram/#updateviewport) method is used to update the diagram page and view size at runtime. \ No newline at end of file diff --git a/diagram-sdk/asp-net-core/serialization.md b/diagram-sdk/asp-net-core/serialization.md index 8eb5b60357..f70369e168 100644 --- a/diagram-sdk/asp-net-core/serialization.md +++ b/diagram-sdk/asp-net-core/serialization.md @@ -15,7 +15,7 @@ documentation: ug ## Save -The diagram is serialized as string while saving. The client-side method, [`saveDiagram`](../api/diagram#saveDiagram) helps to serialize the diagram as a string. +The diagram is serialized as string while saving. The client-side method, [`saveDiagram`](https://ej2.syncfusion.com/documentation/api/diagram/#savediagram) helps to serialize the diagram as a string. ```javascript var diagramElement = document.getElementById('element'); @@ -37,7 +37,7 @@ Diagram can also be saved as raster or vector image files. For more information ## Load -Diagram is loaded from the serialized string data by client-side method, [`loadDiagram`](../api/diagram#loadDiagram). +Diagram is loaded from the serialized string data by client-side method, [`loadDiagram`](https://ej2.syncfusion.com/documentation/api/diagram/#loaddiagram). ```javascript var diagramElement = document.getElementById('element'); @@ -52,7 +52,7 @@ N> Before loading a new diagram, existing diagram is cleared. ## Loaded Event -The [`loaded`](../api/diagram#loaded) event triggers when all diagram elements are loaded using [`loadDiagram`](../api/diagram#loadDiagram) method. You can use this event to customize diagram elements during the loading process. +The [`loaded`](https://ej2.syncfusion.com/documentation/api/diagram/#loaded) event triggers when all diagram elements are loaded using [`loadDiagram`](https://ej2.syncfusion.com/documentation/api/diagram/#loaddiagram) method. You can use this event to customize diagram elements during the loading process. ```javascript let diagram: Diagram = new Diagram ({ diff --git a/diagram-sdk/asp-net-core/shapes.md b/diagram-sdk/asp-net-core/shapes.md index 7737688141..64cd6d80fe 100644 --- a/diagram-sdk/asp-net-core/shapes.md +++ b/diagram-sdk/asp-net-core/shapes.md @@ -25,7 +25,7 @@ Diagram provides support to add different kind of nodes. They are as follows: ## Text -Texts can be added to the diagram as [`text`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) nodes. The shape property of the node allows 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. +Texts can be added to the diagram as [`text`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html#Syncfusion_EJ2_Diagrams_Shapes_Text) nodes. The shape property of the node allows 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. {% if page.publishingplatform == "aspnet-core" %} @@ -51,7 +51,7 @@ Texts can be added to the diagram as [`text`](https://help.syncfusion.com/cr/asp ## Image -Diagram allows to add images as [`image`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) 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. +Diagram allows to add images as [`image`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html#Syncfusion_EJ2_Diagrams_Shapes_Image) 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. {% if page.publishingplatform == "aspnet-core" %} @@ -141,7 +141,7 @@ The scale property of the node allows to stretch the image as you desired (eithe ## HTML -Html elements can be embedded in the diagram through [`Html`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) type node. The shape property of node allows to set the type of node and to create a HTML node it should be set as `HTML`. +Html elements can be embedded in the diagram through [`Html`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html#Syncfusion_EJ2_Diagrams_Shapes_HTML) type node. The shape property of node allows to set the type of node and to create a HTML node it should be set as `HTML`. 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. diff --git a/diagram-sdk/asp-net-core/swim-lane.md b/diagram-sdk/asp-net-core/swim-lane.md index 65c9ed64d3..7c13020bae 100644 --- a/diagram-sdk/asp-net-core/swim-lane.md +++ b/diagram-sdk/asp-net-core/swim-lane.md @@ -15,11 +15,11 @@ Swimlane is a type of diagram nodes, which is typically used to visualize the re ## Create a swimlane -To create a swimlane, the type of shape should be set as [`swimlane`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html). By Default swimlane's are arranged vertically. +To create a swimlane, the type of shape should be set as [`swimlane`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html#Syncfusion_EJ2_Diagrams_Shapes_SwimLane). By Default swimlane's are arranged vertically. ### Headers -Header was the primary element for swimlanes. The [`header`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) property of swimlane allows to define its textual description and to customize its appearance. +Header was the primary element for swimlanes. The [`header`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramSwimLane.html#Syncfusion_EJ2_Diagrams_DiagramSwimLane_Header) property of swimlane allows to define its textual description and to customize its appearance. N> By using this header, the swimlane interaction will be performed, like selection, dragging, etc. @@ -47,7 +47,7 @@ N> By using this header, the swimlane interaction will be performed, like select ### Customization of headers -The height and width of swimlane header can be customized with [`weight`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) and [`height`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) properties of swimlane header. Set fill color of header by using the [`style`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) property. The orientation of swimlane can be customized with the [`orientation`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) property of the header. +The height and width of swimlane header can be customized with [`weight`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramHeader.html#Syncfusion_EJ2_Diagrams_DiagramHeader_Width) and [`height`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramHeader.html#Syncfusion_EJ2_Diagrams_DiagramHeader_Height) properties of swimlane header. Set fill color of header by using the [`style`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramHeader.html#Syncfusion_EJ2_Diagrams_DiagramHeader_Style) property. The orientation of swimlane can be customized with the [`orientation`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramSwimLane.html#Syncfusion_EJ2_Diagrams_DiagramSwimLane_Orientation) property of the header. N> By default the swimlane orientation has Horizontal. @@ -93,13 +93,13 @@ Diagram provides the support to edit swimlane headers at runtime. The header edi 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. -The number of [`lanes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) can be added to swimlane. The lanes are automatically stacked inside swimlane based on the order they are added. +The number of [`lanes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramSwimLane.html#Syncfusion_EJ2_Diagrams_DiagramSwimLane_Lanes) can be added to swimlane. The lanes are automatically stacked inside swimlane based on the order they are added. ### Create an empty lane * The lanes `id` is used to define the name of the lane and its further used to find the lane at runtime and do any customization. -* The additional information to the lane is provided by using the [`addInfo`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) property of the lane. +* The additional information to the lane is provided by using the [`addInfo`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramLane.html#Syncfusion_EJ2_Diagrams_DiagramLane_AddInfo) property of the lane. {% if page.publishingplatform == "aspnet-core" %} @@ -125,7 +125,7 @@ The number of [`lanes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion ### Create lane header -* The [`header`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) property of lane allows to textually describe the lane and to customize the appearance of the description. +* The [`header`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramLane.html#Syncfusion_EJ2_Diagrams_DiagramLane_Header) property of lane allows to textually describe the lane and to customize the appearance of the description. {% if page.publishingplatform == "aspnet-core" %} @@ -151,8 +151,8 @@ The number of [`lanes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion ### Customizing lane header -* The size of lane can be controlled by using the [`width`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) and [`height`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) properties of the lane. -* The appearance of the lane can be set by using the [`style`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) properties. +* The size of lane can be controlled by using the [`width`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramLane.html#Syncfusion_EJ2_Diagrams_DiagramLane_Width) and [`height`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramLane.html#Syncfusion_EJ2_Diagrams_DiagramLane_Height) properties of the lane. +* The appearance of the lane can be set by using the [`style`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramLane.html#Syncfusion_EJ2_Diagrams_DiagramLane_Style) properties. {% if page.publishingplatform == "aspnet-core" %} @@ -192,7 +192,7 @@ diagram.dataBind(); ### Add children to lane -To add nodes to lane, you should add [`children`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) collection of the lane. +To add nodes to lane, you should add [`children`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramLane.html#Syncfusion_EJ2_Diagrams_DiagramLane_Children) collection of the lane. {% if page.publishingplatform == "aspnet-core" %} @@ -305,7 +305,7 @@ Diagram provides the support to edit Lane headers at runtime. The header editing ## Phase -Phase are the subprocess which will split each lane as horizontally or vertically based on the swimlane orientation. The multiple number of [`Phase`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) can be added to swimlane. +Phase are the subprocess which will split each lane as horizontally or vertically based on the swimlane orientation. The multiple number of [`Phase`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramPhase.html) can be added to swimlane. {% if page.publishingplatform == "aspnet-core" %} @@ -343,10 +343,10 @@ You can add the phase at runtime by using client side API method called `addPhas ### Customizing phase -* The length of region can be set by using the [`offset`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) property of the phase. -* Every phase region can be textually described with the [`header`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) property of the phase. +* The length of region can be set by using the [`offset`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramPhase.html#Syncfusion_EJ2_Diagrams_DiagramPhase_Offset) property of the phase. +* Every phase region can be textually described with the [`header`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramPhase.html#Syncfusion_EJ2_Diagrams_DiagramPhase_Header) property of the phase. * You can increase the width of phase by using [`phaseSize`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) property of swimlane. -* The additional information can be provided to the phase by using the [`addInfo`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html) property of the phase. +* The additional information can be provided to the phase by using the [`addInfo`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramPhase.html#Syncfusion_EJ2_Diagrams_DiagramPhase_AddInfo) property of the phase. {% if page.publishingplatform == "aspnet-core" %} diff --git a/diagram-sdk/asp-net-core/umldiagram.md b/diagram-sdk/asp-net-core/umldiagram.md index 41d233c375..e12ab36ffe 100644 --- a/diagram-sdk/asp-net-core/umldiagram.md +++ b/diagram-sdk/asp-net-core/umldiagram.md @@ -21,13 +21,13 @@ The UML class diagram shapes are explained as follows. ### Class -* A class defines a group of objects that share common specifications, features, constraints, and semantics. To create a class object, the classifier should be defined using the [`class`](https://ej2.syncfusion.com/documentation/api/diagram/umlClassifierShapeModel#classshape) notation. This notation serves as a foundational element in object-oriented programming, encapsulating the essential characteristics and behavior that objects belonging to the class will exhibit. +* A class defines a group of objects that share common specifications, features, constraints, and semantics. To create a class object, the classifier should be defined using the [`class`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUmlClass.html) notation. This notation serves as a foundational element in object-oriented programming, encapsulating the essential characteristics and behavior that objects belonging to the class will exhibit. -* Also, define the [`name`](https://ej2.syncfusion.com/documentation/api/diagram/umlClassModel#name), [`attributes`](https://ej2.syncfusion.com/documentation/api/diagram/umlClassModel#attributes), and [`methods`](https://ej2.syncfusion.com/documentation/api/diagram/umlClassModel#methods) of the class using the class property of node. +* Also, define the [`name`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUmlClass.html#Syncfusion_EJ2_Diagrams_DiagramUmlClass_Name), [`attributes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUmlClass.html#Syncfusion_EJ2_Diagrams_DiagramUmlClass_Attributes), and [`methods`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUmlClass.html#Syncfusion_EJ2_Diagrams_DiagramUmlClass_Methods) of the class using the class property of node. -* The attribute’s [`name`](https://ej2.syncfusion.com/documentation/api/diagram/umlClassAttributeModel#name), [`type`](https://ej2.syncfusion.com/documentation/api/diagram/umlClassAttributeModel#type), and [`scope`](https://ej2.syncfusion.com/documentation/api/diagram/umlClassAttributeModel#scope) properties allows to define the name, data type, and visibility of the attribute. +* The attribute’s [`name`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUmlClassAttribute.html#Syncfusion_EJ2_Diagrams_DiagramUmlClassAttribute_Name), [`type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUmlClassAttribute.html#Syncfusion_EJ2_Diagrams_DiagramUmlClassAttribute_Type), and [`scope`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUmlClassAttribute.html#Syncfusion_EJ2_Diagrams_DiagramUmlClassAttribute_Scope) properties allows to define the name, data type, and visibility of the attribute. -* The method’s [`name`](https://ej2.syncfusion.com/documentation/api/diagram/umlClassMethodModel#name), [`parameters`](https://ej2.syncfusion.com/documentation/api/diagram/umlClassMethodModel#parameters), [`type`](https://ej2.syncfusion.com/documentation/api/diagram/umlClassMethodModel#type), and [`scope`](https://ej2.syncfusion.com/documentation/api/diagram/umlClassMethodModel#scope) properties allows to define the name, parameter, return type, and visibility of the methods. +* The method’s [`name`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUmlClassMethod.html#Syncfusion_EJ2_Diagrams_DiagramUmlClassMethod_Name), [`parameters`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUmlClassMethod.html#Syncfusion_EJ2_Diagrams_DiagramUmlClassMethod_Parameters), [`type`](https://ej2.syncfusion.com/documentation/api/diagram/umlClassMethodModel#type), and [`scope`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUmlClassMethod.html#Syncfusion_EJ2_Diagrams_DiagramUmlClassMethod_Scope) properties allows to define the name, parameter, return type, and visibility of the methods. * The method parameters object properties allows to define the name and type of the parameter. @@ -58,9 +58,9 @@ The UML class diagram shapes are explained as follows. ### Interface -* An interface is a specific type of classifier that signifies a declaration of a cohesive set of public features and obligations. When creating an interface, it involves defining the classifier property using the [`interface`](https://ej2.syncfusion.com/documentation/api/diagram/umlClassifierShapeModel#interfaceshape) notation. This essential 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 is a specific type of classifier that signifies a declaration of a cohesive set of public features and obligations. When creating an interface, it involves defining the classifier property using the [`interface`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUmlInterface.html) notation. This essential 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. -* Also, define the [`name`](https://ej2.syncfusion.com/documentation/api/diagram/umlInterfaceModel#name), [`attributes`](https://ej2.syncfusion.com/documentation/api/diagram/umlInterfaceModel#attributes), and [`methods`](https://ej2.syncfusion.com/documentation/api/diagram/umlInterfaceModel#methods) of the interface using the interface property of the node. +* Also, define the [`name`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUmlInterface.html#Syncfusion_EJ2_Diagrams_DiagramUmlInterface_Name), [`attributes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUmlInterface.html#Syncfusion_EJ2_Diagrams_DiagramUmlInterface_Attributes), and [`methods`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUmlInterface.html#Syncfusion_EJ2_Diagrams_DiagramUmlInterface_Methods) of the interface using the interface property of the node. * The attribute’s name, type, and scope properties allows to define the name, data type, and visibility of the attribute. @@ -95,7 +95,7 @@ The UML class diagram shapes are explained as follows. ### Enumeration -* To establish an enumeration, designate the classifier property of the node as [enumeration](https://ej2.syncfusion.com/documentation/api/diagram/umlClassifierShapeModel#enumerationshape). Additionally, define the name and enumerate the members 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, named constants within a system. +* To establish an enumeration, designate the classifier property of the node as [enumeration](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUmlEnumeration.html). Additionally, define the name and enumerate the members 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, named constants within a system. * You can set a name for the enumeration members collection using the name property of members collection. @@ -304,7 +304,7 @@ Multiplicity is a definition of an inclusive interval of non-negative integers t * To set an optionality or cardinality for the connector source label, use optional property. -* The [`lowerBounds`](https://ej2.syncfusion.com/documentation/api/diagram/multiplicityLabelModel#lowerbounds) and [`upperBounds`](https://ej2.syncfusion.com/documentation/api/diagram/multiplicityLabelModel#upperbounds) could be natural constants or constant expressions evaluated to natural (non negative) number. Upper bound could be also specified as asterisk ‘\*’ which denotes unlimited number of elements. Upper bound should be greater than or equal to the lower bound. +* The [`lowerBounds`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramMultiplicityLabel.html#Syncfusion_EJ2_Diagrams_DiagramMultiplicityLabel_LowerBounds) and [`upperBounds`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramMultiplicityLabel.html#Syncfusion_EJ2_Diagrams_DiagramMultiplicityLabel_UpperBounds) could be natural constants or constant expressions evaluated to natural (non negative) number. Upper bound could be also specified as asterisk ‘\*’ which denotes unlimited number of elements. Upper bound should be greater than or equal to the lower bound. {% if page.publishingplatform == "aspnet-core" %} diff --git a/diagram-sdk/asp-net-core/undo-redo.md b/diagram-sdk/asp-net-core/undo-redo.md index 442dc3af48..eb6b9c9fc3 100644 --- a/diagram-sdk/asp-net-core/undo-redo.md +++ b/diagram-sdk/asp-net-core/undo-redo.md @@ -23,7 +23,7 @@ Undo/redo commands can be executed through shortcut keys. Shortcut key for undo ## Undo/redo through public APIs -The client-side methods [`undo`](../api/diagram) and [`redo`](../api/diagram) helps to revert/restore the changes. +The client-side methods [`undo`](https://ej2.syncfusion.com/documentation/api/diagram/#undo) and [`redo`](https://ej2.syncfusion.com/documentation/api/diagram/#redo) helps to revert/restore the changes. ``` javascript var diagram = document.getElementById("diagram").ej2_instances[0]; @@ -41,7 +41,7 @@ When a change in the diagram is reverted or restored (undo/redo), the historyCha 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. -The client-side method [`startGroupAction`](../api/diagram) is used to notify the diagram to start grouping the changes. The client-side method [`endGroupAction`](../api/diagram) is used to notify to stop grouping the changes. +The client-side method [`startGroupAction`](https://ej2.syncfusion.com/documentation/api/diagram/#startgroupaction) is used to notify the diagram to start grouping the changes. The client-side method [`endGroupAction`](https://ej2.syncfusion.com/documentation/api/diagram/#endgroupaction) is used to notify to stop grouping the changes. {% if page.publishingplatform == "aspnet-core" %} @@ -125,7 +125,7 @@ let redoStack = diagram.historyList.redoStack; ## History change event -The [`historyChange`](../api/diagram) event triggers, whenever the interaction of the node and connector is take place. +The [`historyChange`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Diagram.html#Syncfusion_EJ2_Diagrams_Diagram_HistoryChange) event triggers, whenever the interaction of the node and connector is take place. ```javascript var diagram = document.getElementById('container').ej2_instances[0]; diff --git a/diagram-sdk/asp-net-core/user-handle.md b/diagram-sdk/asp-net-core/user-handle.md index d63e63b426..8e2ad1db11 100644 --- a/diagram-sdk/asp-net-core/user-handle.md +++ b/diagram-sdk/asp-net-core/user-handle.md @@ -24,7 +24,7 @@ The [`offset`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diag ### Side -The [`side`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html#Syncfusion_EJ2_Diagrams_DiagramUserHandle_Side) property of [`userHandles`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html) is used to align the user handle by using the [`Top`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Side.html), [`Bottom`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Side.html), [`Left`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Side.html), and [`Right`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Side.html) options. +The [`side`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html#Syncfusion_EJ2_Diagrams_DiagramUserHandle_Side) property of [`userHandles`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html) is used to align the user handle by using the [`Top`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Side.html#Syncfusion_EJ2_Diagrams_Side_Top), [`Bottom`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Side.html#Syncfusion_EJ2_Diagrams_Side_Bottom), [`Left`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Side.html#Syncfusion_EJ2_Diagrams_Side_Left), and [`Right`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Side.html#Syncfusion_EJ2_Diagrams_Side_Right) options. ### Horizontal and vertical alignments @@ -291,7 +291,7 @@ N> Displacement will not be done if the alignment is set to be center. ### Tooltip support for User Handle The diagram provides support to show tooltip when the mouse hovers over any user handle. -To show tooltip on mouse over, the [`tooltip`](../api/diagram#tooltip) property of diagram model needs to be set with the tooltip [`content`](../api/diagram/diagramTooltip/#content) and [`position`](../api/diagram/diagramTooltip/#position) as shown in the following example. +To show tooltip on mouse over, the [`tooltip`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramDiagramTooltip.html) property of diagram model needs to be set with the tooltip [`content`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramDiagramTooltip.html#Syncfusion_EJ2_Diagrams_DiagramDiagramTooltip_Content) and [`position`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramDiagramTooltip.html#Syncfusion_EJ2_Diagrams_DiagramDiagramTooltip_Position) as shown in the following example. {% if page.publishingplatform == "aspnet-core" %} @@ -315,7 +315,7 @@ To show tooltip on mouse over, the [`tooltip`](../api/diagram#tooltip) property ### Tooltip support for Fixed User Handle -The diagram provides support to show tooltip when the mouse hovers over any fixed user handle. To show the tooltip on mouse over, the [`tooltip`](../api/diagram#tooltip) property of diagram model needs to be set with the tooltip [`content`](../api/diagram/diagramTooltip/#content) and [`position`](../api/diagram/diagramTooltip/#position) as shown in the following example. +The diagram provides support to show tooltip when the mouse hovers over any fixed user handle. To show the tooltip on mouse over, the [`tooltip`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramDiagramTooltip.html) property of diagram model needs to be set with the tooltip [`content`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramDiagramTooltip.html#Syncfusion_EJ2_Diagrams_DiagramDiagramTooltip_Content) and [`position`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramDiagramTooltip.html#Syncfusion_EJ2_Diagrams_DiagramDiagramTooltip_Position) as shown in the following example. {% if page.publishingplatform == "aspnet-core" %} @@ -339,7 +339,7 @@ The diagram provides support to show tooltip when the mouse hovers over any fixe ### Customizing Fixed User Handles with HTML Templates -Fixed user handles are interactive elements added to nodes and connectors. Their appearance can be customized using HTML templates. To render fixed user handle with HTML templates, we need to create an HTML element inside a `