We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

HTML template example

Thread ID:





129932 Apr 10,2017 09:54 PM UTC Apr 19,2017 03:58 AM UTC JavaScript 7
Tags: ejDiagram
Asked On April 10, 2017 09:54 PM UTC


I am trying to make diagram with template, but without success.
I attached example which does not work.
First, my root element in datasource does not have parent Id which is not obligatory as far as I know.
I am getting error because of that. When I set some id to the root element, I do not get any error but my example still does not work.
I do not know what should I do to make it work. 
On the internet not to many examples with html templates.
In your demo sites I did not see any example with html template.


Attachment: DurandalSyncfusionStarterKit_dc4a0e69.rar

Shyam G [Syncfusion]
Replied On April 11, 2017 10:47 AM UTC

Hi Milos, 

·         You have defined node name(name defined in the JSON data) with special characters . So please define it without special characters to resolve your reported issue. We have modified the JSON in the welcome.js file and provided the link below. 


  Link: welcome.js 

  Also while defining the name for HTML elements, certain procedures are to be followed. Please see the link below 




Shyam G 

Replied On April 11, 2017 12:51 PM UTC

Hi Shyam,

Thank you for your quick response. 
I did not know that for node name I cannot use special characters, there is no anything about it in documentation.
I thought that field I set as a "Id" field is unique identifier.

I change example and seems it work fine, just my diagram is not presented on the page. It is rendered but not showed.
It does not take necessary space.

You can see it in attached example.


Attachment: DurandalSyncfusionStarterKit_15c29893.zip

Shyam G [Syncfusion]
Replied On April 12, 2017 06:06 AM UTC

Hi Milos, 
We suspect that you have not referred CSS file(ej.web.all.min.css) in your application. So only the reported issue occurs. Also please define the script template in index.html instead of welcome.html file.  Could you please check in the below sample? Still if you have an issue, please provide us more details such as browser version, console error in browser, screenshot of an issue. 
Code example: 
<link rel='nofollow' href="//cdn.syncfusion.com/" rel="stylesheet" /> 
<script id="connectionOrganizationTemplateId" type="text/x-jsrender"> 
        <div class="node-content" data-entityid="{{:id}}" data-entitytype="{{:entity}}" style="border-color: {{:color}}"> 
            <div class="node-image {{:spriteCssClass}}"></div> 
            <p class="node-text">{{:displayName}}</p> 
Shyam G 

Replied On April 12, 2017 07:24 AM UTC

Hi Shyam,

I test this in chrome, version Version 57.0.2987.133 (the latest one). 
Console does not show any error.
My attached example from previous comment contains vendor.css. Vendor.css  contains bootstrap.css, ej.widgets.core.min.css and ej.theme.min.css.

You can reproduce the error just open attached project. Project is in attachment.
Diagram just blink on the page and disappear.

I moved the script template in index.html instead of welcome.html.


Attachment: DurandalSyncfusionStarterKit_de379b7f.zip

Shyam G [Syncfusion]
Replied On April 17, 2017 12:40 PM UTC

Hi Milos, 
When we set the diagram models size in percentage, then diagram size will be set based on its parent size. In your sample, you have set diagram models width and height in percentage and its parent height has lesser pixel value(67px). So only the reported issue occurs.  please set the diagram height in pixel to resolve your reported issue. Please refer to the code example and modified sample below. 
Code example: 
self.diagram =  { 
            width: "100%", 
            height: "800px", 
                                .. . . 
Shyam G 

Replied On April 18, 2017 06:58 AM UTC

Hi Shyam,

Thank you.
Issue has been resolved. 


Shyam G [Syncfusion]
Replied On April 19, 2017 03:58 AM UTC

Hi Milos, 
We are happy to hear that your problem is resolved. 
Please let us know if you need further assistance on this. 
Shyam G 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon