Telerik Product and Version
|
Telerik.Web.UI
2018.1.117.45
|
Supported Browsers and Platforms
|
Chrome,
IE, Edge, FireFox
|
Components/Widgets used (JS frameworks, etc.)
|
RadDiagram
|
PROJECT DESCRIPTION
The purpose of this documentation is to outline the steps
needed to implement persisted shape manipulation using RadDiagram.
One thing to note OnItemBoundsChange event for RadDiagram
gets fired ever time position changes for any given object when resizing. What this means: you cannot call update to
object every time object changes. Likelihood,
you would want to update the shape when you're done resizing. The following steps outline solution.
1. Using Telerik onItemBoundsChange event,
accumulate shapes changed in javascript array.
2. When all changes complete, and user invokes save
changes, loop through array, convert to json objects of simplified fields
needing updated (i.e. ID, X, Y, Width and Height)
3. Call PageMethod to c# server side code
4. Server side deserializes json back to strongly
typed class
5. Scrub duplicates leaving only the last of each
shape
6. Update shapes to DB
CODE SAMPLE:
MARKUP:
...
<asp:Button runat="server" ID="btnSaveChanges" Text="Save" OnClientClick="SaveChanges();" />
...
<Telerik:RadDiagram runat="server" ID="rdLayout" RenderMode="Lightweight">
<ClientEvents OnItemBoundsChange="DiagramShape_ItemBoundsChange" />
</Telerik:RadDiagram>
...
JAVASCRIPT:
var itemsChanged = [];
function DiagramShape_ItemBoundsChange(e)
{
if (e.item.isSelected)
{
itemsChanged.push(e.item);
}
}
function SaveChanges()
{
var data = [];
itemsChanged.forEach(function (shape)
{
var jsonData = {};
jsonData['ID'] = shape.id;
jsonData['Type'] = shape.type;
jsonData['X'] = shape._bounds.x;
jsonData['Y'] = shape._bounds.y;
jsonData['Width'] = shape._bounds.width;
jsonData['Height'] = shape._bounds.height;
data.push(jsonData);
});
PageMethods.SaveChanges(data);
//Refresh your page or invoke diagram to be re-drawn...
}
C#
[WebMethod]
public static void SaveChanges( object e )
{
if( e != null && e is Array )
{
List<DiagramShape> shapes = new List<DiagramShape>();
foreach( Dictionary<string, object> o in (Array)e )
{
shapes.Add( new DiagramShape()
{
ID = o["ID"].ToString(),
Type = o["Type"].ToString(),
X = o["X"].ToString().ToDouble(),
Y = o["Y"].ToString().ToDouble(),
Width = o["Width"].ToString().ToDouble(),
Height = o["Height"].ToString().ToDouble(),
} );
}
//Call local method that will persist
shapes to DB passing in shapes...
//NOTE: shapes list will have duplicates
for every time shape was resized.
// You will ONLY want to update the last instance in the list.
}
}
private class DiagramShape
{
public string ID { get; set; }
public string Type { get; set; }
public double X { get; set; }
public double Y { get; set; }
public double Width { get; set; }
public double Height { get; set; }
}