menu

Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SfSymbolPaletteComponent - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    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.GetEffectivePlatform()
    SfBaseComponent.GetMainComponentPlatform()
    SfBaseComponent.IsMainLicenseComponent()
    SfBaseComponent.LicenseContext
    SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)
    SfBaseComponent.ValidateLicense()
    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

    true if symbols can be dragged from the palette; otherwise, false.

    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 true enables animation for an enhanced visual experience, and false disables it. The default is true.

    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

    true to enable chunk message support; otherwise, false.

    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 Palette objects, each defining a group of symbols with a specific title and ID.

    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

    true if the search textbox should be displayed; otherwise, false. The default value is false.

    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 DiagramSize object for the preview dimensions. Example: new DiagramSize(60, 60).

    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 DiagramSize object representing the dimensions of the symbol preview while being dragged from the palette. It typically consists of width and height parameters. Example: new DiagramSize(60, 60).

    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
    SfBaseComponent.OnAfterRenderAsync(Boolean)
    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
    SfBaseComponent.OnInitializedAsync()
    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.

    Implements

    IDiagramObject
    System.ICloneable
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved