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

Add css class to shapes on diagram

1 Answer 391 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Martez
Top achievements
Rank 1
Martez asked on 12 Feb 2015, 12:25 AM
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 %'
                    }
                });

1 Answer, 1 is accepted

Sort by
-1
T. Tsonev
Telerik team
answered on 13 Feb 2015, 12:58 PM
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!
 
Tags
Diagram
Asked by
Martez
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Share this question
or