New to Telerik UI for ASP.NET MVC? Download free 30-day trial


The Diagram provides editing options which enable you to add tools and shapes to it, and use its layout options.

Getting Started

To enable the editing functionality of the Diagram:

  1. Configure the DataSource for remote CRUD operations. You have to include the model declaration. The Id is mandatory to indicate which of the fields is the unique identifier.

        .DataSource(d => d
            .Model(m =>
                m.Id(s => s.Id);
                m.Field(s => s.Id).Editable(false);
                m.Field(s => s.JobTitle);
                m.Field(s => s.Color);
            .Read("ReadShapes", "DiagramData")
            .Create("CreateShape", "DiagramData")
            .Destroy("DestroyShape", "DiagramData")
            .Update("UpdateShape", "DiagramData")
  2. Configure the ConnectionsDataSource for remote CRUD operations. Without setting the ConnectionsDataSource, editing is disabled.

        .ConnectionsDataSource(d => d
            .Model(m =>
                m.Id(c => c.Id);
                m.Field(c => c.Id).Editable(false);
                m.Field(c => c.Text).Editable(false);
                m.From(c => c.FromShapeId);
                m.To(c => c.ToShapeId);
                m.FromX(c => c.FromPointX);
                m.FromY(c => c.FromPointY);
                m.ToX(c => c.ToPointX);
                m.ToY(c => c.ToPointY);
            .Read("ReadConnections", "DiagramData")
            .Create("CreateConnection", "DiagramData")
            .Destroy("DestroyConnection", "DiagramData")
            .Update("UpdateConnection", "DiagramData")

Model Fields

The shape model provides the following fields:

  • id (Number)—A mandatory field. Represents the unique identifier of the shape. A shape without an id field will not be connected.
  • type (String)—The shape type.
  • text (String)—The shape text.
  • x (Number)—The x position of the shape.
  • y (Number)—The y position of the shape.
  • width (Number)—The shape width.
  • height (Number)—The shape height.

Each model field gets updated upon user interaction.

See Also

In this article