Edit this page

Modify the Undo-Redo Stack

The following example demonstrates how to add custom actions to the undo-redo stack of the Diagram to cover custom interactions such as changing the color of the shape.

To achieve this behavior: 1. Handle the event that triggers the change. For example, the click event of the button in this how-to example. 2. Declare a custom Unit class by using the init, undo, and redo methods. 3. Create an instance of this class. 4. Add the applied modification to the UndoRedoService of the Diagram.

Example

    <input type="button" value="Undo" onclick="undoChange(); return false;">
    <input type="button" value="Redo" onclick="redoChange(); return false;">
    <div id="diagram" style="height: 400px"></div>
    <input type="button" class="k-primary" value="Change shape color" onclick="changeShape(); return false;">
    <script>
        var diagram = $("#diagram").kendoDiagram({
            shapes: [
                {
                    id: "1"
                }
            ]
        }).data("kendoDiagram");

        function changeShape() {
            var prevColor = diagram.shapes[0].options.fill.color;
            diagram.shapes[0].redraw({ fill: { color: "#FF3333" } });

            var changeColorUnit = new ChangeColorUnit(diagram.shapes[0], prevColor);
            diagram.undoRedoService.add(changeColorUnit, false);
        }

        function undoChange() {
            diagram.undo();
        }

        function redoChange() {
            diagram.redo();
        }

        var ChangeColorUnit = kendo.Class.extend({
            init: function (shape, prevColor) {
                this.shape = shape;
                this.prevColor = prevColor;
                this.currColor = shape.options.fill.color;
            },
            undo: function () {
                this.shape.redraw({ fill: { color: this.prevColor } });
            },
            redo: function () {
                this.shape.redraw({ fill: { color: this.currColor } });
            }
        });
    </script>

See Also

For more runnable examples on the Kendo UI Diagram, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy