Class SfSymbolPaletteComponent

Represents how to display a collection of palettes. The palette shows a set of nodes and connectors. It allows you to drag and drop the nodes and connectors into the diagram.

Inheritance

System.Object

SfBaseComponent

SfSymbolPaletteComponent

Implements

IDiagramObject

System.ICloneable

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

Namespace: Syncfusion.Blazor.Diagram.SymbolPalette

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfSymbolPaletteComponent : SfBaseComponent, IDiagramObject, ICloneable

Examples

<SfSymbolPaletteComponent Height="600px" Palettes="@Palettes" SymbolDragPreviewSize="@SymbolPreview" SymbolHeight="@symbolSizeHeight" GetSymbolInfo="GetSymbolInfo" SymbolWidth="@symbolSizeWidth" SymbolMargin="@SymbolMargin">
</SfSymbolPaletteComponent >
@code
{ 
    DiagramSize SymbolPreview;
    SymbolMargin SymbolMargin = new SymbolMargin { Left = 10, Right = 10, Top = 10, Bottom = 10 };
    double symbolSizeWidth;
    double symbolSizeHeight;
    DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
    DiagramObjectCollection<NodeBase> TNodes = new DiagramObjectCollection<NodeBase>();
    private SymbolInfo GetSymbolInfo(IDiagramObject symbol)
    {
        SymbolInfo SymbolInfo = new SymbolInfo();
        SymbolInfo.Fit = true;
        return SymbolInfo;
    }
    protected override void OnInitialized()
    {
        SymbolPreview = new DiagramSize();
        SymbolPreview.Width = 80;
        SymbolPreview.Height = 80;
        symbolSizeWidth = 50;
        symbolSizeHeight = 50;
        TNodes = new DiagramObjectCollection<NodeBase>();
        Node TNode2 = new Node()
        { 
            ID = "node1", 
            Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision }  
        };
        TNodes.Add(TNode2);
        Palettes = new DiagramObjectCollection<Palette>()
        {
            new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" },
        };
    }
}

<SfSymbolPaletteComponent Height="600px" Palettes="@Palettes" SymbolDragPreviewSize="@SymbolPreview" SymbolHeight="@symbolSizeHeight" GetSymbolInfo="GetSymbolInfo" SymbolWidth="@symbolSizeWidth" SymbolMargin="@SymbolMargin">
</SfSymbolPaletteComponent >
@code
{ 
    DiagramSize SymbolPreview;
    SymbolMargin SymbolMargin = new SymbolMargin { Left = 10, Right = 10, Top = 10, Bottom = 10 };
    double symbolSizeWidth;
    double symbolSizeHeight;
    DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
    DiagramObjectCollection<NodeBase> TNodes = new DiagramObjectCollection<NodeBase>();
    private SymbolInfo GetSymbolInfo(IDiagramObject symbol)
    {
        SymbolInfo SymbolInfo = new SymbolInfo();
        SymbolInfo.Fit = true;
        return SymbolInfo;
    }
    protected override void OnInitialized()
    {
        SymbolPreview = new DiagramSize();
        SymbolPreview.Width = 80;
        SymbolPreview.Height = 80;
        symbolSizeWidth = 50;
        symbolSizeHeight = 50;
        TNodes = new DiagramObjectCollection<NodeBase>();
        Node TNode2 = new Node()
        { 
            ID = "node1", 
            Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision }  
        };
        TNodes.Add(TNode2);
        Palettes = new DiagramObjectCollection<Palette>()
        {
            new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" },
        };
    }
}

Constructors

SfSymbolPaletteComponent()

Declaration

public SfSymbolPaletteComponent()

Properties

AllowDrag

Represents whether the symbols can be dragged from the palette or not.

Declaration

public bool AllowDrag { get; set; }

Property Value

Type	Description
System.Boolean	true, We can drag symbols from palette; Otherwise false.

Examples

<SfSymbolPaletteComponent AllowDrag="true" Height="600px" >
</SfSymbolPaletteComponent >

ChildContent

Sets Child content for the symbol Palette component

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.RenderFragment

ConnectorCreating

Represents the default properties of the connectors to be returned.

Declaration

public EventCallback<IDiagramObject> ConnectorCreating { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<IDiagramObject>

EnableAnimation

Gets or sets a value indicating whether animation is enabled for expanding or collapsing the palette header.

Declaration

public bool EnableAnimation { get; set; }

Property Value

Type	Description
System.Boolean	True to enable animation in the Symbol Palette; otherwise, false. The default value is true.

Examples

  

<SfSymbolPaletteComponent EnableAnimation="true" @ref="@symbolpalette" Height="300px" Width="200px" Palettes="@Palettes" SymbolHeight="60" SymbolWidth="60" SymbolMargin="@SymbolMargin">
</SfSymbolPaletteComponent>         

EnableChunkMessages

Gets or sets a boolean value indicating whether to enable support for chunk messages. Chunk messages allow measurement of path, image, and SVG data without increasing the maximum message size of a single incoming hub message (MaximumReceiveMessageSize 32KB). The default value is false.

Declaration

public bool EnableChunkMessages { get; set; }

Property Value

Type	Description
System.Boolean	True if chunk message support can be enabled; otherwise, false.

Remarks

By default, the EnableChunkMessages is set to false. Chunk message support can be enabled by setting EnableChunkMessages to true.

Examples

<SfSymbolPaletteComponent EnableChunkMessages="true" />

Expanding

The event will be Triggers before the item gets collapsed/expanded.

Declaration

public EventCallback<PaletteExpandingEventArgs> Expanding { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<PaletteExpandingEventArgs>

GetSymbolInfo

Represents the size, appearance and description of a symbol.

Declaration

public Func<IDiagramObject, SymbolInfo> GetSymbolInfo { get; set; }

Property Value

Type
System.Func<IDiagramObject, SymbolInfo>

Height

Gets or sets the height of the symbol palette.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String	The Height of symbol palette. The default is 100%

Examples

<SfSymbolPaletteComponent Height="600px" >
</SfSymbolPaletteComponent >

NodeCreating

Represents the default properties of the nodes to be returned.

Declaration

public EventCallback<IDiagramObject> NodeCreating { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<IDiagramObject>

PaletteExpandMode

Specifies the option to expand single or multiple palette at a time.

Declaration

public ExpandMode PaletteExpandMode { get; set; }

Property Value

Type	Description
ExpandMode	One of the ExpandMode enumeration. The default value is Multiple

Remarks

If the ExpandMode is Multiple when clicking on the collapsed icon, the clicked palette will get expanded and at the same time, other palettes are maintained in their previous state. If the ExpandMode is Single when clicking on the collapsed icon, the clicked palette will get expanded and the rest of all the palettes gets collapsed.

Examples

<SfSymbolPaletteComponent @ref="@palette"
                           Width="80%"
                           Height="445px"
                           PaletteExpandMode="@expandMode"
                           Palettes="@palettes">
</SfSymbolPaletteComponent>

Palettes

Represents how to display a collection of similar symbols and annotates the group textually with its heading and the unique id of a symbol group.

Declaration

public DiagramObjectCollection<Palette> Palettes { get; set; }

Property Value

Type
DiagramObjectCollection<Palette>

Examples

<SfSymbolPaletteComponent Height="600px" Palettes="@Palettes">
<SymbolPaletteTemplates>
 <NodeTemplate>
  @{ var id = (context as Node).ID;
 <div style="height: 100%; width: 100%; background:green">
  <input type="button" value="Button1" @onclick="@OnClick" />
  </div>
  }
 </NodeTemplate>
 </SymbolPaletteTemplates>
</SfSymbolPaletteComponent >
@code
{ 
DiagramObjectCollection<Palette> Palettes;
 Palettes = new DiagramObjectCollection<Palette>(){
 new Palette(){Symbols =Tnodes,Title="Flow Shapes",ID="Flow Shapes" },
 };
}

SelectionChanged

Triggers after the object selection changes in the symbol palette.

Declaration

public EventCallback<PaletteSelectionChangedEventArgs> SelectionChanged { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<PaletteSelectionChangedEventArgs>

ShowSearchTextBox

Gets or sets a value indicating whether the symbol search textbox should be displayed in the Symbol Palette.

Declaration

public bool ShowSearchTextBox { get; set; }

Property Value

Type	Description
System.Boolean	True to display the search textbox in the Symbol Palette; otherwise, false. The default value is false.

Remarks

This property is specifically effective when the ID or SearchTags values are included for the symbol palette items.

Examples

 
<SfSymbolPaletteComponent ShowSearchTextBox="true" @ref="@symbolpalette" Height="300px" Width="200px"  
                         Palettes="@Palettes" SymbolHeight="60" SymbolWidth="60" SymbolMargin="@SymbolMargin"> 
</SfSymbolPaletteComponent> 

SymbolDiagramPreviewSize

Represents the customization of the drag size of the individual palette items.

Declaration

public DiagramSize SymbolDiagramPreviewSize { get; set; }

Property Value

Type
DiagramSize

Examples

<SfSymbolPaletteComponent SymbolDiagramPreviewSize="60" >
</SfSymbolPaletteComponent >

SymbolDragPreviewSize

Represents the size of the symbol preview while dragging a symbol from the palette.

Declaration

public DiagramSize SymbolDragPreviewSize { get; set; }

Property Value

Type
DiagramSize

Examples

<SfSymbolPaletteComponent   SymbolDragPreviewSize="60" >
</SfSymbolPaletteComponent >

SymbolHeight

Gets or sets the Height of the symbol which will be positioned inside the palette.

Declaration

public double SymbolHeight { get; set; }

Property Value

Type
System.Double

Examples

<SfSymbolPaletteComponent  SymbolHeight="50">
</SfSymbolPaletteComponent >

SymbolMargin

Sets an extra space around the outer boundaries of an element.

Declaration

public SymbolMargin SymbolMargin { get; set; }

Property Value

Type	Description
SymbolMargin	SymbolMargin(10,10,10,10)

Examples

<SfSymbolPaletteComponent  SymbolMargin="@SymbolMargin" SymbolHeight="50">
</SfSymbolPaletteComponent >
@code{
SymbolMargin SymbolMargin = new SymbolMargin { Left = 10, Right = 10, Top = 10, Bottom = 10 };
}

SymbolPaletteTemplates

Sets a segment of the UI content, implemented as a delegate that writes the content of a Node .

Declaration

public SymbolPaletteTemplates SymbolPaletteTemplates { get; set; }

Property Value

Type
SymbolPaletteTemplates

Examples

<SfSymbolPaletteComponent Height="600px">
<SymbolPaletteTemplates>
 <NodeTemplate>
  @{ var id = (context as Node).ID;
 <div style="height: 100%; width: 100%; background:green">
  <input type="button" value="Button1" @onclick="@OnClick" />
  </div>
  }
 </NodeTemplate>
 </SymbolPaletteTemplates>
</SfSymbolPaletteComponent >

SymbolWidth

Gets or sets the width of the symbol which will be positioned inside the palette.

Declaration

public double SymbolWidth { get; set; }

Property Value

Type
System.Double

Examples

<SfSymbolPaletteComponent  Height="600px"   SymbolWidth="50" >
</SfSymbolPaletteComponent >

Targets

Represents the collection of diagram instances that are to be added to perform the drag and drop functionalities with multiple diagrams.

Declaration

public DiagramObjectCollection<SfDiagramComponent> Targets { get; set; }

Property Value

Type
DiagramObjectCollection<SfDiagramComponent>

Examples

<SfSymbolPaletteComponent   SymbolDragPreviewSize="60" >
</SfSymbolPaletteComponent >
<SfDiagramComponent   @ref="diagram"/>
@code{
SfDiagramComponent diagram;
protected override async Task OnAfterRenderAsync(bool firstRender){
PaletteInstance.Targets = new DiagramObjectCollection<SfDiagramComponent>() { };
PaletteInstance.Targets.Add(diagram);
}
}

Width

Gets or sets the width of the symbol palette.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	The width of symbol palette. The default is 100%

Examples

<SfSymbolPaletteComponent Width="600px" >
</SfSymbolPaletteComponent >

Methods

AddPaletteItem(String, NodeBase, Boolean)

Used to add the palette item as nodes or connectors in palettes.

Declaration

public void AddPaletteItem(string paletteName, NodeBase paletteSymbol, bool isChild)

Parameters

Type	Name	Description
System.String	paletteName	An string that contain paletteName
NodeBase	paletteSymbol	An NodeBase that contain node or connector
System.Boolean	isChild	An bool that contain palette item contains child or not

Examples

Node TNode2 = new Node()
{ 
    Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = FlowShapeType.Decision }
};
PaletteInstance.AddPaletteItem("Flow Shapes", TNode2, false);

AddPalettes(DiagramObjectCollection<Palette>)

Used to add particular palettes to the symbol palette at runtime.

Declaration

public void AddPalettes(DiagramObjectCollection<Palette> palettes)

Parameters

Type	Name	Description
DiagramObjectCollection<Palette>	palettes	An DiagramObjectCollection that contain collection of palettes

Examples

DiagramObjectCollection<Palette> NewPalettes = new DiagramObjectCollection<Palette>()
{
    new Palette() { Symbols = T3nodes,Title = "New palette1",ID = "newPalette1" },
    new Palette() { Symbols = T4nodes,Title = "New palette2",ID = "newPalette2" },
};
PaletteInstance.AddPalettes(NewPalettes);

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

Clone()

Creates a new palette that is a copy of the current palette.

Declaration

public object Clone()

Returns

Type	Description
System.Object	Throws not implemented exception

OnAfterRenderAsync(Boolean)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	Set to true for the first time component rendering; otherwise gets false.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnInitializedAsync()

OnPropertyChanged(String, Object, Object, IDiagramObject)

Invoked when the effective value of any property on this Symbol palette objects has been updated.

Declaration

public void OnPropertyChanged(string propertyName, object newVal, object oldVal, IDiagramObject container)

Parameters

Type	Name	Description
System.String	propertyName	string that contains the propertyname.
System.Object	newVal	An object that contain newvalue, which means new value of property
System.Object	oldVal	An object that contain oldvalue, which means old value of property
IDiagramObject	container	An IDiagramObject that contain IDiagram Object value

RefreshSymbols()

The method allows the user to redraw the symbols dynamically in SymbolPalette instead of re-rendering the complete Diagram component.

Declaration

public void RefreshSymbols()

Examples

<SfSymbolPaletteComponent @ref="@palette" 
                          Width="100%"
                          Height="700px">
</SfSymbolPaletteComponent>
@code
{
    SfSymbolPaletteComponent palette;
    private void RefreshPalette(ButtonChangeArgs args)
    {
        palette.RefreshSymbols();
    }   
}    

RemovePaletteItem(String, String)

Used to remove the palette item such as nodes or connectors from the palettes.

Declaration

public void RemovePaletteItem(string paletteName, string symbolId)

Parameters

Type	Name	Description
System.String	paletteName	An string that contains palette name
System.String	symbolId	An string that contains symbol id

Examples

PaletteInstance.RemovePaletteItem("Flow Shapes", "node1");

RemovePalettes(String)

Used to remove particular palettes from the symbol palette at runtime.

Declaration

public void RemovePalettes(string id)

Parameters

Type	Name	Description
System.String	id	An string that contains palette id

Examples

PaletteInstance.RemovePalettes("Flow Shapes");

ShouldRender()

This method  returns a boolean to indicate if a component’s UI can be rendered.

Declaration

protected override bool ShouldRender()

Returns

Type	Description
System.Boolean	bool

Implements

IDiagramObject

System.ICloneable