Editing

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
           .ShapeDataSource()
           .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")
       )
   

       <kendo-diagram name="diagram">
           <hierarchical-datasource server-operation="false" type="DataSourceTagHelperType.Ajax">
               <transport>
                   <read url="@Url.Action("ReadShapes", "DiagramData")" />
                   <create url="@Url.Action("CreateShapes", "DiagramData")" />
                   <destroy url="@Url.Action("DestroyShapes", "DiagramData")" />
                   <update url="@Url.Action("UpdateShapes", "DiagramData")" />
               </transport>
               <schema>
                   <hierarchical-model id="Id">
                       <fields>
                           <field name="Id" editable="false" type="number"></field>
                           <field name="JobTitle" type="string"></field>
                           <field name="Color" type="string"></field>
                       </fields>
                   </hierarchical-model>
               </schema>
           </hierarchical-datasource>
       </kendo-diagram>
   

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")
       )
   

       <kendo-diagram name="diagram">
           <connections-datasource server-operation="false" type="DataSourceTagHelperType.Ajax">
               <transport>
                   <read url="@Url.Action("ReadConnections", "DiagramData")" />
                   <create url="@Url.Action("CreateConnections", "DiagramData")" />
                   <destroy url="@Url.Action("DestroyConnections", "DiagramData")" />
                   <update url="@Url.Action("UpdateConnections", "DiagramData")" />
               </transport>
               <schema>
                   <model id="id">
                       <fields>
                           <field name="id" editable="false" type="number"></field>
                           <field name="text" editable="false" type="string"></field>
                           <field name="from" from="FromShapeId" type="number"></field>
                           <field name="to" from="ToShapeId" type="number"></field>
                           <field name="fromX" from="FromPointX" type="number"></field>
                           <field name="fromY" from="FromPointY" type="number"></field>
                           <field name="toX" from="ToPointX" type="number"></field>
                           <field name="toY" from="ToPointY" type="number"></field>
                       </fields>
                   </model>
               </schema>
           </connections-datasource>
       </kendo-diagram>
   

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

• Editing in the Diagram HtmlHelper for ASP.NET Core (Demo)
• Server-Side API