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.
Inherited Members
Namespace: Syncfusion.Blazor.Diagram.SymbolPalette
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfSymbolPaletteComponent : SfBaseComponent, IDiagramObject, ICloneable
Remarks
This component provides a visual interface for organizing and accessing diagram symbols, enabling users to easily add elements to their diagrams through drag-and-drop functionality.
Examples
<SfSymbolPaletteComponent Height="600px" Palettes="@Palettes" [REDACTED]"@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" },
};
}
}
The following example demonstrates how to configure and use the SfSymbolPaletteComponent in a Blazor application:
<SfSymbolPaletteComponent
Height="600px"
Palettes="@Palettes"
SymbolPreview="@SymbolPreview"
SymbolHeight="@symbolSizeHeight"
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() { Width = 80, Height = 80 };
symbolSizeWidth = 50;
symbolSizeHeight = 50;
TNodes = new DiagramObjectCollection<NodeBase>();
TNodes.Add(new Node()
{
ID = "node1",
Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision }
});
Palettes.Add(new Palette()
{
Symbols = TNodes,
Title = "Flow Shapes",
ID = "Flow Shapes"
});
}
}
Constructors
SfSymbolPaletteComponent()
Declaration
public SfSymbolPaletteComponent()
Properties
AllowDrag
Determines if symbols can be dragged from the SfSymbolPaletteComponent.
Declaration
public bool AllowDrag { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Remarks
This property enables developers to control user interactions with the symbol palette, allowing or disallowing the dragging of symbols based on specific requirements.
Examples
The following example demonstrates how to enable dragging symbols from the palette in a Blazor application:
<SfSymbolPaletteComponent AllowDrag="true" Height="600px">
</SfSymbolPaletteComponent>
ChildContent
Sets the child content for the SfSymbolPaletteComponent.
Declaration
public RenderFragment ChildContent { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.RenderFragment | This property holds the content that can be rendered within the symbol palette component. |
Remarks
Use this property to specify custom content for the palette, such as symbols or other UI elements, based on application's requirements.
Examples
Here is how you can define child content within the component in a Blazor application:
<SfSymbolPaletteComponent>
<ChildContent>
<!-- Custom symbols and UI elements can be added here -->
</ChildContent>
</SfSymbolPaletteComponent>
ConnectorCreating
Triggered when a new connector is being created in the SfSymbolPaletteComponent. Allows customization of the connector's appearance.
Declaration
public EventCallback<IDiagramObject> ConnectorCreating { get; set; }
Property Value
Type |
---|
Microsoft.AspNetCore.Components.EventCallback<IDiagramObject> |
Remarks
Fired when a connector is added to the palette, allowing style customizations.
Examples
Example of handling the ConnectorCreating event:
public void OnConnectorCreating(IDiagramObject args)
{
Connector connector = args as Connector;
connector.Style.Fill = "black";
connector.Style.StrokeColor = "black";
connector.Style.Opacity = 1;
connector.TargetDecorator.Style.Fill = "black";
connector.TargetDecorator.Style.StrokeColor = "black";
}
EnableAnimation
Gets or sets a value indicating whether animation is enabled during the expansion or collapsing of the palette header in the symbol palette component.
Declaration
public bool EnableAnimation { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | A boolean value where |
Remarks
Enabling animation can improve the user experience by providing smoother transitions and feedback when interacting with the palette headers. Use this setting to control whether animations play during these interactions.
Examples
<SfSymbolPaletteComponent EnableAnimation="true"
@ref="@symbolpalette"
Height="300px"
Width="200px"
Palettes="@Palettes"
SymbolHeight="60"
SymbolWidth="60"
SymbolMargin="@SymbolMargin">
</SfSymbolPaletteComponent>
@code {
// Code to initialize palettes and other configurations can be added here.
}
EnableChunkMessages
Gets or sets a value indicating whether chunk message support is enabled in the SfSymbolPaletteComponent.
Chunk messages facilitate the measurement of path, image, and SVG data without increasing the maximum size of a single incoming hub message, capped at 32KB.
The default setting is false
.
Declaration
public bool EnableChunkMessages { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Remarks
The EnableChunkMessages property is set to false
by default, meaning chunk message support is disabled.
Enable it by setting this property to true
to efficiently handle larger sets of data in chunks.
Examples
The following example demonstrates how to enable chunk message support in a Blazor application:
<SfSymbolPaletteComponent EnableChunkMessages="true" />
Expanding
Fired before an item is collapsed or expanded in the interface, allowing for preemptive actions or cancellations.
Declaration
public EventCallback<PaletteExpandingEventArgs> Expanding { get; set; }
Property Value
Type |
---|
Microsoft.AspNetCore.Components.EventCallback<PaletteExpandingEventArgs> |
Remarks
This event serves as a hook for developers to execute code prior to the collapse or expansion of interface items, providing opportunities to validate, log, or modify actions as necessary. The event can be used to enforce application logic that must be adhered to before the visibility state changes.
Examples
<SfSymbolPaletteComponent Expanding="OnExpanding">
</SfSymbolPaletteComponent>
private void OnExpanding(PaletteExpandingEventArgs args)
{
if (args.Cancel)
{
args.Cancel = true;
}
}
GetSymbolInfo
Provides detailed information about a symbol, including its size, appearance, and description, for display in the symbol palette.
Declaration
public Func<IDiagramObject, SymbolInfo> GetSymbolInfo { get; set; }
Property Value
Type |
---|
System.Func<IDiagramObject, SymbolInfo> |
Remarks
Triggered to customize a symbol's description in the SfSymbolPaletteComponent.
Examples
Example usage within the SfSymbolPaletteComponent:
private SymbolInfo GetSymbolInfo(IDiagramObject symbol)
{
SymbolInfo symbolInfo = new SymbolInfo();
string text = (symbol as Node).ID;
symbolInfo.Description = new SymbolDescription() { Text = text };
return symbolInfo;
}
Height
Gets or sets the height of the SfSymbolPaletteComponent.
Declaration
public string Height { get; set; }
Property Value
Type | Description |
---|---|
System.String | The height of the symbol palette. The default is "100%", filling the container's height. |
Remarks
Adjusting the height allows developers to customize the symbol palette to fit various interface designs and responsive layouts in Blazor applications.
Examples
The following example shows how to set a fixed height for the symbol palette in a Blazor application:
<SfSymbolPaletteComponent Height="600px">
</SfSymbolPaletteComponent>
NodeCreating
Triggered when a new node is being created in the SfSymbolPaletteComponent. This allows for customization of the node's appearance.
Declaration
public EventCallback<IDiagramObject> NodeCreating { get; set; }
Property Value
Type |
---|
Microsoft.AspNetCore.Components.EventCallback<IDiagramObject> |
Remarks
Fired when a node is added to the palette, allowing style customizations.
Examples
Here's how you can handle the NodeCreating event to set a custom style:
public void OnNodeCreating(IDiagramObject args)
{
Node node = args as Node;
node.Style.Fill = "#357BD2";
node.Style.StrokeColor = "White";
node.Style.Opacity = 1;
}
PaletteExpandMode
Determines whether the palette component allows expanding multiple palettes simultaneously or restricts to a single expandable palette at any given time.
Declaration
public ExpandMode PaletteExpandMode { get; set; }
Property Value
Type | Description |
---|---|
ExpandMode | A value of the ExpandMode enumeration. The default setting is Multiple, allowing multiple palettes to be expanded. |
Remarks
This property controls the expansion behavior of palettes within the SfSymbolPaletteComponent
.
- When set to
Multiple
, clicking on a collapsed palette will expand it without altering the state of other palettes. - When configured as
Single
, an expanded palette will cause all other palettes to collapse, ensuring only a single palette is expanded at any moment.
Examples
<SfSymbolPaletteComponent @ref="@palette"
Width="80%"
Height="445px"
PaletteExpandMode="@expandMode"
Palettes="@palettes">
</SfSymbolPaletteComponent>
@code {
ExpandMode expandMode = ExpandMode.Multiple; // Default setting
// Additional code to initialize palettes...
}
Palettes
Represents a configuration for displaying a collection of similar symbols. This component visually groups symbols with a textual heading and assigns a unique ID to the group.
Declaration
public DiagramObjectCollection<Palette> Palettes { get; set; }
Property Value
Type | Description |
---|---|
DiagramObjectCollection<Palette> | This property contains a collection of |
Remarks
This configuration is used within a SfSymbolPaletteComponent
to organize and display diagram symbols in a structured manner. The component supports templates for rendering each symbol node, which can be customized to meet interactive or design requirements.
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
Handles the selection change event in the SfSymbolPaletteComponent.
Declaration
public EventCallback<PaletteSelectionChangedEventArgs> SelectionChanged { get; set; }
Property Value
Type |
---|
Microsoft.AspNetCore.Components.EventCallback<PaletteSelectionChangedEventArgs> |
Remarks
The SelectionChanged event is triggered whenever there is a change in the selection of symbols in the palette. This method can be used to perform actions based on the new selection.
Examples
This example shows how to modify UI components based on the user's selection:
private void SelectionChanged(PaletteSelectionChangedEventArgs args)
{
}
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 |
|
Remarks
This property is beneficial for when ID or SearchTags are utilized within the symbol palette items. Enabling the search functionality helps users find symbols efficiently.
Examples
Below is an example of how to implement this property in a Blazor application:
<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 | Description |
---|---|
DiagramSize | A |
Examples
<SfSymbolPaletteComponent SymbolDiagramPreviewSize="60" />
SymbolDragPreviewSize
Gets or sets the size of the symbol preview while dragging a symbol from the palette.
Declaration
public DiagramSize SymbolDragPreviewSize { get; set; }
Property Value
Type | Description |
---|---|
DiagramSize | A |
Remarks
This property allows you to adjust the visual size of the symbol being dragged. It is particularly useful for creating a consistent user interface experience when interacting with the palette.
Examples
<SfSymbolPaletteComponent Size="60" >
</SfSymbolPaletteComponent>
SymbolHeight
Gets or sets the height of the symbol that will be positioned inside the palette.
Declaration
public double SymbolHeight { get; set; }
Property Value
Type | Description |
---|---|
System.Double | The height of the symbol in pixels. The default value is determined by the palette configuration. |
Remarks
Adjusting the SymbolHeight
allows for customization of individual symbol dimensions within the symbol palette, providing better control over layout and spacing.
Ensure that the height value is consistent with design requirements to maintain visual harmony.
Examples
Below is an example of how to set the SymbolHeight
in a Blazor application:
<SfSymbolPaletteComponent SymbolHeight="50">
</SfSymbolPaletteComponent>
SymbolMargin
Configures additional space around the outer boundaries of a graphical element in the diagram component. This margin ensures there is a uniform padding between the element and its container.
Declaration
public SymbolMargin SymbolMargin { get; set; }
Property Value
Type | Description |
---|---|
SymbolMargin | The margin values are provided as a SymbolMargin object, typically set to default values of (10, 10, 10, 10) for left, right, top, and bottom margins. |
Remarks
Applying a uniform margin around symbols helps in maintaining consistent spacing and improves aesthetics in the visual layout of diagram elements. It is particularly useful where precise spacing is required for clarity in diagrams.
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.
It allows customization of UI components within the SfSymbolPaletteComponent
.
Declaration
public SymbolPaletteTemplates SymbolPaletteTemplates { get; set; }
Property Value
Type |
---|
SymbolPaletteTemplates |
Remarks
This delegate method helps in rendering custom templates for Node elements within the symbol palette component. By default, nodes can be displayed with standard content, but custom templates enable complex UI structures.
Examples
Example demonstrating how to use a custom node template within the symbol palette component:
<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 | Description |
---|---|
System.Double | The symbol width in pixels. |
Remarks
Adjusting the SymbolWidth
property allows for customized appearance and layout of symbols within the palette.
Examples
Here is how you can specify the symbol width within the component in a Blazor application:
<SfSymbolPaletteComponent Height="600px" SymbolWidth="50">
</SfSymbolPaletteComponent>
Targets
Represents the collection of diagram instances to whom symbols from the SfSymbolPaletteComponent can be dragged and dropped.
Declaration
public DiagramObjectCollection<SfDiagramComponent> Targets { get; set; }
Property Value
Type | Description |
---|---|
DiagramObjectCollection<SfDiagramComponent> | A collection of SfDiagramComponent instances that serve as targets for drag-and-drop operations from the symbol palette. |
Remarks
This property allows the SfSymbolPaletteComponent to interact with multiple SfDiagramComponent instances, enabling users to seamlessly add symbols to different diagrams from a single palette.
Examples
The below example demonstrates initializing the Targets
property to support drag-and-drop
functionality for multiple diagrams within a Blazor application:
<SfSymbolPaletteComponent Height="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 SfSymbolPaletteComponent.
Declaration
public string Width { get; set; }
Property Value
Type | Description |
---|---|
System.String | The width of the symbol palette, default is 100%. |
Remarks
Customize the symbol palette's size to fit different layouts and responsive designs in Blazor apps.
Examples
The following example demonstrates how to set a fixed width for the symbol palette in a Blazor application:
<SfSymbolPaletteComponent Width="600px">
</SfSymbolPaletteComponent>
Methods
AddPaletteItem(String, NodeBase, Boolean)
Adds a palette item as nodes or connectors in the specified palette.
Declaration
public void AddPaletteItem(string paletteName, NodeBase paletteSymbol, bool isChild)
Parameters
Type | Name | Description |
---|---|---|
System.String | paletteName | A System.String representing the name of the palette to which the item will be added. |
NodeBase | paletteSymbol | A NodeBase representing the node or connector to be added to the palette. |
System.Boolean | isChild | A System.Boolean indicating whether the palette item contains child elements. |
Remarks
This method allows for the dynamic addition of nodes or connectors into a specified palette,
enabling customized configuration of the palette's content. It supports hierarchical arrangement
through the isChild
parameter.
Examples
Node TNode2 = new Node()
{
Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = FlowShapeType.Decision }
};
PaletteInstance.AddPaletteItem("Flow Shapes", TNode2, false);
AddPalettes(DiagramObjectCollection<Palette>)
Adds a collection of specific palettes to the symbol palette at runtime.
Declaration
public void AddPalettes(DiagramObjectCollection<Palette> palettes)
Parameters
Type | Name | Description |
---|---|---|
DiagramObjectCollection<Palette> | palettes | A DiagramObjectCollection<T> that contains the palette objects to be added. Each palette in the collection can consist of predefined symbols and identifiers. |
Remarks
This method is utilized to dynamically enhance the symbol palette with a custom collection of palettes. Each palette can be designed with a unique set of symbols, a title for identification, and an ID for internal usage.
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 deep copy of the current palette instance.
Declaration
public object Clone()
Returns
Type | Description |
---|---|
System.Object | A new palette object that is a copy of the current instance. |
Remarks
This method is intended to provide cloning functionality for palette objects but is not yet implemented.
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 | Indicates if this is the first rendering of the component. True if the component is rendered for the first time; otherwise, false. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing any asynchronous operation. |
Overrides
Remarks
This method is typically used to perform additional initialization or to fetch data asynchronously once the component has been rendered in the browser. The overridden method provides an opportunity to execute logic that relies on the DOM being rendered.
OnInitializedAsync()
Invoked when the component is fully initialized and ready to begin its processes.
Declaration
protected override Task OnInitializedAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task that represents the asynchronous operation of this initialization routine. |
Overrides
Remarks
Sets initial states and performs asynchronous setup.
OnPropertyChanged(String, Object, Object, IDiagramObject)
Handles property value changes on symbol palette objects and processes the update operation.
Declaration
public void OnPropertyChanged(string propertyName, object newVal, object oldVal, IDiagramObject container)
Parameters
Type | Name | Description |
---|---|---|
System.String | propertyName | The name of the property that was updated. |
System.Object | newVal | The new value assigned to the property. |
System.Object | oldVal | The previous value of the property before the update. |
IDiagramObject | container | The diagram object that contains the updated property. |
Remarks
This method is called whenever a property value changes on symbol palette objects to handle the update logic.
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)
Removes a specified item, such as nodes or connectors, from the given palette within the symbol collection.
Declaration
public void RemovePaletteItem(string paletteName, string symbolId)
Parameters
Type | Name | Description |
---|---|---|
System.String | paletteName | A string containing the name of the palette from which the item should be removed. This is used to identify the relevant palette within the system. |
System.String | symbolId | A string containing the unique identifier of the symbol to be removed. This id must match an existing symbol within the specified palette to execute successfully. |
Remarks
Dynamically manages symbols within palettes; ensure valid entries to avoid errors.
Examples
PaletteInstance.RemovePaletteItem("Flow Shapes", "node1");
RemovePalettes(String)
Removes a specific palette from the symbol palette at runtime.
Declaration
public void RemovePalettes(string id)
Parameters
Type | Name | Description |
---|---|---|
System.String | id | A string representing the palette's unique identifier. This id is used to locate and remove the corresponding palette from the symbol palette collection. |
Remarks
This method is particularly useful in scenarios where certain palettes need to be dynamically removed based on user interaction or application state. It ensures that the symbol palette only displays relevant palettes, improving user experience and performance. Possible exceptions include invalid id formats or if the id does not correspond to an existing palette.
Examples
PaletteInstance.RemovePalettes("Flow Shapes");
ShouldRender()
Determines whether the component's UI should be re-rendered.
Declaration
protected override bool ShouldRender()
Returns
Type | Description |
---|---|
System.Boolean | A System.Boolean indicating true if the component's UI should be rendered, otherwise false. |
Remarks
Override this method to implement custom logic that determines when the component's user interface (UI) needs to be refreshed. This can optimize rendering by preventing unnecessary UI updates when the component's state or data has not changed.