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

angular directive gets lost in shape template

1 Answer 23 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Jia asked on 10 Mar 2017, 04:11 PM

if I specify an angular directive in the shape template, it gets lost from the rendered SVG. For example, I have a html template for shape like this:

<script id="template" type="text/x-kendo-template">
<div ng-model="eBDiagram.task"></div>

in shapeDefaults.visual:

        visualShapeTemplate = options => {
            // Render template and bind it to the current data item
            var dataItem = options.dataItem.content;
            var renderElement = $('<div />').appendTo('body');

            // Import the Drawing API namespaces
            var draw = kendo.drawing;

            // Compile the shape template
            var contentTemplate = kendo.template($('#template').html());

            // Create a new group that will hold the rendered content
            var output = new kendo.drawing.Group();
            draw.drawDOM(renderElement, null)
                .then(group => {

                    /* Clean-up */

            var visual = new kendo.dataviz.diagram.Group();

            return visual;


but data isn't bound through 'ng-model' in the resulting SVG. I even tried explicitly to link the scope variable with the template, but no data appeared in the resulting SVG:

            if (renderElement) {

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 14 Mar 2017, 09:22 AM

Hello Jia,

I am pasting the response from our previous discussion in a support thread for convenience and better visibility for the community:

The drawing API library converts the provided HTML elements to its own primitives that are then converted to other formats. That is the reason why the provided template loses its attributes and meta-data once converted back to SVG elements.

If you have to update any shape with new content, you need to update it without relying on angularjs's mechanisms of tracking content change. You need to use the diagram widget itself to either refresh the data source (if you use data source in the diagram) or directly call the redrawVisual method on the specific shapes. Please, check the following dojo for an sample on the described approaches -


Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question