Is there a way to to use svg to diplay a log in the appbar?

0 Answers 13 Views
AppBar NavBar
Jack
Top achievements
Rank 1
Jack asked on 06 Jan 2022, 04:04 PM

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>

 

Jay
Top achievements
Rank 1
Iron
Veteran
commented on 07 Jan 2022, 04:22 PM | edited

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>

Jack
Top achievements
Rank 1
commented on 09 Jan 2022, 06:49 AM

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.

Nikolay
Telerik team
commented on 11 Jan 2022, 10:14 AM

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?

No answers yet. Maybe you can help?

Tags
AppBar NavBar
Asked by
Jack
Top achievements
Rank 1
Share this question
or