Button and other controls on custom shape

[Torben Laursen]

Hi,

I am looking into using the Blazor diagram control for a project.

In order to use it I need a number of custom shapes where the user can view and edit several properties.

In the attached example the user can edit values in the 2 textbox's and click on the output button to open a popup.

Can that be done and if yes how?

Attachment: custom_shape_520d7e76.zip

[Gowtham Gunashekar]

Hi Torben, 

 

Please refer to the following sample for how to render the shared alike sample in diagram using the HTML node and nodeTeamplate. In the sample we have rendered the two-text edit element and one button into the node using nodeTemplate and when click on a button a dialog box will show and we have added the documentation for the HTML node for your references.  

  

 

Documentation for the HTML Node: https://blazor.syncfusion.com/documentation/diagram/shapes/#html 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/NodeTemplate-Blazor_(1)312836422.zip 

 

 

Regards, 

Gowtham  

[Torben Laursen]

Thanks for the examples.

I did look a them, but how can I handle that I want to add several different custom shapes, each with different layout and controls?

The examples in your link only seem to support one custom shape

[Gowtham Gunashekar]

Hi Torben, 

 

Please refer to the following sample for how to create layout using the multiple custom shapes and components. In the sample we have  added the multiple custom shapes calendar component , HTML table and HTML input content in the NodeTemplate and assign the different custom shapes to node based on the id or data source setting data using the condition. 

 

Code snippet: 

      <SfDiagram @ref="@Diagram" ID="diagram" Height="699px" ModelType="@model" Layout="@LayoutValue"  ConnectorDefaults="@ConnectorDefault" NodeDefaults="@NodeDefaults"> 

          //... 

         //... 

            <DiagramTemplates> 

                <NodeTemplate> 

                    @{ 

                        if ((context as Node).Data.Name == "Diagram") 

                        { 

                            <SfCalendar TValue="DateTime?" ></SfCalendar> 

                        } 

                        else if ((context as Node).Data.Name == "Layout") 

                        { 

                            <content><div style="background-color: lightgrey;height: 150px;width: 350px;"><input type="text" placeholder="FlashTp1" size="40"><br><br><input type="button" value="Output" style="float: right;margin-right: 27%;"><div>Pressure[Bar]</div><input type="text" size="15"><div>Temperature[Kelvin]</div><input type="text" size="15"></div></content> 

 

                        } 

                        else 

                        { <table style="width:100%;height:100%"> 

                            <tr> 

                            <th>Firstname</th> 

                            <th>Lastname</th> 

                            </tr> 

    

                            </table>} 

                    } 

                </NodeTemplate> 

            </DiagramTemplates> 

 

        </SfDiagram> 

 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultilpeComponetLayout2017413554.zip 

 

Regards, 

Gowtham 

[Torben Laursen]

Thanks for the example.

I have tried to get it running in my code but keep getting and error.

It seems to be related to using the palette with a html node.

I have change your code and attached it so you can see the issue.

the exception thrown is also attached.

Is there a way so I can add them to the palette?

Attachment: NodeTemplateBlazor_9f0f02a6.zip

[Torben Laursen]

Here is the exception

Attachment: Exception_b746228f.zip

[Gowtham Gunashekar]

Hi Torben, 

 

Currently we don’t have Support to add HTML nodes in the symbol Palette. We have logged “Support to add HTML nodes in the symbol palette” as a feature. We does not have any immediate plans to start this feature. We will implement this feature in any one of our upcoming releases.       

   

You can track the feature status from the below link    

   

Link:  https://www.syncfusion.com/feedback/15752/support-to-add-html-nodes-in-the-symbol-palette   

   

 

We suggest you to render an image node in the palette and when dragging the node from palette from diagram using drop event, we can cancel the addition of the image node and add the HTML node in the place instead if image node. Please refer to the following sample for how to add the HTML nodes using the OnDrop event.  

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/NodeTemplate-BlazorPalette1852251902.zip 

 

Regards, 

Gowtham. 

[Torben Laursen]

Thanks for the example project. That will work just fine

[Torben Laursen]

Sorry one more question.

Is there a way to set the picture/icon shown in the pallette?

In the latest example it is simply a square and if I have more than one the user cannot see what is what

[Gowtham Gunashekar]

Hi Torben, 

 

Please refer to the following sample for how to render an image node in the symbol palette. In the sample we have rendered the online URL image in palette using the image node, we have added the documentation for the image node for your references. 

 

Code snippet: 

Palettes = new ObservableCollection<SymbolPalettePalette>(); 

        //Initialize the basicshapes for the symbol palette 

        BasicShapes = new ObservableCollection<Object>() 

                { new DiagramNode() 

     { 

         Id="node1", 

         //Size of the node 

         Height=100, 

         Width=100, 

         //Position of the node 

         OffsetX=100, 

         OffsetY=100, 

         //Sets type of the shape as image 

         Shape=new DiagramShape(){Type=Shapes.Image,Source=https://www.syncfusion.com/content/images/nuget/sync_logo_icon.png} 

     } 

  }; 

 

        Palettes.Add(new SymbolPalettePalette() { Id = "BasicShapes", Expanded = true, Symbols = BasicShapes, Title = "Basicshapes" }); 

 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SymbolPaletteimageNode1006316944.zip 

 

Regards,  

Gowtham 

[Torben Laursen]

Thanks, that works just fine

[Gowtham Gunashekar]

Hi Torben, 

 

Thanks for your update. Please let us know whether you need any further assistance on this. 

 

Regards  

Gowtham