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. Image for the cookie policy date

HTML template example


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

7 Replies

SG Shyam G Syncfusion Team 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 

MI Milos 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

SG Shyam G Syncfusion Team 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 

MI Milos 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

SG Shyam G Syncfusion Team 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 

MI Milos April 18, 2017 06:58 AM UTC

Hi Shyam,

Thank you.
Issue has been resolved. 


SG Shyam G Syncfusion Team 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 

Live Chat Icon For mobile
Up arrow icon