This does not work: https://dojo.telerik.com/UNIJebUR
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>
</head>
<body>
<div id="appbar"></div>
<script>
$("#appbar").kendoAppBar({
items: [
{
type: "contentItem",
template: "<span><input /><span>"
},
{
type: "spacer"
},
{
type: "contentItem",
template: "<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>"
},
]
});
</script>
</body>
</html>
What about something like this?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>SVG in app bar</title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default-v2.min.css"/> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script> </head> <body> <script id="second" type="text/x-kendo-template"> <svg id="s" xmlns="http://www.w3.org/2000/svg" /> </script> <div id="appbar"></div> <script> $("#appbar").kendoAppBar({ items: [ { type: "contentItem", template: "<span><input /><span>" }, { type: "spacer" }, { type: "contentItem", template: kendo.template($("#second").html()) }, ] }); // From https://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element function makeSVG(tag, attrs) { var el= document.createElementNS('http://www.w3.org/2000/svg', tag); for (var k in attrs) el.setAttribute(k, attrs[k]); return el; } var circle= makeSVG('circle', {cx: 50, cy: 50, r:50}); document.getElementById('s').appendChild(circle); circle.onmousedown= function() { alert('hello'); }; </script> </body> </html>The circle is just an example to show svg in templates does nor work..
My use case is adding an svg company logo to the appbar, which is far too complex to draw as you suggest.
i have a simpler workaround using an img tag, but embedding an svg template would have been much better.
Hi Jack,
You can render an SVG in a Kendo template. The problem with the first Dojo is the same quotation marks used for the nested template elements. When double quotes are used for the template the nested ones shall be singe. For example::
template: "<svg width='100' height='100'><circle cx='50' cy='50' r='40' stroke='green' stroke-width='4' fill='yellow' /></svg>"https://dojo.telerik.com/UNIJebUR/2
Regarding the second Dojo can you share more information on what the issue is?