MVCxDiagramCustomShapeCollection.Add() Method

Creates a new custom shape and adds it to the collection.

Namespace: DevExpress.Web.Mvc

Assembly: DevExpress.Web.Mvc5.v24.1.dll

NuGet Package: DevExpress.Web.Mvc5

Declaration

C#

public DiagramCustomShape Add()

VB.NET

Public Function Add As DiagramCustomShape

Returns

Type	Description
DiagramCustomShape	The newly created custom shape.

Remarks

Razor

@Html.DevExpress().Diagram(settings => {
    settings.Name = "Diagram";
    settings.SettingsToolbox.Groups.Add(g => {
        g.Category = DevExpress.Web.ASPxDiagram.DiagramShapeCategory.Custom;
        g.CustomCategoryName = "hardware";
        g.Title = "Hardware";
    });

    var internetCustomShape = settings.CustomShapes.Add();
    internetCustomShape.Type = "internet";
    internetCustomShape.Category = "hardware";
    internetCustomShape.Title = "Internet";
    internetCustomShape.BackgroundImageUrl = "../Content/customshapes/shapes/internet.svg";
    internetCustomShape.BackgroundImageLeft = 0.15M;
    internetCustomShape.BackgroundImageTop = 0;
    internetCustomShape.BackgroundImageWidth = 0.7M;
    internetCustomShape.BackgroundImageHeight = 0.7M;
    internetCustomShape.DefaultWidth = 0.75M;
    internetCustomShape.DefaultHeight = 0.75M;
    internetCustomShape.DefaultText = "Internet";
    internetCustomShape.AllowEditText = true;
    internetCustomShape.TextLeft = 0;
    internetCustomShape.TextTop = 0.7M;
    internetCustomShape.TextWidth = 1;
    internetCustomShape.TextHeight = 0.3M;
    internetCustomShape.ConnectionPoints.Add(0.5M, 0);
    internetCustomShape.ConnectionPoints.Add(0.9M, 0.5M);
    internetCustomShape.ConnectionPoints.Add(0.5M, 1);
    internetCustomShape.ConnectionPoints.Add(0.1M, 0.5M);
    ...
}).Import(Model).GetHtml()

Run Demo: Custom Shapes