Diagram UML Class with palette Validated

Hi! 

I need to create a diagram with the ability to add defined classes, attributes to classes and connections between classes. Currently, I get an error when trying to create a class node in a palette. How should I deal with such a task? Look at the code below and the pictorial picture of what I should get and the error I get.

CODE:

@page "/diagram"
@using Syncfusion.Blazor.Diagrams
@using Syncfusion.Blazor.Navigations
@using System.Collections.ObjectModel
@using Syncfusion.Blazor.Inputs
@using DiagramShapes = Syncfusion.Blazor.Diagrams.Shapes
@using DiagramSegments = Syncfusion.Blazor.Diagrams.Segments
@inject IJSRuntime js
<div class="control-section">
    <link href="https://ej2.syncfusion.com/javascript/demos/src/diagram/styles/diagram-common.css" rel="stylesheet">
    <div class="sb-mobile-palette-bar">
        <div id="palette-icon" style="float: right;" role="button" class="e-ddb-icons1 e-toggle-palette"></div>
    </div>
    @*Hidden:Lines*@
    <div style="width: 100%;height: 10%">
        <SfToolbar Width="100%">
            <ToolbarItems>
                <ToolbarItem Id="palette-icon" PrefixIcon="e-ddb-icons2 e-toggle-palette .e-tbar-btn .tb-icons" Align="@ItemAlign.Right"></ToolbarItem>
                <ToolbarItem Text="New" ToolTipText="New" PrefixIcon="e-ddb-icons e-new .e-tbar-btn .tb-icons" OnClick="ClearDiagram"></ToolbarItem>
                <ToolbarItem Type="@ItemType.Separator" />
                <ToolbarItem Text="Save" ToolTipText="Save" PrefixIcon="e-ddb-icons e-save .e-tbar-btn .tb-icons" OnClick="DownloadDiagram"></ToolbarItem>
                <ToolbarItem Type="@ItemType.Separator" />
                <ToolbarItem Text="Load" ToolTipText="Load" PrefixIcon="e-ddb-icons e-open .e-tbar-btn .tb-icons" OnClick="LoadDiagram"></ToolbarItem>
                <ToolbarItem Type="@ItemType.Separator" />
            </ToolbarItems>
        </SfToolbar>
    </div>
 
    @*End:Hidden*@
    <div style="width: 100%;height: 80%">
        <div id="palette-space" class="sb-mobile-palette">
            <SfSymbolPalette ID="palettes" Height="700px"
                             SymbolHeight="60"
                             SymbolWidth="60"
                             EnableAnimation="true"
                             ExpandMode="@ExpandMode.Multiple"
                             SymbolInfo="@SymbolInfo"
                             @ref="@SymbolPalette"
                             Palettes="@Palettes">
                <SymbolMargin Left="15" Right="15" Bottom="15" Top="15"></SymbolMargin>
            </SfSymbolPalette>
        </div>
        <div id="diagram-space" class="sb-mobile-diagram">
            <div class="content-wrapper">
                <SfDiagram @ref="@Diagram" Height="700px"
                           Nodes="@NodeCollection"
                           Connectors="@ConnectorCollection"
                           ConnectorDefaults="@ConnectorDefaults">
                    <DiagramSnapSettings>
                        <HorizontalGridlines LineColor="#e0e0e0 " LineIntervals="@GridLineIntervals">
                        </HorizontalGridlines>
                        <VerticalGridlines LineColor="#e0e0e0" LineIntervals="@GridLineIntervals">
                        </VerticalGridlines>
                    </DiagramSnapSettings>
                </SfDiagram>
            </div>
            <SfUploader @ref="@UploadFiles" Id="UploadFiles" ShowFileList="false">
                <UploaderEvents OnUploadStart="OnUploadSuccess"></UploaderEvents>
                <UploaderAsyncSettings SaveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save" RemoveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove"></UploaderAsyncSettings>
            </SfUploader>
        </div>
    </div>
</div>
@code
{ 
    SfSymbolPalette SymbolPalette;
    int connectorCount;
    public ObservableCollection<SymbolPalettePalette> Palettes;
 
    SfUploader UploadFiles;
 
    // Reference to diagram
    SfDiagram Diagram;
 
    // Defines diagram's nodes collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }
 
    // Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection { get; set; }
 
    // Defines default values for DiagramConnector object
    public DiagramConnector ConnectorDefaults { get; set; }
 
    // Defines interval values for GridLines
    public double[] GridLineIntervals { get; set; }
 
    // Defines palette's classifier-shape collection
    public ObservableCollection<object> ClassShapeList { get; set; }
 
    // Defines palette's attributes collection
    public ObservableCollection<object> ClassAttributesShapeList { get; set; }
 
    // Defines palette's connector collection
    public ObservableCollection<object> ConnectorList { get; set; }
 
    // Defines Symbol info
    public SymbolInfo SymbolInfo { get; set; }
 
    protected override void OnInitialized()
    {
        InitDiagramModel();
        InitPaletteModel();
    }
 
    public async Task OnUploadSuccess(UploadingEventArgs success)
    {
        string json = await FileUtil.LoadFile(js, success.FileData);
        json = json.Replace(System.Environment.NewLine, string.Empty);
        Diagram.LoadDiagram(json.ToString());
    }
 
    public async Task ClearDiagram(ClickEventArgs args)
    {
        await Diagram.Clear();
        StateHasChanged();
    }
 
    public async Task DownloadDiagram()
    {
        string data = await Diagram.SaveDiagram();
        await FileUtil.SaveAs(js, data);
    }
 
    public async Task LoadDiagram()
    {
        await FileUtil.Click(js);
    }
 
    private void InitDiagramModel()
    {
        GridLineIntervals = new double[] {
            1, 9, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75
        };
 
        ConnectorDefaults = new DiagramConnector()
        {
            TargetDecorator = new ConnectorTargetDecorator()
            {
                Height = 5,
                Width = 5,
                Style = new DecoratorShapeStyle() { Fill = "#797979", StrokeColor = "#797979" },
            },
            Style = new ConnectorShapeStyle() { StrokeColor = "#797979" }
        };
 
        NodeCollection = new ObservableCollection<DiagramNode>();
        ConnectorCollection = new ObservableCollection<DiagramConnector>();
 
 
    }
 
    private void CreateNode(string id, double x, double y, string className)
    {
        DiagramNode diagramNode = new DiagramNode()
        {
            Id = id,
            OffsetX = x,
            OffsetY = y,
            Shape = new DiagramShape()
            {
                Type = DiagramShapes.UmlClassifier,
                ClassShape = new DiagramUmlClass()
                {
                    Name = className,
                    Style = new UMLClassShapeStyle() { Color = "white", StrokeColor = "white" },
                    Attributes = new ObservableCollection<DiagramUmlClassAttribute>(),
                    Methods = new ObservableCollection<DiagramUmlClassMethod>()
                },
                Classifier = ClassifierShape.Class
            },
            Style = new NodeShapeStyle() { Fill = "#26A0DA", StrokeColor = "white" },
        };
        NodeCollection.Add(diagramNode);
    }
    private void CreateConnector(string id, string sourceId, string targetId)
    {
        DiagramConnector diagramConnector = new DiagramConnector()
        {
            Id = id,
            SourceID = sourceId,
            TargetID = targetId,
        };
        ConnectorCollection.Add(diagramConnector);
    }
 
    private void InitPaletteModel()
    {
        Palettes = new ObservableCollection<SymbolPalettePalette>();
        SymbolInfo = new SymbolInfo() { Fit = true };
 
        ClassShapeList = new ObservableCollection<object>();
 
 
        CreatePaletteNode(ClassifierShape.Class, "Patient");
 
        DiagramNode Node = new DiagramNode()
        {
            Id = "Patient",
            Shape = new DiagramShape()
            {
                Type = DiagramShapes.UmlClassifier,
                Classifier = ClassifierShape.Class,
                ClassShape = new DiagramUmlClass()
                {
                    Name = "Patient"
                }
 
            }
        };
 
        ClassShapeList.Add(Node);
 
        ConnectorList = new ObservableCollection<object>();
        CreatePaletteConnector("Link1", DiagramSegments.Orthogonal, DecoratorShapes.Arrow);
        CreatePaletteConnector("Link2", DiagramSegments.Orthogonal, DecoratorShapes.None);
        CreatePaletteConnector("Link3", DiagramSegments.Straight, DecoratorShapes.Arrow);
        CreatePaletteConnector("Link4", DiagramSegments.Straight, DecoratorShapes.None);
        CreatePaletteConnector("Link5", DiagramSegments.Bezier, DecoratorShapes.None);
 
        Palettes.Add(
                new SymbolPalettePalette()
                {
                    Id = "classshapepalette",
                    Expanded = true,
                    Symbols = ClassShapeList,
                    Title = "Classes"
                });
        Palettes.Add(
                new SymbolPalettePalette()
                {
                    Id = "classattributesshapepalette",
                    Expanded = true,
                    Symbols = ClassAttributesShapeList,
                    Title = "Class attributes"
                });
        Palettes.Add(
        new SymbolPalettePalette()
        {
            Id = "connectorpalette",
            Expanded = true,
            Symbols = ConnectorList,
            Title = "Connectors"
        });
    }
 
    private void CreatePaletteNode(ClassifierShape classifierShape,string className)
    {
        DiagramNode diagramNode = new DiagramNode()
        {
            Id = className,
            Shape = new DiagramShape()
            {
                Type = DiagramShapes.UmlClassifier,
                ClassShape = new DiagramUmlClass()
                {
                    Name = className,
                    Style = new UMLClassShapeStyle() { Color = "white", StrokeColor = "white" }
                },
                Classifier = classifierShape
            },
            Style = new NodeShapeStyle() { Fill = "#26A0DA", StrokeColor = "white" },
        };
 
 
        ClassShapeList.Add(diagramNode);
    }
 
    private void CreatePaletteConnector(string id, DiagramSegments type, DecoratorShapes decoratorShape)
    {
        DiagramConnector diagramConnector = new DiagramConnector()
        {
            Id = id,
            PreviewSize = new SymbolSizeModel() { Width = 100, Height = 100 },
            Type = type,
            SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 },
            TargetPoint = new ConnectorTargetPoint() { X = 60, Y = 60 },
            Style = new ConnectorShapeStyle() { StrokeWidth = 1 },
            TargetDecorator = new ConnectorTargetDecorator() { Shape = decoratorShape }
        };
 
        ConnectorList.Add(diagramConnector);
    }
}