From 11b94373f00c1c5c8d0451e3e172f58f652b1ee3 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 10 Dec 2025 13:57:47 +0200 Subject: [PATCH] Update diagram-change-shape-color-onshapeclick.md --- ...diagram-change-shape-color-onshapeclick.md | 132 ++++++++++++------ 1 file changed, 93 insertions(+), 39 deletions(-) diff --git a/knowledge-base/diagram-change-shape-color-onshapeclick.md b/knowledge-base/diagram-change-shape-color-onshapeclick.md index 44cad39ce..24048f772 100644 --- a/knowledge-base/diagram-change-shape-color-onshapeclick.md +++ b/knowledge-base/diagram-change-shape-color-onshapeclick.md @@ -22,15 +22,17 @@ res_type: kb ## Description -I am using the Diagram `OnShapeClick` event to update the `DiagramShapeFill` `Color` of the selected Diagram shape. However, this resets the positions of the shapes that the user has dragged. How to update the shape background colors while maintaining the current shape positions? +I am using the Diagram `OnShapeClick` event to update the `DiagramShapeFill` `Color` of the selected Diagram shape. However, this resets the positions of the shapes that the user has dragged. How to update the shape background colors while maintaining the current shape positions? In addition, I want to persist the custom shape colors when the Diagram `Layout` changes. ## Cause -The Diagram `OnShapeClick` event handler is an `EventCallback` and triggers component re-render. If the [Diagram shapes are defined](slug:diagram-shapes#basics) without their `X` and `Y` properties and [shape dragging](slug:diagram-shapes#editability) is enabled, the component definition does not include the current shape positions. As a result, a re-render resets the shapes to their original places. +The Diagram `OnShapeClick` event handler is an `EventCallback` and triggers component re-render. If the [Diagram shapes are defined](slug:diagram-shapes#basics) without their `X` and `Y` properties and [shape dragging](slug:diagram-shapes#editability) is enabled, the Razor component definition does not include the current shape positions. As a result, a re-render resets the shapes to their original places. + +Similarly, if the Diagram Shape background colors are not part of the Razor component declaration, they will be reset to the default value if the Diagram `Layout` changes. ## Solution -Use the Diagram `SaveAsJsonAsync` and `LoadFromJsonAsync` methods to [persist the Diagram state through JSON](slug:diagram-overview#define-shapes-and-connections-in-json) on each re-render: +Use the Diagram `SaveAsJsonAsync` and `LoadFromJsonAsync` methods to [define and persist the Diagram state through JSON](slug:diagram-overview#define-shapes-and-connections-in-json) on each render: 1. Implement classes with property names that correspond to the ones in the [Diagram JSON state](slug:diagram-overview#define-shapes-and-connections-in-json). 1. Subscribe to the [Diagram `OnShapeClick` event](slug:diagram-events#onshapeclick). @@ -45,49 +47,33 @@ Use the Diagram `SaveAsJsonAsync` and `LoadFromJsonAsync` methods to [persist th @using System.Text.Json @using System.Text.Json.Serialization - - +Drag a shape and then click on a shape to change its background color. The shape positions will persist. +
+Click on a shape and + + Toggle Diagram Layout Type + +The shape background colors will persist. - - @foreach (DiagramModel shape in DiagramData) - { - - - - - } - - - - @foreach (DiagramModel shape in DiagramData) - { - if (shape.ParentId is not null) - { - - } - } - + + + + @code { #nullable enable private TelerikDiagram? DiagramRef { get; set; } - private string DiagramJson { get; set; } = string.Empty; - private List DiagramData { get; set; } = Enumerable.Range(1, 6).Select(x => new DiagramModel() + private DiagramLayoutType DiagramLayoutType { get; set; } = DiagramLayoutType.Tree; + + private void OnButtonClick() { - Id = x.ToString(), - ParentId = x == 1 ? null : (x <= 4 ? 1 : 3), - Text = $"Shape {x}", - Type = x % 2 == 0 ? DiagramShapeType.Rectangle : DiagramShapeType.Circle, - BackgroundColor = "#666" - }).ToList(); + DiagramLayoutType = DiagramLayoutType == DiagramLayoutType.Tree ? DiagramLayoutType.Force : DiagramLayoutType.Tree; + } private async Task OnDiagramShapeClick(DiagramShapeClickEventArgs args) { @@ -102,7 +88,7 @@ Use the Diagram `SaveAsJsonAsync` and `LoadFromJsonAsync` methods to [persist th if (diagramStateObject is not null && diagramStateObject.Shapes is not null) { var rnd = Random.Shared; - string newFillColor = $"rgb({rnd.Next(0, 127)},{rnd.Next(0, 127)},{rnd.Next(0, 127)})"; + string newFillColor = $"rgb({rnd.Next(48, 128)},{rnd.Next(48, 128)},{rnd.Next(48, 128)})"; diagramStateObject.Shapes.First(x => x.Id == args.Id).Fill.Color = newFillColor; @@ -111,6 +97,74 @@ Use the Diagram `SaveAsJsonAsync` and `LoadFromJsonAsync` methods to [persist th } } + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender && DiagramRef is not null) + { + // Wait for HTML and client-side Diagram instance + await Task.Delay(1); + + await DiagramRef.LoadFromJsonAsync(DiagramJson); + StateHasChanged(); + } + + await base.OnAfterRenderAsync(firstRender); + } + + private string DiagramJson { get; set; } = @" + { + ""shapes"": [ + { + ""id"": ""shape1"", + ""type"": ""Circle"", + ""content"": { + ""text"": ""Shape 1"" + }, + ""x"": 200, + ""y"": 50 + }, + { + ""id"": ""shape2"", + ""content"": { + ""text"": ""Shape 2"" + }, + ""height"": 100, + ""width"": 160, + ""x"": 50, + ""y"": 200 + }, + { + ""id"": ""shape3"", + ""type"": ""Display"", + ""content"": { + ""text"": ""Shape 3"" + }, + ""x"": 300, + ""y"": 200 + } + ], + ""connections"": [ + { + ""from"": { + ""shapeId"": ""shape1"" + }, + ""to"": { + ""shapeId"": ""shape2"" + } + }, + { + ""from"": { + ""shapeId"": ""shape1"", + ""connector"":""Right"" + }, + ""to"": { + ""shapeId"": ""shape3"", + ""connector"":""Top"" + } + } + ] + }"; + #region Diagram State Classes public class DiagramState @@ -192,7 +246,7 @@ Use the Diagram `SaveAsJsonAsync` and `LoadFromJsonAsync` methods to [persist th Utf8JsonWriter writer, DiagramShapeType shapeType, JsonSerializerOptions options) => - writer.WriteStringValue(shapeType.ToString().ToLower()); + writer.WriteStringValue(shapeType.ToString()); } } ```