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-expandedSubProcess.md b/diagram-sdk/angular/bpmn-shapes/bpmn-expandedSubProcess.md index dcb1260b3b..c8e3dc3859 100644 --- a/diagram-sdk/angular/bpmn-shapes/bpmn-expandedSubProcess.md +++ b/diagram-sdk/angular/bpmn-shapes/bpmn-expandedSubProcess.md @@ -18,7 +18,7 @@ The expanded subprocess automatically adjusts its size to accommodate child elem ### Create BPMN Expanded SubProcess -To create an expanded subprocess, configure the shape as [`activity`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/bpmnActivityModel) and set [`collapsed`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/bpmnSubProcessModel#collapsed) to false. Enable the [`AllowDrop`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/nodeConstraints) constraint to allow child nodes to be dropped inside the expanded subprocess container. +To create an expanded subprocess, configure the shape as [`activity`](https://ej2.syncfusion.com/angular/documentation/api/diagram/bpmnActivityModel) and set [`collapsed`](https://ej2.syncfusion.com/angular/documentation/api/diagram/bpmnSubProcessModel#collapsed) to false. Enable the [`AllowDrop`](https://ej2.syncfusion.com/angular/documentation/api/diagram/nodeConstraints) constraint to allow child nodes to be dropped inside the expanded subprocess container. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -34,7 +34,7 @@ To create an expanded subprocess, configure the shape as [`activity`](https://he ### Add BPMN Nodes into Expanded SubProcess -The [`processes`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/bpmnSubProcessModel#processes) property is an array collection that defines the child node values for the BPMN subprocess. This allows you to programmatically specify which BPMN elements should be contained within the expanded subprocess during initialization. +The [`processes`](https://ej2.syncfusion.com/angular/documentation/api/diagram/bpmnSubProcessModel#processes) property is an array collection that defines the child node values for the BPMN subprocess. This allows you to programmatically specify which BPMN elements should be contained within the expanded subprocess during initialization. The following code example demonstrates how to define child processes within an expanded subprocess: @@ -60,7 +60,7 @@ This interactive behavior ensures that the subprocess container always properly #### Add and Remove Processes Programmatically -The expanded subprocess supports dynamic process management through dedicated methods. Use the [`addProcess`](https://helpej2.syncfusion.com/angular/documentation/api/diagram#addprocess) method to add new child processes at runtime, and the [`removeProcess`](https://helpej2.syncfusion.com/angular/documentation/api/diagram#removeprocess) method to remove existing processes. These methods provide programmatic control over subprocess content without requiring manual manipulation. +The expanded subprocess supports dynamic process management through dedicated methods. Use the [`addProcess`](https://ej2.syncfusion.com/angular/documentation/api/diagram#addprocess) method to add new child processes at runtime, and the [`removeProcess`](https://ej2.syncfusion.com/angular/documentation/api/diagram#removeprocess) method to remove existing processes. These methods provide programmatic control over subprocess content without requiring manual manipulation. The following example demonstrates how to implement dynamic process addition and removal: 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..c299a7e0d5 100644 --- a/diagram-sdk/angular/bpmn-shapes/bpmn-textAnnotation.md +++ b/diagram-sdk/angular/bpmn-shapes/bpmn-textAnnotation.md @@ -14,17 +14,17 @@ domainurl: https://help.syncfusion.com/diagram-sdk A BPMN object can be associated with a text annotation that provides additional details about objects within a flow without affecting the actual process flow. Text annotations serve as documentation elements that help explain or clarify specific aspects of the BPMN diagram. -A TextAnnotation points to or references another BPMN shape through the [`textAnnotationTarget`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/bpmnTextAnnotation#textannotationtarget) property. When the target shape is moved or deleted, any TextAnnotations attached to the shape will automatically move or be deleted as well. This ensures that TextAnnotations remain associated with their target shapes, though the TextAnnotation can be repositioned to any offset from its target. +A TextAnnotation points to or references another BPMN shape through the [`textAnnotationTarget`](https://ej2.syncfusion.com/angular/documentation/api/diagram/bpmnTextAnnotation#textannotationtarget) property. When the target shape is moved or deleted, any TextAnnotations attached to the shape will automatically move or be deleted as well. This ensures that TextAnnotations remain associated with their target shapes, though the TextAnnotation can be repositioned to any offset from its target. The annotation element can be switched from one BPMN node to another by simply dragging the source end of the annotation connector to the desired BPMN node. By default, the TextAnnotation shape includes a connection to its target. ## 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://ej2.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. +To set the size for text annotation, use the [`width`](https://ej2.syncfusion.com/angular/documentation/api/diagram/node#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/diagram/node#height) properties of the node. -The [`offsetX`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/node#offsetx) and [`offsetY`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/node#offsety) properties determine the distance between the BPMN node and the TextAnnotation. +The [`offsetX`](https://ej2.syncfusion.com/angular/documentation/api/diagram/node#offsetx) and [`offsetY`](https://ej2.syncfusion.com/angular/documentation/api/diagram/node#offsety) properties determine the distance between the BPMN node and the TextAnnotation. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -76,7 +76,7 @@ The text annotation supports several directional orientations to optimize the vi ## Add Text Annotation at Runtime -Text annotations can be added dynamically using either the [`addTextAnnotation`](https://helpej2.syncfusion.com/angular/documentation/api/diagram#addtextannotation) method or the [`add`](https://helpej2.syncfusion.com/angular/documentation/api/diagram#add) method of the diagram. The following example shows how to use these methods to add a text annotation node programmatically. +Text annotations can be added dynamically using either the [`addTextAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/diagram#addtextannotation) method or the [`add`](https://ej2.syncfusion.com/angular/documentation/api/diagram#add) method of the diagram. The following example shows how to use these methods to add a text annotation node programmatically. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/diagram-sdk/angular/connectors/connectors.md b/diagram-sdk/angular/connectors/connectors.md index 6f10cf38b0..866f6dcd93 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/angular/documentation/api/diagram/diagramtools) property and you need to set the `connector` object by using the [`drawingObject`](https://ej2.syncfusion.com/angular/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/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..a69862fdd6 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" %} @@ -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 diff --git a/diagram-sdk/angular/grid-lines.md b/diagram-sdk/angular/grid-lines.md index 9dd91be2db..9144a7782e 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 @@ -32,7 +32,7 @@ The [`snapConstraints`](https://ej2.syncfusion.com/angular/documentation/api/dia N>If you want to enable snapping, then inject snapping module into the diagram. -To show only horizontal/vertical gridlines or to hide gridlines, refer to [`Constraints`](https://ej2.syncfusion.com/angular/documentation/api/diagram/snapSettings#constraints-SnapConstraints). +To show only horizontal/vertical gridlines or to hide gridlines, refer to [`Constraints`](https://ej2.syncfusion.com/angular/documentation/api/diagram/snapconstraints). ## Appearance @@ -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..ddb56187b2 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://ej2.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/labels/label-events.md b/diagram-sdk/angular/labels/label-events.md index d795ebcf72..2a5975b0ec 100644 --- a/diagram-sdk/angular/labels/label-events.md +++ b/diagram-sdk/angular/labels/label-events.md @@ -22,7 +22,7 @@ The diagram component provides several annotation-related events that fire durin ## KeyDown Event -The [`keyDown`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/iKeyEventArgs) event triggers whenever any key is pressed while interacting with the diagram. This event provides access to key information and allows modification of diagram elements based on keyboard input. +The [`keyDown`](https://ej2.syncfusion.com/angular/documentation/api/diagram/iKeyEventArgs) event triggers whenever any key is pressed while interacting with the diagram. This event provides access to key information and allows modification of diagram elements based on keyboard input. The event arguments include details about the pressed key, modifier keys, and the current diagram state. The following example demonstrates capturing the keyDown event to modify a node's fill color with each key press: @@ -40,7 +40,7 @@ The event arguments include details about the pressed key, modifier keys, and th ## KeyUp Event -The [`keyUp`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/iKeyEventArgs) event triggers when a pressed key is released. This event is useful for handling scenarios where the complete key press cycle (press and release) needs to be captured, such as implementing keyboard shortcuts or text input validation. +The [`keyUp`](https://ej2.syncfusion.com/angular/documentation/api/diagram/iKeyEventArgs) event triggers when a pressed key is released. This event is useful for handling scenarios where the complete key press cycle (press and release) needs to be captured, such as implementing keyboard shortcuts or text input validation. Unlike the keyDown event, keyUp ensures that the key action has been fully completed. The following example shows how to capture the keyUp event and modify the fill color of a node: @@ -58,7 +58,7 @@ Unlike the keyDown event, keyUp ensures that the key action has been fully compl ## Double Click Event -The [`doubleClick`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/iDoubleClickEventArgs) event triggers when users double-click on nodes, connectors, or the diagram surface. This interaction automatically activates annotation editing mode for the clicked element, allowing users to modify text content directly. +The [`doubleClick`](https://ej2.syncfusion.com/angular/documentation/api/diagram/iDoubleClickEventArgs) event triggers when users double-click on nodes, connectors, or the diagram surface. This interaction automatically activates annotation editing mode for the clicked element, allowing users to modify text content directly. The event provides information about the clicked element, mouse position, and current selection state. Developers can use this event to implement custom behaviors or prevent default annotation editing when needed: @@ -76,7 +76,7 @@ The event provides information about the clicked element, mouse position, and cu ## TextEdit Event -The [`textEdit`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/iTextEditEventArgs) event triggers when annotation text editing is completed and focus moves away from the text editor. This event occurs after users finish modifying annotation content and provides access to both the old and new text values. +The [`textEdit`](https://ej2.syncfusion.com/angular/documentation/api/diagram/iTextEditEventArgs) event triggers when annotation text editing is completed and focus moves away from the text editor. This event occurs after users finish modifying annotation content and provides access to both the old and new text values. This event is particularly useful for implementing text validation, formatting, or saving changes to external data sources: diff --git a/diagram-sdk/angular/labels/label-interaction.md b/diagram-sdk/angular/labels/label-interaction.md index ce5464e4d5..0c05bff8da 100644 --- a/diagram-sdk/angular/labels/label-interaction.md +++ b/diagram-sdk/angular/labels/label-interaction.md @@ -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/page-settings.md b/diagram-sdk/angular/page-settings.md index 8ed3b644cb..a0bd645e44 100644 --- a/diagram-sdk/angular/page-settings.md +++ b/diagram-sdk/angular/page-settings.md @@ -14,7 +14,7 @@ Page settings enable comprehensive customization of the diagram's canvas, includ ## Page size and appearance -The diagram page dimensions are controlled through the [`width`](https://ej2.syncfusion.com/angular/documentation/api/diagram/pageSettings#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/diagram/pageSettings#height) properties in page settings. The page appearance can be customized using the [`background`](https://ej2.syncfusion.com/angular/documentation/api/diagram/backgroundModel) property, which includes options for setting the background [`color`](https://ej2.syncfusion.com/angular/documentation/api/diagram/backgroundModel#color) and other visual properties. The [`margin`](https://ej2.syncfusion.com/angular/documentation/api/diagram/marginModel) property defines spacing around the page content. +The diagram page dimensions are controlled through the [`width`](https://ej2.syncfusion.com/angular/documentation/api/diagram/pageSettings#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/diagram/pageSettings#height) properties in page settings. The page appearance can be customized using the [`background`](https://ej2.syncfusion.com/angular/documentation/api/diagram/pagesettings#background) property, which includes options for setting the background [`color`](https://ej2.syncfusion.com/angular/documentation/api/diagram/backgroundModel#color) and other visual properties. The [`margin`](https://ej2.syncfusion.com/angular/documentation/api/diagram/pagesettings#margin) property defines spacing around the page content. For comprehensive details on all available properties, refer to the [`Page Settings`](https://ej2.syncfusion.com/angular/documentation/api/diagram/pageSettingsModel) API reference. diff --git a/diagram-sdk/angular/ports/ports-positioning.md b/diagram-sdk/angular/ports/ports-positioning.md index 25ab6fcce2..eafe5842c2 100644 --- a/diagram-sdk/angular/ports/ports-positioning.md +++ b/diagram-sdk/angular/ports/ports-positioning.md @@ -66,7 +66,7 @@ The following table shows all possible alignment combinations when using offset ## Adding margin spacing to ports -The [`Margin`](https://ej2.syncfusion.com/angular/documentation/api/diagram/marginModel) property applies additional spacing around ports using absolute pixel values. Margin creates blank space on any or all four sides of the port, allowing for precise positioning adjustments beyond the basic offset and alignment settings. +The [`Margin`](https://ej2.syncfusion.com/angular/documentation/api/diagram/pointportmodel#margin) property applies additional spacing around ports using absolute pixel values. Margin creates blank space on any or all four sides of the port, allowing for precise positioning adjustments beyond the basic offset and alignment settings. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} 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/scroll-settings.md b/diagram-sdk/angular/scroll-settings.md index 8f1b2ebc25..2d782744e2 100644 --- a/diagram-sdk/angular/scroll-settings.md +++ b/diagram-sdk/angular/scroll-settings.md @@ -10,17 +10,17 @@ domainurl: https://help.syncfusion.com/diagram-sdk # Scroll Settings in Angular Diagram Component -The diagram component provides comprehensive scrolling capabilities through both vertical and horizontal scrollbars, as well as mouse wheel navigation. The diagram's [`scrollSettings`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel) enable developers to monitor the current scroll status, viewport dimensions, zoom levels, and programmatically control diagram navigation. These settings are essential for managing large diagrams and providing smooth user interaction experiences. +The diagram component provides comprehensive scrolling capabilities through both vertical and horizontal scrollbars, as well as mouse wheel navigation. The diagram's [`scrollSettings`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel) enable developers to monitor the current scroll status, viewport dimensions, zoom levels, and programmatically control diagram navigation. These settings are essential for managing large diagrams and providing smooth user interaction experiences. ## Access and Customize Scroll Settings -Scroll settings in a diagram provide access to various properties that control navigation and viewport behavior, including [`horizontalOffset`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#horizontaloffset), [`verticalOffset`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#verticaloffset), [`viewPortWidth`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#viewportwidth), [`viewPortHeight`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#viewportheight), [`currentZoom`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#currentzoom), [`zoomFactor`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#zoomfactor), [`maxZoom`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#maxzoom), [`minZoom`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#minzoom), [`scrollLimit`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#scrolllimit), [`canAutoScroll`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#canautoscroll), [`autoScrollBorder`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/marginModel), [`autoScrollFrequency`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#autoscrollfrequency), [`padding`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/marginModel), and [`scrollableArea`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/rect). +Scroll settings in a diagram provide access to various properties that control navigation and viewport behavior, including [`horizontalOffset`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#horizontaloffset), [`verticalOffset`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#verticaloffset), [`viewPortWidth`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#viewportwidth), [`viewPortHeight`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#viewportheight), [`currentZoom`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#currentzoom), [`zoomFactor`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#zoomfactor), [`maxZoom`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#maxzoom), [`minZoom`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#minzoom), [`scrollLimit`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#scrolllimit), [`canAutoScroll`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#canautoscroll), [`autoScrollBorder`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollsettingsmodel#autoscrollborder), [`autoScrollFrequency`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#autoscrollfrequency), [`padding`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollsettingsmodel#padding), and [`scrollableArea`](https://ej2.syncfusion.com/angular/documentation/api/diagram/rect). -These properties enable developers to read and adjust the scroll status, scroll offsets, zoom levels, and scrolling behavior. For a comprehensive overview of all available properties, refer to the [`Scroll Settings`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel) API documentation. +These properties enable developers to read and adjust the scroll status, scroll offsets, zoom levels, and scrolling behavior. For a comprehensive overview of all available properties, refer to the [`Scroll Settings`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel) API documentation. ## Define Scroll Offset -The diagram allows developers to set the initial scroll position before loading, ensuring that any desired region of a large diagram is immediately visible. The initial scroll position can be programmatically configured using the [`horizontalOffset`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#horizontaloffset) and [`verticalOffset`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#verticaloffset) properties of the scroll settings. The following code illustrates how to programmatically set the diagram's initial scroll position upon initialization, with `scrollLimit` defined as 'Infinity' to enable infinite scrolling. To learn more about scroll limits, refer to the [`scrollLimit`](https://helpej2.syncfusion.com/angular/documentation/diagram/scroll-settings#scroll-limit) section. +The diagram allows developers to set the initial scroll position before loading, ensuring that any desired region of a large diagram is immediately visible. The initial scroll position can be programmatically configured using the [`horizontalOffset`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#horizontaloffset) and [`verticalOffset`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#verticaloffset) properties of the scroll settings. The following code illustrates how to programmatically set the diagram's initial scroll position upon initialization, with `scrollLimit` defined as 'Infinity' to enable infinite scrolling. To learn more about scroll limits, refer to the [`scrollLimit`](https://ej2.syncfusion.com/angular/documentation/diagram/scroll-settings#scroll-limit) section. In the example below, the vertical scrollbar is positioned 100 pixels down, and the horizontal scrollbar is positioned 100 pixels to the right. @@ -42,12 +42,12 @@ The diagram provides multiple methods to update scroll offsets during runtime: * **Scrollbar**: Use the horizontal and vertical scrollbars of the diagram for direct navigation. * **Mouse wheel**: Scroll vertically with the mouse wheel. Hold the Shift key while scrolling to scroll horizontally. -* **Pan Tool**: Activate the ZoomPan [`tool`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/diagramTools) in the diagram to scroll by panning. +* **Pan Tool**: Activate the ZoomPan [`tool`](https://ej2.syncfusion.com/angular/documentation/api/diagram/diagramTools) in the diagram to scroll by panning. * **Touch**: Use touch pad gestures for smooth scrolling on touch-enabled devices. ### Programmatically Update Scroll Offset -The scroll offsets of the diagram can be programmatically modified by customizing the [`horizontalOffset`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#horizontaloffset) and [`verticalOffset`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#verticaloffset) properties of [`Scroll Settings`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel) at runtime. The following code demonstrates how to change the scroll offsets dynamically. +The scroll offsets of the diagram can be programmatically modified by customizing the [`horizontalOffset`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#horizontaloffset) and [`verticalOffset`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#verticaloffset) properties of [`Scroll Settings`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel) at runtime. The following code demonstrates how to change the scroll offsets dynamically. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -81,11 +81,11 @@ Keyboard shortcuts offer a quick and efficient way to zoom the diagram without u ### Programmatically Update Zoom -The current zoom level of the diagram can be programmatically modified by utilizing the [`zoomTo`](https://helpej2.syncfusion.com/angular/documentation/api/diagram#zoomto) public method. +The current zoom level of the diagram can be programmatically modified by utilizing the [`zoomTo`](https://ej2.syncfusion.com/angular/documentation/api/diagram#zoomto) public method. #### ZoomOptions -The [`zoomTo`](https://helpej2.syncfusion.com/angular/documentation/api/diagram#zoomto) method accepts one parameter: [`zoomOptions`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/zoomOptions). Within zoomOptions, developers can specify the [`focusPoint`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/pointModel), [`type`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/zoomTypes), and [`zoomFactor`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/zoomOptions#zoomfactor). +The [`zoomTo`](https://ej2.syncfusion.com/angular/documentation/api/diagram#zoomto) method accepts one parameter: [`zoomOptions`](https://ej2.syncfusion.com/angular/documentation/api/diagram/zoomOptions). Within zoomOptions, developers can specify the [`focusPoint`](https://ej2.syncfusion.com/angular/documentation/api/diagram/pointModel), [`type`](https://ej2.syncfusion.com/angular/documentation/api/diagram/zoomTypes), and [`zoomFactor`](https://ej2.syncfusion.com/angular/documentation/api/diagram/zoomOptions#zoomfactor). The following example demonstrates how to zoom in and zoom out of the diagram using the zoomTo method: @@ -113,13 +113,13 @@ The autoscroll behavior activates automatically when any of the following action - Connector control point editing - Rubber band selection -The client-side event [`ScrollChange`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/iScrollChangeEventArgs) is triggered when autoscroll occurs, enabling custom behavior implementation. Refer to the [`scrollChange event`](https://helpej2.syncfusion.com/angular/documentation/diagram/scroll-settings#scroll-change-event) section for more information. +The client-side event [`ScrollChange`](https://ej2.syncfusion.com/angular/documentation/api/diagram/iScrollChangeEventArgs) is triggered when autoscroll occurs, enabling custom behavior implementation. Refer to the [`scrollChange event`](https://ej2.syncfusion.com/angular/documentation/diagram/scroll-settings#scroll-change-event) section for more information. -Autoscroll behavior can be enabled or disabled using the [`canAutoScroll`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#canautoscroll) property of the diagram. +Autoscroll behavior can be enabled or disabled using the [`canAutoScroll`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#canautoscroll) property of the diagram. ## Autoscroll Border -The autoscroll border defines the maximum distance from the mouse pointer to the diagram edge that triggers autoscroll behavior. By default, this distance is set to 15 pixels for all sides (left, right, top, and bottom). This distance can be customized using the [`autoScrollBorder`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/marginModel) property of the scroll settings. +The autoscroll border defines the maximum distance from the mouse pointer to the diagram edge that triggers autoscroll behavior. By default, this distance is set to 15 pixels for all sides (left, right, top, and bottom). This distance can be customized using the [`autoScrollBorder`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollsettingsmodel#autoscrollborder) property of the scroll settings. The following example demonstrates how to configure autoscroll with custom border settings: @@ -139,13 +139,13 @@ N> To use autoscroll, the scrollLimit should be set as 'Infinity'. ## Controlling Autoscroll Speed -The frequency of automatic scrolling in the Diagram component during autoscroll behavior can be precisely controlled. The scrolling frequency can be adjusted from slow and smooth to quick and rapid to suit different requirements. Configure this by setting a value in milliseconds to the [`autoScrollFrequency`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#autoscrollfrequency) property within the scrollSettings, allowing precise control over autoscroll timing. +The frequency of automatic scrolling in the Diagram component during autoscroll behavior can be precisely controlled. The scrolling frequency can be adjusted from slow and smooth to quick and rapid to suit different requirements. Configure this by setting a value in milliseconds to the [`autoScrollFrequency`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel#autoscrollfrequency) property within the scrollSettings, allowing precise control over autoscroll timing. ![AutoscrollFrequency](./images/AutoscrollFrequency.gif) ## 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://ej2.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. @@ -155,7 +155,7 @@ The `scrollLimit` property in scroll settings helps to define these scrolling bo ### Scrollable Area -Scrolling beyond a particular rectangular area can be restricted by using the [`scrollableArea`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/rect) property in [`scrollSettings`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel). To restrict scrolling beyond a custom region, set the scrollLimit to "limited" and define the desired bounds in the `scrollableArea` property. +Scrolling beyond a particular rectangular area can be restricted by using the [`scrollableArea`](https://ej2.syncfusion.com/angular/documentation/api/diagram/rect) property in [`scrollSettings`](https://ej2.syncfusion.com/angular/documentation/api/diagram/scrollSettingsModel). To restrict scrolling beyond a custom region, set the scrollLimit to "limited" and define the desired bounds in the `scrollableArea` property. The following code example illustrates how to specify the scroll limit and customize the scrollable area: @@ -173,7 +173,7 @@ The following code example illustrates how to specify the scroll limit and custo ## Scroll Padding -The [`padding`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/marginModel) property of the scroll settings allows developers to extend the scrollable region based on the scroll limit. This property is useful for adding extra space around the diagram content, making it easier to navigate and interact with elements near the edges. +The [`padding`](https://ej2.syncfusion.com/angular/documentation/api/diagram/marginModel) property of the scroll settings allows developers to extend the scrollable region based on the scroll limit. This property is useful for adding extra space around the diagram content, making it easier to navigate and interact with elements near the edges. The following code example illustrates how to set scroll padding for the diagram region: @@ -191,7 +191,7 @@ The following code example illustrates how to set scroll padding for the diagram ## Reset Scroll and Zoom Settings -The [`reset`](https://helpej2.syncfusion.com/angular/documentation/api/diagram#reset) method resets both the zoom level and scroller offsets to their default values. This is useful for returning the diagram to its initial state after user interactions. +The [`reset`](https://ej2.syncfusion.com/angular/documentation/api/diagram#reset) method resets both the zoom level and scroller offsets to their default values. This is useful for returning the diagram to its initial state after user interactions. ```javascript //Resets the scroll and zoom to default values @@ -200,7 +200,7 @@ The [`reset`](https://helpej2.syncfusion.com/angular/documentation/api/diagram#r ## Update Viewport Dimensions -The [`updateViewPort`](https://helpej2.syncfusion.com/angular/documentation/api/diagram#updateviewport) method is used to update the dimensions of the diagram viewport. This method is typically called when the diagram container size changes or when dynamic resizing is required. +The [`updateViewPort`](https://ej2.syncfusion.com/angular/documentation/api/diagram#updateviewport) method is used to update the dimensions of the diagram viewport. This method is typically called when the diagram container size changes or when dynamic resizing is required. ```javascript //Updates diagram viewport dimensions @@ -211,7 +211,7 @@ The [`updateViewPort`](https://helpej2.syncfusion.com/angular/documentation/api/ ### Scroll Change Event -The [`scrollChange`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/iScrollChangeEventArgs) event is triggered whenever the scrollbar is updated. This event occurs during actions such as zooming in, zooming out, using the mouse wheel, or panning. The following example shows how to capture and handle the `scrollChange` event: +The [`scrollChange`](https://ej2.syncfusion.com/angular/documentation/api/diagram/iScrollChangeEventArgs) event is triggered whenever the scrollbar is updated. This event occurs during actions such as zooming in, zooming out, using the mouse wheel, or panning. The following example shows how to capture and handle the `scrollChange` event: {% tabs %} {% highlight ts tabtitle="app.component.ts" %} 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/swimlane/lane.md b/diagram-sdk/angular/swimlane/lane.md index db7e0bb197..6ebd15faa7 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. @@ -170,7 +170,7 @@ Here is an example of how to apply these constraints: ### Additional information storage -Additional information storage for lanes is similar to nodes. Additional information about a specific lane can be stored by using the [`addInfo`](https://ej2.syncfusion.com/angular/documentation/api/diagram/laneModel#addInfo) property. +Additional information storage for lanes is similar to nodes. Additional information about a specific lane can be stored by using the [`addInfo`](https://ej2.syncfusion.com/angular/documentation/api/diagram/laneModel#addinfo) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} 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: 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..1130bc4120 100644 --- a/diagram-sdk/angular/tooltip.md +++ b/diagram-sdk/angular/tooltip.md @@ -30,7 +30,7 @@ The following images illustrate how the diagram displays node information during ### Disable default tooltip -The default tooltip that appears while interacting with nodes can be disabled by removing the tooltip constraints from the [`selectorConstraints`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/selectorConstraints) of the [`selectedItems`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/selectorModel) property of the diagram. +The default tooltip that appears while interacting with nodes can be disabled by removing the tooltip constraints from the [`selectorConstraints`](https://ej2.syncfusion.com/angular/documentation/api/diagram/selectorConstraints) of the [`selectedItems`](https://ej2.syncfusion.com/angular/documentation/api/diagram/selectorModel) property of the diagram. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -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://ej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltip#content) and [`position`](https://ej2.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" %} @@ -62,7 +62,7 @@ The tooltip can be customized for each node and connector. To show different too ## Inherit diagram tooltip -The diagram supports inheriting the diagram tooltip when the mouse hovers over any node or connector. To show a tooltip on mouse over, set the diagram's [`tooltip`](https://helpej2.syncfusion.com/angular/documentation/api/diagram#tooltip) property 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). Ensure that the nodes and connectors have their constraints set to **InheritTooltip**, as shown in the following example. +The diagram supports inheriting the diagram tooltip when the mouse hovers over any node or connector. To show a tooltip on mouse over, set the diagram's [`tooltip`](https://ej2.syncfusion.com/angular/documentation/api/diagram#tooltip) property with the tooltip [`content`](https://ej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltip#content) and [`position`](https://ej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltip#position). Ensure that the nodes and connectors have their constraints set to **InheritTooltip**, as shown in the following example. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -78,7 +78,7 @@ The diagram supports inheriting the diagram tooltip when the mouse hovers over a ### Disable tooltip at runtime -The tooltip on mouse over can be disabled by assigning the [`tooltip`](https://helpej2.syncfusion.com/angular/documentation/api/diagram#tooltip) property as `null`. The following code example illustrates how to disable the mouse over tooltip at runtime. +The tooltip on mouse over can be disabled by assigning the [`tooltip`](https://ej2.syncfusion.com/angular/documentation/api/diagram#tooltip) property as `null`. The following code example illustrates how to disable the mouse over tooltip at runtime. ```typescript @@ -102,9 +102,9 @@ export class AppComponent { The tooltip feature has been implemented to support Ports, providing the ability to display information or descriptions when the mouse hovers over them. -To display tooltips on mouseover, set the desired tooltip [`content`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltip#content) by utilizing the [`tooltip`](https://helpej2.syncfusion.com/angular/documentation/api/diagram#tooltip) property. +To display tooltips on mouseover, set the desired tooltip [`content`](https://ej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltip#content) by utilizing the [`tooltip`](https://ej2.syncfusion.com/angular/documentation/api/diagram#tooltip) property. -Tooltips for Ports can be enabled or disabled using the [`PortConstraints`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/port#constraints) Tooltip property. +Tooltips for Ports can be enabled or disabled using the [`PortConstraints`](https://ej2.syncfusion.com/angular/documentation/api/diagram/port#constraints) Tooltip property. ```ts let ports: [{ @@ -169,7 +169,7 @@ The following code example illustrates how to add formatted HTML content to the ### Tooltip relative to object -The diagram provides support to show tooltip around the node/connector that is hovered by the mouse. The tooltip can be aligned by using the [`position`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltip#position) property of the tooltip. The [`relativeMode`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltip#relativemode) property of the tooltip defines whether the tooltip has to be displayed around the object or at the mouse position. +The diagram provides support to show tooltip around the node/connector that is hovered by the mouse. The tooltip can be aligned by using the [`position`](https://ej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltip#position) property of the tooltip. The [`relativeMode`](https://ej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltip#relativemode) property of the tooltip defines whether the tooltip has to be displayed around the object or at the mouse position. The following code example illustrates how to position the tooltip around object. @@ -187,7 +187,7 @@ The following code example illustrates how to position the tooltip around object ### Tooltip relative to mouse position -To display the tooltip at mouse position, need to set **mouse** option to the [`relativeMode`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltip#relativemode) property of the tooltip. +To display the tooltip at mouse position, need to set **mouse** option to the [`relativeMode`](https://ej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltip#relativemode) property of the tooltip. The following code example illustrates how to show tooltip at mouse position. @@ -205,7 +205,7 @@ The following code example illustrates how to show tooltip at mouse position. ## Tooltip animation -To animate the tooltip, a set of specific animation effects are available, and it can be controlled by using the [`animation`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/diagramtooltip#animation) property. The animation property also allows you to set delay, duration, and various other effects of your choice. +To animate the tooltip, a set of specific animation effects are available, and it can be controlled by using the [`animation`](https://ej2.syncfusion.com/angular/documentation/api/diagram/diagramtooltip#animation) property. The animation property also allows you to set delay, duration, and various other effects of your choice. Refer the following sample where we used zoomIn animation for tooltip open and zoomOut animation for tooltip close with delay and duration. @@ -223,7 +223,7 @@ Refer the following sample where we used zoomIn animation for tooltip open and z ## Sticky tooltip -A sticky tooltip will remain visible even after you move the mouse away from the node or connector. You can activate this feature by setting the [`isSticky`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltipModel#issticky) property of the tooltip. +A sticky tooltip will remain visible even after you move the mouse away from the node or connector. You can activate this feature by setting the [`isSticky`](https://ej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltipModel#issticky) property of the tooltip. The following example shows how to render sticky tooltip. @@ -241,7 +241,7 @@ The following example shows how to render sticky tooltip. ## Hide tooltip pointer -The [`showTipPointer`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltipModel#showtippointer) property allows to control the visibility of tooltip pointer. By default, the `showTipPointer` is set as true. +The [`showTipPointer`](https://ej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltipModel#showtippointer) property allows to control the visibility of tooltip pointer. By default, the `showTipPointer` is set as true. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -257,7 +257,7 @@ The [`showTipPointer`](https://helpej2.syncfusion.com/angular/documentation/api/ ## Tooltip size -By default, the size of the tooltip is calculated based on its content. If you want to customize the size, you can use the [`width`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltipModel#width) and [`height`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltipModel#height) properties of the tooltip. +By default, the size of the tooltip is calculated based on its content. If you want to customize the size, you can use the [`width`](https://ej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltipModel#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/diagram/diagramTooltipModel#height) properties of the tooltip. The following code example shows how to set the size for the tooltip: @@ -275,7 +275,7 @@ The following code example shows how to set the size for the tooltip: ## Show/Hide tooltip at runtime -You can show or hide the tooltip dynamically using a button click with the [`showTooltip`](https://helpej2.syncfusion.com/angular/documentation/api/diagram#showtooltip) and [`hideTooltip`](https://helpej2.syncfusion.com/angular/documentation/api/diagram#hidetooltip) methods of the diagram. This allows you to control the tooltip visibility programmatically rather than relying on user hover actions. In some cases, you may want to display the tooltip without requiring the user to hover over the object. +You can show or hide the tooltip dynamically using a button click with the [`showTooltip`](https://ej2.syncfusion.com/angular/documentation/api/diagram#showtooltip) and [`hideTooltip`](https://ej2.syncfusion.com/angular/documentation/api/diagram#hidetooltip) methods of the diagram. This allows you to control the tooltip visibility programmatically rather than relying on user hover actions. In some cases, you may want to display the tooltip without requiring the user to hover over the object. The following example demonstrates how to show or hide the tooltip at runtime: @@ -294,8 +294,8 @@ The following example demonstrates how to show or hide the tooltip at runtime: ## Tooltip for Annotation Tooltips can be added to annotations to display additional information on mouseover. -To display tooltips on mouseover, set the desired tooltip text to the [`tooltip`](https://helpej2.syncfusion.com/angular/documentation/api/diagram#tooltip) property of the annotation. -Tooltips for Annotations can be enabled or disabled by setting the [`AnnotationConstraints`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/annotationConstraints#AnnotationConstraints) property as [`Tooltip`](https://helpej2.syncfusion.com/angular/documentation/api/diagram#tooltip). +To display tooltips on mouseover, set the desired tooltip text to the [`tooltip`](https://ej2.syncfusion.com/angular/documentation/api/diagram#tooltip) property of the annotation. +Tooltips for Annotations can be enabled or disabled by setting the [`AnnotationConstraints`](https://ej2.syncfusion.com/angular/documentation/api/diagram/annotationConstraints#AnnotationConstraints) property as [`Tooltip`](https://ej2.syncfusion.com/angular/documentation/api/diagram#tooltip). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/diagram-sdk/angular/umldiagram.md b/diagram-sdk/angular/umldiagram.md index 1036c37568..638279da24 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. @@ -216,7 +216,7 @@ The shape multiplicity's [`source`](https://ej2.syncfusion.com/angular/documenta To set optionality or cardinality for the connector source label, use the [`optional`](https://ej2.syncfusion.com/angular/documentation/api/diagram/multiplicityLabelModel#optional) property. -The [`lowerBounds`](https://ej2.syncfusion.com/angular/documentation/api/diagram/multiplicityLabelModel#lowerBounds) and [`upperBounds`](https://ej2.syncfusion.com/angular/documentation/api/diagram/multiplicityLabelModel#upperBounds) can be natural constants or constant expressions evaluated to natural (non-negative) numbers. Upper bound can also be specified as asterisk '*' which denotes unlimited number of elements. Upper bound should be greater than or equal to the lower bound. +The [`lowerBounds`](https://ej2.syncfusion.com/angular/documentation/api/diagram/multiplicityLabelModel#lowerbounds) and [`upperBounds`](https://ej2.syncfusion.com/angular/documentation/api/diagram/multiplicityLabelModel#upperbounds) can be natural constants or constant expressions evaluated to natural (non-negative) numbers. Upper bound can also be specified as asterisk '*' which denotes unlimited number of elements. Upper bound should be greater than or equal to the lower bound. The following code example illustrates how to customize the multiplicity. diff --git a/diagram-sdk/angular/umlsequencediagram.md b/diagram-sdk/angular/umlsequencediagram.md index 02db7129e2..a88e66649e 100644 --- a/diagram-sdk/angular/umlsequencediagram.md +++ b/diagram-sdk/angular/umlsequencediagram.md @@ -55,7 +55,7 @@ Participants can be displayed in two forms: #### Participant Stereotypes -The [UmlSequenceParticipantStereotype](https://ej2.syncfusion.com/documentation/api/diagram/umlSequenceParticipantStereotype) enum defines the visual style of a participant. A stereotype helps show the role of a participant in the interaction. +The [UmlSequenceParticipantStereotype](https://ej2.syncfusion.com/angular/documentation/api/diagram/umlSequenceParticipantStereotype) enum defines the visual style of a participant. A stereotype helps show the role of a participant in the interaction. | Stereotype | Description | Shape | |---|---|---| @@ -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. diff --git a/diagram-sdk/asp-net-core/automatic-layout.md b/diagram-sdk/asp-net-core/automatic-layout.md index b8f720d348..f33e7436b3 100644 --- a/diagram-sdk/asp-net-core/automatic-layout.md +++ b/diagram-sdk/asp-net-core/automatic-layout.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Automatic Layout in Syncfusion® ASP.NET Core Diagram Component description: Learn here all about Automatic Layout in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -26,8 +26,6 @@ Diagram provides support to auto-arrange the nodes in the diagram area that is r The hierarchical tree layout arranges nodes in a tree-like structure, where the nodes in the hierarchical layout may have multiple parents. There is no need to specify the layout root. To arrange the nodes in a hierarchical structure, specify the layout [`type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramLayout.html#Syncfusion_EJ2_Diagrams_DiagramLayout_Type) as `HierarchicalTree`. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/Hierarchical/tagHelper %} @@ -37,16 +35,6 @@ The hierarchical tree layout arranges nodes in a tree-like structure, where the {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Hierarchical.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/Hierarchical/Hierarchical.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript function getNodeDefaults(obj, diagram) { @@ -84,8 +72,6 @@ The radial tree layout arranges nodes on a virtual concentric circle around a ro To arrange nodes in a radial tree structure, set the [`type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramLayout.html#Syncfusion_EJ2_Diagrams_DiagramLayout_Type) of the layout as `RadialTree`. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/radial/tagHelper %} @@ -95,23 +81,11 @@ To arrange nodes in a radial tree structure, set the [`type`](https://help.syncf {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Radial.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/radial/radial.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Organizational Chart An organizational chart is a diagram that displays the structure of an organization and relationships. To create an organizational chart, the [`type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramLayout.html#Syncfusion_EJ2_Diagrams_DiagramLayout_Type) of layout should be set as an `OrganizationalChart`. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/Organizational/tagHelper %} @@ -121,16 +95,6 @@ An organizational chart is a diagram that displays the structure of an organizat {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Organizational.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/Organizational/Organizational.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -154,8 +118,6 @@ Set chart orientations, chart types, and offset to be left between parent and ch * node: Parent node to that options are to be customized. * options: Object to set the customizable properties. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/Organizational/tagHelper %} @@ -165,16 +127,6 @@ Set chart orientations, chart types, and offset to be left between parent and ch {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Organizational.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/Organizational/Organizational.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript function getLayoutInfo(node, options, orientation, type) { @@ -211,8 +163,6 @@ The following table illustrates the different chart orientations and chart types ||Right|Arranges the children vertically at the right side of the parent.|![Vertical Right](images/vright.jpg)| ||Alternate|Arranges the children vertically at both left and right sides of the parent.|![Vertical Alternate](images/vAlternate.jpg)| -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/Organizational/tagHelper %} @@ -222,16 +172,6 @@ The following table illustrates the different chart orientations and chart types {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Organizational.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/Organizational/Organizational.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript function getLayoutInfo(node, options, orientation, type) { @@ -247,8 +187,6 @@ The following table illustrates the different chart orientations and chart types Assistants are child item that have a different relationship with the parent node. They are laid out in a dedicated part of the tree. A node can be specified as an assistant of its parent by adding it to the `assistants` property of the argument “options”. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/Organizational/tagHelper %} @@ -258,17 +196,6 @@ Assistants are child item that have a different relationship with the parent nod {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Organizational.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/Organizational/Organizational.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - - ```javascript function getLayoutInfo(node, options, orientation, type) { if (node.data['Role'] === 'General Manager') { @@ -289,8 +216,6 @@ The symmetric layout has been formed using nodes position by closer together or The layout’s [`springLength`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramLayout.html#Syncfusion_EJ2_Diagrams_DiagramLayout_SpringLength) defined as how long edges should be, ideally. This will be the resting length for the springs. Edge attraction and vertex repulsion forces to be defined by using layout’s [`springFactor`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramLayout.html#Syncfusion_EJ2_Diagrams_DiagramLayout_SpringFactor), the more sibling nodes repel each other. The relative positions do not change any more from one iteration to the next. The number of iterations can be specified by using layout’s [`maxIteration`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramLayout.html#Syncfusion_EJ2_Diagrams_DiagramLayout_MaxIteration). -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/symmetric/tagHelper %} @@ -300,15 +225,6 @@ The layout’s [`springLength`](https://help.syncfusion.com/cr/aspnetcore-js2/Sy {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Symmetric.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/symmetric/symmetric.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Mind Map layout A mind map is a diagram that displays the nodes as a spider diagram organizes information around a central concept. To create mind map, the [`type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramLayout.html#Syncfusion_EJ2_Diagrams_DiagramLayout_Type) of layout should be set as `MindMap`. @@ -336,8 +252,6 @@ N> If you want to use mind map layout in diagram, you need to inject MindMap in The following code example illustrates how to create an mindmap layout. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/mindMap/tagHelper %} @@ -347,21 +261,10 @@ The following code example illustrates how to create an mindmap layout. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="MindMap.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/mindMap/mindMap.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Complex hierarchical tree Complex hierarchical tree layout is the extended version of the hierarchical tree layout. The child has two or more parents. To create a complex hierarchical tree, the [`type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramLayout.html#Syncfusion_EJ2_Diagrams_DiagramLayout_Type) of layout should be set as `ComplexHierarchicalTree`. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/ComplexHierarchicalTree/tagHelper %} @@ -371,20 +274,9 @@ Complex hierarchical tree layout is the extended version of the hierarchical tre {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="ComplexHierarchicalTree.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/ComplexHierarchicalTree/ComplexHierarchicalTree.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - - ### 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 +290,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. @@ -435,8 +327,6 @@ Diagram provides support to align the layout within any custom rectangular area. The layout can be aligned anywhere over the layout bounds/viewport using the [`horizontalAlignment`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramLayout.html#Syncfusion_EJ2_Diagrams_DiagramLayout_HorizontalAlignment) and [`verticalAlignment`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramLayout.html#Syncfusion_EJ2_Diagrams_DiagramLayout_VerticalAlignment) properties of the layout. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/layoutAlign/tagHelper %} @@ -446,16 +336,6 @@ The layout can be aligned anywhere over the layout bounds/viewport using the [`h {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="LayoutAlign.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/layoutAlign/layoutAlign.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### Layout spacing @@ -465,8 +345,6 @@ Layout provides support to add space horizontally and vertically between the nod Layout provides support to add some blank space between the layout bounds/viewport and the layout. The [`margin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.LayoutMarginLayout.html) property of the layout allows to set the blank space. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/layoutMargin/tagHelper %} @@ -476,16 +354,6 @@ Layout provides support to add some blank space between the layout bounds/viewpo {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="LayoutMargin.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/layoutMargin/layoutMargin.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### Layout orientation @@ -502,8 +370,6 @@ Diagram provides support to customize the [`orientation`](https://help.syncfusi N> In the diagram the default orientation is TopToBottom. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/orientation/tagHelper %} @@ -513,23 +379,11 @@ N> In the diagram the default orientation is TopToBottom. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Orientation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/orientation/orientation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### Fixed node Layout provides support to arrange the nodes with reference to the position of a fixed node and set it to the [`fixedNode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramLayout.html#Syncfusion_EJ2_Diagrams_DiagramLayout_FixedNode) of the layout property. This is helpful when you try to expand or collapse a node. It might be expected that the position of the double-clicked node should not be changed. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/fixedNode/tagHelper %} @@ -539,23 +393,11 @@ Layout provides support to arrange the nodes with reference to the position of a {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="FixedNode.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/fixedNode/fixedNode.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### Expand and collapse Diagram allows to expand/collapse the subtrees of a layout. The node’s isExpanded property allows you to expand or collapse its children. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/expandCollapse/tagHelper %} @@ -565,16 +407,6 @@ Diagram allows to expand/collapse the subtrees of a layout. The node’s isExpan {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="ExpandCollapse.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/expandCollapse/expandCollapse.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript function getNodeDefaults(obj, diagram) { @@ -616,8 +448,6 @@ Diagram allows to refresh the layout at runtime. To refresh the layout, refer to The setNodeTemplate function is provided for the purpose of customizing nodes. It will be called for each node on node initialization. In this function, the node style and its properties can be customized and can bind the custom JSON with node. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/setNodeTemplate/tagHelper %} @@ -627,16 +457,6 @@ The setNodeTemplate function is provided for the purpose of customizing nodes. I {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="SetNodeTemplate.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/setNodeTemplate/setNodeTemplate.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript function setNodeTemplate(obj, diagram) { diff --git a/diagram-sdk/asp-net-core/bpmn-shapes.md b/diagram-sdk/asp-net-core/bpmn-shapes.md index 2e93041f95..267ecf3114 100644 --- a/diagram-sdk/asp-net-core/bpmn-shapes.md +++ b/diagram-sdk/asp-net-core/bpmn-shapes.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Bpmn Shapes in Syncfusion® ASP.NET Core Diagram Component description: Learn here all about Bpmn Shapes in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -15,8 +15,6 @@ BPMN shapes are used to represent the internal business procedure in a graphical N> If you want to use BPMN shapes in diagram, you need to inject BpmnDiagrams in the diagram. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/End/tagHelper %} @@ -26,16 +24,6 @@ N> If you want to use BPMN shapes in diagram, you need to inject BpmnDiagrams in {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="End.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/End/end.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - N> The default value for the property `shape` is “event”. @@ -65,8 +53,6 @@ An [`event`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagra The event property of the node allows to define the type of the event. The default value of the event is **start**. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/trigger/tagHelper %} @@ -76,16 +62,6 @@ The event property of the node allows to define the type of the event. The defau {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Trigger.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/trigger/trigger.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - Event triggers are notated as icons inside the circle and they represent the specific details of the process. The [`trigger`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramBpmnEvent.html#Syncfusion_EJ2_Diagrams_DiagramBpmnEvent_Trigger) property of the node allows you to set the type of trigger and by default, it is set as **none**. The following table illustrates the type of event triggers. @@ -109,8 +85,6 @@ Event triggers are notated as icons inside the circle and they represent the spe Gateway is used to control the flow of a process and it is represented as a diamond shape. To create a gateway, the shape property of the node should be set as “gateway” and the [`gateway`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramBpmnGateway.html) property can be set with any of the appropriate gateways. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/gateWay/tagHelper %} @@ -120,16 +94,6 @@ Gateway is used to control the flow of a process and it is represented as a diam {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="GateWay.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/gateWay/gateWay.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - N> By default, the `gateway` will be set as **none**. @@ -156,8 +120,6 @@ There are two types of activities. They are listed as follows: To create a BPMN activity, set the shape as **activity**. You also need to set the type of the BPMN activity by using the activity property of the node. By default, the type of the activity is set as **task**. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/Activity/tagHelper %} @@ -167,16 +129,6 @@ To create a BPMN activity, set the shape as **activity**. You also need to set t {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Activity.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/Activity/Activity.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - The different activities of BPMN process are listed as follows. @@ -184,8 +136,6 @@ The different activities of BPMN process are listed as follows. The [`task`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramBpmnTask.html) property of the node allows to define the type of task such as sending, receiving, user based task, etc. By default, the [`type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramBpmnTask.html#Syncfusion_EJ2_Diagrams_DiagramBpmnTask_Type) property of task is set as **none**. The following code illustrates how to create different types of BPMN tasks. The events property of tasks allow to represent these results as an event attached to the task. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/task/tagHelper %} @@ -195,16 +145,6 @@ The [`task`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagra {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Task.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/task/task.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - The various types of BPMN tasks are tabulated as follows. @@ -223,8 +163,6 @@ The various types of BPMN tasks are tabulated as follows. A [`sub-process`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramBpmnSubProcess.html) is a group of tasks, which is used to hide or reveal details of additional levels using the [`collapsed`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_EJ2_Diagrams_DiagramBpmnSubProcess_Collapsed) property. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/subProcess/tagHelper %} @@ -234,16 +172,6 @@ A [`sub-process`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.D {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="SubProcess.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/subProcess/subProcess.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - The different types of subprocess are as follows: @@ -254,8 +182,6 @@ The different types of subprocess are as follows: A subprocess is defined as an event subprocess, when it is triggered by an event. An event subprocess is placed within another subprocess which is not part of the normal flow of its parent process. You can set event to a subprocess with the [`event`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_EJ2_Diagrams_DiagramBpmnSubProcess_Events) and [`trigger`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramBpmnEvent.html#Syncfusion_EJ2_Diagrams_DiagramBpmnEvent_Trigger) property of the subprocess. The [`type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_EJ2_Diagrams_DiagramBpmnSubProcess_Type) property of subprocess allows you to define the type of subprocess whether it should be event subprocess or transaction subprocess. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/subEvent/tagHelper %} @@ -265,16 +191,6 @@ A subprocess is defined as an event subprocess, when it is triggered by an event {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="SubEvent.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/subEvent/subEvent.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Transaction subprocess @@ -288,8 +204,6 @@ A subprocess is defined as an event subprocess, when it is triggered by an event * You can also use define ports and labels to subprocess events by using event’s ports and labels properties. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/Transaction/tagHelper %} @@ -298,16 +212,6 @@ A subprocess is defined as an event subprocess, when it is triggered by an event {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/Transaction/Transaction.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Transaction.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/Transaction/Transaction.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Process Processes is an array collection that defines the children values for BPMN subprocess. @@ -316,8 +220,6 @@ Processes is an array collection that defines the children values for BPMN subpr [`Loop`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_EJ2_Diagrams_DiagramBpmnSubProcess_Loop) is a task that is internally being looped. The loop property of task allows to define the type of loop. The default value for `loop` is **none**. You can define the loop property in subprocess BPMN shape as shown in the following code. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/loop/tagHelper %} @@ -327,16 +229,6 @@ Processes is an array collection that defines the children values for BPMN subpr {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Loop.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/loop/loop.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - The following table contains various types of BPMN loops. @@ -350,8 +242,6 @@ The following table contains various types of BPMN loops. [`Compensation`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_EJ2_Diagrams_DiagramBpmnSubProcess_Compensation) is triggered, when operation is partially failed and enabled it with the compensation property of the task and the subprocess. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/compensation/tagHelper %} @@ -361,23 +251,11 @@ The following table contains various types of BPMN loops. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Compensation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/compensation/compensation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Call A [`call`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramBpmnTask.html#Syncfusion_EJ2_Diagrams_DiagramBpmnTask_Call) activity is a global subprocess that is reused at various points of the business flow and set it with the call property of the task. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/call/tagHelper %} @@ -387,23 +265,11 @@ A [`call`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Call.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/call/call.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Adhoc An adhoc subprocess is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and set it with the [`adhoc`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_EJ2_Diagrams_DiagramBpmnSubProcess_Adhoc) property of subprocess. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/adhoc/tagHelper %} @@ -413,23 +279,11 @@ An adhoc subprocess is a group of tasks that are executed in any order or skippe {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Adhoc.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/adhoc/adhoc.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Boundary Boundary represents the type of task that is being processed. The [`boundary`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_EJ2_Diagrams_DiagramBpmnSubProcess_Boundary) property of subprocess allows to define the type of boundary. By default, it is set as **default**. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/boundary/tagHelper %} @@ -439,16 +293,6 @@ Boundary represents the type of task that is being processed. The [`boundary`](h {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Boundary.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/boundary/boundary.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - The following table contains various types of BPMN boundaries. @@ -462,8 +306,6 @@ The following table contains various types of BPMN boundaries. A data object represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [`data object`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramBpmnDataObject.html), set the shape as **DataObject** and the type property defines whether data is an input or an output. You can create multiple instances of data object with the collection property of data. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/dataObject/tagHelper %} @@ -473,16 +315,6 @@ A data object represents information flowing through the process, such as data p {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="DataObject.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/dataObject/dataObject.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - The following table contains various representation of BPMN data object. @@ -496,8 +328,6 @@ The following table contains various representation of BPMN data object. Datasource is used to store or access data associated with a business process. To create a datasource, set the shape as **datasource**. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/Datasource/tagHelper %} @@ -507,16 +337,6 @@ Datasource is used to store or access data associated with a business process. T {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Datasource.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/Datasource/Datasource.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Artifact @@ -543,8 +363,6 @@ Artifact is used to show additional information about a process in order to make * The `offsetX` and `offsetY` properties are used to set the distance between the BPMN node and the TextAnnotation. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/textAnnotation/tagHelper %} @@ -554,23 +372,11 @@ Artifact is used to show additional information about a process in order to make {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="TextAnnotation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/textAnnotation/textAnnotation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Group A group is used to frame a part of the diagram, shows that elements included in it logically belong together and does not have any other semantics other than organizing elements. To create a group, the shape property of the node should be set as **group**. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/group/tagHelper %} @@ -580,16 +386,6 @@ A group is used to frame a part of the diagram, shows that elements included in {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Group.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/group/group.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## BPMN flows @@ -605,8 +401,6 @@ A group is used to frame a part of the diagram, shows that elements included in The association property allows you to define the type of association. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/association/tagHelper %} @@ -616,16 +410,6 @@ The association property allows you to define the type of association. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Association.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/association/association.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - The following table demonstrates the visual representation of association flows. @@ -647,8 +431,6 @@ A `Sequence` flow shows the order in which the activities are performed in a BPM The sequence property allows to define the type of sequence. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/Sequence/tagHelper %} @@ -658,16 +440,6 @@ The sequence property allows to define the type of sequence. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Sequence.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/Sequence/Sequence.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - The following table contains various representation of sequence flows. @@ -689,8 +461,6 @@ A `Message` flow shows the flow of messages between two participants and is repr The message property allows to define the type of message. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/Message/tagHelper %} @@ -700,16 +470,6 @@ The message property allows to define the type of message. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Message.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/bpmn/Message/Message.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - The following table contains various representation of message flows. 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..c15afbb6c0 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 @@ -1,4 +1,4 @@ ---- +--- layout: post title: Collaborative Editing in ASP.NET Core Diagram | Syncfusion description: Checkout and learn to configure SignalR and Redis for real-time collaborative editing in Syncfusion® ASP.NET Core Diagram. @@ -20,18 +20,16 @@ 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 Open the NuGet Package Manager and install the following packages. * Microsoft.AspNetCore.SignalR.Client -{% if page.publishingplatform == "aspnet-core" %} + * Syncfusion.EJ2.AspNet.Core -{% elsif page.publishingplatform == "aspnet-mvc" %} -* Syncfusion.EJ2.MVC5 -{% endif %} + ## Configure SignalR service in ASP.NET Core application @@ -41,25 +39,13 @@ 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) - -{% if page.publishingplatform == "aspnet-core" %} +* Refer to Create ASP.NET Core [Simple Diagram](../getting-started) {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/collaborative-editing/config/tagHelper %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/collaborative-editing/config/razor %} -{% endhighlight %} -{% endtabs %} -{% endif %} - >**Notes:** >* Use a unique `roomName` per diagram (e.g., a diagram ID) to isolate sessions. >* If `WebSockets` may be unavailable, remove `SkipNegotiation` so SignalR can fall back to SSE or Long Polling. @@ -75,42 +61,21 @@ To enable real-time collaboration, configure SignalR HubConnection in your ASP.N * Each remote user listens for ReceiveData and applies the incoming changes with [setDiagramUpdates](), keeping their view synchronized without reloading the full diagram. * Enable the `enableCollaborativeEditing` property on the diagram to treat multi-step edits (like drag/resize sequences or batch changes) as a single operation. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/collaborative-editing/realtimeChanges/tagHelper %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/collaborative-editing/realtimeChanges/razor %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Conflict policy (optimistic concurrency) in ASP.NET Core application To maintain consistency during collaborative editing, each user applies incoming changes using `setDiagramUpdates`. After applying changes, the ASP.NET Core sample synchronizes its `userVersion` with the `serverVersion` through the `UpdateVersion` event. This version-based approach ensures conflicts are resolved without locking, allowing real-time responsiveness while preserving data integrity. Add the following code in the ASP.NET Core application: -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/collaborative-editing/conflict/tagHelper %} {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/collaborative-editing/conflict/razor %} -{% endhighlight %} -{% endtabs %} -{% endif %} diff --git a/diagram-sdk/asp-net-core/commands.md b/diagram-sdk/asp-net-core/commands.md index 574b6104af..ea9b9df4cd 100644 --- a/diagram-sdk/asp-net-core/commands.md +++ b/diagram-sdk/asp-net-core/commands.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Commands in ASP.NET Core Diagram Component | Syncfusion® description: Learn here all about Commands in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -50,8 +50,6 @@ Alignment commands enables to align the selected or defined objects such as node -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/align/tagHelper %} @@ -61,16 +59,6 @@ Alignment commands enables to align the selected or defined objects such as node {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Align.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/align/align.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript var diagram = document.getElementById("container").ej2_instances[0]; @@ -100,8 +88,6 @@ The factor to distribute the shapes [`DistributeOptions`](https://ej2.syncfusion * Bottom: Distributes the objects based on the distance between the bottom sides of the adjacent objects. * Middle: Distributes the objects based on the distance between the vertical center of the adjacent objects. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/distribute/tagHelper %} @@ -111,16 +97,6 @@ The factor to distribute the shapes [`DistributeOptions`](https://ej2.syncfusion {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Distribute.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/distribute/distribute.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript var diagram = document.getElementById("container").ej2_instances[0]; @@ -138,14 +114,12 @@ diagram.distribute('RightToLeft', diagram.selectedItems.nodes); Sizing [`sameSize`](https://ej2.syncfusion.com/documentation/api/diagram/#samesize) commands enable to equally size the selected nodes with respect to the first selected object. -[`SizingOptions`](https://ej2.syncfusion.com/documentation/api/diagram/#samesize) are as follows: +[`SizingOptions`](https://ej2.syncfusion.com/documentation/api/diagram/sizingoptions) are as follows: * Width: Scales the width of the selected objects. * Height: Scales the height of the selected objects. * Size: Scales the selected objects both vertically and horizontally. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/size/tagHelper %} @@ -155,16 +129,6 @@ Sizing [`sameSize`](https://ej2.syncfusion.com/documentation/api/diagram/#samesi {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Size.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/size/size.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript var diagram = document.getElementById("container").ej2_instances[0]; @@ -188,8 +152,6 @@ Clipboard commands are used to cut, copy, or paste the selected elements. * Pastes the diagram’s clipboard data (nodes/connectors) into the diagram, [`paste`](https://ej2.syncfusion.com/documentation/api/diagram/#paste). -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/paste/tagHelper %} @@ -199,16 +161,6 @@ Clipboard commands are used to cut, copy, or paste the selected elements. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Paste.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/paste/paste.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -228,8 +180,6 @@ diagram.paste(diagram.copy() as(NodeModel | ConnectorModel)[]); [`Ungroup`](https://ej2.syncfusion.com/documentation/api/diagram/#ungroup) the selected nodes and connectors in the diagram. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/group/tagHelper %} @@ -239,16 +189,6 @@ diagram.paste(diagram.copy() as(NodeModel | ConnectorModel)[]); {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Group.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/group/group.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -268,8 +208,6 @@ diagram.group(); The [`bringToFront`](https://ej2.syncfusion.com/documentation/api/diagram/#bringtofront) command visually brings the selected element to front over all the other overlapped elements. The following code illustrates how to execute the `bringToFront` command. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/order/tagHelper %} @@ -279,16 +217,6 @@ The [`bringToFront`](https://ej2.syncfusion.com/documentation/api/diagram/#bring {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Order.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/order/order.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -307,8 +235,6 @@ diagram.bringToFront(); The [`sendToBack`](https://ej2.syncfusion.com/documentation/api/diagram/#sendtoback) command visually moves the selected element behind all the other overlapped elements. The following code illustrates how to execute the `sendToBack` command. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/order/tagHelper %} @@ -318,16 +244,6 @@ The [`sendToBack`](https://ej2.syncfusion.com/documentation/api/diagram/#sendtob {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Order.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/order/order.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -345,8 +261,6 @@ diagram.sendToBack(); The [`moveForward`](https://ej2.syncfusion.com/documentation/api/diagram/#moveforward) command visually moves the selected element over the nearest overlapping element. The following code illustrates how to execute the `moveForward` command. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/order/tagHelper %} @@ -356,16 +270,6 @@ The [`moveForward`](https://ej2.syncfusion.com/documentation/api/diagram/#movefo {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Order.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/order/order.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -383,8 +287,6 @@ diagram.moveForward(); The [`sendBackward`](https://ej2.syncfusion.com/documentation/api/diagram/#sendbackward) command visually moves the selected element behind the underlying element. The following code illustrates how to execute the `sendBackward` command. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/order/tagHelper %} @@ -394,16 +296,6 @@ The [`sendBackward`](https://ej2.syncfusion.com/documentation/api/diagram/#sendb {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Order.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/order/order.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -420,8 +312,6 @@ diagram.sendBackward(); The [`zoom`](https://ej2.syncfusion.com/documentation/api/diagram/#zoom) command is used to zoom-in and zoom-out the diagram view. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/order/tagHelper %} @@ -431,16 +321,6 @@ The [`zoom`](https://ej2.syncfusion.com/documentation/api/diagram/#zoom) command {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Order.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/order/order.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -468,8 +348,6 @@ The accepted values of the argument "direction" are as follows: * Left: Moves the selected elements towards left by the specified delta value. * Right: Moves the selected elements towards right by the specified delta value. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/order/tagHelper %} @@ -479,16 +357,6 @@ The accepted values of the argument "direction" are as follows: {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Order.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/order/order.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -512,8 +380,6 @@ The [`bringIntoView`](https://ej2.syncfusion.com/documentation/api/diagram/#brin The following code illustrates how to execute the `bringIntoView` command. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/order/tagHelper %} @@ -523,16 +389,6 @@ The following code illustrates how to execute the `bringIntoView` command. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Order.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/order/order.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -548,8 +404,6 @@ The [`bringToCenter`](https://ej2.syncfusion.com/documentation/api/diagram/#brin The following code illustrates how to execute the `bringToCenter` command. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/order/tagHelper %} @@ -559,16 +413,6 @@ The following code illustrates how to execute the `bringToCenter` command. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Order.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/order/order.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -583,20 +427,18 @@ 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. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/order/tagHelper %} @@ -606,16 +448,6 @@ The following code illustrates how to execute `FitToPage` command. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Order.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/order/order.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -634,20 +466,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. - -To explore the properties of custom commands, refer to [`Commands`](https://ej2.syncfusion.com/documentation/api/diagram/command#commands). +* [`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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.KeyModifiers.html). +* [`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. -{% if page.publishingplatform == "aspnet-core" %} +To explore the properties of custom commands, refer to [`Commands`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramCommand.html). {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -658,16 +488,6 @@ To explore the properties of custom commands, refer to [`Commands`](https://ej2. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="ExistingCommand.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/existingCommand/existingCommand.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -694,8 +514,6 @@ To explore the properties of custom commands, refer to [`Commands`](https://ej2. When any one of the default commands is not desired, they can be disabled. To change the functionality of a specific command, the command can be completely modified. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/nudge/tagHelper %} @@ -705,19 +523,6 @@ When any one of the default commands is not desired, they can be disabled. To ch {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/nudge/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Nudge.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/commands/nudge/nudge.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -729,4 +534,4 @@ When any one of the default commands is not desired, they can be disabled. To ch ## See Also -* [How to create the custom context menu items](./context-menu) \ No newline at end of file +* [How to create the custom context menu items](./context-menu) diff --git a/diagram-sdk/asp-net-core/connectors.md b/diagram-sdk/asp-net-core/connectors.md index 0dbcf7b9d4..a6c26c914e 100644 --- a/diagram-sdk/asp-net-core/connectors.md +++ b/diagram-sdk/asp-net-core/connectors.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Connectors in Syncfusion® ASP.NET Core Diagram Component description: Learn here all about Connectors in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -15,14 +15,12 @@ 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 The [`sourcePoint`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html#Syncfusion_EJ2_Diagrams_DiagramConnector_SourcePoint) and [`targetPoint`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html#Syncfusion_EJ2_Diagrams_DiagramConnector_TargetPoint) properties of connector allows to define the end points of a connector. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/default/tagHelper %} @@ -31,22 +29,10 @@ The [`sourcePoint`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2 {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/default/default.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Default.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/default/default.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Add connector at runtime Connectors can be added at runtime by using public method, `diagram.add` and can be removed at runtime by using public method, `diagram.remove`. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/default/tagHelper %} @@ -56,16 +42,6 @@ Connectors can be added at runtime by using public method, `diagram.add` and can {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Default.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/default/default.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -104,8 +80,6 @@ diagram.remove(connectors) * The collection of connectors can be dynamically added using `addElements` method.Each time an element is added to the diagram canvas, the `collectionChange` event will be triggered. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/connectorCollection/tagHelper %} @@ -114,16 +88,6 @@ diagram.remove(connectors) {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/connectorCollection/connectorCollection.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="ConnectorCollection.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/connectorCollection/connectorCollection.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Connectors from palette Connectors can be predefined and added to the symbol palette. You can drop those connectors into the diagram, when required. @@ -140,8 +104,6 @@ For more information about drawing connectors, refer to [`Draw Connectors`](http Various connector properties such as `sourcePoint`, `targetPoint`, `style`, `sourcePortID`, `targetPortID`, etc., can be updated at the runtime. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/default/tagHelper %} @@ -151,16 +113,6 @@ Various connector properties such as `sourcePoint`, `targetPoint`, `style`, `sou {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Default.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/default/default.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -181,8 +133,6 @@ diagram.dataBind(); * The [`sourceID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html#Syncfusion_EJ2_Diagrams_DiagramConnector_SourceID) and [`targetID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html#Syncfusion_EJ2_Diagrams_DiagramConnector_TargetID) properties allow to define the nodes to be connected. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/connect/tagHelper %} @@ -192,16 +142,6 @@ diagram.dataBind(); {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Connect.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/connect/connect.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - * When you remove NodeConstraints InConnect from Default, the node accepts only an outgoing connection to dock in it. Similarly, when you remove NodeConstraints OutConnect from Default, the node accepts only an incoming connection to dock in it. @@ -217,8 +157,6 @@ node.constraints = NodeConstraints.Default & ~NodeConstraints.InConnect, The [`sourcePortID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html#Syncfusion_EJ2_Diagrams_DiagramConnector_SourcePortID) and [`targetPortID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html#Syncfusion_EJ2_Diagrams_DiagramConnector_TargetPortID) properties allow to create connections between some specific points of source/target nodes. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/ports/tagHelper %} @@ -228,21 +166,9 @@ The [`sourcePortID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Ports.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/ports/ports.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - Similarly, the `sourcePortID` or `targetPortID` can be changed at the runtime by changing the port [`sourcePortID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html#Syncfusion_EJ2_Diagrams_DiagramConnector_SourcePortID) or [`targetPortID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html#Syncfusion_EJ2_Diagrams_DiagramConnector_TargetPortID). -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/ports/tagHelper %} @@ -252,16 +178,6 @@ Similarly, the `sourcePortID` or `targetPortID` can be changed at the runtime by {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Ports.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/ports/ports.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript var diagram = document.getElementById("container").ej2_instances[0]; @@ -286,9 +202,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. - -{% if page.publishingplatform == "aspnet-core" %} +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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -299,23 +213,8 @@ To create a straight line, specify the [`type`](https://ej2.syncfusion.com/docum {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/segment/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Segment.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/segment/segment.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - -The [`point`](https://ej2.syncfusion.com/documentation/api/diagram/straightSegment/#point-PointModel) property of straight segment allows to define the end point of it. - -{% if page.publishingplatform == "aspnet-core" %} +The [`point`](https://ej2.syncfusion.com/documentation/api/diagram/straightSegment/#point) property of straight segment allows to define the end point of it. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -326,29 +225,14 @@ The [`point`](https://ej2.syncfusion.com/documentation/api/diagram/straightSegme {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/segment/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Segment.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/segment/segment.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Orthogonal 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). - -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. +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). -{% if page.publishingplatform == "aspnet-core" %} +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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -359,20 +243,8 @@ Multiple segments can be defined one after another. To create a connector with m {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Orthogonal.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/orthogonal/orthogonal.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - -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. - -{% if page.publishingplatform == "aspnet-core" %} +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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -383,26 +255,14 @@ The [`length`](https://ej2.syncfusion.com/documentation/api/diagram/orthogonalSe {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Direction.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/direction/direction.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - N> You need to mention the segment type as same as what you mentioned in connector type. There should be no contradiction between connector type and segment type. ## 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/). - -{% if page.publishingplatform == "aspnet-core" %} +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). {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -412,22 +272,10 @@ To customize the thumb size for a specific connector, disable the [`InheritSegme {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/orthogonalThumbSize/orthogonal.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="orthogonal.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/orthogonalThumbSize/orthogonal.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Avoid overlapping Orthogonal segments are automatically re-routed, in order to avoid overlapping with the source and target nodes. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/overlapping/tagHelper %} @@ -437,24 +285,12 @@ Orthogonal segments are automatically re-routed, in order to avoid overlapping w {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Overlapping.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/overlapping/overlapping.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Bezier 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. - -{% if page.publishingplatform == "aspnet-core" %} +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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -465,23 +301,11 @@ To create a bezier segment, the [`segment.type`](https://ej2.syncfusion.com/docu {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Vector.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/vector/vector.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - The [`point1`](https://ej2.syncfusion.com/documentation/api/diagram/bezierSegment/#point1) and [`point2`](https://ej2.syncfusion.com/documentation/api/diagram/bezierSegment/#point2) properties of bezier segment enables to set the control points. The [`vector1`](https://ej2.syncfusion.com/documentation/api/diagram/bezierSegment/#vector1) and [`vector2`](https://ej2.syncfusion.com/documentation/api/diagram/bezierSegment/#vector2) properties of bezier segment enable you to define the vectors. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/points/tagHelper %} @@ -490,23 +314,11 @@ The [`vector1`](https://ej2.syncfusion.com/documentation/api/diagram/bezierSegme {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/points/points.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Points.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/points/points.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## 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/). - -{% if page.publishingplatform == "aspnet-core" %} +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). {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -516,16 +328,6 @@ To customize the thumb size for a specific connector, disable the [`InheritSegme {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/bezierThumbSize/bezier.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="bezier.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/bezierThumbSize/bezier.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Decorator * Starting and ending points of a connector can be decorated with some customizable shapes like arrows, circles, diamond, or path. The connection end points can be decorated with the [`sourceDecorator`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html#Syncfusion_EJ2_Diagrams_DiagramConnector_SourceDecorator) and [`targetDecorator`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html#Syncfusion_EJ2_Diagrams_DiagramConnector_TargetDecorator) properties of the connector. @@ -535,8 +337,6 @@ To customize the thumb size for a specific connector, disable the [`InheritSegme * To create custom shape for source decorator, use [`pathData`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramDecorator.html#Syncfusion_EJ2_Diagrams_DiagramDecorator_PathData) property. Similarly, to create custom shape for target decorator, use [`pathData`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramDecorator.html#Syncfusion_EJ2_Diagrams_DiagramDecorator_PathData) property. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/srcdecorator/tagHelper %} @@ -546,16 +346,6 @@ To customize the thumb size for a specific connector, disable the [`InheritSegme {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Srcdecorator.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/srcdecorator/srcdecorator.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Padding @@ -565,8 +355,6 @@ Padding is used to leave the space between the Connector's end point and the obj * The [`targetPadding`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html#Syncfusion_EJ2_Diagrams_DiagramConnector_TargetPadding) property of connector defines space between the end point and the target node of the connector. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/padding/tagHelper %} @@ -576,16 +364,6 @@ Padding is used to leave the space between the Connector's end point and the obj {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Padding.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/padding/padding.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Flip @@ -599,8 +377,6 @@ The flip types are as follows: * Both - `Both` is used to interchange the source point as target point and target point as source point. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/flip/tagHelper %} @@ -610,16 +386,6 @@ The flip types are as follows: {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Flip.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/flip/flip.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - N> The flip is not applicable when the connectors connect in nodes. @@ -627,8 +393,6 @@ The flip types are as follows: Line bridging creates a bridge for lines to smartly cross over the other lines, at points of intersection. By default, [`bridgeDirection`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.BridgeDirection.html) is set to top. Depending upon the direction given bridging direction appears. Bridging can be enabled or disabled either with the `connector.constraints` or `diagram.constraints`. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/bridging/tagHelper %} @@ -638,16 +402,6 @@ Line bridging creates a bridge for lines to smartly cross over the other lines, {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Bridging.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/bridging/bridging.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - N> You need to inject connector bridging module into the diagram. @@ -659,8 +413,6 @@ Limitation: Bezier segments do not support bridging. Corner radius allows to create connectors with rounded corners. The radius of the rounded corner is set with the [`cornerRadius`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html#Syncfusion_EJ2_Diagrams_DiagramConnector_CornerRadius) property. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/cornerradius/tagHelper %} @@ -670,16 +422,6 @@ Corner radius allows to create connectors with rounded corners. The radius of th {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Cornerradius.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/cornerradius/cornerradius.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Appearance @@ -691,8 +433,6 @@ Corner radius allows to create connectors with rounded corners. The radius of th ## Segment appearance -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/style/tagHelper %} @@ -702,16 +442,6 @@ Corner radius allows to create connectors with rounded corners. The radius of th {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Style.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/style/style.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Decorator appearance @@ -721,8 +451,6 @@ Corner radius allows to create connectors with rounded corners. The radius of th * To set the size for source and target decorator, use width and height property. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/decorator/tagHelper %} @@ -732,16 +460,6 @@ Corner radius allows to create connectors with rounded corners. The radius of th {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Decorator.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/decorator/decorator.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Interaction @@ -755,8 +473,6 @@ Diagram provides additional flexibility to re-route the diagram connectors. A co * The following code block shows how to create the diagram with specifying nodes, connectors, constraints, and necessary modules for line routing. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/linerouting/tagHelper %} @@ -766,24 +482,9 @@ Diagram provides additional flexibility to re-route the diagram connectors. A co {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/linerouting/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Linerouting.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/linerouting/linerouting.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - * In some situations, automatic line routing enabled diagram needs to ignore a specific connector from automatic line routing. So, in this case, auto routing feature can be disabled to the specific connector using the [`constraints`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.ConnectorConstraints.html) property of the connector. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/linerouting1/tagHelper %} @@ -793,19 +494,6 @@ Diagram provides additional flexibility to re-route the diagram connectors. A co {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/linerouting1/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Linerouting1.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/linerouting1/linerouting1.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Constraints @@ -813,8 +501,6 @@ Diagram provides additional flexibility to re-route the diagram connectors. A co * To enable or disable the constraints, refer [`constraints`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.ConnectorConstraints.html). -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/constraints/tagHelper %} @@ -824,16 +510,6 @@ Diagram provides additional flexibility to re-route the diagram connectors. A co {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Constraints.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/constraints/constraints.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Custom properties @@ -856,8 +532,6 @@ var connectors = { The connectors [`zIndex`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramConnector.html#Syncfusion_EJ2_Diagrams_DiagramConnector_ZIndex) property specifies the stack order of the connector. A connector with greater stack order is always in front of a connector with a lower stack order. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/zindex/tagHelper %} @@ -866,16 +540,6 @@ The connectors [`zIndex`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusi {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/zindex/zindex.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Zindex.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/zindex/zindex.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Undo/Redo support for connector segments The Diagram control provides comprehensive undo and redo functionality for all connector segment operations. This includes reversible actions such as dragging, resizing, and rotating source or target nodes, as well as modifying segment points and endpoints. @@ -891,8 +555,6 @@ This functionality ensures consistent editing behavior across all connector type The following example demonstrates undo and redo functionality for connector segments: -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/connectors-segundo/tagHelper %} @@ -901,16 +563,6 @@ The following example demonstrates undo and redo functionality for connector seg {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/connectors-segundo/segment.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="segment.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/connectors/connectors-segundo/segment.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ``` javascript function undo(){ var diagram = document.getElementById("container").ej2_instances[0]; diff --git a/diagram-sdk/asp-net-core/constraints.md b/diagram-sdk/asp-net-core/constraints.md index c754f96628..a51fc2f97b 100644 --- a/diagram-sdk/asp-net-core/constraints.md +++ b/diagram-sdk/asp-net-core/constraints.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Constraints in ASP.NET Core Diagram Component | Syncfusion® description: Learn here all about Constraints in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -25,8 +25,6 @@ Diagram constraints allows to enable or disable the following behaviors: * Undo/redo * Tooltip -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/constraints/default/tagHelper %} @@ -36,18 +34,8 @@ Diagram constraints allows to enable or disable the following behaviors: {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Default.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/constraints/default/default.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - -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 @@ -62,8 +50,6 @@ Node constraints allows to enable or disable the following behaviors of node. Th * Shadow * Tooltip -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/constraints/node/tagHelper %} @@ -73,16 +59,6 @@ Node constraints allows to enable or disable the following behaviors of node. Th {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Node.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/constraints/node/node.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - For more information about node constraints, refer to [`NodeConstraints`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.NodeConstraints.html). @@ -97,8 +73,6 @@ Connector constraints allows to enable or disable certain behaviors of connector * Tooltip * Bridging -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/constraints/connector/tagHelper %} @@ -108,16 +82,6 @@ Connector constraints allows to enable or disable certain behaviors of connector {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Connector.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/constraints/connector/connector.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - For more information about connector constraints, refer to [`ConnectorConstraints`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.ConnectorConstraints.html). @@ -128,8 +92,6 @@ You can enable or disable certain behaviors of port. They are as follows: * Connect * ConnectOnDrag -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/constraints/port/tagHelper %} @@ -139,16 +101,6 @@ You can enable or disable certain behaviors of port. They are as follows: {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Port.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/constraints/port/port.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - For more information about port constraints, refer to [`PortConstraints`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.PortConstraints.html). @@ -156,8 +108,6 @@ For more information about port constraints, refer to [`PortConstraints`](https: You can enable or disable read-only mode for the annotations by using the annotation constraints. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/constraints/annotation/tagHelper %} @@ -167,16 +117,6 @@ You can enable or disable read-only mode for the annotations by using the annota {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Annotation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/constraints/annotation/annotation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - For more details about annotation constraints, refer to [`AnnotationConstraints`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.AnnotationConstraints.html). @@ -188,8 +128,6 @@ Selector visually represents the selected elements with certain editable thumbs. * Rotator * User handles -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/constraints/selector/tagHelper %} @@ -199,16 +137,6 @@ Selector visually represents the selected elements with certain editable thumbs. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Selector.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/constraints/selector/selector.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - For more information about selector constraints, refer to [`SelectorConstraints`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SelectorConstraints.html). @@ -221,8 +149,6 @@ Snap constraints control the visibility of gridlines and enable or disable snapp * Snap to either horizontal or vertical gridlines. * Snap to both horizontal and vertical gridlines. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/constraints/snap/tagHelper %} @@ -232,16 +158,6 @@ Snap constraints control the visibility of gridlines and enable or disable snapp {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Snap.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/constraints/snap/snap.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - For more information about snap constraints, refer to [`SnapConstraints`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SnapConstraints.html). @@ -253,8 +169,6 @@ Boundary constraints defines a boundary for the diagram inside which the interac * Diagram sized boundary * Page sized boundary -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/constraints/page/tagHelper %} @@ -264,16 +178,6 @@ Boundary constraints defines a boundary for the diagram inside which the interac {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Page.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/constraints/page/page.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - For more information about selector constraints, refer to [`BoundaryConstraints`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.BoundaryConstraints.html). @@ -281,8 +185,6 @@ For more information about selector constraints, refer to [`BoundaryConstraints` Some of the behaviors can be defined through both the specific object (node/connector) and diagram. When the behaviors are contradictorily defined through both, the actual behavior is set through inherit options. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/constraints/bridging/tagHelper %} @@ -292,16 +194,6 @@ Some of the behaviors can be defined through both the specific object (node/conn {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Bridging.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/constraints/bridging/bridging.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Bitwise operations @@ -335,4 +227,4 @@ You can check any value by using Bitwise ‘&’ (AND) operator. if ((node.constraints & (NodeConstraints.Rotate)) == (NodeConstraints.Rotate)); ``` -In the previous example, check whether the rotate constraints are enabled in a node. When node constraints have rotate constraints, the expression returns a rotate constraint. \ No newline at end of file +In the previous example, check whether the rotate constraints are enabled in a node. When node constraints have rotate constraints, the expression returns a rotate constraint. diff --git a/diagram-sdk/asp-net-core/container.md b/diagram-sdk/asp-net-core/container.md index c49b2b5f54..3aee1154e2 100644 --- a/diagram-sdk/asp-net-core/container.md +++ b/diagram-sdk/asp-net-core/container.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Container in ASP.NET Core Diagram Component | Syncfusion® description: Learn here all about Container in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -18,8 +18,6 @@ A Container is a group of logically related shapes surrounded by a visible bound The following code illustrates how to create a container node. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/container/basiccontainer/tagHelper %} @@ -28,19 +26,6 @@ The following code illustrates how to create a container node. {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/container/basiccontainer/Container.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/container/basiccontainer/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Container.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/container/basiccontainer/Container.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ![container](./images/container.png) ### Setting a Header @@ -49,8 +34,6 @@ You can provide a textual description for a container using its `Header` propert The following code example explains how to define a container header and its customization: -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/container/containerheader/tagHelper %} @@ -59,19 +42,6 @@ The following code example explains how to define a container header and its cus {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/container/containerheader/Container.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/container/containerheader/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Container.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/container/containerheader/Container.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ![container header customization](./images/containerheader.png) N> You can edit the header by double-clicking the region of the container's header. diff --git a/diagram-sdk/asp-net-core/context-menu.md b/diagram-sdk/asp-net-core/context-menu.md index adbaf00a10..0c19264eed 100644 --- a/diagram-sdk/asp-net-core/context-menu.md +++ b/diagram-sdk/asp-net-core/context-menu.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Context Menu in Syncfusion® ASP.NET Core Diagram Component description: Learn here all about Context Menu in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -19,8 +19,6 @@ In graphical user interface (GUI), a context menu is a type of menu that appears The [`show`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramContextMenuSettings.html#Syncfusion_EJ2_Diagrams_DiagramContextMenuSettings_Show) property helps to enable or disable the context menu. Diagram provides some default context menu items to ease the execution of some frequently used commands. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/contextmenu/default/tagHelper %} @@ -30,16 +28,6 @@ The [`show`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagra {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Default.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/contextmenu/default/default.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - Context menu can be defined for individual node with the desired context menu items. @@ -55,8 +43,6 @@ Context menu can be defined for individual node with the desired context menu it * The `separator` property defines the horizontal lines that are used to separate the menu items. You cannot select the separators. You can enable separators to group the menu items using the separator property. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/contextmenu/item/tagHelper %} @@ -66,16 +52,6 @@ Context menu can be defined for individual node with the desired context menu it {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Item.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/contextmenu/item/item.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - To display the custom context menu items alone, set the `showCustomMenuOnly` property to true. @@ -85,8 +61,6 @@ To display the custom context menu items alone, set the `showCustomMenuOnly` pro * In the following sample, the menu item is rendered with key code for specified action in ContextMenu using the template. Here, the key code is specified for the cut and copy at right corner of the menu items by adding a span element in the `contextMenuBeforeItemRender` event. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/contextmenu/events/tagHelper %} @@ -96,23 +70,11 @@ To display the custom context menu items alone, set the `showCustomMenuOnly` pro {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Events.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/contextmenu/events/events.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Context menu events You would be notified with events, when you try to open the context menu items `contextMenuOpen` and when you click the menu items `contextMenuClick`. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/contextmenu/events/tagHelper %} @@ -122,16 +84,6 @@ You would be notified with events, when you try to open the context menu items ` {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Events.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/contextmenu/events/events.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -154,4 +106,4 @@ function contextMenuClick() { } } -``` \ No newline at end of file +``` diff --git a/diagram-sdk/asp-net-core/data-binding.md b/diagram-sdk/asp-net-core/data-binding.md index d570133776..9f56c6b2bd 100644 --- a/diagram-sdk/asp-net-core/data-binding.md +++ b/diagram-sdk/asp-net-core/data-binding.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Data Binding in Syncfusion® ASP.NET Core Diagram Component description: Learn here all about Data Binding in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -36,8 +36,6 @@ Diagram can be populated based on the user defined JSON data (Local Data) by map To map the user defined JSON data with diagram, configure the fields of [`dataSourceSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramDataSource.html). -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/data-binding/local/tagHelper %} @@ -47,16 +45,6 @@ To map the user defined JSON data with diagram, configure the fields of [`dataSo {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Local.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/data-binding/local/local.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -100,7 +88,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 +96,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,11 +118,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. - -{% if page.publishingplatform == "aspnet-core" %} +* 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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -145,16 +131,6 @@ This feature allows to read the data source and perform add or edit or delete th {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Insertdata.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/data-binding/insertdata/insertdata.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript var diagramElement = document.getElementById('element'); var diagram = diagramElement.ej2_instances[0]; @@ -165,11 +141,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. - -{% if page.publishingplatform == "aspnet-core" %} +* 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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -180,16 +154,6 @@ diagram.insertData(); {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Updatedata.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/data-binding/updatedata/updatedata.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript var diagramElement = document.getElementById('element'); @@ -201,11 +165,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. - -{% if page.publishingplatform == "aspnet-core" %} +* 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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -216,16 +178,6 @@ diagram.updateData(); {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Deletedata.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/data-binding/deletedata/deletedata.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript var diagramElement = document.getElementById('element'); diff --git a/diagram-sdk/asp-net-core/grid-lines.md b/diagram-sdk/asp-net-core/grid-lines.md index 4bf72abccc..fc884cc090 100644 --- a/diagram-sdk/asp-net-core/grid-lines.md +++ b/diagram-sdk/asp-net-core/grid-lines.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Grid Lines in ASP.NET Core Diagram Component | Syncfusion® description: Learn here all about Grid Lines in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -21,8 +21,6 @@ The [`snapSettings.snapConstraints`](https://help.syncfusion.com/cr/aspnetcore-j If you need to enable snapping, then inject snapping module into the diagram. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/gridlines/snap/tagHelper %} @@ -32,16 +30,6 @@ If you need to enable snapping, then inject snapping module into the diagram. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Snap.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/gridlines/snap/snap.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - To show only horizontal or vertical gridlines or to hide gridlines, refer to [`Constraints`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SnapConstraints.html). @@ -55,8 +43,6 @@ The appearance of the gridlines can be customized by using a set of predefined p * The vertical gridlines [`lineColor`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramGridlines.html#Syncfusion_EJ2_Diagrams_DiagramGridlines_LineColor) and [`lineDashArray`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramGridlines.html#Syncfusion_EJ2_Diagrams_DiagramGridlines_LineDashArray) properties are used to customize the line color and line style of the vertical gridlines. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/gridlines/appear/tagHelper %} @@ -66,23 +52,11 @@ The appearance of the gridlines can be customized by using a set of predefined p {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Appear.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/gridlines/appear/appear.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Line intervals Thickness and the space between gridlines can be customized by using horizontal gridlines’s [`linesInterval`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramGridlines.html#Syncfusion_EJ2_Diagrams_DiagramGridlines_LineIntervals) and vertical gridlines’s [`linesInterval`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramGridlines.html#Syncfusion_EJ2_Diagrams_DiagramGridlines_LineIntervals) properties. In the lines interval collections, values at the odd places are referred as the thickness of lines and values at the even places are referred as the space between gridlines. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/gridlines/intervals/tagHelper %} @@ -92,16 +66,6 @@ Thickness and the space between gridlines can be customized by using horizontal {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Intervals.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/gridlines/intervals/intervals.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Snapping @@ -111,8 +75,6 @@ This feature allows the diagram objects to snap to the nearest intersection of g Snapping to gridlines can be enabled or disabled with the [`snapSettings.snapConstraints`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SnapConstraints.html). -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/gridlines/lines/tagHelper %} @@ -122,23 +84,11 @@ Snapping to gridlines can be enabled or disabled with the [`snapSettings.snapCon {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Lines.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/gridlines/lines/lines.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Customization of snap intervals By default, the objects are snapped towards the nearest gridline. The gridline or position towards where the diagram object snaps can be customized with the horizontal gridlines’s [`snapInterval`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramGridlines.html#Syncfusion_EJ2_Diagrams_DiagramGridlines_SnapIntervals) and the vertical gridlines’s [`snapInterval`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramGridlines.html#Syncfusion_EJ2_Diagrams_DiagramGridlines_SnapIntervals) properties. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/gridlines/snapIntervals/tagHelper %} @@ -148,16 +98,6 @@ By default, the objects are snapped towards the nearest gridline. The gridline o {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="SnapIntervals.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/gridlines/snapIntervals/snapIntervals.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Snap to objects @@ -171,8 +111,6 @@ The [`snapConstraints`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion The [`snapLineColor`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramSnapSettings.html#Syncfusion_EJ2_Diagrams_DiagramSnapSettings_SnapLineColor) property allows to define the color of the snapline. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/gridlines/objects/tagHelper %} @@ -182,13 +120,3 @@ The [`snapLineColor`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.E {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Objects.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/gridlines/objects/objects.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - diff --git a/diagram-sdk/asp-net-core/group.md b/diagram-sdk/asp-net-core/group.md index 42c7084dba..95f4e38363 100644 --- a/diagram-sdk/asp-net-core/group.md +++ b/diagram-sdk/asp-net-core/group.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Group in Syncfusion® ASP.NET Core Diagram Component description: Learn here all about Group in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -29,8 +29,6 @@ A group can be added to the diagram model through [`nodes`](https://help.syncfus * A group can be added into a child of another group. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/group/group/tagHelper %} @@ -40,16 +38,6 @@ A group can be added to the diagram model through [`nodes`](https://help.syncfus {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Group.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/group/group/group.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript var diagram = document.getElementById("container").ej2_instances[0]; @@ -58,8 +46,6 @@ diagram.selectAll(); diagram.group(); ``` -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/group/ungroup/tagHelper %} @@ -69,16 +55,6 @@ diagram.group(); {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Ungroup.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/group/ungroup/ungroup.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript var diagram = document.getElementById("container").ej2_instances[0]; @@ -91,8 +67,6 @@ diagram.unGroup(); A group node can be added at runtime by using the client-side method `diagram.add`. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/group/run/tagHelper %} @@ -102,16 +76,6 @@ A group node can be added at runtime by using the client-side method `diagram.ad {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Run.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/group/run/run.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript var diagram = document.getElementById("container").ej2_instances[0]; @@ -128,8 +92,6 @@ diagram.add(group); * The collection of group nodes can be dynamically added using `addElements` method.Each time an element is added to the diagram canvas, the `collectionChange` event will be triggered. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/group/groupCollection/tagHelper %} @@ -139,16 +101,6 @@ diagram.add(group); {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="GroupCollection.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/group/groupCollection/groupCollection.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Container Containers are used to automatically measure and arrange the size and position of the child elements in a predefined manner. There are two types of containers available. @@ -171,9 +123,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. - -{% if page.publishingplatform == "aspnet-core" %} +* 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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -184,16 +134,6 @@ Containers are used to automatically measure and arrange the size and position o {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Stack.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/group/stack/stack.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript function getTextElement(text) { @@ -257,4 +197,4 @@ You can edit the group and its children at runtime. For more information about h * [How to enable/disable the behavior of the node](./constraints) * [How to add nodes to the symbol palette](./symbol-palette) * [How to create diagram nodes using drawing tools](./tools) -* [How to perform the interaction on the group](./interaction#selection) \ No newline at end of file +* [How to perform the interaction on the group](./interaction#selection) diff --git a/diagram-sdk/asp-net-core/how-to/organization-chart.md b/diagram-sdk/asp-net-core/how-to/organization-chart.md index 62a3084e04..eca2e692b1 100644 --- a/diagram-sdk/asp-net-core/how-to/organization-chart.md +++ b/diagram-sdk/asp-net-core/how-to/organization-chart.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Organization Chart in Syncfusion® ASP.NET Core Diagram Component description: Learn here all about organization chart in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -12,8 +12,6 @@ documentation: ug An organizational chart is a diagram that displays the structure of an organization and relationships. To create an organizational chart, the [`type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramLayout.html#Syncfusion_EJ2_Diagrams_DiagramLayout_Type) of layout should be set as an `OrganizationalChart`. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/customizedOrganizational/tagHelper %} @@ -23,16 +21,6 @@ An organizational chart is a diagram that displays the structure of an organizat {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="CustomizedOrganization.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/layout/customizedOrganizational/customizedOrganization.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript function getLayoutInfo(node, tree) { @@ -63,4 +51,4 @@ An organizational chart is a diagram that displays the structure of an organizat connector.style.strokeColor = 'gray'; return connector; } -``` \ No newline at end of file +``` diff --git a/diagram-sdk/asp-net-core/interaction/appearance.md b/diagram-sdk/asp-net-core/interaction/appearance.md index 31ef91568a..79537307a0 100644 --- a/diagram-sdk/asp-net-core/interaction/appearance.md +++ b/diagram-sdk/asp-net-core/interaction/appearance.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Appearence in Syncfusion® ASP.NET Core Diagram Component description: Learn here all about Appearence in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -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 @@ -47,8 +47,6 @@ The diagram component notifies the mouse button clicked. For example, whenever t | Middle | When the mouse wheel is clicked, middle is notified | | Right | When the right mouse button is clicked, right is notified | -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/interaction/click/tagHelper %} @@ -58,16 +56,6 @@ The diagram component notifies the mouse button clicked. For example, whenever t {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Click.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/interaction/click/click.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -82,8 +70,6 @@ function click(arg) { The appearance of the user handle can be customized by using the [`size`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html#Syncfusion_EJ2_Diagrams_DiagramUserHandle_Size), [`borderColor`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html#Syncfusion_EJ2_Diagrams_DiagramUserHandle_BorderColor), [`backgroundColor`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html#Syncfusion_EJ2_Diagrams_DiagramUserHandle_BackgroundColor), [`visible`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html#Syncfusion_EJ2_Diagrams_DiagramUserHandle_Visible), [`pathData`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html#Syncfusion_EJ2_Diagrams_DiagramUserHandle_PathData), and [`pathColor`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html#Syncfusion_EJ2_Diagrams_DiagramUserHandle_PathColor) properties of the [`userHandles`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html). -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/interaction/node/tagHelper %} @@ -93,16 +79,6 @@ The appearance of the user handle can be customized by using the [`size`](https: {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Node.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/interaction/node/node.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -147,4 +123,4 @@ var CloneTool = (function (_super) { return CloneTool; }(ej.diagrams.MoveTool)); -``` \ No newline at end of file +``` diff --git a/diagram-sdk/asp-net-core/interaction/drag-resize-rotate.md b/diagram-sdk/asp-net-core/interaction/drag-resize-rotate.md index e61e48f6b9..7abb822757 100644 --- a/diagram-sdk/asp-net-core/interaction/drag-resize-rotate.md +++ b/diagram-sdk/asp-net-core/interaction/drag-resize-rotate.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Drag resize and rotate in Syncfusion® ASP.NET Core Diagram Component description: Learn here all about Drag resize and rotate in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -31,8 +31,6 @@ documentation: ug You can change the size of the node resize thumb and the connector end point handle by using the `handleSize` property. The appearance such as fill, stroke, and stroke width of the node resize thumb and connector end point handle can be customized by overriding the e-diagram-resize-handle and e-diagram-endpoint-handle classes respectively. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/node/tagHelper %} @@ -41,16 +39,6 @@ You can change the size of the node resize thumb and the connector end point han {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/node/node.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Node.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/node/node.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ![handleSize](../images/handlesize.png) ## Rotate @@ -80,4 +68,4 @@ The Diagram component includes a built-in option to restrict user interactions w ![Negative axis restrict](../gifs/negativeaxis.gif) -N> A symbol dragged from the palette will only be added to the diagram if it’s fully positioned within the positive coordinate space. \ No newline at end of file +N> A symbol dragged from the palette will only be added to the diagram if it’s fully positioned within the positive coordinate space. diff --git a/diagram-sdk/asp-net-core/interaction/zoompan.md b/diagram-sdk/asp-net-core/interaction/zoompan.md index a2a019cd2b..cbd8ad5a71 100644 --- a/diagram-sdk/asp-net-core/interaction/zoompan.md +++ b/diagram-sdk/asp-net-core/interaction/zoompan.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Zoom pan in Syncfusion® ASP.NET Core Diagram Component description: Learn here all about Zoompan in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -25,8 +25,6 @@ Diagram provides the support to notify the pan status of the zoom pan tool. When | Progress | When the mouse is in motion the status is notified as progress.| | Completed | When panning is stopped the status is notified with completed.| -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/interaction/panstatus/tagHelper %} @@ -36,16 +34,6 @@ Diagram provides the support to notify the pan status of the zoom pan tool. When {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Panstatus.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/interaction/panstatus/panstatus.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -58,4 +46,4 @@ function scrollChange(args) { var panStatus = args.panState } -``` \ No newline at end of file +``` diff --git a/diagram-sdk/asp-net-core/labels.md b/diagram-sdk/asp-net-core/labels.md index 44c43924cd..04a69b657a 100644 --- a/diagram-sdk/asp-net-core/labels.md +++ b/diagram-sdk/asp-net-core/labels.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Labels in Syncfusion® ASP.NET Core Diagram Component description: Learn here all about Labels in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -19,8 +19,6 @@ documentation: ug An annotation can be added to a node/connector by defining the annotation object and adding that to the annotation collection of the node/connector. The [`content`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramNodeAnnotation.html#Syncfusion_EJ2_Diagrams_DiagramNodeAnnotation_Content) property of annotation defines the text to be displayed. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/annotationRender/tagHelper %} @@ -30,28 +28,13 @@ An annotation can be added to a node/connector by defining the annotation object {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/annotationRender/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Annotation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/annotationRender/annotation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## 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. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/updateAnnotation/tagHelper %} @@ -61,19 +44,6 @@ An annotation can be added to a node/connector by defining the annotation object {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/updateAnnotation/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Annotation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/updateAnnotation/annotation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript var diagramElement = document.getElementById('element'); @@ -90,9 +60,7 @@ diagram.dataBind(); ## Remove annotation -A collection of annotations can be removed from the node by using client-side method [`removeLabels`](../api/diagram/#removeLabels). - -{% if page.publishingplatform == "aspnet-core" %} +A collection of annotations can be removed from the node by using client-side method [`removeLabels`](https://ej2.syncfusion.com/documentation/api/diagram/#removelabels). {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -103,19 +71,6 @@ A collection of annotations can be removed from the node by using client-side me {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/updateAnnotation/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Annotation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/updateAnnotation/annotation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript var diagramElement = document.getElementById('element'); @@ -130,9 +85,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). - -{% if page.publishingplatform == "aspnet-core" %} +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). {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -143,19 +96,6 @@ You can change any annotation properties at runtime and update it through the cl {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/updateAnnotation/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Annotation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/updateAnnotation/annotation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript var diagramElement = document.getElementById('element'); @@ -176,8 +116,6 @@ The offset property of annotation is used to align the annotations based on frac Set the size for nodes annotation by using [`width`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramNodeAnnotation.html#Syncfusion_EJ2_Diagrams_DiagramNodeAnnotation_Width) and [`height`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramNodeAnnotation.html#Syncfusion_EJ2_Diagrams_DiagramNodeAnnotation_Height) properties. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/annotationOffset/tagHelper %} @@ -187,19 +125,6 @@ Set the size for nodes annotation by using [`width`](https://help.syncfusion.com {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/annotationOffset/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Annotation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/annotationOffset/annotation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Horizontal and vertical alignment @@ -220,8 +145,6 @@ The following tables illustrates all the possible alignments visually with 'offs | Right |Bottom |![Right Bottom Label Alignment](images/Label9.png) | -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/HVAlignAnnotation/tagHelper %} @@ -231,26 +154,11 @@ The following tables illustrates all the possible alignments visually with 'offs {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/HVAlignAnnotation/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Annotation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/HVAlignAnnotation/annotation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Annotation alignment with respect to segments The offset and alignment properties of annotation allows to align the connector annotations with respect to the segments. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/annotationSegment/tagHelper %} @@ -260,26 +168,11 @@ The offset and alignment properties of annotation allows to align the connector {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/annotationSegment/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Annotation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/annotationSegment/annotation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Margin [`Margin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramNodeAnnotation.html#Syncfusion_EJ2_Diagrams_DiagramNodeAnnotation_Margin) is an absolute value used to add some blank space in any one of its four sides. The annotations can be displaced with the margin property. The following code example illustrates how to align a annotation based on its `offset`, `horizontalAlignment`, `verticalAlignment`, and `margin` values. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/annotationMargin/tagHelper %} @@ -289,26 +182,11 @@ The offset and alignment properties of annotation allows to align the connector {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/annotationMargin/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Annotation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/annotationMargin/annotation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Text align The [`textAlign`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramTextStyle.html#Syncfusion_EJ2_Diagrams_DiagramTextStyle_TextAlign) property of annotation allows to set how the text should be aligned (left, right, center, or justify) inside the text block. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/annotationTextAlign/tagHelper %} @@ -318,19 +196,6 @@ The [`textAlign`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.D {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/annotationTextAlign/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Annotation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/annotationTextAlign/annotation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Hyperlink @@ -338,8 +203,6 @@ Diagram provides a support to add a [`hyperlink`](https://help.syncfusion.com/cr A user can open the hyperlink in the new window, the same tab and the new tab by using the [`hyperlinkOpenState`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramNodeAnnotation.html#Syncfusion_EJ2_Diagrams_DiagramNodeAnnotation_Hyperlink_HyperlinkOpenState) property. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/hyperLink/tagHelper %} @@ -349,26 +212,11 @@ A user can open the hyperlink in the new window, the same tab and the new tab by {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/hyperLink/razor %} -{% endhighlight %} -{% highlight c# tabtitle="HyperLink.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/hyperLink/hyperLink.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Template Support for Annotation Diagram provides template support for annotation. You should define a SVG/HTML content as string in the annotation's [`template`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramNodeAnnotation.html#Syncfusion_EJ2_Diagrams_DiagramNodeAnnotation_Template) property. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/labelTemplate/tagHelper %} @@ -378,26 +226,11 @@ Diagram provides template support for annotation. You should define a SVG/HTML c {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/labelTemplate/razor %} -{% endhighlight %} -{% highlight c# tabtitle="LabelTemplate.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/labelTemplate/labelTemplate.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Wrapping When text overflows node boundaries, you can control it by using [`text wrapping`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramTextStyle.html#Syncfusion_EJ2_Diagrams_DiagramTextStyle_TextWrapping). So, it is wrapped into multiple lines. The wrapping property of annotation defines how the text should be wrapped. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/textWrapping/tagHelper %} @@ -407,19 +240,6 @@ When text overflows node boundaries, you can control it by using [`text wrapping {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/textWrapping/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Annotation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/textWrapping/annotation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - | No Wrap | Text will not be wrapped. | ![Label No Wrap](images/Wrap1.png) | | Wrap | Text-wrapping occurs, when the text overflows beyond the available node width. | ![Label Wrap](images/Wrap2.png) | @@ -429,8 +249,6 @@ When text overflows node boundaries, you can control it by using [`text wrapping The label’s [`TextOverflow`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramTextStyle.html#Syncfusion_EJ2_Diagrams_DiagramTextStyle_TextOverflow) property is used control whether to display the overflowed content in node or not. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/textOverFlow/tagHelper %} @@ -440,19 +258,6 @@ The label’s [`TextOverflow`](https://help.syncfusion.com/cr/aspnetcore-js2/Syn {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/textOverFlow/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Annotation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/textOverFlow/annotation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Appearance @@ -464,8 +269,6 @@ The label’s [`TextOverflow`](https://help.syncfusion.com/cr/aspnetcore-js2/Syn * The [`visible`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramNodeAnnotation.html#Syncfusion_EJ2_Diagrams_DiagramNodeAnnotation_Visibility) property of the annotation enables or disables the visibility of annotation. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/appearance/tagHelper %} @@ -475,24 +278,9 @@ The label’s [`TextOverflow`](https://help.syncfusion.com/cr/aspnetcore-js2/Syn {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/appearance/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Annotation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/appearance/annotation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - The fill, border, and opacity appearances of the text can also be customized with appearance specific properties of annotation. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/appearanceStyle/tagHelper %} @@ -502,26 +290,11 @@ The fill, border, and opacity appearances of the text can also be customized wit {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/appearanceStyle/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Annotation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/appearanceStyle/annotation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Interaction Diagram allows annotation to be interacted by selecting, dragging, rotating, and resizing. Annotation interaction is disabled, by default. You can enable annotation interaction with the [`constraints`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.AnnotationConstraints.html) property of annotation. You can also curtail the services of interaction by enabling either selecting, dragging, rotating, or resizing individually with the respective constraints property of annotation. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/appearanceStyle/tagHelper %} @@ -531,38 +304,23 @@ Diagram allows annotation to be interacted by selecting, dragging, rotating, and {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/appearanceStyle/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Annotation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/appearanceStyle/annotation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Edit 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 Diagram allows to create read-only annotations. You have to set the read-only property of annotation to enable/disable the read-only [`constraints`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.AnnotationConstraints.html). -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/readOnly/tagHelper %} @@ -572,19 +330,6 @@ Diagram allows to create read-only annotations. You have to set the read-only pr {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/readOnly/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Annotation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/readOnly/annotation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Drag Limit @@ -594,8 +339,6 @@ Diagram allows to create read-only annotations. You have to set the read-only pr * By default, drag limit will be disabled for the connector. It can be enabled by setting connector constraints as drag. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/dragLimit/tagHelper %} @@ -605,26 +348,11 @@ Diagram allows to create read-only annotations. You have to set the read-only pr {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/dragLimit/razor %} -{% endhighlight %} -{% highlight c# tabtitle="DragLimit.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/dragLimit/dragLimit.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Multiple annotations You can add any number of annotations to a node or connector. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/multiAnnotation/tagHelper %} @@ -634,19 +362,6 @@ You can add any number of annotations to a node or connector. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/multiAnnotation/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Annotation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/annotation/multiAnnotation/annotation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Constraints @@ -671,4 +386,4 @@ diagram.dataBind(); | Value | Description | Image | | -------- | -------- | -------- | | Page | When this option is set, the annotation remains fixed in its original orientation even if its parent node is rotated. | ![No_Rotation](images/page_rotationreference.gif) | -| Parent | In this case, the annotation rotates along with its parent node. | ![Rotation](images/parent_rotationreference.gif)| \ No newline at end of file +| Parent | In this case, the annotation rotates along with its parent node. | ![Rotation](images/parent_rotationreference.gif)| 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..b74c10a5c8 100644 --- a/diagram-sdk/asp-net-core/nodes.md +++ b/diagram-sdk/asp-net-core/nodes.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Nodes in Syncfusion® ASP.NET Core Diagram Component description: Learn here all about Nodes in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -25,8 +25,6 @@ A node can be created and added to the diagram, either programmatically or inter To create a node, define the [`node`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramNode.html) object and add that to nodes collection of the diagram model. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/node/tagHelper %} @@ -35,24 +33,12 @@ To create a node, define the [`node`](https://help.syncfusion.com/cr/aspnetcore- {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/node/node.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Node.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/node/node.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Add/Remove node at runtime * Nodes can be added at runtime by using public method, add and can be removed at runtime by using public method, remove. On adding node at runtime, the nodes collection is changed and the [`collectionChange`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Diagram.html#Syncfusion_EJ2_Diagrams_Diagram_CollectionChange) event will trigger. * The node’s ID property is used to define the name of the node and its further used to find the node at runtime and do any customization. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/run/tagHelper %} @@ -62,16 +48,6 @@ To create a node, define the [`node`](https://help.syncfusion.com/cr/aspnetcore- {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Run.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/run/run.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript var node = { @@ -84,8 +60,6 @@ diagram.add(node); * The collection of nodes can be dynamically added using `addElements` method.Each time an element is added to the diagram canvas, the `collectionChange` event will be triggered. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/nodescollection/tagHelper %} @@ -94,16 +68,6 @@ diagram.add(node); {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/nodescollection/nodescollection.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Nodescollection.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/nodescollection/nodescollection.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Add node from palette Nodes can be predefined and added to the palette, and can be dropped into the diagram when needed. For more information about adding nodes from symbol palette, refer to [`Symbol Palette`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SymbolPalette.html). @@ -138,8 +102,6 @@ Nodes can be interactively drawn by clicking and dragging the diagram surface by | (0,0) | offsetX and offsetY values are considered as the top-left corner of the node. | | (1,1) | offsetX and offsetY values are considered as the bottom-right corner of the node. | -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/position/tagHelper %} @@ -148,16 +110,6 @@ Nodes can be interactively drawn by clicking and dragging the diagram surface by {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/position/position.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Position.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/position/position.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Flip The diagram provides support to flip the node. [`flip`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramNode.html#Syncfusion_EJ2_Diagrams_DiagramNode_Flip) is performed to give the mirrored image of the original element. @@ -170,8 +122,6 @@ The flip types are as follows: * Both - `Both` which involves both vertical and horizontal changes of the element. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/flip/tagHelper %} @@ -181,16 +131,6 @@ The flip types are as follows: {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Flip.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/flip/flip.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - N> The flip is also applicable for group and BPMN shapes. @@ -200,8 +140,6 @@ N> The flip is also applicable for group and BPMN shapes. * The [`visible`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramNode.html#Syncfusion_EJ2_Diagrams_DiagramNode_Visible) property of the node enables or disables the visibility of the node. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/appear/tagHelper %} @@ -210,16 +148,6 @@ N> The flip is also applicable for group and BPMN shapes. {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/appear/appear.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Appear.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/appear/appear.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Customize the style of main node on multi-selection. The style of the main node can be customized by using the className `e-diagram-first-selection-indicator`. @@ -256,8 +184,6 @@ There are two types of gradients as follows: * A linear gradient’s x1, y1, x2, y2 properties are used to define the position (relative to the node) of the rectangular region that needs to be painted. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/linearGrad/tagHelper %} @@ -266,24 +192,12 @@ There are two types of gradients as follows: {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/linearGrad/linearGrad.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="LinearGrad.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/linearGrad/linearGrad.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Radial gradient * [`RadialGradient`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.GradientType.html) defines a smooth transition between stops on a circle. * A radial gradient’s cx, cy, fx, fy properties are used to define the position (relative to the node) of the outermost or the innermost circle of the radial gradient. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/radialGrad/tagHelper %} @@ -292,22 +206,10 @@ There are two types of gradients as follows: {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/radialGrad/radialGrad.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="RadialGrad.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/radialGrad/radialGrad.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Shadow Diagram provides support to add [`shadow`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramNode.html#Syncfusion_EJ2_Diagrams_DiagramNode_Shadow) effect to a node that is disabled, by default. It can be enabled with the constraints property of the node. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/shadow/tagHelper %} @@ -316,22 +218,10 @@ Diagram provides support to add [`shadow`](https://help.syncfusion.com/cr/aspnet {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/shadow/shadow.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Shadow.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/shadow/shadow.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Customizing shadow The angle, distance, and opacity of the shadow can be customized with the shadow property of the node. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/shadow2/tagHelper %} @@ -340,16 +230,6 @@ The angle, distance, and opacity of the shadow can be customized with the shadow {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/shadow2/shadow2.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Shadow2.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/shadow2/shadow2.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Icon Diagram provides support to describe the state of the node. i.e., the node is expanded or collapsed state. @@ -360,8 +240,6 @@ N> Icon can be created only when the node has outEdges. * The expandIcon’s and collapseIcon’s shape properties allows to define the shape of the icon. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/icon/tagHelper %} @@ -370,16 +248,6 @@ N> Icon can be created only when the node has outEdges. {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/icon/icon.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Icon.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/icon/icon.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Customizing expand icon * Set the borderColor, borderWidth, and background color for an expandIcon using borderColor, borderWidth, and fill properties. @@ -418,9 +286,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. - -{% if page.publishingplatform == "aspnet-core" %} +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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -430,16 +296,6 @@ Node has the InEdges and OutEdges read-only property. In this property, you can {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/dataflow/dataflow.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Dataflow.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/dataflow/dataflow.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## See Also * [How to add annotations to the node](./labels) @@ -447,4 +303,4 @@ Node has the InEdges and OutEdges read-only property. In this property, you can * [How to enable/disable the behavior of the node](./constraints) * [How to add nodes to the symbol palette](./symbol-palette) * [How to edit the node visual interface](./interaction#selection) -* [How to create diagram nodes using drawing tools](./tools) \ No newline at end of file +* [How to create diagram nodes using drawing tools](./tools) diff --git a/diagram-sdk/asp-net-core/overview.md b/diagram-sdk/asp-net-core/overview.md index c7788bdb1d..e96ddd6159 100644 --- a/diagram-sdk/asp-net-core/overview.md +++ b/diagram-sdk/asp-net-core/overview.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Overview in ASP.NET Core Diagram Component | Syncfusion® description: Learn here all about Overview in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -33,8 +33,6 @@ In overview, the view port of the diagram is highlighted with a red colored rect * Choose a particular region by clicking and dragging: Navigates to the specified region. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/overView/overView/tagHelper %} @@ -44,16 +42,3 @@ In overview, the view port of the diagram is highlighted with a red colored rect {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/overView/overView/razor %} -{% endhighlight %} -{% highlight c# tabtitle="OverView.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/overView/overView/overView.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - diff --git a/diagram-sdk/asp-net-core/page-settings.md b/diagram-sdk/asp-net-core/page-settings.md index ac6242ee38..c5e17ea513 100644 --- a/diagram-sdk/asp-net-core/page-settings.md +++ b/diagram-sdk/asp-net-core/page-settings.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Page Settings in ASP.NET Core Diagram Component | Syncfusion® description: Learn here all about Page Settings in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -25,8 +25,6 @@ Page settings can customize the appearance, width, and height of the diagram pag * To explore those properties, refer to [`Page Settings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramPageSettings.htmll). -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/pageSettings/page/tagHelper %} @@ -36,24 +34,12 @@ Page settings can customize the appearance, width, and height of the diagram pag {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Page.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/pageSettings/page/page.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Set background image Stretch and align the background image anywhere over the diagram area. The [`source`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramBackground.html#Syncfusion_EJ2_Diagrams_DiagramBackground_Source) property of [`background`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramBackground.html) allows to set the path of the image. The [`scale`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramBackground.html#Syncfusion_EJ2_Diagrams_DiagramBackground_Scale) and the [`align`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramBackground.html#Syncfusion_EJ2_Diagrams_DiagramBackground_Align) properties help to stretch/align the background images. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/pagesettings/image/tagHelper %} @@ -63,19 +49,6 @@ Stretch and align the background image anywhere over the diagram area. The [`sou {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/pagesettings/image/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Image.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/pagesettings/image/image.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Multiple page and page breaks @@ -83,8 +56,6 @@ When multiple page is enabled, the size of the page dynamically increases or dec The [`multiplePage`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramPageSettings.html#Syncfusion_EJ2_Diagrams_DiagramPageSettings_MultiplePage) and [`showPageBreak`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramPageSettings.html#Syncfusion_EJ2_Diagrams_DiagramPageSettings_ShowPageBreaks) properties of page settings allows you to enable/disable multiple pages and page breaks respectively. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/pagesettings/image/tagHelper %} @@ -94,26 +65,11 @@ The [`multiplePage`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/pagesettings/image/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Image.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/pagesettings/image/image.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Boundary constraints The diagram provides support to restrict/customize the interactive region, out of which the elements cannot be dragged, resized, or rotated. The [`boundaryConstraints`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.BoundaryConstraints.html) property of page settings allows you to customize the interactive region. To explore the boundary constraints, refer to [`Boundary Constraints`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.BoundaryConstraints.html). -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/pagesettings/boundary/tagHelper %} @@ -122,16 +78,3 @@ The diagram provides support to restrict/customize the interactive region, out o {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/pagesettings/boundary/boundary.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/pagesettings/boundary/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Boundary.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/pagesettings/boundary/boundary.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - diff --git a/diagram-sdk/asp-net-core/ports.md b/diagram-sdk/asp-net-core/ports.md index f7bfd697c6..5ca4ac892f 100644 --- a/diagram-sdk/asp-net-core/ports.md +++ b/diagram-sdk/asp-net-core/ports.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Ports in Syncfusion® ASP.NET Core Diagram Component description: Learn here all about Ports in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -31,8 +31,6 @@ Ports act as the connection points of the node and allows to create connections To add a connection port, define the port object and add it to node’s ports collection. The `offset` property of port accepts an object of fractions and used to determine the position of ports. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/ports/port/tagHelper %} @@ -42,25 +40,13 @@ To add a connection port, define the port object and add it to node’s ports co {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Port.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/ports/port/port.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## 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. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/ports/run/tagHelper %} @@ -70,16 +56,6 @@ The port’s ID property is used to define the unique ID for the port and its fu {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Run.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/ports/run/run.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -123,9 +99,7 @@ diagram.addPorts(diagram.nodes[0], port); ## Remove ports at runtime -Remove ports at runtime by using client-side method [`removePorts`](../api/diagram#removePorts). - -{% if page.publishingplatform == "aspnet-core" %} +Remove ports at runtime by using client-side method [`removePorts`](https://ej2.syncfusion.com/documentation/api/diagram/#removeports). {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -136,16 +110,6 @@ Remove ports at runtime by using client-side method [`removePorts`](../api/diagr {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Remove.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/ports/remove/remove.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -164,9 +128,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). - -{% if page.publishingplatform == "aspnet-core" %} +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). {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -177,16 +139,6 @@ You can change any port properties at runtime and update it through the client-s {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Port.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/ports/port/port.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -208,8 +160,6 @@ diagram.dataBind(); * The ports [`visibility`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramPort.html#Syncfusion_EJ2_Diagrams_DiagramPort_Visibility) property allows to define, when the port should be visible. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/ports/appear/tagHelper %} @@ -219,16 +169,6 @@ diagram.dataBind(); {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Appear.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/ports/appear/appear.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Offset @@ -280,8 +220,6 @@ You can also remove a port using the same Ctrl + Click interaction, but only if The following example shows how to enable automatic port creation: -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/ports/automaticPort/tagHelper %} @@ -290,17 +228,4 @@ The following example shows how to enable automatic port creation: {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/ports/automaticPort/AutoPort.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/ports/automaticPort/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Container.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/ports/automaticPort/AutoPort.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - -![Automatic Port Creation](./gifs/autoport.gif) \ No newline at end of file +![Automatic Port Creation](./gifs/autoport.gif) diff --git a/diagram-sdk/asp-net-core/ruler.md b/diagram-sdk/asp-net-core/ruler.md index 8291dbc049..e0dcf13d74 100644 --- a/diagram-sdk/asp-net-core/ruler.md +++ b/diagram-sdk/asp-net-core/ruler.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Ruler in ASP.NET Core Diagram Component description: Learn here all about Ruler in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -20,23 +20,11 @@ The Ruler provides a horizontal and vertical guide for measuring in the Diagram * The RulerSettings [`horizontalRuler`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramRulerSettings.html#Syncfusion_EJ2_Diagrams_DiagramRulerSettings_HorizontalRuler) and [`verticalRuler`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramRulerSettings.html#Syncfusion_EJ2_Diagrams_DiagramRulerSettings_VerticalRuler) properties are used to customize the rulers appearance in the diagram. -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight c# tabtitle="Ruler.cshtml" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/ruler/ruler/ruler.cshtml %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - {% tabs %} {% highlight c# tabtitle="Ruler.cshtml" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/ruler/ruler/ruler.cshtml %} {% endhighlight %} {% endtabs %} -{% endif %} - ![Ruler](images/Ruler.png) @@ -53,24 +41,12 @@ By default, the ruler segments are arranged based on pixel values. * The HorizontalRuler’s [`markerColor`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramDiagramRuler.html#Syncfusion_EJ2_Diagrams_DiagramDiagramRuler_MarkerColor) and VerticalRuler’s [`markerColor`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramDiagramRuler.html#Syncfusion_EJ2_Diagrams_DiagramDiagramRuler_MarkerColor) properties are used to define the ruler marker color and marker will be shown when performing the interaction in the diagram. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight c# tabtitle="CustomRuler.cshtml" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/ruler/customRuler/customRuler.cshtml %} {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="CustomRuler.cshtml" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/ruler/customRuler/customRuler.cshtml %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - N> The MarkerColor property can be customized using the [`Marker`](./style/#customizing-the-ruler) CSS style. diff --git a/diagram-sdk/asp-net-core/scroll-settings.md b/diagram-sdk/asp-net-core/scroll-settings.md index 8aa8ce652e..cff49b709e 100644 --- a/diagram-sdk/asp-net-core/scroll-settings.md +++ b/diagram-sdk/asp-net-core/scroll-settings.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Scroll Settings in Syncfusion® ASP.NET Core Diagram Component description: Learn here all about Scroll Settings in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -21,8 +21,6 @@ Scroll settings allows to read the scroll status, [`viewPortWidth`](https://help Diagram allows to pan the diagram before loading, so that any desired region of a large diagram is made to view. You can programmatically pan the diagram with the [`horizontalOffset`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramScrollSettings.html#Syncfusion_EJ2_Diagrams_DiagramScrollSettings_HorizontalOffset) and [`verticalOffset`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramScrollSettings.html#Syncfusion_EJ2_Diagrams_DiagramScrollSettings_VerticalOffset) properties of scroll settings. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/status/tagHelper %} @@ -32,26 +30,11 @@ Diagram allows to pan the diagram before loading, so that any desired region of {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/status/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Status.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/status/status.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Update scroll status You can programmatically change the scroll offsets at runtime by using the client-side method update. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/update/tagHelper %} @@ -61,19 +44,6 @@ You can programmatically change the scroll offsets at runtime by using the clien {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/update/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Update.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/update/update.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript var diagram = document.getElementById("container").ej2_instances[0]; @@ -97,8 +67,6 @@ The diagram client-side event [`ScrollChange`](https://help.syncfusion.com/cr/as The autoscroll behavior in your diagram can be enabled or disabled by using the [`canAutoScroll`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramScrollSettings.html#Syncfusion_EJ2_Diagrams_DiagramScrollSettings_CanAutoScroll) property of the diagram. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/autoscroll/tagHelper %} @@ -107,25 +75,10 @@ The autoscroll behavior in your diagram can be enabled or disabled by using the {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/autoscroll/autoscroll.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/autoscroll/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Autoscroll.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/autoscroll/autoscroll.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Autoscroll border The autoscroll border is used to specify the maximum distance between the object and diagram edge to trigger autoscroll. The default value is set as 15 for all sides (left, right, top, and bottom) and it can be changed by using the [`autoScrollBorder`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramScrollSettings.html#Syncfusion_EJ2_Diagrams_DiagramScrollSettings_AutoScrollBorder) property of page settings. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/auto/tagHelper %} @@ -134,19 +87,6 @@ The autoscroll border is used to specify the maximum distance between the object {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/auto/auto.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/auto/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Auto.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/auto/auto.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Controlling Autoscroll Speed You can control how often the scrolling needs to be performed automatically in the Diagram component during the auto-scrolling behavior. You can now adjust the frequency, ranging from slow and smooth to quick and rapid, to suit their preferences. To configure, set the value in milliseconds to the [`autoScrollFrequency`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramScrollSettings.html#Syncfusion_EJ2_Diagrams_DiagramScrollSettings_autoScrollFrequency) property within the scrollSettings class, allowing precise control over how often auto-scrolling occurs. @@ -164,8 +104,6 @@ The scroll limit allows to define the scrollable region of the diagram. It inclu The scrollSettings [`scrollableArea`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramScrollSettings.html#Syncfusion_EJ2_Diagrams_DiagramScrollSettings_ScrollableArea) allows to extend the scrollable region that is based on the scroll limit. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/default/tagHelper %} @@ -175,26 +113,11 @@ The scrollSettings [`scrollableArea`](https://help.syncfusion.com/cr/aspnetcore- {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/default/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Default.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/default/default.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Scroll padding The scroll padding allows to extend the scrollable region that is based on the scroll limit. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/padding/tagHelper %} @@ -204,26 +127,11 @@ The scroll padding allows to extend the scrollable region that is based on the s {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/padding/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Default.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/padding/padding.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Scrollable Area Scrolling beyond any particular rectangular area can be restricted by using the [`scrollableArea`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramScrollSettings.html#Syncfusion_EJ2_Diagrams_DiagramScrollSettings_ScrollableArea) property of scroll settings. To restrict scrolling beyond any custom region, set the [`scrollLimit`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramScrollSettings.html#Syncfusion_EJ2_Diagrams_DiagramScrollSettings_ScrollLimit) as “limited”. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/area/tagHelper %} @@ -233,20 +141,7 @@ Scrolling beyond any particular rectangular area can be restricted by using the {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/area/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Area.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/scrollsettings/area/area.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## 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. diff --git a/diagram-sdk/asp-net-core/serialization.md b/diagram-sdk/asp-net-core/serialization.md index 8eb5b60357..7602f9e859 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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Diagram.html#Syncfusion_EJ2_Diagrams_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..6a409d0f71 100644 --- a/diagram-sdk/asp-net-core/shapes.md +++ b/diagram-sdk/asp-net-core/shapes.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Shapes in ASP.NET Core Diagram Control | Syncfusion® description: Learn here all about shapes in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -25,9 +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. - -{% if page.publishingplatform == "aspnet-core" %} +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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -38,22 +36,10 @@ Texts can be added to the diagram as [`text`](https://help.syncfusion.com/cr/asp {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Text.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/text/text.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## 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. - -{% if page.publishingplatform == "aspnet-core" %} +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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -64,21 +50,9 @@ Diagram allows to add images as [`image`](https://help.syncfusion.com/cr/aspnetc {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Image.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/image/image.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - **Base64 Encoded Image Into The Image Node:** -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/imagebase64/tagHelper %} @@ -88,16 +62,6 @@ Diagram allows to add images as [`image`](https://help.syncfusion.com/cr/aspnetc {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Imagebase64.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/imagebase64/imagebase64.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - N> Deploy your HTML file in the web application and export the diagram (image node) or else the image node will not be exported in the Chrome and Firefox due to security issues. @@ -111,8 +75,6 @@ Stretch and align the image content anywhere but within the node boundary. The scale property of the node allows to stretch the image as you desired (either to maintain proportion or to stretch). By default, the [`scale`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Scale.html) property of the node is set as **meet**. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/scale/tagHelper %} @@ -122,16 +84,6 @@ The scale property of the node allows to stretch the image as you desired (eithe {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Scale.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/scale/scale.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - | Values | Images | |-------- | -------- | | None | ![None Alignment](images/Image1.png) | @@ -141,7 +93,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. @@ -149,8 +101,6 @@ N> HTML node cannot be exported to image format, like JPEG, PNG, and BMP. It is To render an HTML node with a content template, we need to define the desired template string within the [`content`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramHtml.html#Syncfusion_EJ2_Diagrams_DiagramHtml_Content) property. The following code illustrates how to create an HTML node with a content template: -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/HTML/tagHelper %} @@ -159,24 +109,12 @@ To render an HTML node with a content template, we need to define the desired te {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/HTML/HTML.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="HTML.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/HTML/HTML.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - #### Functional content template To render an HTML node using a functional template, we define a function that returns the template string. Within this function, modifications can be made based on the node's ID. The following code illustrates how to render an HTML node using the function and manipulate its content dynamically. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/HTML-FnContent/tagHelper %} @@ -185,22 +123,10 @@ The following code illustrates how to render an HTML node using the function and {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/HTML-FnContent/HTML.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="HTML.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/HTML-FnContent/HTML.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ### HTML Node With node template To render html node with nodeTemplate we need to define the nodeTemplate in the html file and assign it to the [`nodeTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Diagram.html#Syncfusion_EJ2_Diagrams_Diagram_NodeTemplate) property of the diagram. The following code illustrates how to render html node with nodeTemplate. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/HTML-Template/tagHelper %} @@ -209,24 +135,12 @@ To render html node with nodeTemplate we need to define the nodeTemplate in the {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/HTML-Template/HTML.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="HTML.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/HTML-Template/HTML.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - #### Functional node template We can define a function which returns a template string and assign it directly to the `nodeTemplate` property of diagram. Refer the code example below. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/HTML-TemplateFnNode/tagHelper %} @@ -235,16 +149,6 @@ Refer the code example below. {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/HTML-TemplateFnNode/HTML.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="HTML.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/HTML-TemplateFnNode/HTML.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Native Diagram provides support to embed SVG element into a node. The shape property of node allows to set the type of node. To create a [`native`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html#Syncfusion_EJ2_Diagrams_Shapes_Native) node, it should be set as **native**. @@ -255,8 +159,6 @@ N> Like HTML node, the native node also cannot be exported to image format. Fill To render an SVG node using a content template, define the desired template string in the node's [`content`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramNative.html#Syncfusion_EJ2_Diagrams_DiagramNative_Content) property. The following example demonstrates how to create an SVG node using a content template. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/native/tagHelper %} @@ -265,24 +167,12 @@ To render an SVG node using a content template, define the desired template stri {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/native/native.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Native.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/native/native.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - #### Functional content template Dynamic SVG content generation is supported through function-based templates that return SVG markup based on runtime conditions. This approach enables responsive graphics that adapt to node properties or the application's state. The following example demonstrates how to render an SVG node using a function and dynamically manipulate its content. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/native-FnContent/tagHelper %} @@ -291,22 +181,10 @@ The following example demonstrates how to render an SVG node using a function an {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/native-FnContent/native.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Native.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/native-FnContent/native.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ### Native node with node template The [`nodeTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Diagram.html#Syncfusion_EJ2_Diagrams_Diagram_NodeTemplate) property allows defining reusable SVG templates at the diagram level. This approach is efficient when multiple nodes share similar vector graphics or when centralized template management is required. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/native-Template/tagHelper %} @@ -315,24 +193,12 @@ The [`nodeTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/native-Template/SVG.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Native.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/native-Template/SVG.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - #### Functional node template A functional `nodeTemplate` implementation provides maximum flexibility for generating SVG templates programmatically and creating dynamic content. The following example demonstrates this approach. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/Native-TemplateFnNode/tagHelper %} @@ -341,16 +207,6 @@ The following example demonstrates this approach. {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/Native-TemplateFnNode/HTML.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Native.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/Native-TemplateFnNode/HTML.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## SVG content alignment Stretch and align the svg content anywhere but within the node boundary. @@ -372,8 +228,6 @@ The following tables illustrates all the possible scale options for the node. * To render a rounded rectangle, you need to set the type as basic and shape as rectangle. Set the [`cornerRadius`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramBasicShape.html#Syncfusion_EJ2_Diagrams_DiagramBasicShape_CornerRadius) property to specify the radius of rounded rectangle. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/basic/tagHelper %} @@ -383,16 +237,6 @@ The following tables illustrates all the possible scale options for the node. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Basic.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/basic/basic.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - N> By default, the `shape` property of the node is set as **basic**. @@ -408,8 +252,6 @@ The list of basic shapes are as follows. The [`Path`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html#Syncfusion_EJ2_Diagrams_Shapes_Path) node is a commonly used basic shape that allows visually to represent the geometrical information. To create a path node, specify the shape as **path**. The path property of node allows you to define the path to be drawn. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/path/tagHelper %} @@ -419,23 +261,11 @@ The [`Path`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagra {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Path.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/path/path.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Flow Shapes The [`flow`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Shapes.html#Syncfusion_EJ2_Diagrams_Shapes_Flow) shapes are used to represent the process flow. It is used for analyzing, designing, and managing for documentation process. To create a flow shape, specify the shape type as **flow**. Flow shapes and by default, it is considered as **process**. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/flow/tagHelper %} @@ -444,14 +274,4 @@ The [`flow`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagra {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/flow/flow.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Flow.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/shapes/flow/flow.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ![FlowShapes](images/FlowShapes.png) diff --git a/diagram-sdk/asp-net-core/swim-lane.md b/diagram-sdk/asp-net-core/swim-lane.md index 65c9ed64d3..7e379512fe 100644 --- a/diagram-sdk/asp-net-core/swim-lane.md +++ b/diagram-sdk/asp-net-core/swim-lane.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Swim Lane in ASP.NET Core Diagram Component description: Learn here all about Swim Lane in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -15,16 +15,14 @@ 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. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/swimlane/swimlaneheader/tagHelper %} @@ -34,25 +32,13 @@ N> By using this header, the swimlane interaction will be performed, like select {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Swimlaneheader.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/swimlane/swimlaneheader/swimlaneheader.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### 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. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/swimlane/headercustomize/tagHelper %} @@ -62,16 +48,6 @@ N> By default the swimlane orientation has Horizontal. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Headercustomize.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/swimlane/headercustomize/headercustomize.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### Dynamic customization of swimlane header @@ -93,15 +69,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. - -{% if page.publishingplatform == "aspnet-core" %} +* 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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -112,22 +86,10 @@ The number of [`lanes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Emptylane.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/swimlane/emptylane/emptylane.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### 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. - -{% if page.publishingplatform == "aspnet-core" %} +* 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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -138,23 +100,11 @@ The number of [`lanes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Laneheader.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/swimlane/laneheader/laneheader.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### 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. - -{% if page.publishingplatform == "aspnet-core" %} +* 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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -165,16 +115,6 @@ The number of [`lanes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Laneheadercustomize.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/swimlane/laneheadercustomize/laneheadercustomize.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### Dynamic customization of lane header @@ -192,9 +132,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. - -{% if page.publishingplatform == "aspnet-core" %} +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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -205,19 +143,6 @@ To add nodes to lane, you should add [`children`](https://help.syncfusion.com/cr {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/swimlane/lanechildren/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Lanechildren.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/swimlane/lanechildren/lanechildren.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### Dynamically add children to lane @@ -305,9 +230,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. - -{% if page.publishingplatform == "aspnet-core" %} +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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -318,16 +241,6 @@ Phase are the subprocess which will split each lane as horizontally or verticall {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Phase.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/swimlane/phase/phase.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### Dynamically add phase to lane @@ -343,12 +256,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. - -{% if page.publishingplatform == "aspnet-core" %} +* 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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -359,16 +270,6 @@ You can add the phase at runtime by using client side API method called `addPhas {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Phase.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/swimlane/phase/phase.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### Phase interaction @@ -392,8 +293,6 @@ Diagram provides the support to edit phase headers at runtime. The header editin Diagram provides support to add swimlane and phases to symbol palette. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/node/tagHelper %} @@ -403,16 +302,6 @@ Diagram provides support to add swimlane and phases to symbol palette. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Node.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/node/node/node.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### Drag and drop swimlane to palette @@ -424,4 +313,4 @@ Diagram provides support to add swimlane and phases to symbol palette. ## Limitations * Connectors cannot be canceled when added directly to swimlane. You must initialize the connector through connector collection. -* The phase line style cannot be edited. \ No newline at end of file +* The phase line style cannot be edited. diff --git a/diagram-sdk/asp-net-core/symbol-palette.md b/diagram-sdk/asp-net-core/symbol-palette.md index 2880349e07..97d189f0dc 100644 --- a/diagram-sdk/asp-net-core/symbol-palette.md +++ b/diagram-sdk/asp-net-core/symbol-palette.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Symbol Palette in Syncfusion® ASP.NET Core Diagram Component description: Learn here all about Symbol Palette in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -17,8 +17,6 @@ The **SymbolPalette** displays a collection of palettes. The palette shows a s The [`width`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SymbolPalette.html#Syncfusion_EJ2_Diagrams_SymbolPalette_Width) and [`height`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SymbolPalette.html#Syncfusion_EJ2_Diagrams_SymbolPalette_Height) properties of the symbol palette allows to define the size of the symbol palette. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/palette/tagHelper %} @@ -27,16 +25,6 @@ The [`width`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagr {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/palette/palette.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Palette.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/palette/palette.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Add palettes to SymbolPalette A palette allows to display a group of related symbols and it textually annotates the group with its header. A [`Palettes`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SymbolPalette.html#Syncfusion_EJ2_Diagrams_SymbolPalette_Palettes) can be added as a collection of symbol groups. @@ -45,8 +33,6 @@ The collection of predefined symbols can be added in palettes using the [`symbol To initialize a palette, define a JSON object with the property [`ID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SymbolPalettePalette.html#Syncfusion_EJ2_Diagrams_SymbolPalettePalette_Id) that is unique ID is set to the palettes. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/symbols/tagHelper %} @@ -55,16 +41,6 @@ To initialize a palette, define a JSON object with the property [`ID`](https://h {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/symbols/symbols.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Symbols.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/symbols/symbols.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Template-based symbols ### HTML and SVG node with content template @@ -76,8 +52,6 @@ The Symbol Palette supports the creation of complex nodes using HTML or SVG temp Templates can be defined either as strings or functions and assigned to the node's `content` property. Function-based templates offer the flexibility to generate dynamic content based on node-specific properties or external data sources. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/contentTemplate/tagHelper %} @@ -86,16 +60,6 @@ Templates can be defined either as strings or functions and assigned to the node {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/contentTemplate/palette.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="palette.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/contentTemplate/palette.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Customize the palette header Palettes can be annotated with its header texts. @@ -112,8 +76,6 @@ The [`description`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2 Also, any HTML element into a palette header can be embedded by defining the `getSymbolInfo` property. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/symbols/tagHelper %} @@ -123,16 +85,6 @@ Also, any HTML element into a palette header can be embedded by defining the `ge {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Symbols.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/symbols/symbols.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -165,8 +117,6 @@ Also, any HTML element into a palette header can be embedded by defining the `ge The symbol palette panel can be restricted from getting expanded. The `cancel` argument of the `paletteExpanding` property defines whether the palette's panel should be expanded or collapsed. By default, the panel is expanded. This restriction can be done for each of the palettes in the symbol palette as desired. In the following code example the basic shapes palette is restricted from getting collapsed whereas the swimlane shapes palette can be expanded or collapsed. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/restrict/tagHelper %} @@ -176,16 +126,6 @@ The symbol palette panel can be restricted from getting expanded. The `cancel` a {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Restrict.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/restrict/restrict.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -205,8 +145,6 @@ The symbol palette panel can be restricted from getting expanded. The `cancel` a The [`fit`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SymbolPalette.html#Syncfusion_EJ2_Diagrams_SymbolPalette_SymbolInfo) property defines whether the symbol has to be fit inside the size, that is defined by the symbol palette. For example, when you resize the rectangle in the symbol, ratio of the rectangle size has to be maintained rather changing into square shape. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/fit/tagHelper %} @@ -216,16 +154,6 @@ The [`fit`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagram {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Fit.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/fit/fit.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -245,8 +173,6 @@ The [`fit`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagram The size of the individual symbol can be customized. The [`symbolWidth`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SymbolPalette.html#Syncfusion_EJ2_Diagrams_SymbolPalette_SymbolWidth) and [`symbolHeight`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SymbolPalette.html#Syncfusion_EJ2_Diagrams_SymbolPalette_SymbolHeight) properties of node enables to define the size of the symbols. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/margin/tagHelper %} @@ -256,16 +182,6 @@ The size of the individual symbol can be customized. The [`symbolWidth`](https:/ {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Margin.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/margin/margin.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - The [`symbolMargin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SymbolPalette.html#Syncfusion_EJ2_Diagrams_SymbolPalette_SymbolMargin) property is used to create the space around elements, outside of any defined borders. @@ -273,8 +189,6 @@ The [`symbolMargin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ The symbol preview size of the palette items can be customized using [`symbolPreview`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SymbolPaletteSymbolPreview.html). The [`width`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SymbolPaletteSymbolPreview.html#Syncfusion_EJ2_Diagrams_SymbolPaletteSymbolPreview_Width) and [`height`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SymbolPaletteSymbolPreview.html#Syncfusion_EJ2_Diagrams_SymbolPaletteSymbolPreview_Height) properties of SymbolPalette enables to define the preview size to all the symbol palette items. The [`offset`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SymbolPaletteSymbolPreview.html#Syncfusion_EJ2_Diagrams_SymbolPaletteSymbolPreview_Offset) of the dragging helper relative to the mouse cursor. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/preview/tagHelper %} @@ -284,23 +198,11 @@ The symbol preview size of the palette items can be customized using [`symbolPre {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Preview.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/preview/preview.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Default settings While adding more number of symbols such as nodes and connectors to the palette, define the default settings for those objects through the [`getNodeDefaults`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SymbolPalette.html#Syncfusion_EJ2_Diagrams_SymbolPalette_GetNodeDefaults) and the [`getConnectorDefaults`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.SymbolPalette.html#Syncfusion_EJ2_Diagrams_SymbolPalette_GetConnectorDefaults) properties of diagram allows to define the default settings for nodes and connectors. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/default/tagHelper %} @@ -310,19 +212,6 @@ While adding more number of symbols such as nodes and connectors to the palette, {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/default/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Default.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/default/default.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -352,8 +241,6 @@ function getSymbolInfo(symbol) { The diagram provides support to add symbol description below each symbol of a palette. This descriptive representation of each symbol will enhance the details of the symbol visually. The height and width of the symbol description can also be set individually. * The property `getSymbolInfo` can be used to add the symbol description at runtime. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/description/tagHelper %} @@ -363,16 +250,6 @@ The diagram provides support to add symbol description below each symbol of a pa {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Description.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/description/description.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript @@ -418,8 +295,6 @@ To customize the tooltips for symbols in the symbol palette, assign a custom too Here, the code provided below demonstrates how to define tooltip content to symbols within a symbol palette. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/symboltooltip/tagHelper %} @@ -429,24 +304,12 @@ Here, the code provided below demonstrates how to define tooltip content to symb {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Description.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/symboltooltip/description.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### How to enable or disable the default tooltip for shapes in the symbol palette By default, the symbol ID is displayed as a tooltip when hovering over a symbol in the Symbol Palette. To disable this default tooltip, you can use the `showTooltip` property within the `getSymbolInfo` method. The `showTooltip` property is set to **true** by default, which enables the tooltip. The following example demonstrates how to configure selective tooltip display: -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/defaulttooltip/tagHelper %} @@ -455,16 +318,6 @@ The following example demonstrates how to configure selective tooltip display: {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/defaulttooltip/description.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Description.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/symbol-palette/defaulttooltip/description.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ```javascript function getNodeDefaults(symbol) { @@ -535,4 +388,4 @@ N> The diagram provides support to cancel the drag and drop operation from the s ## See Also -* [How to add the symbol to the diagram](./nodes) \ No newline at end of file +* [How to add the symbol to the diagram](./nodes) diff --git a/diagram-sdk/asp-net-core/tools.md b/diagram-sdk/asp-net-core/tools.md index 7223ed8f40..318316828b 100644 --- a/diagram-sdk/asp-net-core/tools.md +++ b/diagram-sdk/asp-net-core/tools.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Tools in Syncfusion® ASP.NET Core Diagram Component description: Learn here all about Tools in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -19,8 +19,6 @@ Drawing tool allows to draw any kind of node or connector during runtime by clic To draw a shape, set the JSON of that shape to the drawType property of the diagram and activate the drawing tool by using the [`tool`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramTools.html) property. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/Tools/shapes/tagHelper %} @@ -30,16 +28,6 @@ To draw a shape, set the JSON of that shape to the drawType property of the diag {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Shapes.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/Tools/shapes/shapes.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript function Created() { @@ -55,8 +43,6 @@ function Created() { } ``` -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/Tools/shapes/tagHelper %} @@ -66,16 +52,6 @@ function Created() { {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Shapes.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/Tools/shapes/shapes.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript function Created() { @@ -102,8 +78,6 @@ function Created() { To draw connectors, set the JSON of the connector to the drawType property. The drawing [`tool`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramTools.html) can be activated by using the tool property. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/Tools/shapes/tagHelper %} @@ -113,16 +87,6 @@ To draw connectors, set the JSON of the connector to the drawType property. The {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Shapes.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/Tools/shapes/shapes.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript function Created() { @@ -143,8 +107,6 @@ function Created() { Diagram allows to create a textNode, when you click on the diagram page. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/Tools/node/tagHelper %} @@ -154,16 +116,6 @@ Diagram allows to create a textNode, when you click on the diagram page. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Node.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/Tools/node/node.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript function Created() { @@ -186,8 +138,6 @@ Once you activate the TextTool, perform label editing of a node/connector. Diagram allows to create the polygon shape by clicking and moving the mouse at runtime on the diagram page. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/Tools/node/tagHelper %} @@ -197,16 +147,6 @@ Diagram allows to create the polygon shape by clicking and moving the mouse at r {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Node.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/Tools/node/node.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript function Created() { @@ -226,8 +166,6 @@ function Created() { Diagram allows to create the polyline segments with straight lines and angled vertices at the control points by clicking and moving the mouse at runtime on the diagram page. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/Tools/node/tagHelper %} @@ -237,16 +175,6 @@ Diagram allows to create the polyline segments with straight lines and angled ve {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Node.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/Tools/node/node.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript function Created() { @@ -296,17 +224,11 @@ function Created() { ## Events -{% if page.publishingplatform == "aspnet-core" %} - -[elementDraw](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Diagram.html#Syncfusion_EJ2_Diagrams_Diagram_ElementDraw) event is triggered when node or connector is drawn using drawing tool. -{% elsif page.publishingplatform == "aspnet-mvc" %} -[elementDraw](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Diagrams.Diagram.html#Syncfusion_EJ2_Diagrams_Diagram_ElementDraw) event is triggered when node or connector is drawn using drawing tool. +[elementDraw](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.Diagram.html#Syncfusion_EJ2_Diagrams_Diagram_ElementDraw) event is triggered when node or connector is drawn using drawing tool. -{% endif %} -{% if page.publishingplatform == "aspnet-core" %} {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -317,16 +239,6 @@ function Created() { {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Shapes.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/Tools/shapes/shapes.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript function Created() { @@ -350,8 +262,6 @@ Diagram has support for free-hand drawing to draw anything on the diagram page i The following code illustrates how to draw a freehand drawing. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/Tools/shapes/tagHelper %} @@ -361,16 +271,6 @@ The following code illustrates how to draw a freehand drawing. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Shapes.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/Tools/shapes/shapes.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript function Created() { @@ -385,4 +285,4 @@ function Created() { diagram.dataBind(); } -``` \ No newline at end of file +``` diff --git a/diagram-sdk/asp-net-core/tooltip.md b/diagram-sdk/asp-net-core/tooltip.md index e35a053107..b9917fafbe 100644 --- a/diagram-sdk/asp-net-core/tooltip.md +++ b/diagram-sdk/asp-net-core/tooltip.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Tooltip in Syncfusion® ASP.NET Core Diagram Component description: Learn here all about Tooltip in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -27,8 +27,6 @@ By default, diagram displays a tooltip to provide the size, position, and angle The diagram provides support to show tooltip when the mouse hovers over any node or connector. To show tooltip on mouse over, the [`tooltip`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramTooltipDiagram.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). -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/default/tagHelper %} @@ -38,23 +36,11 @@ The diagram provides support to show tooltip when the mouse hovers over any node {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Default.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/default/default.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### Disable tooltip at runtime The tooltip on mouse over can be disabled by assigning the [`tooltip`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramTooltipDiagram.html) property as `null`. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/disable/tagHelper %} @@ -64,23 +50,11 @@ The tooltip on mouse over can be disabled by assigning the [`tooltip`](https://h {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Disable.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/disable/disable.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Tooltip for a specific node/connector The tooltip can be customized for each node and connector. Remove the **InheritTooltip** option from the [`constraints`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.NodeConstraints.html) of that node or connector. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/object/tagHelper %} @@ -90,16 +64,6 @@ The tooltip can be customized for each node and connector. Remove the **InheritT {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Object.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/object/object.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Tooltip for Ports The tooltip feature has been implemented to support Ports, providing the ability to display information or descriptions when the mouse hovers over them. @@ -138,8 +102,6 @@ The following image illustrates how the diagram displays tooltips during an inte Here, the code provided below demonstrates the port tooltip Interaction. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/PortTooltip/tagHelper %} @@ -148,22 +110,10 @@ Here, the code provided below demonstrates the port tooltip Interaction. {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/PortTooltip/object.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Object.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/PortTooltip/object.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Tooltip template content Any text or image can be added to the tooltip, by default. To customize the tooltip layout or to create your own visualized element on the tooltip, template can be used. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/template/tagHelper %} @@ -173,16 +123,6 @@ Any text or image can be added to the tooltip, by default. To customize the tool {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Template.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/template/template.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript function getContent() { @@ -198,8 +138,6 @@ function getContent() { The diagram provides support to show tooltip around the node or connector that is hovered by the mouse. The tooltip can be aligned by using the [`position`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramDiagramTooltip.html#Syncfusion_EJ2_Diagrams_DiagramDiagramTooltip_Position) property of the tooltip. The [`relativeMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramDiagramTooltip.html#Syncfusion_EJ2_Diagrams_DiagramDiagramTooltip_RelativeMode) property of the tooltip defines whether the tooltip has to be displayed around the object or at the mouse position. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/object/tagHelper %} @@ -209,23 +147,11 @@ The diagram provides support to show tooltip around the node or connector that i {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Object.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/object/object.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### Tooltip relative to mouse position To display the tooltip at mouse position, need to set **mouse** option to the [`relativeMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramDiagramTooltip.html#Syncfusion_EJ2_Diagrams_DiagramDiagramTooltip_RelativeMode) property of the tooltip. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/mouse/tagHelper %} @@ -235,23 +161,11 @@ To display the tooltip at mouse position, need to set **mouse** option to the [` {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Mouse.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/mouse/mouse.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Tooltip animation To animate the tooltip, a set of specific animation effects are available, and it can be controlled by using the [`animation`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramDiagramTooltip.html#Syncfusion_EJ2_Diagrams_DiagramDiagramTooltip_Animation) property. The animation property also allows you to set delay, duration, and various other effects of your choice. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/animation/tagHelper %} @@ -260,24 +174,12 @@ To animate the tooltip, a set of specific animation effects are available, and i {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/animation/animation.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Animation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/animation/animation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Tooltip for Annotation Tooltips can be added to annotations to display additional information on mouseover. To display tooltips on mouseover, set the desired tooltip text to the [`tooltip`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramDiagramTooltip.html#Syncfusion_EJ2_Diagrams_DiagramDiagramTooltip_Animation) property of the annotation. Tooltips for Annotations can be enabled or disabled by setting the [`AnnotationConstraints`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.AnnotationConstraints.html) property as [`Tooltip`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.AnnotationConstraints.html). -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/annotationTooltip/tagHelper %} @@ -286,13 +188,3 @@ Tooltips for Annotations can be enabled or disabled by setting the [`AnnotationC {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/annotationTooltip/annotation.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Animation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/tooltip/annotationTooltip/annotation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - diff --git a/diagram-sdk/asp-net-core/umldiagram.md b/diagram-sdk/asp-net-core/umldiagram.md index 41d233c375..745d16fc22 100644 --- a/diagram-sdk/asp-net-core/umldiagram.md +++ b/diagram-sdk/asp-net-core/umldiagram.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Umldiagram in ASP.NET Core Diagram Component description: Learn here all about Umldiagram in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -21,18 +21,16 @@ 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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUmlClassMethod.html#Syncfusion_EJ2_Diagrams_DiagramUmlClassMethod_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. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/class/tagHelper %} @@ -42,25 +40,12 @@ The UML class diagram shapes are explained as follows. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/class/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Class.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/class/class.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### 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. @@ -68,8 +53,6 @@ The UML class diagram shapes are explained as follows. * The method parameter object properties of name and type allows to define the name and type of the parameter. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/interface/tagHelper %} @@ -79,28 +62,13 @@ The UML class diagram shapes are explained as follows. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/interface/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Interface.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/interface/interface.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### 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. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/enumeration/tagHelper %} @@ -110,19 +78,6 @@ The UML class diagram shapes are explained as follows. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/enumeration/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Enumeration.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/enumeration/enumeration.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## UML Class Relationships * A class may be involved in one or more relationships with other classes. A relationship can be one of the following types: @@ -144,8 +99,6 @@ Association is basically a set of links that connects elements of an UML model. The association property allows to define the type of association. The default value of association is “Directional”. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/association/tagHelper %} @@ -155,26 +108,11 @@ The association property allows to define the type of association. The default v {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/association/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Association.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/association/association.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### Aggregation Aggregation is a binary association between a property and one or more composite objects which group together a set of instances. Aggregation is decorated with a hollow diamond. To create an aggregation shape, define the relationship as “aggregation”. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/aggregation/tagHelper %} @@ -184,26 +122,11 @@ Aggregation is a binary association between a property and one or more composite {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/aggregation/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Aggregation.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/aggregation/aggregation.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### Composition Composition is a “strong” form of “aggregation”. Composition is decorated with a black diamond. To create a composition shape, define the relationship property of connector as “composition”. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/composition/tagHelper %} @@ -213,26 +136,11 @@ Composition is a “strong” form of “aggregation”. Composition is decorate {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/composition/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Composition.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/composition/composition.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### Dependency Dependency is a directed relationship, which is used to show that some UML elements needs or depends on other model elements for specifications. Dependency is shown as dashed line with opened arrow. To create a dependency, define the relationship property of connector as “dependency”. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/dependency/tagHelper %} @@ -242,19 +150,6 @@ Dependency is a directed relationship, which is used to show that some UML eleme {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/dependency/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Dependency.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/dependency/dependency.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### Inheritance @@ -262,8 +157,6 @@ Inheritance is also called as “generalization”. Inheritance is a binary taxo To create an inheritance, define the relationship as “inheritance”. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/inheritance/tagHelper %} @@ -273,19 +166,6 @@ To create an inheritance, define the relationship as “inheritance”. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/inheritance/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Inheritance.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/inheritance/inheritance.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### Multiplicity @@ -304,9 +184,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. - -{% if page.publishingplatform == "aspnet-core" %} +* 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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -317,19 +195,6 @@ Multiplicity is a definition of an inclusive interval of non-negative integers t {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/multiplicity/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Multiplicity.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/multiplicity/multiplicity.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## How to add UML child at runtime In UML nodes, child elements such as member, method and attribute can be added either programmatically or interactively. @@ -379,8 +244,6 @@ UML built-in shapes are efficiently rendered in a symbol palette. The `symbols` The following code example showcases the rendering of UML built-in shapes in a symbol palette. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/uml/tagHelper %} @@ -390,19 +253,6 @@ The following code example showcases the rendering of UML built-in shapes in a s {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/uml/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Umlclass.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/uml/umlclass.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Editing You can edit the name, attributes, and methods of the class diagram shapes just double clicking, similar to editing a node annotation. @@ -442,8 +292,6 @@ To create a UmlActivity, define type as "UmlActivity" and the list of built-in s | StructuredNode | ![StructuredNode](images/StructuredNode.png) | | Note | ![Note](images/Note.png) | -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/UmlActivity/tagHelper %} @@ -453,26 +301,11 @@ To create a UmlActivity, define type as "UmlActivity" and the list of built-in s {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/UmlActivity/razor %} -{% endhighlight %} -{% highlight c# tabtitle="UmlActivity.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/UmlActivity/UmlActivity.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### UmlActivity connector To create an UmlActivity connector, define the type as "UmlActivity" and flow as either "Exception" or "Control" or "Object". -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/UmlActivityConnector/tagHelper %} @@ -482,14 +315,4 @@ To create an UmlActivity connector, define the type as "UmlActivity" and flow as {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/UmlActivityConnector/razor %} -{% endhighlight %} -{% highlight c# tabtitle="UmlActivityConnector.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umldiagramshapes/UmlActivityConnector/UmlActivityConnector.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} \ No newline at end of file diff --git a/diagram-sdk/asp-net-core/umlsequencediagram.md b/diagram-sdk/asp-net-core/umlsequencediagram.md index b6d31f22e1..74d688df97 100644 --- a/diagram-sdk/asp-net-core/umlsequencediagram.md +++ b/diagram-sdk/asp-net-core/umlsequencediagram.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: UmlSequenceDiagram in Syncfusion® ASP.NET Core Diagram Component description: Learn here all about UmlSequenceDiagram in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -32,8 +32,6 @@ A sequence diagram contains several key elements, such as participants, messages The following code example illustrates how to create participants. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umlsequencediagram/participants/tagHelper %} @@ -42,19 +40,6 @@ The following code example illustrates how to create participants. {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umlsequencediagram/participants/umlseq.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umlsequencediagram/participants/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Model.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umlsequencediagram/participants/umlseq.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ![participants](./images/umlsequencediagrams/Participants.png) ### Messages @@ -84,8 +69,6 @@ The following code example illustrates how to create participants. The following code example illustrates how to create messages: -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umlsequencediagram/messages/tagHelper %} @@ -94,19 +77,6 @@ The following code example illustrates how to create messages: {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umlsequencediagram/messages/umlseq.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umlsequencediagram/messages/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Model.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umlsequencediagram/messages/umlseq.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ![messages](./images/umlsequencediagrams/msg.png) ### Activation Boxes @@ -123,8 +93,6 @@ The following code example illustrates how to create messages: The following code example illustrates how to create activation boxes. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umlsequencediagram/activations/tagHelper %} @@ -133,19 +101,6 @@ The following code example illustrates how to create activation boxes. {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umlsequencediagram/activations/umlseq.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umlsequencediagram/activations/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Model.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umlsequencediagram/activations/umlseq.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ![activations](./images/umlsequencediagrams/activations.png) ### Fragments @@ -180,8 +135,6 @@ The [UmlSequenceFragmentType](https://help.syncfusion.com/cr/aspnetcore-js2/Sync The following code example illustrates how to create fragments. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umlsequencediagram/fragments/tagHelper %} @@ -190,19 +143,6 @@ The following code example illustrates how to create fragments. {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umlsequencediagram/fragments/umlseq.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umlsequencediagram/fragments/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Model.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/umlsequencediagram/fragments/umlseq.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ![fragments](./images/umlsequencediagrams/fragment.png) ### Customizing Participant Spacing in Sequence Diagram diff --git a/diagram-sdk/asp-net-core/undo-redo.md b/diagram-sdk/asp-net-core/undo-redo.md index 442dc3af48..20052bd33e 100644 --- a/diagram-sdk/asp-net-core/undo-redo.md +++ b/diagram-sdk/asp-net-core/undo-redo.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Undo Redo in Syncfusion® ASP.NET Core Diagram Component description: Learn here all about Undo Redo in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -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,9 +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. - -{% if page.publishingplatform == "aspnet-core" %} +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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -54,19 +52,6 @@ The client-side method [`startGroupAction`](../api/diagram) is used to notify th {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/undoRedo/undoRedo/razor %} -{% endhighlight %} -{% highlight c# tabtitle="UndoRedo.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/undoRedo/undoRedo/undoRedo.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript var diagram = document.getElementById('container').ej2_instances[0]; @@ -125,7 +110,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..9567866fbe 100644 --- a/diagram-sdk/asp-net-core/user-handle.md +++ b/diagram-sdk/asp-net-core/user-handle.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: User Handle in Syncfusion® ASP.NET Core Diagram Component description: Learn here all about User Handle in Syncfusion® ASP.NET Core Diagram component of Syncfusion Essential® JS 2 and more. @@ -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 @@ -38,8 +38,6 @@ Margin is an absolute value used to add some blank space in any one of its four The appearance of the user handle can be customized by using the [`size`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html#Syncfusion_EJ2_Diagrams_DiagramUserHandle_Size), [`borderColor`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html#Syncfusion_EJ2_Diagrams_DiagramUserHandle_BorderColor), [`backgroundColor`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html#Syncfusion_EJ2_Diagrams_DiagramUserHandle_BackgroundColor), [`visible`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html#Syncfusion_EJ2_Diagrams_DiagramUserHandle_Visible), [`pathData`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html#Syncfusion_EJ2_Diagrams_DiagramUserHandle_PathData), and [`pathColor`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html#Syncfusion_EJ2_Diagrams_DiagramUserHandle_PathColor) properties of the [`userHandles`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Diagrams.DiagramUserHandle.html). -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/interaction/node/tagHelper %} @@ -49,16 +47,6 @@ The appearance of the user handle can be customized by using the [`size`](https: {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Node.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/interaction/node/node.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ```javascript function getTool(action) { @@ -111,8 +99,6 @@ The fixed user handles are used to add some frequently used commands around the To create the fixed user handles, define and add them to the collection of nodes and connectors property. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/interaction/fixeduserhandle/tagHelper %} @@ -122,16 +108,6 @@ To create the fixed user handles, define and add them to the collection of nodes {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Node.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/interaction/fixeduserhandle/node.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Customization @@ -159,8 +135,6 @@ Diagram allows to set size for the fixed user handles by using the `width` and ` * The `visible` property of the fixed user handle enables or disables the visibility of fixed user handle. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/interaction/customizingfixeduserhandle/tagHelper %} @@ -170,16 +144,6 @@ Diagram allows to set size for the fixed user handles by using the `width` and ` {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Fixeduserhandle.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/interaction/customizingfixeduserhandle/fixeduserhandle.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - N> The fixed user handle id need to be unique. @@ -208,8 +172,6 @@ The following table shows all the possible alignments visually shows the fixed u | (0.5,1) | Top = 20 |![fixed user handle for node](images/bottomcenter.png)| | (1,1) | Left = 20 |![fixed user handle for node](images/bottomright.png)| -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/interaction/nodefixeduserhandle/tagHelper %} @@ -219,16 +181,6 @@ The following table shows all the possible alignments visually shows the fixed u {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Node.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/interaction/nodefixeduserhandle/node.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ## Customizing the connector fixed user handle @@ -267,8 +219,6 @@ The following table shows all the possible alignments visually shows the fixed u N> Displacement will not be done if the alignment is set to be center. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/interaction/connectorfixeduserhandle/tagHelper %} @@ -278,22 +228,10 @@ N> Displacement will not be done if the alignment is set to be center. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Fixeduserhandle.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/interaction/connectorfixeduserhandle/fixeduserhandle.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - ### 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. - -{% if page.publishingplatform == "aspnet-core" %} +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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -303,21 +241,9 @@ To show tooltip on mouse over, the [`tooltip`](../api/diagram#tooltip) property {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/interaction/node/node.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Node.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/interaction/node/node.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ### 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. - -{% if page.publishingplatform == "aspnet-core" %} +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. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -327,21 +253,9 @@ The diagram provides support to show tooltip when the mouse hovers over any fixe {% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/interaction/nodefixeduserhandle2/node.cs %} {% endhighlight %} {% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight c# tabtitle="Node.cs" %} -{% include code-snippet/diagram-sdk/asp-net-core/asp-net-core/asp-net-core/interaction/nodefixeduserhandle2/node.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ### 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 `