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?
3 Answers, 1 is accepted
0
Hi ,
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.
Regards,
Ianko
Telerik
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.
Regards,
Ianko
Telerik
0
Anitha
Top achievements
Rank 1
Rank 1
answered on 14 Apr 2018, 05:16 AM
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!
0
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:
http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback?category_id=170307
Regards,
Vessy
Progress Telerik
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:
http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback?category_id=170307
Regards,
Vessy
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.