SVG is not rendering with kendo templates in Firefox and IE

Question

I want to build SVG paths with Kendo templates binding with MVVM view model. See this JS fiddle.

Known Issue:

In Firefox, when we inspect the SVG element and edit that SVG tag element (right click and select "Edit SVG") then the SVG is rendering.

But in IE 10, no path tags are found in the SVG tag.

HTML Code:

<div class="canvasTabContainer leftFloat" style="height: 522px;">
    <div class="canvasHolder workflowContainer_#= tabId #">
        <div class="canvasContainer relPosition">
            <svg id="edges_#= tabId #" width="100%" data-template="canvasEdges_renderer" data-bind="source: edges" height="99%" class="pAbsolute" style=""></svg>
            <div id="items_#= tabId #" class="items relPosition" data-template="canvasItems_renderer" data-bind="source: items"></div>
        </div>
    </div>
</div>
<script id="canvasItems_renderer" type="text/x-kendo-template">
    < div class = "canvasMatrixCell"
    itemid = "#=id#" > Item# = id# < /div>
</script>
<script id="canvasEdges_renderer" type="text/x-kendo-template">
    < path d = "#= svgPath #"
    class = "js-no-pan edgeStyle" > < /path>
</script>

JavaScript:

var canvasViewModel = [{
    "id": 1
}];
var canvasEdgeModel = [{
    "svgPath": "M382,121.5L396,121.5s 10 0 10 -10L406,50.5s 0 -10 10 -10L430,40.5M427,36.5L431,40.5L427,44.5"
}];

var canvasViewModel = kendo.observable({
    items: canvasViewModel,
    edges: canvasEdgeModel
});
kendo.bind($(".canvasHolder"), this.canvasViewModel);

It is not working in Firefox 29.0.1 & IE 10.

Answer 1

OK, I've found a way around the problem.

It seems that Kendo is manipulating the DOM, and the browser doesn't re-render the element.

The work-around I used was to give the parent node an id (canvasContainer) and refresh the innerHTML of canvasContainer after the call to kendo.bind.

I also noticed that your fiddle had a mistake (# = id# instead of #= id#), corrected that, and manually improved the source formatting.

HTML:

<div class="canvasTabContainer leftFloat" style="height: 522px;">
    <div class="canvasHolder workflowContainer_#= tabId #">
        <div class="canvasContainer relPosition" id="canvasContainer">
            <svg id="edges_#= tabId #" width="100%" data-template="canvasEdges_renderer" data-bind="source: edges" height="99%" class="pAbsolute" style=""></svg>
            <div id="items_#= tabId #" class="items relPosition" data-template="canvasItems_renderer" data-bind="source: items"></div>
        </div>
    </div>
</div>
<script id="canvasItems_renderer" type="text/x-kendo-template">
    <div class="canvasMatrixCell" itemid="#=id#">Item#= id#</div>
</script>
<script id="canvasEdges_renderer" type="text/x-kendo-template">
    <path d="#= svgPath #" class="js-no-pan edgeStyle"></path>
</script>

JavaScript:

var canvasViewModel = [{
    "id": 1
}];
var canvasEdgeModel = [{
    "svgPath": "M382,121.5L396,121.5s 10 0 10 -10L406,50.5s 0 -10 10 -10L430,40.5M427,36.5L431,40.5L427,44.5"
}, {
    "svgPath": "M788,40.5L836,40.5M833,36.5L837,40.5L833,44.5"
}, {
    "svgPath": "M179,40.5L227,40.5M224,36.5L228,40.5L224,44.5"
}, {
    "svgPath": "M585,40.5L633,40.5M630,36.5L634,40.5L630,44.5"
}, {
    "svgPath": "M179,121.5L227,121.5M224,117.5L228,121.5L224,125.5"
}];

var canvasViewModel = kendo.observable({
    items: canvasViewModel,
    edges: canvasEdgeModel
});
kendo.bind($(".canvasHolder"), this.canvasViewModel);

// Added
document.getElementById('canvasContainer').innerHTML += '';

See http://jsfiddle.net/qqzmZ/16/ for the working example.