Add css class to shapes on diagram

2 posts, 0 answers
  1. Martez
    Martez avatar
    4 posts
    Member since:
    Jan 2015

    Posted 11 Feb 2015 Link to this post

    I have the following code which adds a diagram and a couple of shapes.  Is there anyway to apply a class to the underlying svg?

    var element = $("#paper").kendoDiagram({
                        shapeDefaults: {
                            width: 85,
                            height: 110,
                            editable: false,
                            content: {
                                align: 'center'
                            },
                            hover: {
                                fill: "lightgrey"
                            },
                            stroke: {
                                width: 1,
                                color: 'black'
                            }
                        },
                        connectionDefaults: {
                            type: "polyline",
                            endCap: "ArrowEnd"
                        }
                    });
                    var diagram = element.data("kendoDiagram");
                    var operand = diagram.addShape({
                        width: 85,
                        height: 110,
                        x: 20,
                        y: 187,
                        editable: { connect: false },
                        fill: {
                            color: '#00CC00'
                        },
                        content: {
                            text: 'Quarter',
                        }
                    });

                    var operator = diagram.addShape({
                        width: 85,
                        height: 110,
                        x: 203,
                        y: 20,
                        fill: {
                            color: '#00CC00'
                        },
                        content: {
                            text: 'Target %'
                        }
                    });
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 13 Feb 2015 Link to this post

    Hello,

    The Diagram is rendered using vector graphics via the Drawing library.

    The actual rendering target can be Canvas, SVG, VML or PDF.
    Diagram shapes are missing CSS classes as we can't support them over the whole range of outputs.

    What we use instead is declarative styling via the widget properties.
    Visual templates are also styled via code.

    I hope this sheds some light on why it's not possible, or at least not advisable, to use CSS styling.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top