This is a migrated thread and some comments may be shown as answers.

Export to Image File

1 Answer 91 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Jorge
Top achievements
Rank 1
Jorge asked on 07 Jun 2014, 12:28 AM
Hi,

Is there a way to export the diagram to a PNG/JPG file?

Thank you!

1 Answer, 1 is accepted

Sort by
0
Accepted
Hristo Germanov
Telerik team
answered on 10 Jun 2014, 10:31 AM
Hi Jorge,

We haven't build in functionality and it is not supported officially. But I suggest you to download this code library and you can modify the view with the example code of the diagram basic usage for the test:
<script>
    var data = [{
        firstName: "Antonio",
        lastName: "Moreno",
        image: "antonio.jpg",
        title: "Team Lead",
        colorScheme: "#1696d3",
        items: [{
                firstName: "Elizabeth",
                image: "elizabeth.jpg",
                lastName: "Brown",
                title: "Design Lead",
                colorScheme: "#ef6944",
                items: [{
                    firstName: "Ann",
                    lastName: "Devon",
                    image: "ann.jpg",
                    title: "UI Designer",
                    colorScheme: "#ef6944"
                }]
        }, {
            firstName: "Diego",
            lastName: "Roel",
            image: "diego.jpg",
            title: "QA Engineer",
            colorScheme: "#ee587b",
            items: [{
                firstName: "Fran",
                lastName: "Wilson",
                image: "fran.jpg",
                title: "QA Intern",
                colorScheme: "#ee587b"
            }]
        }, {
            firstName: "Felipe",
            lastName: "Izquiedro",
            image: "felipe.jpg",
            title: "Senior Developer",
            colorScheme: "#75be16",
            items: [{
                firstName: "Daniel",
                lastName: "Tonini",
                image: "daniel.jpg",
                title: "Developer",
                colorScheme: "#75be16"
            }]
        }]
    }];
 
    function visualTemplate(options) {
        var dataviz = kendo.dataviz;
        var g = new dataviz.diagram.Group();
        var dataItem = options.dataItem;
 
        g.append(new dataviz.diagram.Rectangle({
            width: 210,
            height: 75,
            stroke: {
                width: 0
            },
            background: dataItem.colorScheme
        }));
 
        g.append(new dataviz.diagram.TextBlock({
            text: dataItem.firstName + " " + dataItem.lastName,
            x: 85,
            y: 20,
            color: "#fff"
        }));
 
        g.append(new dataviz.diagram.TextBlock({
            text: dataItem.title,
            x: 85,
            y: 40,
            color: "#fff"
        }));
 
        g.append(new dataviz.diagram.Image({
            source: "../content/dataviz/diagram/people/" + dataItem.image,
            x: 3,
            y: 3,
            width: 68,
            height: 68
        }));
 
        return g;
    }
 
    function createDiagram() {
        $("#diagram").kendoDiagram({
            dataSource: new kendo.data.HierarchicalDataSource({
                data: data,
                schema: {
                    model: {
                        children: "items"
                    }
                }
            }),
            layout: {
                type: "layered"
            },
            shapeDefaults: {
                visual: visualTemplate,
                editable: false,
                rotatable: false,
                resizable: false
            },
            connectionDefaults: {
                stroke: {
                    color: "#979797",
                    width: 2
                }
            }
        });
 
        var diagram = $("#diagram").getKendoDiagram();
        diagram.bringIntoView(diagram.shapes);
    }
 
    $(document).ready(function () {
        createDiagram();
        $(".export").click(function () {
            var diagram = $("#diagram").getKendoDiagram();
            var svgString = escape(diagram.element.find(".k-canvas-container").html());
            var exportFormat = $(this).data("format");
 
            $("#exportString").val(svgString);
            $("#exportFormat").val(exportFormat);
            $("#exportForm").submit();
        });
    });
</script>
Note that the diagram widget hasn't svg method and you need to get the diagram's svg string manually. The second thing that you need to do is to update the scripts to the latest version of Kendo UI.

I hope that this can help you.

Regards,
Hristo Germanov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Diagram
Asked by
Jorge
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Share this question
or