Diagram Background Image

4 posts, 0 answers
  1. Chance
    Chance avatar
    12 posts
    Member since:
    Apr 2015

    Posted 28 Apr 2015 Link to this post

    I'm trying to apply a background image to the Diagram Control. 

    I got it to work when viewing on the webpage by adding style="background-image: url('btest.png'); background-repeat: no-repeat; top: 0px;" to the RadDiagram control, but when I export the finished diagram to PDF or SVG the background image doesn't show.   Is there a different way I could add the background image to the diagram where it would work with the exporting tools?






  2. Ianko
    Ianko avatar
    1904 posts

    Posted 01 May 2015 Link to this post

    Hi Chance,

    Using the markup element to add CSS would affect only the wrapper element in the DOM. Exporting the diagram includes only the SVG elements that are rendered, and this is the expected behavior.

    Due to that, to actually export an image background to svg, you would need such an svg element in the main SVG layer. Adding such, is a custom solution and you should directly manipulate the DOM SVG elements. RadDiagram markup, or Kendo Diagram API does not expose options to easily do that. Therefore, it is up to plain JavaScript SVG manipulation to interact with the elements inside and add an SVG Image.

    As this solution is a general knowledge matter, I suggest looking for help in public materials related to SVG, e.g., http://stackoverflow.com/questions/6701705/programmatically-creating-an-svg-image-element-with-javascript.

  3. Anitha
    Anitha avatar
    2 posts
    Member since:
    Feb 2015

    Posted 14 Apr 2018 in reply to Ianko Link to this post

    HI Lanko,


    Has this been addressed in the versions since 2015? I use 2018 Q1 version of the control and i am looking for a way to export the diagram with the background image.


    Thank you!

  4. Vessy
    Vessy avatar
    2097 posts

    Posted 16 Apr 2018 Link to this post

    Hi Anitha,

    I have just answered your support ticket on the matter, for convenience will copy my answer here as well:

    As discussed in this thread, exporting a background image added via CSS is still not available in the build in features of the diagram. As a possible option, you can submit a feature request for such funtionality in the Kendo User Voice portal so our developers will consider its implementation depending on the popularity of the item:

    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top