Suggestion on Diagram component with addidtional components (gauges)

[Magnus Sydoff]

Hello,

I'm fairly new with Syncfusion Blazor components, but having used DevExpress WPF components in the past I find Syncfusion components very appealing.

Anyway, I'm trying to create a Blazor Server application with a diagram that the end user can manipulate which works out nicely so far. However the user wants some dynamic gauges or meters next to different boxes as seen in the mockup image.

Has anyone tried something like this, i.e. combining the Diagram component with displaying other Syncfusion components in the diagram? If so are there any suggestions, demos or writeups on how to implement it?

Any tip are highly appreciated.

King regards
Magnus

Attachment: Accordion_905726fa.zip

[Aravind Ravi]

Hi Magnus, 

By using the HTML shape node we can add other Syncfusion component in to diagram. Html elements can be embedded in the diagram through HTML type node. The Shape property of Node allows you to set the type of node and to create a HTML node it should be set as HTML.  Please refer to below documentation for how to add HTML shape in diagram 

UG Link: https://blazor.syncfusion.com/documentation/diagram-component/shapes#html-template-shape 

We have already prepared a sample in our live demos. Please find sample in below link 

Sample: https://blazor.syncfusion.com/demos/diagramcomponent/nodetemplate?theme=bootstrap5 

Regards 

Aravind Ravi 

[Magnus Sydoff]

Hello Aravind, 

First, thanks for getting back on this issue and secondly a big argh to myself for missing this in your documentation. 

I'll take a look at it! 

King regards Magnus 

[Arunkumar Manoharan]

Hi Magnus,

Welcome. Please have a look at our documentation and let us know if you need any clarifications.

Regards 

Arun Kumar.

[Magnus Sydoff]

Hello Arun,

I have a follow up question if that is okay. 

Since I want my user to be able to add HTML elements to the diagram I added an HTML element to the SfSymbolPaletteComponent. This worked well and the component is visible by adding the <SymbolPaletteTemplates> to the razor page. 

However, when the user is dragging this HTML component to the diagram it does not show. (It just vanishes when it reaches the diagram area)

If I programmatically add an HTML component to the diagram I can make it show (it also works with loading and saving)

My question is, do I go about this the wrong way or am I missing something?

One alternative I thought of is adding a "fake" component to the SymbolPalette (using one shape as a placeholder, like FlowShapeType.MultiDocument) and then trigger on some event when the user drags the 

FlowShapeType.MultiDocument to the diagram and change this "fake" component to an HTML component?

Or am I missing something vital here that makes it possible to have HTML components on the palette and being dragged to the drawing (diagram) area ?

King regards
Magnus

Attachment: Accordion2_e05c09e0.zip

[Sivakumar Sekar]

While dragging and dropping the HTML or SVG nodes into the diagram we need to add the templates in both the symbol palette templates and diagram templates. As shown in the below code. 

 

//For symbol palette  

<SymbolPaletteTemplates> 

                    <NodeTemplate> 

                        @{ 

                                var id = (context as Node).ID; 

                                if (id.Contains("node2checknode")) 

                                { 

                                    <input type="button" style="pointer-events: none;" value="Button2" />  

                                } 

                               …. 

                        } 

                    </NodeTemplate> 

</SymbolPaletteTemplates> 

 

//For Diagram Template 

<DiagramTemplates> 

                        <NodeTemplate> 

                        @{ 

                                var id = (context as Node).ID; 

                                if (id.Contains("node2checknode")) 

                                { 

                                    <input type="button" style="pointer-events: none;" value="Button2" />  

                                } 

                               …. 

                        } 

                       </NodeTemplate> 

</DiagramTemplates> 

 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/172891/ze/F1728911438340919  

[Magnus Sydoff]

Hello Sivakumar,

Thank you very much for your example. I thought that I was doing the same thing but obviously I have missed something. Anyway, I just copied your NodeTemplate code into my own project and it works out nicely.

But (there is always that but   :-)) I get some problems when I re-load the design that I saved on disc. If I don't add the SVG image the saving and loading works fine, but as soon as I add the SVG graphics the persistence generates an exception when loading.

I assume that you can decipher the exception better than I can do, but it seems as if the exception occurs in your code. 

I've recorded a small video that I hope clarifies the issue.

King regards

Magnus

Attachment: Syncfusion_e6f02663.zip

[Sivakumar Sekar]

We can reproduce the issue and a defect report has been logged for this. We will fix the issue and provide the patch by 2^nd march 2022 in the weekly release. 

 

Feedback link: https://www.syncfusion.com/feedback/32874/null-exception-occurs-while-save-and-loading-the-svg-node  

[Sivakumar Sekar]

We have fixed the reported issue and included it in our patch release (v 19.4.0.54 patch) which is rolled out successfully. 

Please upgrade to the latest NuGet version to resolve this issue.   

[Magnus Sydoff]

Thank you very much !

I've tried out patch 54 and it works fine !!

King regards

Magnus

[Shyam G]

Hi Magnus,

Thanks for your update.

Regards,

Shyam G