Export to Image File

2 posts, 1 answers
  1. Jorge
    Jorge avatar
    2 posts
    Member since:
    Aug 2013

    Posted 06 Jun 2014 Link to this post


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

    Thank you!
  2. Answer
    Hristo Germanov
    Hristo Germanov avatar
    703 posts

    Posted 10 Jun 2014 Link to this post

    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:
        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() {
                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();
        $(document).ready(function () {
            $(".export").click(function () {
                var diagram = $("#diagram").getKendoDiagram();
                var svgString = escape(diagram.element.find(".k-canvas-container").html());
                var exportFormat = $(this).data("format");
    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.

    Hristo Germanov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top