Class

DiagramShapeDescriptor

Declaration

public DiagramShapeDescriptor()

Defines the connection points (ports) available on this shape where connections can attach. Use DiagramShapeConnectorDescriptor to configure custom connector positions, styles, and names. By default, shapes have standard connectors at top, bottom, left, right, and center positions. Example: Customize connectors to create specialized attachment points for network diagrams.

Declaration

public List<DiagramShapeConnectorDescriptor> Connectors { get; set; }

Property Value

Configures the text content and styling displayed inside the shape. Use DiagramShapeContentDescriptor to set the text, font, color, and alignment for the shape label. Example: Set text to "Start" with center alignment for a workflow start shape.

Declaration

public DiagramShapeContentDescriptor Content { get; set; }

Property Value

Sets the corner radius to create rounded corners on rectangular shapes. Specify the radius in pixels (e.g., 5.0 for slightly rounded, 20.0 for very rounded corners). Only applies to rectangle-based shape types; has no effect on circles or custom path shapes. Example: Set to 10.0 to create a rounded rectangle shape.

Declaration

public double? CornerRadius { get; set; }

Property Value

The data item of the shape.

Declaration

public object DataItem { get; set; }

Property Value

Controls which aspects of the shape can be edited by users through drag-and-drop and direct manipulation. Use DiagramShapeEditableDescriptor to enable/disable resizing, rotating, connecting, and content editing. Allows fine-grained control over user interaction capabilities for each shape.

Declaration

public DiagramShapeEditableDescriptor Editable { get; set; }

Property Value

Configures the background fill color and gradient for the shape interior. Use DiagramShapeFillDescriptor to set solid colors, gradients, or opacity. Example: Set color to "#4CAF50" for a green background, or configure a gradient for visual depth.

Declaration

public DiagramShapeFillDescriptor Fill { get; set; }

Property Value

Sets the vertical size of the shape in pixels. Determines how much vertical space the shape occupies in the diagram canvas. Works together with Width to define the shape's total size. Respects MinHeight constraint if specified. Example: Set to 100.0 for a shape that is 100 pixels tall.

Declaration

public double? Height { get; set; }

Property Value

Configures the visual appearance of the shape when users hover over it with the mouse. Use DiagramShapeHoverDescriptor to define hover-specific fill colors and effects. Provides visual feedback indicating the shape is interactive and can be selected or manipulated.

Declaration

public DiagramShapeHoverDescriptor Hover { get; set; }

Property Value

Sets a unique identifier for this shape, used throughout the diagram for connections and programmatic access. Required for creating connections - use this Id in FromId and ToId. Must be unique across all shapes in the diagram to ensure proper connection routing and shape referencing. Example: Set to "process-step-1" to clearly identify the shape in workflow logic.

Declaration

public string Id { get; set; }

Property Value

Sets the minimum allowed height when users resize the shape by dragging. Prevents the shape from being resized smaller than this value in pixels, ensuring content remains readable. Users can still resize the shape larger than this value. Works independently of Height - you can set a default height and a minimum height constraint. Example: Set to 50.0 to ensure shapes never become shorter than 50 pixels.

Declaration

public double? MinHeight { get; set; }

Property Value

Sets the minimum allowed width when users resize the shape by dragging. Prevents the shape from being resized narrower than this value in pixels, ensuring content remains readable. Users can still resize the shape wider than this value. Works independently of Width - you can set a default width and a minimum width constraint. Example: Set to 80.0 to ensure shapes never become narrower than 80 pixels for label visibility.

Declaration

public double? MinWidth { get; set; }

Property Value

Defines a custom SVG path geometry for creating unique shape outlines beyond the built-in types. Specify using standard SVG path syntax (e.g., "M 0 0 L 100 0 L 100 100 Z" for a triangle). Allows creating specialized shapes like custom flowchart symbols, network icons, or branded elements. Only applies when Type is not set or when you want complete control over shape geometry. See https://www.w3.org/TR/SVG/paths.html#PathData for SVG path syntax reference. Example: Set to "M 50 0 L 100 50 L 50 100 L 0 50 Z" to create a diamond shape.

Declaration

public string Path { get; set; }

Property Value

Configures rotation settings for the shape, including angle and rotation center point. Use DiagramShapeRotationDescriptor to set rotation angle in degrees and customize the rotation origin. Useful for orienting shapes in specific directions or creating dynamic rotated layouts. Example: Rotate a shape 45 degrees for a diamond orientation.

Declaration

public DiagramShapeRotationDescriptor Rotation { get; set; }

Property Value

Specifies the URL path to an image file when the shape type is set to Image. Supports common image formats (PNG, JPG, SVG, GIF) via relative or absolute URLs. The image will be scaled to fit within the shape's Width and Height dimensions. Only applicable when Type is Image, ignored for other shape types. Example: Set to "/images/server-icon.png" or "https://example.com/logo.svg" to display custom icons.

Declaration

public string Source { get; set; }

Property Value

Configures the border/outline style for the shape. Use DiagramShapeStrokeDescriptor to set stroke color, width, and dash pattern (solid, dashed, dotted). Creates visual separation between shapes and emphasizes shape boundaries. Example: Set color to "#333" and width to 2.0 for a prominent dark border.

Declaration

public DiagramShapeStrokeDescriptor Stroke { get; set; }

Property Value

Configures tooltip content that appears when users hover over the shape. Use DiagramShapeTooltipDescriptor to customize tooltip text, styling, and positioning. Helpful for displaying detailed information, metadata, or instructions without cluttering the diagram.

Declaration

public DiagramShapeTooltipDescriptor Tooltip { get; set; }

Property Value

Sets the predefined visual shape type from the built-in shape library. Rectangle - Standard rectangular shape (default). Circle - Circular or elliptical shape. Image - Displays an image from Source property. Text - Text-only shape without background. Also supports flowchart symbols: Process, Decision, Terminator, Database, and many more. Example: Set to Decision for a diamond-shaped decision point in a flowchart.

Declaration

public DiagramShapeType? Type { get; set; }

Property Value

Specifies a custom JavaScript function name that returns an SVG visual element to render the shape. Provides maximum flexibility for creating completely custom shape renderings beyond built-in types and SVG paths. The function should return a Kendo UI Drawing API visual or SVG element. Advanced feature typically used for highly specialized diagram visualizations. Refer to Telerik documentation for visual function implementation details.

Declaration

public string Visual { get; set; }

Property Value

Sets the horizontal size of the shape in pixels. Determines how much horizontal space the shape occupies in the diagram canvas. Works together with Height to define the shape's total size. Respects MinWidth constraint if specified. Example: Set to 150.0 for a shape that is 150 pixels wide.

Declaration

public double? Width { get; set; }

Property Value

Sets the horizontal position of the shape on the diagram canvas in pixels, measured from the left edge. Used for absolute positioning when not using automatic layout algorithms. Ignored when a layout type is active (tree, layered, force-directed) as the layout algorithm controls positioning. Works together with Y to define the shape's top-left corner coordinates. Example: Set to 100.0 to position the shape 100 pixels from the left edge of the diagram.

Declaration

public double? X { get; set; }

Property Value

Sets the vertical position of the shape on the diagram canvas in pixels, measured from the top edge. Used for absolute positioning when not using automatic layout algorithms. Ignored when a layout type is active (tree, layered, force-directed) as the layout algorithm controls positioning. Works together with X to define the shape's top-left corner coordinates. Example: Set to 200.0 to position the shape 200 pixels from the top edge of the diagram.

Declaration

public double? Y { get; set; }

Property Value