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

Editing

Loading Demo...

EXAMPLE
VIEW SOURCE
Change Theme
Default
SASS

LESS
- Default
- Bootstrap
- Material
- Launch Theme Builder
- Black
- Blue Opal
- Bootstrap v3
- Default
- Fiori
- Flat
- High Contrast
- Material
- Material Black
- Metro
- Metro Black
- Moonlight
- Nova
- Office 365
- Silver
- Uniform

            
                        editing.cshtml
                    
                        EditingController.cs
                    
                        DiagramDataController.cs
                    
                        OrgChartShape.cs
                    
                        OrgChartConnection.cs

Also available for:

API REFERENCE

kendo.syncReady(function(){jQuery("#diagram").kendoDiagram({"dataBound":onDataBound,"connectionDefaults":{"stroke":{"color":"#586477","width":2}},"layout":{"underneathHorizontalOffset":140,"type":"tree","subtype":"tipover"},"shapeDefaults":{"content":{"color":"#444","fontSize":17,"template":"#= dataItem.JobTitle #"},"visual":visualTemplate},"connectionsDataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/aspnet-core/diagramdata/readconnections"},"prefix":"","update":{"url":"/aspnet-core/diagramdata/updateconnection"},"create":{"url":"/aspnet-core/diagramdata/createconnection"},"destroy":{"url":"/aspnet-core/diagramdata/destroyconnection"}},"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"Id","fields":{"Id":{"editable":false,"type":"number"},"fromX":{"from":"FromPointX","type":"number","defaultValue":null},"fromY":{"from":"FromPointY","type":"number","defaultValue":null},"from":{"from":"FromShapeId","type":"number","defaultValue":null},"text":{"from":"Text","editable":false,"type":"string"},"toX":{"from":"ToPointX","type":"number","defaultValue":null},"toY":{"from":"ToPointY","type":"number","defaultValue":null},"to":{"from":"ToShapeId","type":"number","defaultValue":null}}}}},"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/aspnet-core/diagramdata/readshapes"},"update":{"url":"/aspnet-core/diagramdata/updateshape"},"create":{"url":"/aspnet-core/diagramdata/createshape"},"destroy":{"url":"/aspnet-core/diagramdata/destroyshape"}},"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"Id","fields":{"Id":{"editable":false,"type":"number"},"Color":{"type":"string"},"JobTitle":{"type":"string"}}}}}});});

Description

In this example you will learn how you can easily use editing operations in ASP.NET Core Diagram.

Editing

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo