RadDiagram: Persisting shape manipulation with OnItemBoundsChange

2 posts, 0 answers
  1. John
    John avatar
    1 posts
    Member since:
    Nov 2016

    Posted 05 Apr 2018 Link to this post

    Requirements

    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; }
    }


  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4750 posts

    Posted 06 Apr 2018 Link to this post

    Hi John,

    Thank you for sharing your solution with the community. You will find your Telerik points updated.


    Regards,
    Marin Bratanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top