From 1e9c77f2bfe06f7ce980188f642a902c18a83f1b Mon Sep 17 00:00:00 2001 From: Sharly-Atieno Date: Tue, 16 Jun 2026 12:24:33 +0300 Subject: [PATCH 01/14] SEO-222721-Eval-Action-Plan-UG-work-Blazor-Diagram --- blazor/diagram/Blazor-PostgreSQL.md | 4 ++-- blazor/diagram/accessibility.md | 2 +- blazor/diagram/annotations/interactions.md | 2 +- blazor/diagram/annotations/node-annotation.md | 2 +- .../collaborative-editing/collaborative-editing.md | 2 +- blazor/diagram/commands.md | 2 +- blazor/diagram/connectors/connectors.md | 8 ++++---- blazor/diagram/connectors/customization.md | 6 +++--- blazor/diagram/connectors/events.md | 2 +- blazor/diagram/connectors/interactions.md | 2 +- blazor/diagram/connectors/segments.md | 2 +- blazor/diagram/constraints.md | 4 ++-- blazor/diagram/container.md | 2 +- blazor/diagram/context-menu.md | 2 +- blazor/diagram/data-binding.md | 4 ++-- blazor/diagram/events.md | 4 ++-- blazor/diagram/export.md | 2 +- blazor/diagram/flip.md | 2 +- blazor/diagram/getting-started-with-maui-app.md | 8 +++++--- blazor/diagram/getting-started-with-wasm-app.md | 10 ++++++---- blazor/diagram/getting-started-with-web-app.md | 10 ++++++---- blazor/diagram/getting-started.md | 10 ++++++---- blazor/diagram/grid-lines.md | 2 +- blazor/diagram/group.md | 8 ++++---- blazor/diagram/how-to.md | 2 +- blazor/diagram/interaction.md | 10 +++++----- blazor/diagram/layout/automatic-layout.md | 8 ++++---- blazor/diagram/layout/events.md | 2 +- blazor/diagram/layout/organizational-chart.md | 2 +- blazor/diagram/layout/radial-tree.md | 2 +- blazor/diagram/migration-classic-to-native.md | 2 +- blazor/diagram/nodes/events.md | 4 ++-- blazor/diagram/nodes/expand-and-collapse.md | 2 +- blazor/diagram/nodes/interaction.md | 2 +- blazor/diagram/nodes/nodes.md | 14 +++++++------- blazor/diagram/nodes/positioning.md | 10 +++++----- blazor/diagram/overview-component.md | 4 ++-- blazor/diagram/overview.md | 6 ++++-- blazor/diagram/page-settings.md | 4 ++-- blazor/diagram/print.md | 2 +- blazor/diagram/rulers.md | 2 +- blazor/diagram/scroll-settings.md | 4 ++-- blazor/diagram/serialization.md | 6 +++--- blazor/diagram/shapes.md | 4 ++-- blazor/diagram/style.md | 2 +- blazor/diagram/swimlane/lane/interaction.md | 2 +- blazor/diagram/swimlane/lane/lane.md | 2 +- blazor/diagram/swimlane/swimlane.md | 2 +- blazor/diagram/symbol-palette/customization.md | 2 +- blazor/diagram/symbol-palette/symbol-palette.md | 2 +- blazor/diagram/tool-tip.md | 2 +- blazor/diagram/tools.md | 2 +- blazor/diagram/uml-sequence-diagram.md | 2 +- blazor/diagram/undo-redo.md | 2 +- blazor/diagram/user-handle.md | 6 +++--- 55 files changed, 115 insertions(+), 105 deletions(-) diff --git a/blazor/diagram/Blazor-PostgreSQL.md b/blazor/diagram/Blazor-PostgreSQL.md index 5cd82e76df..f1297cedeb 100644 --- a/blazor/diagram/Blazor-PostgreSQL.md +++ b/blazor/diagram/Blazor-PostgreSQL.md @@ -9,7 +9,7 @@ documentation: ug # Loading Blazor Diagram from PostgreSQL Database -This guide explains how to display an organizational chart using data stored in a PostgreSQL database and visualize it with the Syncfusion® Blazor Diagram component. +This guide explains how to display an organizational chart using data stored in a PostgreSQL database and visualize it with the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component. It covers: * Design and store organizational chart data in a database. @@ -543,7 +543,7 @@ The backend setup is now complete. The next section focuses on configuring the B ### Step 1: Install and Configure Blazor Diagram Component -This section explains how to render an organizational chart using the Syncfusion® Blazor Diagram component by binding it to data loaded from the backend API. +This section explains how to render an organizational chart using the Blazor Diagram component by binding it to data loaded from the backend API. **Instructions:** diff --git a/blazor/diagram/accessibility.md b/blazor/diagram/accessibility.md index d0aa634643..c959b1fe0b 100644 --- a/blazor/diagram/accessibility.md +++ b/blazor/diagram/accessibility.md @@ -9,7 +9,7 @@ documentation: ug # Accessibility Features in Blazor Diagram Component -Accessibility in the Blazor Diagram component is achieved through compliance with [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, as well as [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) and supports keyboard navigation. This ensures that users can effectively interact with diagram features using assistive technologies such as screen readers. +Accessibility in the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component is achieved through compliance with [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, as well as [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) and supports keyboard navigation. This ensures that users can effectively interact with diagram features using assistive technologies such as screen readers. The accessibility compliance for the Blazor Diagram component is outlined below: diff --git a/blazor/diagram/annotations/interactions.md b/blazor/diagram/annotations/interactions.md index b83a2b3021..b6e7f4f306 100644 --- a/blazor/diagram/annotations/interactions.md +++ b/blazor/diagram/annotations/interactions.md @@ -9,7 +9,7 @@ documentation: ug # Annotation Interaction in Blazor Diagram Component -Diagram provides the support to the annotations rotation interactively. +[Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) provides the support to the annotations rotation interactively. ## How to Rotate Annotations The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_RotationReference) property of an annotation allows you to control whether the text should rotate relative to its parent node or the Page. The following code examples illustrate how to configure `RotationReference` for an annotation. diff --git a/blazor/diagram/annotations/node-annotation.md b/blazor/diagram/annotations/node-annotation.md index 285a060f49..205159695b 100644 --- a/blazor/diagram/annotations/node-annotation.md +++ b/blazor/diagram/annotations/node-annotation.md @@ -9,7 +9,7 @@ documentation: ug # Node Annotation Position in Blazor Diagram Component -The diagram allows you to customize the position and appearance of the annotation efficiently. Annotations can be aligned relative to the node boundaries. It has margin, offset, horizontal, and vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [ShapeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html) class. +The [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) allows you to customize the position and appearance of the annotation efficiently. Annotations can be aligned relative to the node boundaries. It has margin, offset, horizontal, and vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [ShapeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html) class. Annotations of a node can be positioned using the following properties of `ShapeAnnotation`. diff --git a/blazor/diagram/collaborative-editing/collaborative-editing.md b/blazor/diagram/collaborative-editing/collaborative-editing.md index 4776603b7a..13cd728f69 100644 --- a/blazor/diagram/collaborative-editing/collaborative-editing.md +++ b/blazor/diagram/collaborative-editing/collaborative-editing.md @@ -13,7 +13,7 @@ Collaborative editing enables multiple users to edit diagrams simultaneously in ## Purpose -Collaborative editing in diagram control allows multiple users to edit and review diagrams in real time, ensuring accuracy, consistency, and faster updates. It streamlines teamwork by reducing delays, improving communication through comments, and maintaining data integrity with version tracking. +Collaborative editing in [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) control allows multiple users to edit and review diagrams in real time, ensuring accuracy, consistency, and faster updates. It streamlines teamwork by reducing delays, improving communication through comments, and maintaining data integrity with version tracking. ## Configuration diff --git a/blazor/diagram/commands.md b/blazor/diagram/commands.md index 2651168328..8c8e732a2d 100644 --- a/blazor/diagram/commands.md +++ b/blazor/diagram/commands.md @@ -9,7 +9,7 @@ documentation: ug # Commands in Diagram Component -There are several commands available in the diagram as follows. +There are several commands available in the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) as follows. * Alignment commands * Distribute commands diff --git a/blazor/diagram/connectors/connectors.md b/blazor/diagram/connectors/connectors.md index 06d2b166b8..85798069d0 100644 --- a/blazor/diagram/connectors/connectors.md +++ b/blazor/diagram/connectors/connectors.md @@ -15,7 +15,7 @@ Connectors create links between points, nodes or ports to represent the relation A [Connector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html) is created by defining source and target points of the connector. The path to be drawn can be defined with a collection of segments. -To learn how to create and customize connectors easily in the Blazor Diagram component, watch the following video: +To learn how to create and customize connectors easily in the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component, watch the following video: {% youtube "youtube:https://www.youtube.com/watch?v=EH4c8QVQoHo" %} @@ -626,14 +626,14 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn * [Why save and load functionality for nodes and connectors in Blazor Diagram?](https://support.syncfusion.com/kb/article/16008/why-save-and-load-functionality-for-nodes-and-connectors-in-blazor-diagram) -* [How to Add Nodes or Connectors by Clicking on the Diagram in Syncfusion® Blazor Diagram Component?](https://support.syncfusion.com/kb/article/17233/how-to-add-nodes-or-connectors-by-clicking-on-the-diagram-in-syncfusion-blazor-diagram-component) +* [How to Add Nodes or Connectors by Clicking on the Diagram in Blazor Diagram Component?](https://support.syncfusion.com/kb/article/17233/how-to-add-nodes-or-connectors-by-clicking-on-the-diagram-in-syncfusion-blazor-diagram-component) * [How to add nodes and connectors at runtime asynchronously in Blazor Diagram Component?](https://support.syncfusion.com/kb/article/17285/how-to-add-nodes-and-connectors-at-runtime-asynchronously-in-blazor-diagram-component) * [How to render the Freehand connector in symbol palette?](https://support.syncfusion.com/kb/article/17236/how-to-render-the-freehand-connector-in-symbol-palette) -* [How to Select and Highlight Ports and Connect Selected Elements in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/18997/how-to-select-and-highlight-ports-and-connect-selected-elements-in-syncfusion-blazor-diagram) +* [How to Select and Highlight Ports and Connect Selected Elements in Blazor Diagram](https://support.syncfusion.com/kb/article/18997/how-to-select-and-highlight-ports-and-connect-selected-elements-in-syncfusion-blazor-diagram) -* [How to Dynamically Create and Connect Diagram Nodes with Annotations via Ports in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/19001/how-to-dynamically-create-and-connect-diagram-nodes-with-annotations-via-ports-in-syncfusion-blazor-diagram) +* [How to Dynamically Create and Connect Diagram Nodes with Annotations via Ports in Blazor Diagram](https://support.syncfusion.com/kb/article/19001/how-to-dynamically-create-and-connect-diagram-nodes-with-annotations-via-ports-in-syncfusion-blazor-diagram) * [How to Provide IDs for Diagram Elements in Blazor Diagrams](https://support.syncfusion.com/kb/article/17898/how-to-provide-ids-for-diagram-elements-in-blazor-diagrams) \ No newline at end of file diff --git a/blazor/diagram/connectors/customization.md b/blazor/diagram/connectors/customization.md index 9a45c47a92..5ffa82475b 100644 --- a/blazor/diagram/connectors/customization.md +++ b/blazor/diagram/connectors/customization.md @@ -11,7 +11,7 @@ documentation: ug ## How to Customize Connector Decorators -Diagram allows you to customize the connector appearances. The following topics describe how to customize several properties of connectors. +[Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) allows you to customize the connector appearances. The following topics describe how to customize several properties of connectors. * The starting and ending points of a connector can be decorated with shapes such as arrows, circles, diamonds, or custom paths. The connection end points can be decorated with the [SourceDecorator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_SourceDecorator) and [TargetDecorator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_TargetDecorator) properties of the connector. @@ -996,6 +996,6 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn * [How to Customize Connector Styles in a Hierarchical Layout in Blazor Diagram](https://support.syncfusion.com/kb/article/16310/how-to-customize-connector-styles-in-a-hierarchical-layout-in-blazor-diagram) -* [How to Dynamically Create and Connect Diagram Nodes with Annotations via Ports in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/19001/how-to-dynamically-create-and-connect-diagram-nodes-with-annotations-via-ports-in-syncfusion-blazor-diagram) +* [How to Dynamically Create and Connect Diagram Nodes with Annotations via Ports in Blazor Diagram](https://support.syncfusion.com/kb/article/19001/how-to-dynamically-create-and-connect-diagram-nodes-with-annotations-via-ports-in-syncfusion-blazor-diagram) -* [How to Select and Highlight Ports and Connect Selected Elements in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/18997/how-to-select-and-highlight-ports-and-connect-selected-elements-in-syncfusion-blazor-diagram) \ No newline at end of file +* [How to Select and Highlight Ports and Connect Selected Elements in Blazor Diagram](https://support.syncfusion.com/kb/article/18997/how-to-select-and-highlight-ports-and-connect-selected-elements-in-syncfusion-blazor-diagram) \ No newline at end of file diff --git a/blazor/diagram/connectors/events.md b/blazor/diagram/connectors/events.md index 97aec2d9d9..d57c640ba7 100644 --- a/blazor/diagram/connectors/events.md +++ b/blazor/diagram/connectors/events.md @@ -11,7 +11,7 @@ documentation: ug ## How to Handle Selection Change Event -* While selecting the diagram elements, the following events can be used to do the customization. +* While selecting the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) elements, the following events can be used to do the customization. * `SelectionChanging` occurs before the selection is committed and can be canceled; `SelectionChanged` occurs after selection is updated and is typically used for UI updates or logging. |Event Name|Arguments|Description| diff --git a/blazor/diagram/connectors/interactions.md b/blazor/diagram/connectors/interactions.md index 2ab44a84ad..0496b7c4a1 100644 --- a/blazor/diagram/connectors/interactions.md +++ b/blazor/diagram/connectors/interactions.md @@ -9,7 +9,7 @@ documentation: ug # Interaction in Diagram Component -Connectors support interactive operations such as selection, dragging, and routing to improve diagram editing and readability. +Connectors support interactive operations such as selection, dragging, and routing to improve [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) editing and readability. ## How to Select and Deselect Connectors diff --git a/blazor/diagram/connectors/segments.md b/blazor/diagram/connectors/segments.md index 29b25a0187..91cfb7538a 100644 --- a/blazor/diagram/connectors/segments.md +++ b/blazor/diagram/connectors/segments.md @@ -9,7 +9,7 @@ documentation: ug # Segments in Blazor Diagram Component -The path of the connector is defined with a collection of segments. Each segment determines how the connector travels between its source and target points. The Diagram component supports the following types of segments. +The path of the connector is defined with a collection of segments. Each segment determines how the connector travels between its source and target points. The [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component supports the following types of segments. * Straight Segments * Orthogonal Segments diff --git a/blazor/diagram/constraints.md b/blazor/diagram/constraints.md index 72977b660e..c9da376454 100644 --- a/blazor/diagram/constraints.md +++ b/blazor/diagram/constraints.md @@ -9,7 +9,7 @@ documentation: ug # Constraints in Diagram Component -Constraints are used to enable or disable specific behaviors of the diagram, nodes, and connectors. Constraints are provided as flagged enumerations, so multiple behaviors can be enabled or disabled using bitwise operators `(&, |, ~, <<, etc.)`. +Constraints are used to enable or disable specific behaviors of the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram), nodes, and connectors. Constraints are provided as flagged enumerations, so multiple behaviors can be enabled or disabled using bitwise operators `(&, |, ~, <<, etc.)`. To learn more about bitwise operators, refer to [Bitwise Operations](constraints#how-to-use-bitwise-operations). @@ -838,7 +838,7 @@ In the previous example, check whether the rotate constraints are enabled in a n ## See also -* [How to Disable Node Interaction While Maintaining Layout Updates in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/20189/how-to-disable-node-interaction-while-maintaining-layout-updates-in-syncfusion-blazor-diagram) +* [How to Disable Node Interaction While Maintaining Layout Updates in Blazor Diagram](https://support.syncfusion.com/kb/article/20189/how-to-disable-node-interaction-while-maintaining-layout-updates-in-syncfusion-blazor-diagram) * [How to Zoom the Diagram Without Ctrl + Wheel and Enable Pan on Right-Click Instead of Left-Click in Blazor Diagram](https://support.syncfusion.com/kb/article/18992/how-to-zoom-the-diagram-without-ctrl--wheel-and-enable-pan-on-right-click-instead-of-left-click-in-blazor-diagram) diff --git a/blazor/diagram/container.md b/blazor/diagram/container.md index ea1feb6744..8cd7d13d43 100644 --- a/blazor/diagram/container.md +++ b/blazor/diagram/container.md @@ -9,7 +9,7 @@ documentation: ug # Container in Blazor Diagram Component -Containers provide a structured way to organize and manage collections of diagram elements. They act as logical groupings of shapes enclosed by a customizable border, allowing for intuitive drag-and-drop operations during runtime. Changes to the container, such as position, size, or style, do not affect its children. This enhances diagram clarity by maintaining organization while allowing individual elements to be edited separately. +Containers provide a structured way to organize and manage collections of [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) elements. They act as logical groupings of shapes enclosed by a customizable border, allowing for intuitive drag-and-drop operations during runtime. Changes to the container, such as position, size, or style, do not affect its children. This enhances diagram clarity by maintaining organization while allowing individual elements to be edited separately. ## How to Create a Container A container can be created and added to the diagram either programmatically or interactively. diff --git a/blazor/diagram/context-menu.md b/blazor/diagram/context-menu.md index faeeb7b41e..0ec96bed27 100644 --- a/blazor/diagram/context-menu.md +++ b/blazor/diagram/context-menu.md @@ -12,7 +12,7 @@ documentation: ug In graphical user interfaces (GUIs), a context menu is a menu that opens on right-click and can create a nested level of context menu items. -The Diagram component provides built-in context menu items and supports custom items through the [ContextMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html) property. +The [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component provides built-in context menu items and supports custom items through the [ContextMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html) property. ## How to Enable Default Context Menu diff --git a/blazor/diagram/data-binding.md b/blazor/diagram/data-binding.md index 39dd82b7a6..d6e132f74e 100644 --- a/blazor/diagram/data-binding.md +++ b/blazor/diagram/data-binding.md @@ -9,7 +9,7 @@ documentation: ug # Data Binding in Diagram Component -* The [Diagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) can be populated with [Nodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nodes) and [Connectors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Connectors) from an external data source. +* The [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) can be populated with [Nodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nodes) and [Connectors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Connectors) from an external data source. * Diagram exposes data-related properties to specify the data source fields from where the node information has to be retrieved. @@ -2049,7 +2049,7 @@ A complete working sample can be downloaded from [github](https://github.com/Syn * [How to Specify Parent Child Relationship in Blazor Diagram Datasource](https://support.syncfusion.com/kb/article/16306/how-to-specify-parent-child-relationship-in-blazor-diagram-datasource) -* [Why is it Important to Set the ParentID to Empty for at Least One Node When Creating a Layout in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/18708/why-is-it-important-to-set-the-parentid-to-empty-for-at-least-one-node-when-creating-a-layout-in-syncfusion-blazor-diagram) +* [Why is it Important to Set the ParentID to Empty for at Least One Node When Creating a Layout in Blazor Diagram](https://support.syncfusion.com/kb/article/18708/why-is-it-important-to-set-the-parentid-to-empty-for-at-least-one-node-when-creating-a-layout-in-syncfusion-blazor-diagram) * [How to Create a Family Tree Structure in Blazor Diagram](https://support.syncfusion.com/kb/article/16300/how-to-create-a-family-tree-structure-in-blazor-diagram) diff --git a/blazor/diagram/events.md b/blazor/diagram/events.md index 02387b300d..0ed4914019 100644 --- a/blazor/diagram/events.md +++ b/blazor/diagram/events.md @@ -11,7 +11,7 @@ documentation: ug ## How to Use the Created Event -The [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Created) event is raised after the Diagram component is fully rendered and initialized. This event provides an opportunity to execute custom logic or perform specific actions immediately after the diagram is created. For instance, use this event to programmatically select objects, modify diagram properties, or initialize additional components that depend on the diagram's existence. +The [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Created) event is raised after the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component is fully rendered and initialized. This event provides an opportunity to execute custom logic or perform specific actions immediately after the diagram is created. For instance, use this event to programmatically select objects, modify diagram properties, or initialize additional components that depend on the diagram's existence. ```cshtml @using Syncfusion.Blazor.Diagram @@ -470,7 +470,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## See also -* [How to Identify the Clicked Diagram Elements in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/17226/how-to-identify-the-clicked-diagram-elments-in-syncfusion-blazor-diagram) +* [How to Identify the Clicked Diagram Elements in Blazor Diagram](https://support.syncfusion.com/kb/article/17226/how-to-identify-the-clicked-diagram-elments-in-syncfusion-blazor-diagram) * [How to Notify the Double-Click Event in Blazor Diagram](https://support.syncfusion.com/kb/article/16014/how-to-notify-the-double-click-event-in-blazor-diagram) diff --git a/blazor/diagram/export.md b/blazor/diagram/export.md index 75dc4ed328..789707f566 100644 --- a/blazor/diagram/export.md +++ b/blazor/diagram/export.md @@ -8,7 +8,7 @@ documentation: ug --- # Exporting in Blazor Diagram Component -To save and export a Blazor Diagram, watch the following video tutorial for a quick walkthrough of key options and workflows. +To save and export a [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram), watch the following video tutorial for a quick walkthrough of key options and workflows. {% youtube "youtube:https://www.youtube.com/watch?v=2hhl00gMObc" %} diff --git a/blazor/diagram/flip.md b/blazor/diagram/flip.md index 596eda7379..ae72cca877 100644 --- a/blazor/diagram/flip.md +++ b/blazor/diagram/flip.md @@ -9,7 +9,7 @@ documentation: ug # Flip in Blazor Diagram Component -The diagram component supports flipping nodes, connectors, and groups. Flipping creates a mirror image of the original element, allowing for versatile visual representations within the diagram. +The [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component supports flipping nodes, connectors, and groups. Flipping creates a mirror image of the original element, allowing for versatile visual representations within the diagram. ## How to Flip the Node or Group diff --git a/blazor/diagram/getting-started-with-maui-app.md b/blazor/diagram/getting-started-with-maui-app.md index 23f50cb8ca..56a7078214 100644 --- a/blazor/diagram/getting-started-with-maui-app.md +++ b/blazor/diagram/getting-started-with-maui-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with the Diagram Component in the Blazor MAUI App -This guide walks through the step-by-step process of integrating the [Syncfusion® Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component in a Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). +This guide walks through the step-by-step process of integrating the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component in a Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). > **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) @@ -128,9 +128,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Syncfusion® Blazor Diagram component +## Add Blazor Diagram component -Add the Syncfusion® Diagram component in the **~/Pages/Home.razor** file. +Add the Blazor Diagram component in the **~/Pages/Home.razor** file. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -285,6 +285,8 @@ N> If encounter any errors while using the Android Emulator, refer to the follow ![Blazor Diagram Component](images/blazor-diagram-maui-andoid-page.webp ) +N> Looking for the full Blazor Diagram component overview, features, pricing, and documentation? Visit the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) page. + ## See also * [How to Create a Diagram Builder in MAUI platform](https://support.syncfusion.com/kb/article/11346/how-to-create-diagram-builder-in-maui-platform) diff --git a/blazor/diagram/getting-started-with-wasm-app.md b/blazor/diagram/getting-started-with-wasm-app.md index 9bc34b04e1..84721d762b 100644 --- a/blazor/diagram/getting-started-with-wasm-app.md +++ b/blazor/diagram/getting-started-with-wasm-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Diagram Component in the Blazor WASM App -This section explains the step-by-step process for integrating the [Syncfusion® Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component into a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). We'll break it down into simple steps to make it easy to follow. Additionally, you can find a fully functional example project on our [GitHub repository](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent). +This section explains the step-by-step process for integrating the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component into a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). We'll break it down into simple steps to make it easy to follow. Additionally, you can find a fully functional example project on our [GitHub repository](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent). > **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) @@ -164,7 +164,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. -## Add Syncfusion® Blazor Diagram component +## Add Blazor Diagram component Add the DiagramComponent to create an empty diagram. @@ -284,8 +284,10 @@ In this example: * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application in Visual Studio. * Run the application using `dotnet run` command in Command prompt. -* This will render the Syncfusion® Blazor Diagram component in the default web browser. +* This will render the Blazor Diagram component in the default web browser. The output will appear as follows: -![Getting Started in Blazor Diagram](images/blazor-diagram-getting-started.webp) \ No newline at end of file +![Getting Started in Blazor Diagram](images/blazor-diagram-getting-started.webp) + +N> Looking for the full Blazor Diagram component overview, features, pricing, and documentation? Visit the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) page. \ No newline at end of file diff --git a/blazor/diagram/getting-started-with-web-app.md b/blazor/diagram/getting-started-with-web-app.md index ee92c16193..676e85c0ac 100644 --- a/blazor/diagram/getting-started-with-web-app.md +++ b/blazor/diagram/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Diagram Component in Web App -This section briefly explains how to include the [Syncfusion® Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). > **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) @@ -155,7 +155,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Syncfusion® Blazor Diagram Component +## Add Blazor Diagram Component * Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Blazor Diagram component inside the razor file. * If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). @@ -297,8 +297,10 @@ In this example: * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application in Visual Studio. * Run the application using `dotnet run` command in Command prompt. -* This will render the Syncfusion® Blazor Diagram component in the default web browser. +* This will render the Blazor Diagram component in the default web browser. The output will appear as follows: -![Getting Started in Blazor Diagram](images/blazor-diagram-getting-started.webp) \ No newline at end of file +![Getting Started in Blazor Diagram](images/blazor-diagram-getting-started.webp) + +N> Looking for the full Blazor Diagram component overview, features, pricing, and documentation? Visit the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) page. \ No newline at end of file diff --git a/blazor/diagram/getting-started.md b/blazor/diagram/getting-started.md index 71a7ee06cf..0089edd83a 100644 --- a/blazor/diagram/getting-started.md +++ b/blazor/diagram/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Diagram Component in the Blazor Server App. -This section explains the step-by-step process of integrating the [Syncfusion® Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component into your Blazor Server app using Visual Studio, Visual Studio Code and .NET CLI. We'll break it down into simple steps to make it easy to follow. Additionally, you can find a fully functional example project on our [GitHub repository](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent). +This section explains the step-by-step process of integrating the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component into your Blazor Server app using Visual Studio, Visual Studio Code and .NET CLI. We'll break it down into simple steps to make it easy to follow. Additionally, you can find a fully functional example project on our [GitHub repository](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent). > **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) @@ -188,7 +188,7 @@ If your create application uses `Per page/component` interactivity, add this at N> If the render mode is set to **None**, the diagram will not render.
If the `Interactivity Location` is set to **Global**, this step is not required. -## Add Syncfusion® Blazor Diagram component +## Add Blazor Diagram component Add the DiagramComponent to create an empty diagram. @@ -308,8 +308,10 @@ In this example: * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application in Visual Studio. * Run the application using `dotnet run` command in Command prompt. -* This will render the Syncfusion® Blazor Diagram component in the default web browser. +* This will render the Blazor Diagram component in the default web browser. The output will appear as follows: -![Getting Started in Blazor Diagram](images/blazor-diagram-getting-started.webp) \ No newline at end of file +![Getting Started in Blazor Diagram](images/blazor-diagram-getting-started.webp) + +N> Looking for the full Blazor Diagram component overview, features, pricing, and documentation? Visit the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) page. \ No newline at end of file diff --git a/blazor/diagram/grid-lines.md b/blazor/diagram/grid-lines.md index e285476cd9..4a180f3c82 100644 --- a/blazor/diagram/grid-lines.md +++ b/blazor/diagram/grid-lines.md @@ -9,7 +9,7 @@ documentation: ug # Grid Lines in Blazor Diagram Component -Gridlines are the pattern of lines drawn behind diagram elements. They provide visual guidance while dragging or arranging objects on the diagram surface. The [SnapSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapSettings.html) property customizes gridlines and controls snapping behavior in the diagram. +Gridlines are the pattern of lines drawn behind diagram elements. They provide visual guidance while dragging or arranging objects on the diagram surface. The [SnapSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapSettings.html) property customizes gridlines and controls snapping behavior in the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram). ## How to Customize Grid Lines Visibility diff --git a/blazor/diagram/group.md b/blazor/diagram/group.md index 073f9659cd..8eb80cfb41 100644 --- a/blazor/diagram/group.md +++ b/blazor/diagram/group.md @@ -15,7 +15,7 @@ documentation: ug ## How to Add a Node Group During Diagram Initialization -A node group can be added to the diagram model through the [Nodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html) collection. To define an object as a node group, add the child objects to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeGroup.html#Syncfusion_Blazor_Diagram_NodeGroup_Children) collection of the node group. The following code illustrates how to create a node group. +A node group can be added to the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) model through the [Nodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html) collection. To define an object as a node group, add the child objects to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeGroup.html#Syncfusion_Blazor_Diagram_NodeGroup_Children) collection of the node group. The following code illustrates how to create a node group. * While creating a node group, its child nodes need to be declared before the node group declaration. @@ -574,8 +574,8 @@ For more information about group node flip, refer to [Group Flip](./flip#how-to- * [How to enable/disable the behavior of the node](./constraints) -* [How to Select a Group Child Element Without Selecting the Parent Group Node in Syncfusion® Blazor Diagram Component](https://support.syncfusion.com/kb/article/18996/how-to-select-a-group-child-element-without-selecting-the-parent-group-node-in-syncfusion-blazor-diagram-component) +* [How to Select a Group Child Element Without Selecting the Parent Group Node in Blazor Diagram Component](https://support.syncfusion.com/kb/article/18996/how-to-select-a-group-child-element-without-selecting-the-parent-group-node-in-syncfusion-blazor-diagram-component) -* [How to Select Only the GroupNode Without Selecting Child Nodes in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/16302/how-to-select-only-the-groupnode-without-selecting-child-nodes-in-syncfusion-blazor-diagram) +* [How to Select Only the GroupNode Without Selecting Child Nodes in Blazor Diagram](https://support.syncfusion.com/kb/article/16302/how-to-select-only-the-groupnode-without-selecting-child-nodes-in-syncfusion-blazor-diagram) -* [How to Drag a Node Programmatically Without User Interaction in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/20172/how-to-drag-a-node-programmatically-without-user-interaction-in-syncfusion-blazor-diagram) +* [How to Drag a Node Programmatically Without User Interaction in Blazor Diagram](https://support.syncfusion.com/kb/article/20172/how-to-drag-a-node-programmatically-without-user-interaction-in-syncfusion-blazor-diagram) diff --git a/blazor/diagram/how-to.md b/blazor/diagram/how-to.md index 042ab1aa94..650a457fe0 100644 --- a/blazor/diagram/how-to.md +++ b/blazor/diagram/how-to.md @@ -13,7 +13,7 @@ The diagram's core functionalities are implemented through a comprehensive set o ## How to Add Nodes Using the Add Method -Create a node in a Blazor diagram, define a Node object and add it to the diagram's nodes collection using the `Add` method. It's crucial to call the `Add` method within the `OnInitialized` lifecycle method. This approach ensures that each diagram element is properly measured and rendered individually before the entire diagram is displayed. Attempting to use the `Add` method outside of `OnInitialized` is not recommended, as it may lead to unexpected behavior or rendering issues in the diagram. The following code example shows how to add a node to the diagram. +Create a node in a [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram), define a Node object and add it to the diagram's nodes collection using the `Add` method. It's crucial to call the `Add` method within the `OnInitialized` lifecycle method. This approach ensures that each diagram element is properly measured and rendered individually before the entire diagram is displayed. Attempting to use the `Add` method outside of `OnInitialized` is not recommended, as it may lead to unexpected behavior or rendering issues in the diagram. The following code example shows how to add a node to the diagram. ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/interaction.md b/blazor/diagram/interaction.md index 18b8e28e4d..81b9617e7f 100644 --- a/blazor/diagram/interaction.md +++ b/blazor/diagram/interaction.md @@ -584,7 +584,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ![Grouping in Blazor Diagram](images/CloneSelection.gif) ### How to Access and Modify Selected Nodes and Connectors at Runtime -Access and update the properties of selected nodes and connectors using the [SelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionSettings) API in Syncfusion® Blazor's [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html). This allows to respond to user selections and dynamically modify diagram elements at runtime. The following code demonstrates how to access and modify the selected Node and selected connector during runtime. +Access and update the properties of selected nodes and connectors using the [SelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionSettings) API in Blazor's [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html). This allows to respond to user selections and dynamically modify diagram elements at runtime. The following code demonstrates how to access and modify the selected Node and selected connector during runtime. ``` @page "/" @using Syncfusion.Blazor.Diagram @@ -1093,17 +1093,17 @@ The following table illustrates those commands with the associated key values. * [How to Get the Mouse Position When Hovering Over the Diagram Area in Blazor Diagram](https://support.syncfusion.com/kb/article/18960/how-to-get-the-mouse-position-when-hovering-over-the-diagram-area-in-blazor-diagram) -* [How to Drag a Node Programmatically Without User Interaction in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/20172/how-to-drag-a-node-programmatically-without-user-interaction-in-syncfusion-blazor-diagram) +* [How to Drag a Node Programmatically Without User Interaction in Blazor Diagram](https://support.syncfusion.com/kb/article/20172/how-to-drag-a-node-programmatically-without-user-interaction-in-syncfusion-blazor-diagram) * [How to Add Nodes and Connectors at Runtime Asynchronously in Blazor Diagram Component](https://support.syncfusion.com/kb/article/16312/how-to-add-nodes-and-connectors-at-runtime-asynchronously-in-blazor-diagram-component) -* [How to Identify the Clicked Diagram Elements in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/17226/how-to-identify-the-clicked-diagram-elments-in-syncfusion-blazor-diagram) +* [How to Identify the Clicked Diagram Elements in Blazor Diagram](https://support.syncfusion.com/kb/article/17226/how-to-identify-the-clicked-diagram-elments-in-syncfusion-blazor-diagram) * [How to Notify the Double Click Event in Blazor Diagram](https://support.syncfusion.com/kb/article/16014/how-to-notify-the-double-click-event-in-blazor-diagram) -* [How to Add Nodes or Connectors by Clicking on the Diagram in Syncfusion® Blazor Diagram Component](https://support.syncfusion.com/kb/article/17233/how-to-add-nodes-or-connectors-by-clicking-on-the-diagram-in-syncfusion-blazor-diagram-component) +* [How to Add Nodes or Connectors by Clicking on the Diagram in Blazor Diagram Component](https://support.syncfusion.com/kb/article/17233/how-to-add-nodes-or-connectors-by-clicking-on-the-diagram-in-syncfusion-blazor-diagram-component) -* [How to Disable Node Interaction While Maintaining Layout Updates in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/20189/how-to-disable-node-interaction-while-maintaining-layout-updates-in-syncfusion-blazor-diagram) +* [How to Disable Node Interaction While Maintaining Layout Updates in Blazor Diagram](https://support.syncfusion.com/kb/article/20189/how-to-disable-node-interaction-while-maintaining-layout-updates-in-syncfusion-blazor-diagram) * [How to Make HTML Node Resizable but Not Draggable in Blazor Diagram](https://support.syncfusion.com/kb/article/18727/how-to-make-html-node-resizable-but-not-draggable-in-blazor-diagram) diff --git a/blazor/diagram/layout/automatic-layout.md b/blazor/diagram/layout/automatic-layout.md index e4185d810b..4b0cfa54a8 100644 --- a/blazor/diagram/layout/automatic-layout.md +++ b/blazor/diagram/layout/automatic-layout.md @@ -9,7 +9,7 @@ documentation: ug # Automatic Layout in Diagram Component -The Diagram component includes a set of built-in automatic layout algorithms that arrange nodes within the diagram area based on predefined layout logic. This feature, referred to as [Layout](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html), simplifies organizing nodes and their connections, providing a clear and visually appealing structure for diagrams. The Diagram component supports the following layout algorithms: +The [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component includes a set of built-in automatic layout algorithms that arrange nodes within the diagram area based on predefined layout logic. This feature, referred to as [Layout](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html), simplifies organizing nodes and their connections, providing a clear and visually appealing structure for diagrams. The Diagram component supports the following layout algorithms: * Organizational chart layout * Flowchart layout @@ -289,13 +289,13 @@ Here’s an example of how to use this property: * [How to Create the Org Chart Blazor Diagram by Using MDF Database](https://support.syncfusion.com/kb/article/12128/how-to-create-the-org-chart-blazor-diagram-by-using-mdf-database) -* [Why Is It Important to Set the ParentID to Empty for at Least One Node When Creating a Layout in Syncfusion® Blazor Diagram?](https://support.syncfusion.com/kb/article/18708/why-is-it-important-to-set-the-parentid-to-empty-for-at-least-one-node-when-creating-a-layout-in-syncfusion-blazor-diagram) +* [Why Is It Important to Set the ParentID to Empty for at Least One Node When Creating a Layout in Blazor Diagram?](https://support.syncfusion.com/kb/article/18708/why-is-it-important-to-set-the-parentid-to-empty-for-at-least-one-node-when-creating-a-layout-in-syncfusion-blazor-diagram) * [How to Change the Parent Child Relationship in Layout at Runtime](https://support.syncfusion.com/kb/article/11632/how-to-change-the-parent-child-relationship-in-layout-at-runtime) * [How to Customize Connector Styles in a Hierarchical Layout in Blazor Diagram](https://support.syncfusion.com/kb/article/16310/how-to-customize-connector-styles-in-a-hierarchical-layout-in-blazor-diagram) -* [How to Disable Node Interaction While Maintaining Layout Updates in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/20189/how-to-disable-node-interaction-while-maintaining-layout-updates-in-syncfusion-blazor-diagram) +* [How to Disable Node Interaction While Maintaining Layout Updates in Blazor Diagram](https://support.syncfusion.com/kb/article/20189/how-to-disable-node-interaction-while-maintaining-layout-updates-in-syncfusion-blazor-diagram) * [How to Embed Diagrams Inside Panels of a Dashboard Layout in Blazor](https://support.syncfusion.com/kb/article/18993/how-to-embed-diagrams-inside-panels-of-a-dashboard-layout-in-blazor) @@ -305,4 +305,4 @@ Here’s an example of how to use this property: * [How to Create an Organizational Chart Using Blazor Diagram](https://support.syncfusion.com/kb/article/16312/how-to-create-an-organizational-chart-using-blazor-diagram) -* [How to Integrate Syncfusion® SfDiagramComponent into a SfTab in a Blazor Application](https://support.syncfusion.com/kb/article/17224/how-to-integrate-syncfusion-sfdiagramcomponent-into-a-sftab-in-a-blazor-application) \ No newline at end of file +* [How to Integrate SfDiagramComponent into a SfTab in a Blazor Application](https://support.syncfusion.com/kb/article/17224/how-to-integrate-syncfusion-sfdiagramcomponent-into-a-sftab-in-a-blazor-application) \ No newline at end of file diff --git a/blazor/diagram/layout/events.md b/blazor/diagram/layout/events.md index 3759338add..5b2f0e15a3 100644 --- a/blazor/diagram/layout/events.md +++ b/blazor/diagram/layout/events.md @@ -13,7 +13,7 @@ documentation: ug * The [DataLoaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DataLoaded) event is raised when the diagram layout is rendered completely. -The following code example demonstrates handling the `DataLoaded` event in the diagram. +The following code example demonstrates handling the `DataLoaded` event in the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram). ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/layout/organizational-chart.md b/blazor/diagram/layout/organizational-chart.md index 8876860d4f..1a9cf3b77b 100644 --- a/blazor/diagram/layout/organizational-chart.md +++ b/blazor/diagram/layout/organizational-chart.md @@ -11,7 +11,7 @@ documentation: ug An [OrganizationalChart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutType.html#Syncfusion_Blazor_Diagram_LayoutType_OrganizationalChart) is a diagram that displays the structure of an organization and the relationships. To create an organizational chart, set the layout [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Type) to **OrganizationalChart**. -To create and position the Organizational Chart Using Blazor Diagram, you can check the video below. +To create and position the Organizational Chart Using [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram), you can check the video below. {% youtube "youtube:https://www.youtube.com/watch?v=cjMCTTJssCE&t=22s" %} diff --git a/blazor/diagram/layout/radial-tree.md b/blazor/diagram/layout/radial-tree.md index 53437cb686..d5f9148ad3 100644 --- a/blazor/diagram/layout/radial-tree.md +++ b/blazor/diagram/layout/radial-tree.md @@ -9,7 +9,7 @@ documentation: ug # Radial Tree Layout in Diagram Component -A [RadialTree](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutType.html#Syncfusion_Blazor_Diagram_LayoutType_RadialTree) layout is a diagram that presents information in a hierarchical structure, with a central node at the core of the diagram. The central node represents the main concept or topic, and branches extend outward in a radial fashion, creating a tree-like structure. The layout [Root](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Root) property can be used to define the root node of the layout. When no root node is set, the algorithm automatically considers the node without any incoming edges (InEdges connector count of 0) as the root node. To create radial tree, the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Type) of layout should be set as **RadialTree**. +A [RadialTree](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutType.html#Syncfusion_Blazor_Diagram_LayoutType_RadialTree) layout is a diagram that presents information in a hierarchical structure, with a central node at the core of the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram). The central node represents the main concept or topic, and branches extend outward in a radial fashion, creating a tree-like structure. The layout [Root](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Root) property can be used to define the root node of the layout. When no root node is set, the algorithm automatically considers the node without any incoming edges (InEdges connector count of 0) as the root node. To create radial tree, the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Type) of layout should be set as **RadialTree**. The radial tree layout supports adding space between the nodes. Use [HorizontalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_HorizontalSpacing) and [VerticalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_VerticalSpacing) to control the spacing. The arrangement results in an ever-expanding concentric arrangement with radial proximity to the root node indicating the node's level in the hierarchy. diff --git a/blazor/diagram/migration-classic-to-native.md b/blazor/diagram/migration-classic-to-native.md index 65cb849abf..c76f9b9797 100644 --- a/blazor/diagram/migration-classic-to-native.md +++ b/blazor/diagram/migration-classic-to-native.md @@ -9,7 +9,7 @@ documentation: ug # Migrating from SfDiagram(Classic) to SfDiagram Component Control -This comprehensive guide outlines the step-by-step API migration process for transitioning from the classic SfDiagram to the modern SfDiagramComponent in Blazor applications. It provides detailed instructions, code examples, and best practices to ensure a smooth upgrade experience. +This comprehensive guide outlines the step-by-step API migration process for transitioning from the classic SfDiagram to the modern [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram). It provides detailed instructions, code examples, and best practices to ensure a smooth upgrade experience. ## NuGet Packages diff --git a/blazor/diagram/nodes/events.md b/blazor/diagram/nodes/events.md index d203e377eb..c624347a48 100644 --- a/blazor/diagram/nodes/events.md +++ b/blazor/diagram/nodes/events.md @@ -11,7 +11,7 @@ documentation: ug ## Events -The diagram provides a several events support for node that triggers when interacting with the node. +The [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) provides a several events support for node that triggers when interacting with the node. ## How to Handle Selection Change Event @@ -532,4 +532,4 @@ The node [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.D * [How to get events when they interact with the annotation](../annotations/events) -* [How to identify the clicked diagram elements in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/17226/how-to-identify-the-clicked-diagram-elments-in-syncfusion-blazor-diagram) \ No newline at end of file +* [How to identify the clicked diagram elements in Blazor Diagram](https://support.syncfusion.com/kb/article/17226/how-to-identify-the-clicked-diagram-elments-in-syncfusion-blazor-diagram) \ No newline at end of file diff --git a/blazor/diagram/nodes/expand-and-collapse.md b/blazor/diagram/nodes/expand-and-collapse.md index e81f0a7ded..bae536908d 100644 --- a/blazor/diagram/nodes/expand-and-collapse.md +++ b/blazor/diagram/nodes/expand-and-collapse.md @@ -9,7 +9,7 @@ documentation: ug # Expand and Collapse Support for Nodes in Blazor Diagram Component -The Diagram component supports to describe the state of the node. i.e., whether the node is in an expanded or collapsed state. Use the [IsExpanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_IsExpanded) property on a node to expand or collapse its children nodes. Expand and Collapse support is used to compress the hierarchy view so that only the roots of each elements are visible. +The [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component supports to describe the state of the node. i.e., whether the node is in an expanded or collapsed state. Use the [IsExpanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_IsExpanded) property on a node to expand or collapse its children nodes. Expand and Collapse support is used to compress the hierarchy view so that only the roots of each elements are visible. The following Node properties represent the state of the node and allows user to Expand and Collapse the desired Node : diff --git a/blazor/diagram/nodes/interaction.md b/blazor/diagram/nodes/interaction.md index a4781166ed..4c877b36d7 100644 --- a/blazor/diagram/nodes/interaction.md +++ b/blazor/diagram/nodes/interaction.md @@ -9,7 +9,7 @@ documentation: ug # Node Interaction in Diagram Component -Diagram provides the support to select, drag, resize, or rotate the node interactively. +[Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) provides the support to select, drag, resize, or rotate the node interactively. ## How to Select a Node diff --git a/blazor/diagram/nodes/nodes.md b/blazor/diagram/nodes/nodes.md index 5200c2eb53..7f9f8056d2 100644 --- a/blazor/diagram/nodes/nodes.md +++ b/blazor/diagram/nodes/nodes.md @@ -17,7 +17,7 @@ Nodes are graphical objects used to represent the geometric information, process A node can be created and added to the diagram either programmatically or interactively. In the diagram area, nodes are stacked from bottom to top in the order they are added. -To learn more about creating nodes and exploring different node shapes in a Blazor Diagram, refer to the below video link. +To learn more about creating nodes and exploring different node shapes in a [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram), refer to the below video link. {% youtube "youtube:https://www.youtube.com/watch?v=4_RCxBnDs3w" %} @@ -386,16 +386,16 @@ N> [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram * [How to enable/disable the behavior of the node](../constraints) -* [How to Disable Node Interaction While Maintaining Layout Updates in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/20189/how-to-disable-node-interaction-while-maintaining-layout-updates-in-syncfusion-blazor-diagram) -* [How to Drag a Node Programmatically Without User Interaction in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/20172/how-to-drag-a-node-programmatically-without-user-interaction-in-syncfusion-blazor-diagram) +* [How to Disable Node Interaction While Maintaining Layout Updates in Blazor Diagram](https://support.syncfusion.com/kb/article/20189/how-to-disable-node-interaction-while-maintaining-layout-updates-in-syncfusion-blazor-diagram) +* [How to Drag a Node Programmatically Without User Interaction in Blazor Diagram](https://support.syncfusion.com/kb/article/20172/how-to-drag-a-node-programmatically-without-user-interaction-in-syncfusion-blazor-diagram) * [How to Change Round Rectangle Border for Image Node in Blazor Diagram](https://support.syncfusion.com/kb/article/18698/how-to-change-round-rectangle-border-for-image-node-in-blazor-diagram) * [How to Update HTML Node Size on HTML Template in Blazor Diagram](https://support.syncfusion.com/kb/article/18692/how-to-update-html-node-size-on-html-template-in-blazor-diagram) * [How to Make HTML Node Resizable but Not Draggable in Blazor Diagram](https://support.syncfusion.com/kb/article/18727/how-to-make-html-node-resizable-but-not-draggable-in-blazor-diagram) -* [How to Dynamically Create and Connect Diagram Nodes with Annotations via Ports in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/19001/how-to-dynamically-create-and-connect-diagram-nodes-with-annotations-via-ports-in-syncfusion-blazor-diagram) +* [How to Dynamically Create and Connect Diagram Nodes with Annotations via Ports in Blazor Diagram](https://support.syncfusion.com/kb/article/19001/how-to-dynamically-create-and-connect-diagram-nodes-with-annotations-via-ports-in-syncfusion-blazor-diagram) * [How to Add Fixed Handle to Diagram from the Palette in Blazor Diagram](https://support.syncfusion.com/kb/article/18707/how-to-add-fixed-handle-to-diagram-from-the-palette-in-blazor-diagram) * [How to Add Custom HTML Nodes in Symbol Palette for Blazor Diagram](https://support.syncfusion.com/kb/article/18737/how-to-add-custom-html-nodes-in-symbol-palette-for-blazor-diagram) -* [How to Detect Nodes That Cross Page Breaks in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/20111/how-to-detect-nodes-that-cross-page-breaks-in-syncfusion-blazor-diagram) -* [How to Select a Group Child Element Without Selecting the Parent Group Node in Syncfusion® Blazor Diagram Component](https://support.syncfusion.com/kb/article/18996/how-to-select-a-group-child-element-without-selecting-the-parent-group-node-in-syncfusion-blazor-diagram-component) +* [How to Detect Nodes That Cross Page Breaks in Blazor Diagram](https://support.syncfusion.com/kb/article/20111/how-to-detect-nodes-that-cross-page-breaks-in-syncfusion-blazor-diagram) +* [How to Select a Group Child Element Without Selecting the Parent Group Node in Blazor Diagram Component](https://support.syncfusion.com/kb/article/18996/how-to-select-a-group-child-element-without-selecting-the-parent-group-node-in-syncfusion-blazor-diagram-component) * [How to Update AddInfo Property for the Dropped Node in Blazor Diagram](https://support.syncfusion.com/kb/article/10948/how-to-update-addinfo-property-for-the-dropped-node-in-blazor-diagram) * [How to Add Image Node in Symbol Palette in Blazor](https://support.syncfusion.com/kb/article/10090/how-to-add-image-node-in-symbol-palette-in-blazor) * [How to Get the Mouse Position When Hovering Over the Diagram Area in Blazor Diagram](https://support.syncfusion.com/kb/article/18960/how-to-get-the-mouse-position-when-hovering-over-the-diagram-area-in-blazor-diagram) @@ -403,7 +403,7 @@ N> [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram * [How to Embed Diagrams Inside Panels of a Dashboard Layout in Blazor](https://support.syncfusion.com/kb/article/18993/how-to-embed-diagrams-inside-panels-of-a-dashboard-layout-in-blazor) * [How to Zoom the Diagram Without Ctrl + Wheel and Enable Pan on Right Click Instead of Left Click in Blazor Diagram](https://support.syncfusion.com/kb/article/18992/how-to-zoom-the-diagram-without-ctrl--wheel-and-enable-pan-on-right-click-instead-of-left-click-in-blazor-diagram) * [How to Export Blazor Diagram with Image Nodes to a PNG File](https://support.syncfusion.com/kb/article/18750/how-to-export-blazor-diagram-with-image-nodes-to-a-png-file) -* [How to Select and Highlight Ports and Connect Selected Elements in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/18997/how-to-select-and-highlight-ports-and-connect-selected-elements-in-syncfusion-blazor-diagram) +* [How to Select and Highlight Ports and Connect Selected Elements in Blazor Diagram](https://support.syncfusion.com/kb/article/18997/how-to-select-and-highlight-ports-and-connect-selected-elements-in-syncfusion-blazor-diagram) * [How to Create Polygon and Circle Shapes in Blazor Diagram](https://support.syncfusion.com/kb/article/18054/how-to-create-polygon-and-circle-shapes-in-blazor-diagram) * [How to Provide ID for Diagram Elements in Blazor Diagrams](https://support.syncfusion.com/kb/article/17898/how-to-provide-ids-for-diagram-elements-in-blazor-diagrams) diff --git a/blazor/diagram/nodes/positioning.md b/blazor/diagram/nodes/positioning.md index 87064438fc..99615c856e 100644 --- a/blazor/diagram/nodes/positioning.md +++ b/blazor/diagram/nodes/positioning.md @@ -172,16 +172,16 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn * [How to get events when interacting with the node](./events) -* [How to Drag a Node Programmatically Without User Interaction in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/20172/how-to-drag-a-node-programmatically-without-user-interaction-in-syncfusion-blazor-diagram) +* [How to Drag a Node Programmatically Without User Interaction in Blazor Diagram](https://support.syncfusion.com/kb/article/20172/how-to-drag-a-node-programmatically-without-user-interaction-in-syncfusion-blazor-diagram) -* [How to Disable Node Interaction While Maintaining Layout Updates in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/20189/how-to-disable-node-interaction-while-maintaining-layout-updates-in-syncfusion-blazor-diagram) +* [How to Disable Node Interaction While Maintaining Layout Updates in Blazor Diagram](https://support.syncfusion.com/kb/article/20189/how-to-disable-node-interaction-while-maintaining-layout-updates-in-syncfusion-blazor-diagram) * [How to Update HTML Node Size on HTML Template in Blazor Diagram](https://support.syncfusion.com/kb/article/18692/how-to-update-html-node-size-on-html-template-in-blazor-diagram) * [How to Make HTML Node Resizable but Not Draggable in Blazor Diagram](https://support.syncfusion.com/kb/article/18727/how-to-make-html-node-resizable-but-not-draggable-in-blazor-diagram) -* [How to Dynamically Create and Connect Diagram Nodes with Annotations via Ports in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/19001/how-to-dynamically-create-and-connect-diagram-nodes-with-annotations-via-ports-in-syncfusion-blazor-diagram) +* [How to Dynamically Create and Connect Diagram Nodes with Annotations via Ports in Blazor Diagram](https://support.syncfusion.com/kb/article/19001/how-to-dynamically-create-and-connect-diagram-nodes-with-annotations-via-ports-in-syncfusion-blazor-diagram) -* [How to Select a Group Child Element Without Selecting the Parent Group Node in Syncfusion® Blazor Diagram Component](https://support.syncfusion.com/kb/article/18996/how-to-select-a-group-child-element-without-selecting-the-parent-group-node-in-syncfusion-blazor-diagram-component) +* [How to Select a Group Child Element Without Selecting the Parent Group Node in Blazor Diagram Component](https://support.syncfusion.com/kb/article/18996/how-to-select-a-group-child-element-without-selecting-the-parent-group-node-in-syncfusion-blazor-diagram-component) -* [How to Detect Nodes That Cross Page Breaks in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/20111/how-to-detect-nodes-that-cross-page-breaks-in-syncfusion-blazor-diagram) \ No newline at end of file +* [How to Detect Nodes That Cross Page Breaks in Blazor Diagram](https://support.syncfusion.com/kb/article/20111/how-to-detect-nodes-that-cross-page-breaks-in-syncfusion-blazor-diagram) \ No newline at end of file diff --git a/blazor/diagram/overview-component.md b/blazor/diagram/overview-component.md index cb6e0b423a..abf91fd8c3 100644 --- a/blazor/diagram/overview-component.md +++ b/blazor/diagram/overview-component.md @@ -9,7 +9,7 @@ documentation: ug # Overview in Blazor Diagram Component -The [SfDiagramOverviewComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Overview.SfDiagramOverviewComponent.html) provides a miniature view of the entire diagram content, offering a comprehensive preview at a glance. This powerful feature enables users to effortlessly navigate, pan, and zoom to specific areas of interest within large and complex diagrams. By presenting a bird's-eye view, it enhances the user's ability to understand the diagram's structure and quickly locate desired sections, significantly improving overall usability and efficiency. +The [SfDiagramOverviewComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Overview.SfDiagramOverviewComponent.html) provides a miniature view of the entire diagram content, offering a comprehensive preview at a glance. This powerful feature enables users to effortlessly navigate, pan, and zoom to specific areas of interest within large and complex diagrams. By presenting a bird's-eye view, it enhances the user's ability to understand the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) structure and quickly locate desired sections, significantly improving overall usability and efficiency. ## Usage Scenario @@ -217,4 +217,4 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## See also -* [How to Integrate Syncfusion® Blazor Diagram with Overview Support in SfTab Component](https://support.syncfusion.com/kb/article/17263/how-to-integrating-syncfusion-blazor-diagram-with-overview-support-in-sftab-component) +* [How to Integrate Blazor Diagram with Overview Support in SfTab Component](https://support.syncfusion.com/kb/article/17263/how-to-integrating-syncfusion-blazor-diagram-with-overview-support-in-sftab-component) diff --git a/blazor/diagram/overview.md b/blazor/diagram/overview.md index 6d9c1a91f9..a72aa9cad7 100644 --- a/blazor/diagram/overview.md +++ b/blazor/diagram/overview.md @@ -8,7 +8,7 @@ documentation: ug --- # Diagram Component Overview - The Blazor Diagram component is a high-performance and versatile library designed for visualizing, creating, and editing interactive diagrams. With comprehensive support for flowcharts, organizational charts, mind maps, and other diagram types, this component empowers users to create sophisticated visual representations of data and processes with ease. + The [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component is a high-performance and versatile library designed for visualizing, creating, and editing interactive diagrams. With comprehensive support for flowcharts, organizational charts, mind maps, and other diagram types, this component empowers users to create sophisticated visual representations of data and processes with ease. {% youtube "youtube:https://www.youtube.com/watch?v=LIlVk9iOo2U" %} @@ -52,4 +52,6 @@ documentation: ug * **Ruler:** Added horizontal and vertical guides for precise measuring in the Diagram control. The ruler ensures accuracy when placing, sizing, and aligning shapes and objects within a diagram. * **Mermaid:** Support for creating, importing, and exporting diagrams using the Mermaid syntax, allowing users to define flowcharts and mind maps through a simple text-based format. This feature enables easy visualization of complex ideas and processes without manual drawing. * **CRUD:** The Diagram component supports real-time CRUD actions, enabling dynamic manipulation of the DataSource. This allows seamless addition, modification, and removal of nodes, connectors, and other diagram elements during runtime, enhancing interactivity and data management capabilities. -* **Chunk Message:** The Blazor Diagram component introduces the `EnableChunkMessages` property to address potential connection issues when processing large data sets. This feature is particularly useful when calculating the bounds of paths, text, images, and SVG data from the server to the JavaScript side using JsInterop calls. \ No newline at end of file +* **Chunk Message:** The Blazor Diagram component introduces the `EnableChunkMessages` property to address potential connection issues when processing large data sets. This feature is particularly useful when calculating the bounds of paths, text, images, and SVG data from the server to the JavaScript side using JsInterop calls. + +N> Looking for the full Blazor Diagram component overview, features, pricing, and documentation? Visit the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) page. \ No newline at end of file diff --git a/blazor/diagram/page-settings.md b/blazor/diagram/page-settings.md index 0013d6053a..301c21d767 100644 --- a/blazor/diagram/page-settings.md +++ b/blazor/diagram/page-settings.md @@ -9,7 +9,7 @@ documentation: ug # Page Settings in Diagram Component -By default, the diagram page size is decided based on the position of its diagram elements. The size and appearance of diagram pages can be customized using the [PageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageSettings.html) property of the diagram. +By default, the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) page size is decided based on the position of its diagram elements. The size and appearance of diagram pages can be customized using the [PageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageSettings.html) property of the diagram. * The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageSettings.html#Syncfusion_Blazor_Diagram_PageSettings_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageSettings.html#Syncfusion_Blazor_Diagram_PageSettings_Height) properties of `PageSettings` define the size of the page. The default `Width` is **1123** pixels, and `Height` is **794** pixels. @@ -366,7 +366,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## See also -* [How to Detect Nodes That Cross Page Breaks in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/20111/how-to-detect-nodes-that-cross-page-breaks-in-syncfusion-blazor-diagram) +* [How to Detect Nodes That Cross Page Breaks in Blazor Diagram](https://support.syncfusion.com/kb/article/20111/how-to-detect-nodes-that-cross-page-breaks-in-syncfusion-blazor-diagram) * [How to Set Background Color for Entire Diagram Area in Blazor Diagram](https://support.syncfusion.com/kb/article/16016/how-to-set-background-color-for-entire-diagram-area-in-blazor-diagram) diff --git a/blazor/diagram/print.md b/blazor/diagram/print.md index 22a5a6398f..6d14eee40f 100644 --- a/blazor/diagram/print.md +++ b/blazor/diagram/print.md @@ -9,7 +9,7 @@ documentation: ug # Printing in Blazor Diagram Component -Diagram supports printing the visible content using the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PrintAsync_) method. +[Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) supports printing the visible content using the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PrintAsync_) method. ## How to Set Up Page Layout for Printing diff --git a/blazor/diagram/rulers.md b/blazor/diagram/rulers.md index 1ee7b780f0..a331a424a5 100644 --- a/blazor/diagram/rulers.md +++ b/blazor/diagram/rulers.md @@ -9,7 +9,7 @@ documentation: ug # Ruler Settings in Blazor Diagram Component -The Ruler provides horizontal and vertical guides for measuring in the Diagram control. It can be used to measure diagram objects, indicate positions, and align diagram elements, making it especially useful in creating scale models. +The Ruler provides horizontal and vertical guides for measuring in the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) control. It can be used to measure diagram objects, indicate positions, and align diagram elements, making it especially useful in creating scale models. ## How to Add Rulers to the Diagram Component diff --git a/blazor/diagram/scroll-settings.md b/blazor/diagram/scroll-settings.md index 6604e8c31a..77cdf494b7 100644 --- a/blazor/diagram/scroll-settings.md +++ b/blazor/diagram/scroll-settings.md @@ -9,7 +9,7 @@ documentation: ug # Scroll Settings in Diagram Component -The diagram can be scrolled using vertical and horizontal scrollbars. In addition to the scrollbars, the mouse wheel can be used to scroll the diagram. The Diagram’s [ScrollSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html) allows to read the current scroll status, current zoom and zoom factor values. +The [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) can be scrolled using vertical and horizontal scrollbars. In addition to the scrollbars, the mouse wheel can be used to scroll the diagram. The Diagram’s [ScrollSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html) allows to read the current scroll status, current zoom and zoom factor values. ## How to Get Current Scroll Status @@ -384,4 +384,4 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## See also -* [How to Detect Nodes That Cross Page Breaks in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/20111/how-to-detect-nodes-that-cross-page-breaks-in-syncfusion-blazor-diagram) +* [How to Detect Nodes That Cross Page Breaks in Blazor Diagram](https://support.syncfusion.com/kb/article/20111/how-to-detect-nodes-that-cross-page-breaks-in-syncfusion-blazor-diagram) diff --git a/blazor/diagram/serialization.md b/blazor/diagram/serialization.md index 0a4d96d60b..50a86f9242 100644 --- a/blazor/diagram/serialization.md +++ b/blazor/diagram/serialization.md @@ -9,7 +9,7 @@ documentation: ug # Serialization in Diagram Component -Serialization is the process of saving and loading the persistent state of a diagram. +Serialization is the process of saving and loading the persistent state of a [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram). {% youtube "youtube:https://www.youtube.com/watch?v=2hhl00gMObc" %} @@ -170,8 +170,8 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ## See also -* [How to Serialize the HTML Template Value of the NodeTemplate Property in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/17218/how-to-serialize-the-html-template-value-of-the-nodetemplate-property-in-syncfusion-blazor-diagram) +* [How to Serialize the HTML Template Value of the NodeTemplate Property in Blazor Diagram](https://support.syncfusion.com/kb/article/17218/how-to-serialize-the-html-template-value-of-the-nodetemplate-property-in-syncfusion-blazor-diagram) -* [How to Serialize and Deserialize Diagram Objects Using JSON.NET in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/18736/how-to-serialize-and-deserialize-diagram-objects-using-jsonnet-in-syncfusion-blazor-diagram) +* [How to Serialize and Deserialize Diagram Objects Using JSON.NET in Blazor Diagram](https://support.syncfusion.com/kb/article/18736/how-to-serialize-and-deserialize-diagram-objects-using-jsonnet-in-syncfusion-blazor-diagram) * [Why Save and Load Functionality for Nodes and Connectors in Blazor Diagram](https://support.syncfusion.com/kb/article/16008/why-save-and-load-functionality-for-nodes-and-connectors-in-blazor-diagram) \ No newline at end of file diff --git a/blazor/diagram/shapes.md b/blazor/diagram/shapes.md index 2ecddaba7c..8e40071e94 100644 --- a/blazor/diagram/shapes.md +++ b/blazor/diagram/shapes.md @@ -9,7 +9,7 @@ documentation: ug # Node Shapes in Blazor Diagram Component -Diagram supports creating several kinds of nodes. The available shape types include: +[Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) supports creating several kinds of nodes. The available shape types include: * Text shape * Image shape @@ -567,7 +567,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn * [How to Create Polygon and Circle Shapes in Blazor Diagram](https://support.syncfusion.com/kb/article/18054/how-to-create-polygon-and-circle-shapes-in-blazor-diagram) * [How to Export HTML Shapes Into Image and PDF Format in Blazor Diagram](https://support.syncfusion.com/kb/article/16039/how-to-export-html-shapes-into-image-and-pdf-format-in-blazor-diagram) -* [How to Serialize the HTML Template Value of the NodeTemplate Property in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/17218/how-to-serialize-the-html-template-value-of-the-nodetemplate-property-in-syncfusion-blazor-diagram) +* [How to Serialize the HTML Template Value of the NodeTemplate Property in Blazor Diagram](https://support.syncfusion.com/kb/article/17218/how-to-serialize-the-html-template-value-of-the-nodetemplate-property-in-syncfusion-blazor-diagram) * [How to Add Custom HTML Nodes in Symbol Palette for Blazor Diagram](https://support.syncfusion.com/kb/article/18737/how-to-add-custom-html-nodes-in-symbol-palette-for-blazor-diagram) * [How to Make HTML Node Resizable but Not Draggable in Blazor Diagram](https://support.syncfusion.com/kb/article/18727/how-to-make-html-node-resizable-but-not-draggable-in-blazor-diagram) * [How to Update HTML Node Size on HTML Template in Blazor Diagram](https://support.syncfusion.com/kb/article/18692/how-to-update-html-node-size-on-html-template-in-blazor-diagram) diff --git a/blazor/diagram/style.md b/blazor/diagram/style.md index e22a003c33..9b28f0987d 100644 --- a/blazor/diagram/style.md +++ b/blazor/diagram/style.md @@ -11,7 +11,7 @@ documentation: ug ## How to Customize the Connector Endpoint Handle -To customize the visual appearance of the connector endpoint handle in a diagram, apply the following CSS code: +To customize the visual appearance of the connector endpoint handle in a [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram), apply the following CSS code: ```cshtml + +``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVKshBQrJbnEQzO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Appearance of Blazor CheckBox](./images/blazor-checkbox-appearance-customization.webp)" %} + +## Customize width and height + +The height and width of the Checkbox component can be customized by setting `height` and `width` properties in `styles` + +The following section explains about how to customize the height and width of the Checkbox component. + +```cshtml +@using Syncfusion.Blazor.Buttons + + + +@code { + private bool isChecked = true; +} + + + +``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrUWLLGVTFECslm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Height and Width of Blazor CheckBox](./images/blazor-checkbox-height-width-customization.webp)" %} + +## Custom frame + +Checkbox frame can be customized as per the requirement by adding CSS rules. + +In the following example, to-do list is displayed with round checkbox by changing `border-radius` as `100%` by adding `e-custom` class. + +```cshtml +@using Syncfusion.Blazor.Buttons + +
+
+
+ + +@code { + private bool isChecked = true; + private bool isRentChecked = true; + private bool isDinnerChecked = false; + private bool isArticleChecked = false; +} + + + +``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrgirhGhJYCyqDJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor CheckBox Frame](./images/blazor-checkbox-frame-customization.webp)" %} + +## Custom check icon + +Checkbox check icon can be customized as per the requirement by adding CSS rules. + +In the following example, the check icon can be customized by changing check icon content, background and border color in focus and hovered states by adding `e-checkicon` class. + +```cshtml +@using Syncfusion.Blazor.Buttons + +
+
+
+ + +@code { + private bool isChecked = true; + private bool isRentChecked = true; + private bool isDinnerChecked = true; + private bool isArticleChecked = false; +} + + + +``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBgWrLGrpkSQSUL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Check Icon in Blazor CheckBox](./images/blazor-checkbox-check-icon-customization.webp)" %} + +## Right-To-Left in Blazor CheckBox Component + +Checkbox component has RTL support. This can be achieved by setting [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html) as `true`. + +The following example illustrates how to enable right-to-left support in Checkbox component. + +```cshtml +@using Syncfusion.Blazor.Buttons + + + +@code { + private bool isChecked = true; +} + +``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVgiLhmVyZvKJzz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Right to Left in Blazor CheckBox](./images/blazor-checkbox-right-to-left.webp)" %} + +## Model Binding in Blazor CheckBox Component + +To get start quickly with Model Binding in Blazor CheckBox Component, you can check on this video: + +{% youtube +"youtube:https://www.youtube.com/watch?v=4vMuReo0Hz4"%} + +This section demonstrates the strongly typed extension support in Checkbox. The view that can bind with any model is called as strongly typed view. You can bind any class as model to view, access model properties on that view, and use data associated with model to render the component. + +In this sample, first check the option and click the submit button to post the selected value in the Checkbox. When the value is not checked, validation error message will be shown below the Checkbox. + +```csharp + +@using Syncfusion.Blazor.Buttons +@using System.ComponentModel.DataAnnotations + + + +
+ + +
+ + + +@code { + public Annotation Annotate = new Annotation(); + public class Annotation + { + [Range(typeof(bool), "true", "true", ErrorMessage = "You need to agree to the Terms and Conditions")] + public bool Check { get; set; } + } + public Dictionary Submit = new Dictionary() + { + { "type", "submit"} + }; +} + +``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhKMVrmrJkahhmZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Model Binding in Blazor CheckBox](./images/blazor-checkbox-model-binding.webp)" %} \ No newline at end of file diff --git a/blazor/common/how-to/component-configuration-issues.md b/blazor/common/how-to/component-configuration-issues.md new file mode 100644 index 0000000000..4817c65475 --- /dev/null +++ b/blazor/common/how-to/component-configuration-issues.md @@ -0,0 +1,414 @@ +--- +layout: post +title: Resolving Component Configuration Issues in Blazor | Syncfusion® +description: Comprehensive guide to resolving Blazor component configuration issues including SignalR, namespaces, and data binding problems +platform: Blazor +control: Common +documentation: ug +--- + +# Resolving Component Configuration Issues in Blazor + +This guide explains how to resolve common component configuration issues when building Blazor applications with **[Blazor components](https://www.syncfusion.com/blazor-components)**. Proper component configuration ensures smooth functionality and optimal performance. + +Common configuration issues relate to: + +* SignalR configuration for large data transfers +* Namespace imports and component resolution +* Type safety and field mapping in data-bound components + +N> This guide is intended for Blazor components version 33.2.3 or later. Some details may differ in earlier versions or older .NET releases. + +## Issue 1: Incorrect SignalR configuration for large data + +**Symptom**: SignalR connection errors, timeouts, or exceptions when working with large datasets in Server render mode. Components like [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid), [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager) may fail to load large amounts of data. The browser console may show errors like `Connection disconnected with error 'Error: Server returned an error on close: Connection closed with an error.'` These issues can cause data loading failures, frequent connection drops, poor user experience, and limited functionality for data-intensive components. + +**Root cause**: The default SignalR maximum incoming message size is 32 KB, which is too small for large data transfers. + +**Solution**: Configure SignalR with an appropriate message size limit in `~/Program.cs`. + +{% tabs %} +{% highlight C# tabtitle="Blazor Web App (.NET 8+) - Server" %} + +var builder = WebApplication.CreateBuilder(args); + +// Configure SignalR with increased message size +builder.Services.AddSignalR(options => +{ + // Default is 32 KB. Increase only as needed for your scenario. + options.MaximumReceiveMessageSize = 5242880; // 5 MB in bytes + + // Optional: Configure other SignalR options + options.EnableDetailedErrors = builder.Environment.IsDevelopment(); + options.HandshakeTimeout = TimeSpan.FromSeconds(30); + options.KeepAliveInterval = TimeSpan.FromSeconds(15); + options.ClientTimeoutInterval = TimeSpan.FromSeconds(30); +}); + +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents(); + +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); + +{% endhighlight %} +{% endtabs %} + +### Component-specific recommendations + +| Component | Guidance | Reason | +|-----------|----------|--------| +| [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) | Increase the limit only as required by the size of the payload being transferred | Large datasets can exceed the default 32 KB SignalR limit | +| [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager) | Use chunked uploads and transfer only the required data | Large file operations are better handled in smaller chunks | + +### Advanced SignalR configuration + +{% tabs %} +{% highlight C# tabtitle="Program.cs" %} + +var builder = WebApplication.CreateBuilder(args); + +builder.Services.AddSignalR(options => +{ + // Maximum message size (required) + options.MaximumReceiveMessageSize = 5242880; // 5 MB in bytes + + // Enable detailed errors in development + options.EnableDetailedErrors = builder.Environment.IsDevelopment(); + + // Timeout configurations + options.HandshakeTimeout = TimeSpan.FromSeconds(30); + options.KeepAliveInterval = TimeSpan.FromSeconds(15); + options.ClientTimeoutInterval = TimeSpan.FromSeconds(60); + + // Parallel hub invocations + options.MaximumParallelInvocationsPerClient = 10; + + // Streaming buffer size + options.StreamBufferCapacity = 10; +}); + +// Add memory cache for caching scenarios +builder.Services.AddMemoryCache(); + +// Add distributed cache for multi-server scenarios +builder.Services.AddDistributedMemoryCache(); + +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents(); + +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); + +{% endhighlight %} +{% endtabs %} + +### Best practices + +* Set `MaximumReceiveMessageSize` based on expected data transfer sizes +* Balance between functionality and security because larger sizes increase memory usage and DoS risk +* Configure timeout values appropriate for network latency +* Enable detailed errors only in development environments +* Monitor SignalR connection metrics in production +* Consider implementing pagination or virtualization for very large datasets +* Use distributed caching for multi-server deployments + +### Performance considerations + +* Each active SignalR connection consumes server memory +* Larger message sizes require more server resources +* Consider implementing client-side pagination to reduce data transfer +* Use virtual scrolling for large grids and lists +* Implement lazy loading for large documents and images + +For production deployments, always balance functionality requirements with security and resource constraints. Extremely large message sizes can create denial-of-service vulnerabilities. + +## Issue 2: Namespace import issues + +**Symptom**: Compilation errors such as `The type or namespace name 'Syncfusion' could not be found` or `The name 'SfGrid' does not exist in the current context.` IntelliSense doesn't show components. + +**Root cause**: Required namespaces are not imported in `_Imports.razor` or component files. + +**Solution**: Add required namespaces to `~/Components/_Imports.razor` for global access or to individual component files. For the complete list of available packages, refer to the [Blazor NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). + +### Global namespace import (recommended) + +{% tabs %} +{% highlight razor tabtitle="_Imports.razor" %} + +@using System.Net.Http +@using System.Net.Http.Json +@using Microsoft.AspNetCore.Components.Forms +@using Microsoft.AspNetCore.Components.Routing +@using Microsoft.AspNetCore.Components.Web +@using static Microsoft.AspNetCore.Components.Web.RenderMode +@using Microsoft.AspNetCore.Components.Web.Virtualization +@using Microsoft.JSInterop + +@using Syncfusion.Blazor + +// Add only the required Blazor component namespaces. Avoid importing unused component namespaces globally. +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.RichTextEditor +@using Syncfusion.Blazor.Charts +@using Syncfusion.Blazor.Schedule +@using Syncfusion.Blazor.TreeGrid +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + +@using YourApp +@using YourApp.Components + +{% endhighlight %} +{% endtabs %} + +### Component-specific namespace import + +If you prefer to import namespaces only where needed. + +{% tabs %} +{% highlight razor tabtitle="DataGridPage.razor" %} + +@page "/datagrid" +@rendermode InteractiveServer +@using Syncfusion.Blazor.Grids + +Data Grid + + + + + + + + +@code { + private List Orders { get; set; } = new() + { + new Order { OrderID = 1001, CustomerName = "Customer A" }, + new Order { OrderID = 1002, CustomerName = "Customer B" } + }; + + public class Order + { + public int OrderID { get; set; } + public string CustomerName { get; set; } = string.Empty; + } +} + +{% endhighlight %} +{% endtabs %} + +### Best practices + +* Add core `Syncfusion.Blazor` namespace globally in `_Imports.razor` +* Add component-specific namespaces globally if used across multiple pages +* Use component-level imports for rarely used components +* Organize imports alphabetically for better maintainability +* Remove unused namespace imports to reduce clutter + +The `_Imports.razor` file provides namespace imports to all Razor components in the same folder and subfolders. Place it at the root of your components folder for global access. + +## Issue 3: Incorrect TValue and field mapping in Blazor components + +**Symptom**: Components such as [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid), [Blazor DropDown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list), [Blazor MultiSelect Dropdown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown), [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete), [Blazor Numeric TextBox](https://www.syncfusion.com/blazor-components/blazor-numeric-textbox), [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker), or similar components render empty, do not bind correctly, or fail during selection, editing, filtering, or display. + +**Root cause**: The component `TValue`, item type, or field mappings such as `Field`, `Text`, and `Value` do not match the underlying data model. In some cases, the bound type also does not match the expected value format. + +**Solution**: Use strongly typed models and ensure that `TValue`, `DataSource`, and field mappings all refer to matching property types. + +### Step 1: Match `TValue` to the bound value type + +In [Blazor DropDown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list), ensure that `TValue` matches the type of the bound value and the corresponding value field in the data model. + +**Correct Mapping**: + +{% tabs %} +{% highlight razor tabtitle="Correct Mapping" %} + +@using Syncfusion.Blazor.DropDowns + + + + + +

SelectedOrderId: @SelectedOrderId

+ +@code { + public int SelectedOrderId { get; set; } + + public List Orders { get; set; } = new() + { + new Order { OrderID = 1001, CustomerName = "Customer A" }, + new Order { OrderID = 1002, CustomerName = "Customer B" } + }; + + public class Order + { + public int OrderID { get; set; } + public string CustomerName { get; set; } = string.Empty; + } +} + +{% endhighlight %} +{% endtabs %} + +**Incorrect Mapping**: + +{% tabs %} +{% highlight razor tabtitle="Incorrect Mapping" %} + +@using Syncfusion.Blazor.DropDowns + + + + + +

SelectedOrderCode: @SelectedOrderCode

+ +@code { + public string SelectedOrderCode { get; set; } = string.Empty; + + public List Orders { get; set; } = new() + { + new Order { OrderID = 1001, CustomerName = "Customer A" }, + new Order { OrderID = 1002, CustomerName = "Customer B" } + }; + + public class Order + { + public int OrderID { get; set; } + public string CustomerName { get; set; } = string.Empty; + } +} + +{% endhighlight %} +{% endtabs %} + +Here, `Value="OrderCode"` does not match any property in the data model, so the dropdown cannot resolve the selected value correctly. + +### Step 2: Map columns to real model properties + +In [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid), each GridColumn [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) value must match a public property on the model, including correct spelling and casing. + +{% tabs %} +{% highlight razor tabtitle="Blazor DataGrid Example" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + +@code { + public List Orders { get; set; } = new() + { + new Order { OrderID = 1001, CustomerName = "Customer A", OrderDate = DateTime.Today }, + new Order { OrderID = 1002, CustomerName = "Customer B", OrderDate = DateTime.Today.AddDays(-1) } + }; + + public class Order + { + public int OrderID { get; set; } + public string CustomerName { get; set; } = string.Empty; + public DateTime OrderDate { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +**Common mistakes**: + +* Using a field name that does not exist in the model +* Typing the wrong casing, such as `Customername` instead of `CustomerName` +* Binding nested data without flattening the model first + +### Step 3: Use the correct value type for numeric and date inputs + +For [Blazor Numeric TextBox](https://www.syncfusion.com/blazor-components/blazor-numeric-textbox) and [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker), the bound property type must match the component's expected type (`TValue`). + +{% tabs %} +{% highlight razor tabtitle="Correct Input Mapping" %} + +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Calendars + + + + + +@code { + public decimal Freight { get; set; } = 125.50m; + public DateTime? OrderDate { get; set; } = DateTime.Today; +} + +{% endhighlight %} +{% endtabs %} + +### Step 4: Use the correct field names and value collection type + +In [Blazor MultiSelect Dropdown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown), the selected value collection type must match the item value type and corresponding field mapping. + +{% tabs %} +{% highlight razor tabtitle="MultiSelect Mapping" %} + +@using Syncfusion.Blazor.DropDowns + + + + + +@code { + public List SelectedEmployeeIds { get; set; } = new(); + + public List Employees { get; set; } = new() + { + new Employee { EmployeeId = 1, EmployeeName = "Anne" }, + new Employee { EmployeeId = 2, EmployeeName = "Ben" } + }; + + public class Employee + { + public int EmployeeId { get; set; } + public string EmployeeName { get; set; } = string.Empty; + } +} + +{% endhighlight %} +{% endtabs %} + +### Best practices + +* Set `TValue` to the exact type used by the bound value +* Use `nameof(...)` for grid field names to avoid spelling mistakes +* Keep data models strongly typed and consistent +* Use nullable types where the value can be empty, such as `int?` or `DateTime?` +* Do not bind a string field to a numeric value field +* Verify `Text` and `Value` mappings before testing dropdown components +* Flatten complex data models when a component does not support nested field paths + +### Common mapping errors + +| Component | Common Error | Correct Approach | +|-----------|--------------|------------------| +| [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) | `Field="Customer"` when model has `CustomerName` | Use the exact property name | +| [Blazor DropDown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) | `TValue="string"` with `Value="OrderID"` where `OrderID` is `int` | Make `TValue="int"` or change the value field | +| [Blazor Numeric TextBox](https://www.syncfusion.com/blazor-components/blazor-numeric-textbox) | Binding `string` to a numeric control | Use `int`, `decimal`, or `double` | +| [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) | Binding `string` instead of `DateTime?` | Bind a date type | +| [Blazor MultiSelect Dropdown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown) | Mismatch between selected value collection and item value type | Use a matching collection type, such as `List` | + +This issue is usually a data-model mismatch, not a Syncfusion defect. In most cases, correcting the type mapping resolves the problem immediately. + +## Common error messages and solutions + +| Error Message | Likely Cause | Solution | +|---------------|-------------|----------| +| `The type or namespace name 'Syncfusion' could not be found` | Missing namespace import | Add `@using Syncfusion.Blazor` (and component namespaces as needed) to `_Imports.razor` | +| `Connection disconnected with error` | SignalR message size limit or timeout | Increase `options.MaximumReceiveMessageSize` and adjust SignalR timeouts in Program.cs. Consider using paging/virtualization or chunked transfers | \ No newline at end of file diff --git a/blazor/common/how-to/package-management-issues.md b/blazor/common/how-to/package-management-issues.md new file mode 100644 index 0000000000..f766eda96e --- /dev/null +++ b/blazor/common/how-to/package-management-issues.md @@ -0,0 +1,325 @@ +--- +layout: post +title: Resolving NuGet Package Management Issues in Blazor | Syncfusion® +description: Guide to resolving Blazor package management issues including NuGet conflicts, version mismatches, and dependency management +platform: Blazor +control: Common +documentation: ug +--- + +# Resolving NuGet Package Management Issues in Blazor + +This guide explains how to resolve common NuGet package management issues when building Blazor applications with **[Blazor components](https://www.syncfusion.com/blazor-components)**. Proper package management is essential for maintainable, efficient, and error-free applications. + +Common package management issues relate to: + +* Choosing between comprehensive and individual packages +* Avoiding duplicate package references +* Maintaining version consistency across packages +* Managing package dependencies in multi-project solutions + +N> This guide is intended for Blazor components version 33.2.3 or later. For supported .NET and Blazor package release combinations, see [Version compatibility for Blazor components](https://blazor.syncfusion.com/documentation/common/how-to/version-compatibility). + +## Issue 1: Installing redundant NuGet packages + +**Symptom**: Builds fail with ambiguous-call or duplicate-type errors when calling APIs, for example: + +{% tabs %} +{% highlight text tabtitle="Error Message" %} + +error CS0121: The call is ambiguous between the following methods or properties: +'Syncfusion.Blazor.SyncfusionBlazor.AddSyncfusionBlazor(...) [path\to\Syncfusion.Blazor.Core.dll]' +and 'Syncfusion.Blazor.SyncfusionBlazor.AddSyncfusionBlazor(...) [path\to\Syncfusion.Blazor.dll]' + +{% endhighlight %} +{% endtabs %} + +**Root cause**: The project references both the all-in-one package ([Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor)) and one or more individual component packages (for example, [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) or [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts)). These packages expose the same public types from different assemblies, producing duplicate type definitions and ambiguous method overloads. The compiler therefore reports ambiguous-call or duplicate-type errors. + +**Solution**: Use only the individual component packages that your application requires. The comprehensive [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor) package is not recommended for any application and should not be used. + +### Recommended package strategy + +Install only the specific component packages your application uses. This is the recommended approach for all projects. + +{% tabs %} +{% highlight bash tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Calendars -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Charts -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +**Benefits**: + +* Smaller deployment size +* Faster build and restore times +* Clear dependency tracking +* Reduced licensing footprint for production deployments + +### Best practices + +* Do not use the [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor) package in your application +* Install only the specific component packages required by the application +* Audit your `.csproj` file regularly to identify redundant packages +* Document your package strategy in team guidelines + +### How to check for redundancy + +To check for redundant packages, inspect your project's `.csproj` file for duplicate or overlapping `` entries. + +{% tabs %} +{% highlight xml tabtitle="Incorrect setup" %} + + + ... + + + + + + + +{% endhighlight %} +{% highlight xml tabtitle="Recommended setup" %} + + + ... + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +### To clean up redundant packages + +{% tabs %} +{% highlight bash tabtitle=".NET CLI" %} + +# Remove the comprehensive package if it is present +dotnet remove package Syncfusion.Blazor + +# Restore packages after cleanup +dotnet restore + +{% endhighlight %} +{% endtabs %} + +The [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) package should always be installed separately, as it only contains theme stylesheets. + +## Issue 2: Duplicate package references + +**Symptom**: Build warnings such as `Detected package downgrade`, `Duplicate 'PackageReference' items found` or `Version conflict detected` or unpredictable runtime behavior where component features work inconsistently. These issues can also cause deployment problems due to assembly version conflicts and may lead to potential runtime exceptions. + +**Root cause**: The same NuGet package is referenced multiple times with different versions, either directly in the project file or transitively through dependencies. + +**Solution**: Identify and consolidate all package references to use a single version. For supported version combinations, see [Version compatibility for Blazor components](https://blazor.syncfusion.com/documentation/common/how-to/version-compatibility). + +### Step 1: Identify duplicate references + +Run the following command to analyze your project dependencies. + +{% tabs %} +{% highlight bash tabtitle=".NET CLI" %} + +dotnet list package --include-transitive + +{% endhighlight %} +{% endtabs %} + +This command shows all packages, including transitive dependencies, helping you spot version conflicts. + +### Step 2: Inspect project file + +Check your `.csproj` file for duplicate entries. + +{% tabs %} +{% highlight xml tabtitle="YourApp.csproj" %} + + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +### Step 3: Consolidate versions + +Remove duplicate entries and ensure all Blazor packages use the same version. + +{% tabs %} +{% highlight xml tabtitle="YourApp.csproj" %} + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +### Step 4: Use Central Package Management + +Use [Central Package Management (CPM)](https://learn.microsoft.com/en-us/nuget/consume-packages/central-package-management) for solution-wide version consistency. This approach is recommended for solutions with multiple projects. + +Create a `Directory.Packages.props` file in your solution root. + +{% tabs %} +{% highlight xml tabtitle="Directory.Packages.props" %} + + + + true + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +Then update your project files to reference packages without versions. + +{% tabs %} +{% highlight xml tabtitle="YourApp.csproj" %} + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +For single-project apps, consolidating package references directly in the `.csproj` file may be sufficient. + +### Best practices + +* Maintain consistent versions across all Blazor packages in your solution +* Use tooling like `dotnet list package --outdated` to identify version inconsistencies +* Implement Central Package Management for multi-project solutions +* Document your upgrade strategy and version policies +* Test thoroughly after consolidating package versions + +When upgrading Syncfusion packages, update **all Syncfusion packages** in your solution simultaneously to maintain version consistency. + +## Issue 3: Version mismatches across packages + +**Symptom**: Runtime exceptions such as `MissingMethodException`, `TypeLoadException`, or `FileLoadException`. Components may fail to initialize, throw errors during rendering, or exhibit unexpected behavior. These problems can lead to application crashes and difficult-to-diagnose runtime errors that only appear under specific conditions. + +**Root cause**: Different Blazor packages are installed with incompatible versions. For example, [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) version 33.2.3 alongside [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) version 32.1.19. + +**Solution**: Ensure all Blazor packages in your project use the **exact same version number**. For supported version combinations, see [Version compatibility for Blazor components](https://blazor.syncfusion.com/documentation/common/how-to/version-compatibility). + +### Step 1: Check current package versions + +{% tabs %} +{% highlight bash tabtitle=".NET CLI" %} + +dotnet list package + +{% endhighlight %} +{% endtabs %} + +Look for version discrepancies in the output. + +{% tabs %} +{% highlight bash tabtitle="Output" %} + +Project 'YourApp' has the following package references + + Top-level Package Requested Resolved + > Syncfusion.Blazor.Grid 33.2.3 33.2.3 + > Syncfusion.Blazor.Calendars 32.1.19 32.1.19 # Version mismatch + > Syncfusion.Blazor.Charts 33.2.3 33.2.3 + +{% endhighlight %} +{% endtabs %} + +### Step 2: Update all packages to matching version + +{% tabs %} +{% highlight bash tabtitle=".NET CLI" %} + +# Update individual packages to the latest version +dotnet add package Syncfusion.Blazor.Grid -v 33.2.3 +dotnet add package Syncfusion.Blazor.Calendars -v 33.2.3 +dotnet add package Syncfusion.Blazor.Charts -v 33.2.3 + +# Restore and rebuild +dotnet restore +dotnet build + +{% endhighlight %} +{% endtabs %} + +### Step 3: Verify version alignment + +{% tabs %} +{% highlight bash tabtitle=".NET CLI" %} + +dotnet list package + +{% endhighlight %} +{% endtabs %} + +All Blazor packages should now show the same version. + +{% tabs %} +{% highlight bash tabtitle="Output" %} + +Project 'YourApp' has the following package references + + Top-level Package Requested Resolved + > Syncfusion.Blazor.Grid 33.2.3 33.2.3 + > Syncfusion.Blazor.Calendars 33.2.3 33.2.3 + > Syncfusion.Blazor.Charts 33.2.3 33.2.3 + +{% endhighlight %} +{% endtabs %} + +### Best practices + +* Always upgrade all Blazor packages simultaneously to the same version +* Use automated tools or scripts to ensure version consistency across projects +* Review release notes before upgrading to understand breaking changes +* Test critical functionality after version updates + +### Common version mismatch scenarios + +* Copying component code from older projects without updating package versions +* Partial upgrades where only some packages are updated +* Adding new components from different version documentation examples +* Team members using different NuGet package sources with cached older versions + +Version mismatches are a leading cause of production issues. Implement CI/CD checks to validate version consistency before deployment. \ No newline at end of file diff --git a/blazor/common/integration/blazor-with-github-codespaces.md b/blazor/common/integration/blazor-with-github-codespaces.md new file mode 100644 index 0000000000..bdc5b1df92 --- /dev/null +++ b/blazor/common/integration/blazor-with-github-codespaces.md @@ -0,0 +1,335 @@ +--- +layout: post +title: Integrating Blazor DataGrid with GitHub Codespaces | Syncfusion +description: Step by step guide to integrate Blazor DataGrid in a Blazor Web App using GitHub Codespaces with development container setup and cloud based execution. +platform: Blazor +control: Common +documentation: ug +--- + +# Integrating Blazor DataGrid with GitHub Codespaces + +This article explains how to integrate the **[Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** and run it seamlessly in **[GitHub Codespaces](https://docs.github.com/en/codespaces/about-codespaces/what-are-codespaces)**. + +GitHub Codespaces provides a cloud-based development environment that eliminates the need for local setup and enables instant development in Visual Studio Code directly in the browser. + +## Prerequisites + +Before getting started, ensure you have the following: + +* A [GitHub](https://github.com/) account +* Access to [GitHub Codespaces](https://docs.github.com/en/codespaces/about-codespaces/what-are-codespaces) + +## Configure a development container for .NET 10 and Blazor + +To run Blazor applications in GitHub Codespaces, configure a development container with the **[.NET 10 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/10.0)** and support for **ASP.NET Core and Blazor development**. + +### Prerequisites for dev container setup + +* A local [Git](https://git-scm.com/) client installed on your machine +* Your repository cloned locally or access to create files through the [GitHub web interface](https://docs.github.com/en/repositories/working-with-files/managing-files/creating-new-files) + +### Create the dev container configuration + +#### Step 1: Clone your repository + +Clone your GitHub repository to your local machine. + +{% tabs %} +{% highlight bash tabtitle="Terminal" %} + +git clone +cd + +{% endhighlight %} +{% endtabs %} + +You can also create files directly in GitHub by navigating to your repository and selecting **Add file → Create new file**. + +#### Step 2: Create the `.devcontainer` folder + +Create a folder named `.devcontainer` at the root level of your repository. + +{% tabs %} +{% highlight bash tabtitle="Terminal" %} + +mkdir .devcontainer + +{% endhighlight %} +{% endtabs %} + +#### Step 3: Add the `devcontainer.json` file + +Inside the `.devcontainer` folder, create a file named `devcontainer.json` and add the following configuration. GitHub Codespaces automatically applies the settings from this file when a codespace starts. Add it to your repository before launching Codespaces so the environment is configured correctly. + +{% tabs %} +{% highlight json tabtitle=".devcontainer/devcontainer.json" %} + +{ + "name": "Blazor (.NET 10) Codespaces Development Container", + "image": "mcr.microsoft.com/devcontainers/dotnet:10.0", + "features": { + "ghcr.io/devcontainers/features/github-cli:1": {} + }, + "customizations": { + "vscode": { + "extensions": [ + "ms-dotnettools.csharp", + "ms-dotnettools.csdevkit", + "ms-dotnettools.vscodeintellicode-csharp", + "ms-dotnettools.blazor-tools", + "ms-azuretools.vscode-docker", + "GitHub.codespaces" + ] + } + }, + "forwardPorts": [5000], + "portsAttributes": { + "5000": { + "label": "Blazor HTTP", + "onAutoForward": "openBrowser", + "requireLocalPort": false + } + }, + "postCreateCommand": "dotnet workload install wasm-tools", + "postStartCommand": "dotnet restore || true", + "updateContentCommand": "dotnet workload update", + "remoteUser": "vscode", + "remoteEnv": { + "DOTNET_SYSTEM_GLOBALIZATION_INVARIANT": "false", + "ASPNETCORE_ENVIRONMENT": "Development", + "ASPNETCORE_URLS": "http://0.0.0.0:5000", + "DOTNET_CLI_TELEMETRY_OPTOUT": "true" + }, + "waitFor": "postCreateCommand" +} + +{% endhighlight %} +{% endtabs %} + +#### Key configuration details + +* **Base image**: Uses the official .NET 10 development container image +* **Features**: Includes [GitHub CLI](https://cli.github.com/) for repository operations within Codespaces +* **VS Code extensions**: Installs [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit), Blazor tools, and [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker) support automatically +* **Port forwarding**: Uses `forwardPorts` to expose the HTTP port (5000), enabling external access to the application running inside the Codespaces container +* **WebAssembly (WASM) tools**: Installs Blazor WebAssembly development tools via `workload install` +* **Environment variables**: Configures [.NET globalization](https://learn.microsoft.com/en-us/dotnet/core/extensions/globalization), development environment, and both protocol URLs +* **Post-create command**: Automatically restores NuGet packages and installs required workloads after container setup +* **Post-start restoration**: Runs `dotnet restore` on each container start, and the `|| true` ensures the container starts successfully even if restore produces non-critical warnings + +This configuration ensures your Codespaces environment is ready to build and run Blazor applications without any manual setup. + +#### Step 4: Commit and push to GitHub + +Commit the `.devcontainer` folder to your repository. + +{% tabs %} +{% highlight bash tabtitle="Terminal" %} + +git add .devcontainer/devcontainer.json +git commit -m "Add dev container configuration for Blazor development in GitHub Codespaces" +git push origin main + +{% endhighlight %} +{% endtabs %} + +## Launch GitHub Codespaces + +After adding the dev container configuration to your repository, launch GitHub Codespaces: + +1. Open your GitHub repository in the browser. +2. Click the **Code** button. +3. Select the **Codespaces** tab. +4. Click **Create codespace on main**. + +GitHub Codespaces automatically performs the following actions: + +* Provisions a cloud-based development environment +* Detects the `.devcontainer/devcontainer.json` configuration +* Installs and configures the .NET 10 development container +* Installs required VS Code extensions for [C#](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp), Blazor tools, [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker), and [GitHub CLI](https://cli.github.com/) +* Executes the post-create command to restore NuGet packages +* Installs **Blazor WebAssembly** workload tools +* Launches [Visual Studio Code](https://code.visualstudio.com/) in the browser + +After Codespaces finishes initializing, verify the setup: + +1. Open the terminal in Codespaces. +2. Run `dotnet --list-sdks` to confirm that the **[.NET 10 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/10.0)** is installed. +3. Run `dotnet workload list` to verify that the `wasm-tools` workload is present. +4. Check the terminal output for any errors from the post-create command. + +If the setup encounters errors, review the container logs or rebuild the codespace. + +## Create a Blazor Web App + +In the Codespaces root terminal, run the following commands to create a new **Blazor Web App (Interactive Server)**. + +{% tabs %} +{% highlight bash tabtitle="Terminal" %} + +dotnet new blazor -o BlazorApp --interactivity Server +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install required NuGet packages + +Install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. + +{% tabs %} +{% highlight bash tabtitle="Terminal" %} + +dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +## Add required namespaces + +After the packages are installed, open the `~/_Imports.razor` file in Blazor Web App and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces. + +{% tabs %} +{% highlight razor tabtitle="_Imports.razor" %} + +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Grids + +{% endhighlight %} +{% endtabs %} + +## Register Blazor service + +Open the `~/Program.cs` file in Blazor Web App and register the Blazor service to enable [Blazor components](https://www.syncfusion.com/blazor-components) in the application. + +{% tabs %} +{% highlight C# tabtitle="Program.cs" hl_lines="1 9" %} + +using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents(); + +// Register Blazor service +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); + +{% endhighlight %} +{% endtabs %} + +## Add stylesheet and script resources + +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) and [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the `~/App.razor` file. + +{% tabs %} +{% highlight html tabtitle="App.razor" %} + + + ... + + + + + ... + + + +{% endhighlight %} +{% endtabs %} + +## Configure render mode (Server) + +For Server render mode, if your app's interactivity location is set to `Per page/component`, add the following directive at the top of each `~/Pages/*.razor` file that requires interactive Server components. + +**Per-page directive (Server)** + +{% tabs %} +{% highlight razor %} + +@rendermode InteractiveServer + +{% endhighlight %} +{% endtabs %} + +## Add Blazor DataGrid component + +Open a Razor file located in the `~/Pages/*.razor` (for example, `Home.razor`) and add the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component inside the razor file. + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +@page "/" +@rendermode InteractiveServer + +

Blazor DataGrid in Codespaces

+ + + +@code { + public List Orders { get; set; } = new List(); + + protected override void OnInitialized() + { + var customers = new string[] { "James Hopper", "Michael Smith", "Sarah Johnson", "Robert Davis", "Emily Wilson" }; + var cities = new string[] { "New York", "Los Angeles", "Chicago", "Houston", "Phoenix" }; + var rng = new Random(); + Orders = Enumerable.Range(1, 10).Select(x => new Order() + { + OrderID = 1000 + x, + CustomerName = customers[rng.Next(customers.Length)], + ShipCity = cities[rng.Next(cities.Length)], + Freight = Math.Round(10.5 + (x * 7.3), 2), + OrderDate = DateTime.Now.AddDays(-x), + }).ToList(); + } + + public class Order { + public int? OrderID { get; set; } + public string CustomerName { get; set; } = string.Empty; + public string ShipCity { get; set; } = string.Empty; + public DateTime? OrderDate { get; set; } + public double? Freight { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +## Run the application in Codespaces + +In the Codespaces terminal, run: + +{% tabs %} +{% highlight bash tabtitle="Terminal" %} + +dotnet run --urls=http://0.0.0.0:5000 + +{% endhighlight %} +{% endtabs %} + +### Access the application + +After running: + +1. Codespaces automatically detects the running ports. +2. Open the **Ports** panel in the VS Code bottom panel. +3. Click **Open in Browser** on the HTTP port (5000) for the best experience. + +The Blazor application loads with the DataGrid displaying 10 order records. The grid is fully interactive and runs within the Codespaces browser environment. + +![Blazor DataGrid with Github Codespaces](images/datagrid-with-codespace.webp) + +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/blazor-codespaces-integration) + +## See also + +* [Getting Started with Blazor DataGrid in Blazor Web App](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app) +* [Integrating Blazor DataGrid with PDF Viewer](https://blazor.syncfusion.com/documentation/common/integration/blazor-with-pdf-viewer) +* [Integrating Blazor DataGrid with Spreadsheet](https://blazor.syncfusion.com/documentation/common/integration/blazor-grid-with-spreadsheet) +* [Integrating Blazor DataGrid with Bold Report Viewer](https://blazor.syncfusion.com/documentation/common/integration/blazor-datagrid-boldreports) \ No newline at end of file diff --git a/blazor/common/migration/webform-to-blazor-migration.md b/blazor/common/migration/webform-to-blazor-migration.md new file mode 100644 index 0000000000..7740b36a88 --- /dev/null +++ b/blazor/common/migration/webform-to-blazor-migration.md @@ -0,0 +1,437 @@ +--- +layout: post +title: Migrate ASP.NET Web Forms Controls to Blazor Components | Syncfusion +description: Step-by-step guide to migrate ASP.NET Web Forms controls including DataGrid, Scheduler, and Rich Text Editor to Blazor components targeting .NET 8 or later. +platform: Blazor +control: Common +documentation: ug +--- + +# Migrate ASP.NET Web Forms Controls to Blazor Components + +Migrating enterprise applications from [ASP.NET Web Forms](https://learn.microsoft.com/en-us/aspnet/web-forms/) to [Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-10.0) represents a significant architectural shift from a page centric, postback based framework to a modern, component driven framework built on .NET. This guide provides a structured, step-by-step migration approach for [ASP.NET Web Forms controls](https://help.syncfusion.com/aspnet/overview) to their corresponding [Blazor components](https://blazor.syncfusion.com/documentation/introduction). + +## Why migrate from Web Forms to Blazor? + +[ASP.NET Web Forms](https://learn.microsoft.com/en-us/aspnet/web-forms/) follows a **server-side page model** that uses ViewState, postback, and a tightly coupled page lifecycle to process requests and maintain UI state across interactions. + +[Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-10.0) uses a component based architecture with reusable Razor components and **event driven UI updates**, where user interactions trigger handlers that refresh the UI without full page reloads. This modern approach improves maintainability, scalability, and testability, making Blazor the preferred choice for migrating and modernizing Web Forms applications. + +| Aspect | Web Forms | Blazor | +| --- | --- | --- | +| Execution model | Server centric (page postback) | Blazor Server (SignalR) or Blazor WebAssembly | +| Hosting & deployment | IIS hosted only | Cloud, containers, IIS, or static hosting | +| UI definition | Separate markup and code-behind (`.aspx`, `.aspx.cs`) | Component based (`.razor` with optional `.razor.cs`) | +| Lifecycle model | `Page_Load`, postback events, `Page_Unload` | `OnInitialized{Async}`, `OnParametersSet{Async}`, `OnAfterRender{Async}`, `Dispose` | +| State management | ViewState (hidden fields, page level) | Component state (in-memory, persisted per connection in Blazor Server) | +| User interaction | Full or partial postback (page reload) | Event driven UI updates (real-time in Blazor Server via SignalR) | +| Event handling | Server callbacks (AutoPostBack) | `EventCallback` and delegates | +| Dependency injection | Limited or manual | Built-in with `IServiceCollection` | +| Navigation model | Page based navigation (`.aspx`) | SPA style routing using `@page` | +| Application updates | Requires restart for assembly changes | Blazor Server: immediate; WebAssembly: versioned deployment | + +## Prerequisites for Blazor + +* [.NET 8 SDK or later](https://dotnet.microsoft.com/en-us/download/dotnet) +* [Visual Studio](https://visualstudio.microsoft.com/downloads/) 2022 or later or [Visual Studio Code](https://code.visualstudio.com/) with [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension + +## Project structure comparison + +[ASP.NET Web Forms](https://learn.microsoft.com/en-us/aspnet/web-forms/) and [Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-10.0) Web Apps follow different application architectures. The following table maps common Web Forms artifacts to their Blazor equivalents and describes their roles in a Blazor Web App. + +| Web Forms Artifact | Blazor Web App Equivalent | Description | +| --- | --- | --- | +| `Default.aspx` | `Components/Pages/Home.razor` | Represents the UI page and route entry point | +| `Default.aspx.cs` | `@code {}` block or `.razor.cs` file | Contains UI logic and event handling | +| `Global.asax` | `Program.cs` | Configures application startup, services, and middleware | +| `web.config` | `appsettings.json` | Stores configuration and environment settings | +| Master Page (`Site.Master`) | `MainLayout.razor`, `App.razor` | Defines shared layout and structure across pages and defines script and style | +| ViewState | Component state (fields/properties) | Maintains UI state in memory instead of hidden fields | +| Routing (`*.aspx`) | `@page` directive in `.razor` files | Enables route based navigation | +| Session / Application state | Scoped / Singleton services | Manages shared application state | + +## Migrating components from Web Forms to Blazor + +Create a [Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-10.0) project using one of the following getting started guides. + +* [Getting Started with Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting Started with Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +* [Getting Started with Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) + +The following shared setup applies to all components and covers the common configuration required before proceeding to the [component specific migration steps](#component-specific-migration-steps). + +### Package installation + +In [ASP.NET Web Forms](https://learn.microsoft.com/en-us/aspnet/web-forms/) applications, components are typically installed using a single package, [Syncfusion.AspNet](https://www.nuget.org/packages/Syncfusion.AspNet). + +In [Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-10.0) applications, using individual component packages improves performance and reduces application size. For the complete list of available packages, refer to the [Blazor NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). + +Additionally, install the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) NuGet package for styling support. + +### Service registration + +[ASP.NET Web Forms](https://learn.microsoft.com/en-us/aspnet/web-forms/) initializes controls automatically as part of the page lifecycle, without requiring explicit service registration. + +[Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-10.0) uses dependency injection (DI), where components must be registered in the service container to enable required functionality such as rendering and interaction. + +In the `Program.cs` file, add the following namespace and register the required services. + +{% tabs %} +{% highlight csharp tabtitle="Program.cs" %} + +using Syncfusion.Blazor; +... +var builder = WebApplication.CreateBuilder(args); +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents(); +builder.Services.AddSyncfusionBlazor(); // Register Blazor services +var app = builder.Build(); +... + +{% endhighlight %} +{% endtabs %} + +### Add required namespaces + +After packages are installed and services are registered, import the required namespaces in the `_Imports.razor` file. + +{% tabs %} +{% highlight razor tabtitle="_Imports.razor" %} + +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Schedule +@using Syncfusion.Blazor.RichTextEditor + +{% endhighlight %} +{% endtabs %} + +The above lists the namespaces for all components covered in this guide. Import only the namespaces required for the components you use. + +### Theme and script configuration + +**Web Forms approach** + +Scripts and styles are added manually in individual `.aspx` pages or `Site.Master` pages. + +{% tabs %} +{% highlight html tabtitle=".aspx" %} + + + + + + + +{% endhighlight %} +{% endtabs %} + +**Blazor equivalent** + +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) and [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **App.razor** file. + +{% tabs %} +{% highlight html tabtitle="App.razor" %} + + + ... + + + ... + + + ... + + + ... + + +{% endhighlight %} +{% endtabs %} + +## Component specific migration steps + +### Migrate to Blazor DataGrid component + +**ASP.NET Web Forms Grid** is a traditional control for displaying and managing tabular data in web applications while [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) is a modern component designed to provide a faster, more interactive, and responsive user experience. + +For additional details, refer to the [Blazor DataGrid getting started guide](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app) and [Web Forms DataGrid getting started guide](https://help.syncfusion.com/aspnet/grid/getting-started). + +| Aspect | Web Forms (`ej:Grid`) | Blazor (`SfGrid / SfGrid`) | +| --- | --- | ---| +| Package (NuGet) | [Syncfusion.AspNet](https://www.nuget.org/packages/Syncfusion.AspNet) | [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) | +| Namespace | `<%@ Register Assembly="Syncfusion.EJ.Web" %>` | `@using Syncfusion.Blazor.Grids` | +| Component declaration | `` | `` / `` | +| Data binding | [DataSource](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_DataSource) property set in `Page_Load` or callbacks | [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property bound during component initialization | +| Collection type | `DataTable`, `IEnumerable`, server managed collections | `List` / `IEnumerable` | +| Columns | [Columns](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_Columns) property defined using `` | [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Columns) property defined by using `` | +| Editing & API | [EditSettings](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_EditSettings) | [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html), [GridEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html), `@ref` async APIs | +| Events & commands | Server events (postback / AJAX callbacks) | `EventCallback` based async handlers | +| Paging / virtualization API | [AllowPaging](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_AllowPaging), [ScrollSettings](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_ScrollSettings) | [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging), [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html), [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) | +| Filtering API | [AllowFiltering](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_AllowFiltering) | [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) | +| Grouping API | [AllowGrouping](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_AllowGrouping) | [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping)| +| Lifecycle & refs | `Page_Load`, control IDs (`ID`) | `OnInitialized{Async}`, DI, `@ref` and async methods | + +#### Component configuration for DataGrid + +**Web Forms approach** + +The Grid control for ASP.NET is an efficient display engine for tabular data by defining [Columns](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_Columns) and linking them to `Fields` in a [DataSource](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_DataSource) property. In the example, a list of people is created and assigned to the Grid, which then automatically displays the data as rows and columns. + +{% tabs %} +{% highlight html tabtitle="Default.aspx" %} + + + + + + + + + +{% endhighlight %} + +{% highlight c# tabtitle="Default.aspx.cs" %} + +using System.Web.UI; +namespace WebFormsGrid +{ + public partial class _Default : Page + { + protected void Page_Load(object sender, EventArgs e) + { + List Persons = new List + { + new Person() { FirstName = "John", LastName = "Beckett", Email = "john@syncfusion.com" }, + new Person() { FirstName = "Ben", LastName = "Beckett", Email = "ben@syncfusion.com" }, + new Person() { FirstName = "Andrew", LastName = "Beckett", Email = "andrew@syncfusion.com" } + }; + this.Grid.DataSource = Persons; + } + } + public class Person + { + public string FirstName { get; set; } + public string LastName { get; set; } + public string Email { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +**Blazor equivalent** + +The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component is declared in Razor markup and binds data directly to a component property using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + + + + + + + + + +@code { + private List Persons = new() + { + new Person { FirstName = "John", LastName = "Beckett", Email = "john@syncfusion.com" }, + new Person { FirstName = "Ben", LastName = "Beckett", Email = "ben@syncfusion.com" }, + new Person { FirstName = "Andrew", LastName = "Beckett", Email = "andrew@syncfusion.com" } + }; + + public class Person + { + public string? FirstName { get; set; } + public string? LastName { get; set; } + public string? Email { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +### Migrate to Blazor Scheduler component + +**ASP.NET Web Forms Scheduler** is used to organize and manage events across different calendar views in web applications, while [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) is a modern component that offers a more dynamic and user friendly way to handle appointments and scheduling. + +For additional details, refer to the [Blazor Scheduler getting started guide](https://blazor.syncfusion.com/documentation/scheduler/getting-started-with-server-app) and [Web Forms Scheduler getting started guide](https://help.syncfusion.com/aspnet/schedule/getting-started). + +| Aspect | Web Forms (`ej:Schedule`) | Blazor (`SfSchedule`) | +| --- | --- | --- | +| Package (NuGet) | [Syncfusion.AspNet](https://www.nuget.org/packages/Syncfusion.AspNet) | [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) | +| Namespace | `<%@ Register Assembly="Syncfusion.EJ.Web" %>` | `@using Syncfusion.Blazor.Schedule` | +| Component declaration | `` | `` | +| Data binding API | [DataSource](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.ScheduleFields.html#Syncfusion_JavaScript_Models_ScheduleFields_DataSource) set during `Page_Load` or callbacks | `DataSource="@..."` via [ScheduleEventSettings.DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_DataSource) | +| Appointment model API | [AppointmentSettings](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.ScheduleProperties.html#Syncfusion_JavaScript_Models_ScheduleProperties_AppointmentSettings) | [ScheduleEventSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html) | +| Views configuration | [CurrentView](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.ScheduleProperties.html#Syncfusion_JavaScript_Models_ScheduleProperties_CurrentView) property | [ScheduleViews](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleView.html) collection | +| Lifecycle & refs | `Page_Load`, control `ID` | `OnInitialized{Async}`, DI, `@ref` async APIs | + +#### Component configuration for Scheduler + +**Web Forms approach** + +The **Scheduler** is an event calendar that manages the list of various activities (events/appointments) in different available views (day, week, workweek, month and agenda) for various resources. It is simply a server-side wrapper of JS Scheduler component and all the features of JS platform are applicable in ASP Scheduler too. + +{% tabs %} +{% highlight html tabtitle="Default.aspx" %} + + + + +{% endhighlight %} + +{% highlight c# tabtitle="Default.aspx.cs" %} + +using System; +using System.Collections.Generic; +using System.Web.UI; + +namespace WebFormsScheduler +{ + public partial class _Default : Page + { + protected void Page_Load(object sender, EventArgs e) + { + Schedule1.AppointmentSettings.DataSource = new List + { + new Appointment + { + Id = 1, + Subject = "Meeting", + StartTime = DateTime.Now, + EndTime = DateTime.Now.AddHours(1) + } + }; + Schedule1.AppointmentSettings.Id = "Id"; + Schedule1.AppointmentSettings.Subject = "Subject"; + Schedule1.AppointmentSettings.StartTime = "StartTime"; + Schedule1.AppointmentSettings.EndTime = "EndTime"; + } + } + + public class Appointment + { + public int Id { get; set; } + public string Subject { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +**Blazor equivalent** + +The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component is declared in Razor markup, where views are configured using child components, and appointment data is supplied through the [ScheduleEventSettings.Datasource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html) property. + +{% tabs %} +{% highlight razor tabtitle="Schedule.razor" %} + + + + + + + + + + +@code { + private List Meetings = new() + { + new Meeting + { + Id = 1, + Subject = "Meeting", + StartTime = DateTime.Now, + EndTime = DateTime.Now.AddHours(1) + } + }; + + public class Meeting + { + public int Id { get; set; } + public string Subject { get; set; } = string.Empty; + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +N> The event class (`Meeting` in this example) property names match the Scheduler's default field mappings. Alternatively, you can add an explicit [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleField.html) configuration in `ScheduleEventSettings` to map custom property names. + +### Migrate to Blazor Rich Text Editor component + +**ASP.ET Web Forms Rich Text Editor** is a component used for creating and formatting content such as text, images, tables, and links with various editing tools. [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) is a modern component that offers a more dynamic and user-friendly way to create rich content with support for HTML, Markdown, and responsive design. + +For additional details, refer to the [Blazor Rich Text Editor getting started guide](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started-with-server-app) and [Web Forms Rich Text Editor getting started guide](https://help.syncfusion.com/aspnet/richtexteditor/getting-started). + +| Aspect | Web Forms (`ej:RTE`) | Blazor (`SfRichTextEditor`) | +| --- | --- | ---| +| Package (NuGet) | [Syncfusion.AspNet](https://www.nuget.org/packages/Syncfusion.AspNet) | [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor) | +| Namespace | ASPX: `<%@ Register Assembly="Syncfusion.EJ.Web" %>` | Razor: `@using Syncfusion.Blazor.RichTextEditor` | +| Component declaration | `` (ASPX) | `` (Razor) | +| Content binding | [Value](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.RTEproperties.html#Syncfusion_JavaScript_Models_RTEproperties_Value) property set during page lifecycle | [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_Value) / `@bind-Value` bound to component state | +| Toolbar configuration | [ToolsList](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.RTEproperties.html#Syncfusion_JavaScript_Models_RTEproperties_ToolsList), [Tools](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.RTEproperties.html#Syncfusion_JavaScript_Models_RTEproperties_Tools) | [ToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html) with predefined/custom items | +| Lifecycle & refs | `Page_Load`, control `ID` | `OnInitialized{Async}`, DI, `@ref` async APIs | + +#### Component configuration for Rich Text Editor + +**Web Forms approach** + +The Rich Text Editor content is defined directly within the markup using the `RTEContent` section, with content embedded as static HTML. + +{% tabs %} +{% highlight html tabtitle="Default.aspx" %} + + + +

Welcome to Blazor Rich Text Editor

+ + + +{% endhighlight %} +{% endtabs %} + +**Blazor equivalent** + +The [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) is implemented as a Razor component, where content is bound dynamically using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_Value) property with two-way binding. + +{% tabs %} +{% highlight razor tabtitle="Editor.razor" %} + + + +@code { + private string? Content = "

Welcome to Blazor Rich Text Editor

"; +} + +{% endhighlight %} +{% endtabs %} + +## Run the application + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. + +Alternatively, run the application using the following .NET CLI command from the project root directory. + +{% tabs %} +{% highlight bash tabtitle=".NET CLI" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +## See also + +* [Getting started with Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app) +* [Getting started with Blazor Scheduler](https://blazor.syncfusion.com/documentation/scheduler/getting-started-with-server-app) +* [Getting started with Blazor Rich Text Editor](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started-with-server-app) diff --git a/blazor/common/migration/wpf-blazor-migration.md b/blazor/common/migration/wpf-blazor-migration.md new file mode 100644 index 0000000000..10afea223c --- /dev/null +++ b/blazor/common/migration/wpf-blazor-migration.md @@ -0,0 +1,658 @@ +--- +layout: post +title: Migrating WPF Controls to Blazor Components | Syncfusion +description: Step-by-step guide to migrate WPF controls to Blazor components on .NET 8+, including setup, configuration, code examples, and migration limitations. +platform: Blazor +component: Common +documentation: ug +--- + +# Migrating WPF Controls to Blazor Components + +Migrating enterprise applications from **[WPF (Windows Presentation Foundation)](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/overview/)** to **[Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/)** involves a significant architectural transition, moving from a rich, XAML-based desktop client framework to a component-driven, cross-platform web framework running on .NET. This guide provides a structured, step-by-step migration approach for **[WPF Controls](https://www.syncfusion.com/wpf-controls)** to their corresponding **[Blazor components](https://www.syncfusion.com/blazor-components)** with the **Blazor Web App (Interactive Server)** rendering mode. + +## Why migrate from WPF to Blazor? + +| Dimension | WPF | Blazor Web App (Interactive Server) | +|---|---|---| +| Runtime | Windows desktop app on .NET Framework or modern .NET | Web app on .NET with interactive server rendering | +| UI definition | XAML-based UI with code-behind | Razor components with HTML and C# | +| Code-behind / logic | `.xaml.cs` files or view models | `@code { }` blocks or `.razor.cs` partial classes | +| Pattern | MVVM is commonly used | Component-based development is the standard approach | +| Data binding | Uses `DataContext` and view models | Uses component parameters, `@bind`, and cascading values | +| State management | Uses view model state and `INotifyPropertyChanged` | Uses component state and re-rendering | +| Navigation | Uses windows, `Frame`, or region-based navigation | Uses `@page` routing and `NavigationManager` | +| Dependency injection | Often uses external containers | Uses built-in .NET dependency injection | +| Rendering | Uses the native WPF rendering pipeline | Uses interactive rendering in the browser | +| Communication model | In-process desktop interaction | Server interaction over SignalR for interactivity | + +## Prerequisites for Blazor + +* [.NET 8 SDK or later](https://dotnet.microsoft.com/en-us/download/dotnet) +* [Visual Studio](https://visualstudio.microsoft.com/downloads/) 2022 or later or [Visual Studio Code](https://code.visualstudio.com/) with [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension + +## Project structure comparison + +WPF and Blazor follow different application models. The following table maps common WPF artifacts to their closest Blazor equivalents and describes their roles in a Blazor application. + +| WPF artifact | Blazor equivalent | Description | +|---|---|---| +| `App.xaml` | `Program.cs` and `App.razor` | Defines startup and root rendering | +| `App.xaml.cs` | `Program.cs` | Configures services and host setup | +| `MainWindow.xaml` | `App.razor`, `MainLayout.razor`, and `Routes.razor` | Represents the application shell and routing structure | +| `Views/*.xaml` | `Pages/*.razor` | Defines route-enabled UI pages | +| `ViewModels/*.cs` | Services, component state, or `.razor.cs` | Contains UI logic and state | +| `Models/*.cs` | `Models/*.cs` | Usually reusable without changes | +| `Services/*.cs` | `Services/*.cs` | Handles shared application logic through dependency injection | +| `ResourceDictionary` | CSS, CSS isolation, and static assets | Manages styling and static resources | +| `UserControl` | Razor component (`.razor`) | Reusable UI component | +| `ICommand` and `RelayCommand` | Event handlers, `EventCallback`, component methods, or custom services | Implements user action handling and validation logic in Blazor using event callbacks or service methods | +| `INotifyPropertyChanged` | Component state and re-rendering | Updates the UI when state changes | + +## Common setup and configuration + +Create a Blazor project using one of the following getting started guides. + +* [Getting Started with Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting Started with Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +* [Getting Started with Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) + +This migration guide focuses on the **Blazor Web App (Interactive Server)** approach, which provides the most direct migration path from WPF by maintaining server-side logic and state management similar to traditional desktop applications. The interactive server rendering mode enables real-time server-client communication through SignalR, making it suitable for enterprise applications that require complex business logic and real-time updates. + +The following shared setup applies to all components and covers the common configuration required before proceeding to the [component-specific migration steps](#component-specific-migration-steps). + +### Package installation + +In WPF applications, controls are typically installed as individual NuGet packages (for example, [Syncfusion.SfGrid.WPF](https://www.nuget.org/packages/Syncfusion.SfGrid.WPF) and [Syncfusion.SfChart.WPF](https://www.nuget.org/packages/Syncfusion.SfChart.WPF)) and referenced directly in XAML and code-behind. + +In Blazor applications, components are also provided as individual NuGet packages (for example, [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts)). Installing only the required component packages improves performance and reduces application size. + +For the complete list of available packages, refer to the [Blazor NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). + +Additionally, install the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) NuGet package at the application level to enable styling. + +### Service registration + +In WPF, controls are usually declared in XAML and initialized in code-behind, so you do not need to register them explicitly. Application services are typically configured manually or through an external DI container. + +Blazor uses the built-in .NET dependency injection (DI) system, so required services must be registered in the application's service container to enable component communication and framework functionality. When using **Blazor Web App (Interactive Server)**, ensure that services are registered with the appropriate lifetime scope to support interactive components and server-side state management. + +In the `Program.cs` file, add the following namespace and register the required services. + +{% tabs %} +{% highlight c# tabtitle="Program.cs" hl_lines="2 8" %} + +... +using Syncfusion.Blazor; +... +var builder = WebApplication.CreateBuilder(args); +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents(); +// Register Blazor services +builder.Services.AddSyncfusionBlazor(); +... + +{% endhighlight %} +{% endtabs %} + +### Add required namespaces + +In Blazor applications, after installing the required packages and registering services, import the necessary namespaces in the `_Imports.razor` file. + +{% tabs %} +{% highlight razor tabtitle="_Imports.razor" %} + +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Charts +@using Syncfusion.Blazor.Schedule + +{% endhighlight %} +{% endtabs %} + +This example includes the namespaces used by the components covered in this guide. Import only the namespaces needed for the components used in your application. + +### Theme and script configuration + +**WPF approach** + +In WPF, themes are typically applied using [SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager), while additional styling can be managed through `ResourceDictionary` and XAML-based styling. Scripts are not required because rendering happens locally in the desktop runtime. + +{% tabs %} +{% highlight xml tabtitle="MainWindow.xaml" %} + + + ... + + +{% endhighlight %} +{% endtabs %} + +**Blazor equivalent** + +In Blazor, the theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) and [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **App.razor** file. + +{% tabs %} +{% highlight html tabtitle="App.razor" %} + + + ... + + + ... + + + + ... + + + + +{% endhighlight %} +{% endtabs %} + +## Understanding Data Binding Between DataContext and Blazor Parameters + +Data binding is a fundamental concept in both WPF and Blazor, but the implementation approaches differ significantly. + +### WPF DataContext approach + +In WPF, the `DataContext` property is a powerful mechanism that enables declarative data binding. You set the `DataContext` to a view model instance that typically implements `INotifyPropertyChanged`, and XAML bindings automatically resolve against this object. This allows UI elements to automatically update when the underlying data changes. + +When the data source implements [INotifyCollectionChanged](https://learn.microsoft.com/en-us/dotnet/api/system.collections.specialized.inotifycollectionchanged?view=net-10.0) (such as [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-10.0)), the [SfDataGrid](https://www.syncfusion.com/wpf-controls/datagrid) control automatically refreshes the UI when items are added, removed, or when the list is cleared. However, when using a standard `List`, the grid will not automatically refresh when the collection is modified. + +{% tabs %} +{% highlight c# tabtitle="MainWindow.xaml.cs" %} + +using System.ComponentModel; +using System.Collections.ObjectModel; + +public partial class MainWindow : Window +{ + public MainWindow() + { + InitializeComponent(); + // Set the DataContext to bind XAML elements to the view model + this.DataContext = new OrderViewModel(); + } +} + +public class OrderViewModel : INotifyPropertyChanged +{ + private ObservableCollection orders; + + public ObservableCollection Orders + { + get { return orders; } + set + { + if (orders != value) + { + orders = value; + OnPropertyChanged(nameof(Orders)); + } + } + } + + public OrderViewModel() + { + Orders = new ObservableCollection + { + new Order { OrderID = 10248, CustomerID = "VINET", Freight = 32.38 }, + new Order { OrderID = 10249, CustomerID = "TOMSP", Freight = 11.61 }, + new Order { OrderID = 10250, CustomerID = "HANAR", Freight = 65.83 } + }; + } + + public event PropertyChangedEventHandler PropertyChanged; + + private void OnPropertyChanged(string propertyName) + { + PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); + } +} + +public class Order +{ + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +### Blazor parameter and binding approach + +In Blazor, data flows through component parameters and the `@bind` directive. Instead of a global `DataContext`, each component explicitly defines its data dependencies through parameters. This approach provides more explicit data flow, better component composition, and type-safe binding. + +The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports binding to any `IEnumerable` collection such as `List`, [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-10.0), collections of [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-10.0), [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-10.0), or `DataTable`, directly to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property of the Grid. When using `ObservableCollection`, the component automatically reflects changes made externally. For standard `List`, call the [Refresh](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Refresh_System_Boolean_) method to reflect externally made changes to avoid tracking changes for performance considerations. + +{% tabs %} +{% highlight razor tabtitle="Orders.razor" %} + +@page "/orders" +@rendermode InteractiveServer +@using Syncfusion.Blazor.Grids + + + + + + + + + +@code { + private List Orders = new(); + + protected override void OnInitialized() + { + // Component state is initialized with data + Orders = new List + { + new Order { OrderID = 10248, CustomerID = "VINET", Freight = 32.38 }, + new Order { OrderID = 10249, CustomerID = "TOMSP", Freight = 11.61 }, + new Order { OrderID = 10250, CustomerID = "HANAR", Freight = 65.83 } + }; + } + + public class Order + { + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +**Key differences in data binding** + +| Aspect | WPF DataContext | Blazor Parameters | +|---|---|---| +| Scope | Global to window/control hierarchy | Explicit per component | +| Binding declaration | `{Binding PropertyName}` in XAML | `@PropertyName` or `@bind` in Razor | +| Property changes | `INotifyPropertyChanged` triggers UI updates | Component state changes trigger re-renders | +| Collection type | `ObservableCollection` for automatic notifications | `List` or `ObservableCollection` (for `ObservableCollection`, automatic notifications; for `List`, call [Refresh()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Refresh_System_Boolean_) method) | +| Type safety | Resolved at runtime | Type-safe at compile time | +| Two-way binding | `{Binding PropertyName, Mode=TwoWay}` | `@bind-Value="@PropertyName"` | +| Update notification | Automatic via `PropertyChanged` event | Automatic for `ObservableCollection` or manual via `Refresh()` or re-assignment for `List` | +| Data sources supported | Collections implementing `INotifyCollectionChanged` or `IEnumerable` | `IEnumerable` collections: `List`, `ObservableCollection`, `ExpandoObject`, `DynamicObject`, `DataTable` | + +## Component-specific migration steps + +### DataGrid + +[WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) is a high-performance XAML-based tabular control for desktop applications, while [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) is the web-first Razor component for building responsive, interactive, data-driven web interfaces. + +For additional details, refer to the [WPF DataGrid getting started guide](https://help.syncfusion.com/wpf/datagrid/getting-started) and [Blazor DataGrid getting started guide](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app). + +| Aspect | WPF (SfDataGrid) | Blazor (SfGrid) | +|---|---|---| +| Package (NuGet) | [Syncfusion.SfGrid.WPF](https://www.nuget.org/packages/Syncfusion.SfGrid.WPF) | [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) | +| Component declaration | `` | `` | +| Data binding | [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) with `DataContext` or a view model | [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) with component state | +| Collection type | `ObservableCollection` (automatic notifications) | `List` or `IEnumerable` (state updates trigger re-renders) | +| Columns | [GridTextColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridTextColumn.html), [GridNumericColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridNumericColumn.html), [GridTemplateColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridTemplateColumn.html) | [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) with [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field), [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format), and [EditType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditType) | +| Templates | XAML `DataTemplate` | Razor `