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.
Unfortunately, activation email could not send to your email. Please try again.

HTML template example

Thread ID:

Created:

Updated:

Platform:

Replies:

129932 Apr 10,2017 05:54 PM Apr 18,2017 11:58 PM JavaScript 7
loading
Tags: ejDiagram
Milos
Asked On April 10, 2017 05:54 PM

Hi,

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.


Regards,
Milos

Attachment: DurandalSyncfusionStarterKit_dc4a0e69.rar

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

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 

  

Link:http://stackoverflow.com/questions/5688200/can-i-use-white-spaces-in-the-name-attribute-of-an-html-element 

  

Link1:http://www.w3.org/TR/html401/types.html#type-name 

 
Regards, 
Shyam G 


Milos
Replied On April 11, 2017 08:51 AM

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.

Regards,
Milos

Attachment: DurandalSyncfusionStarterKit_15c29893.zip

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

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: 
 
Index.html 
 
<link rel='nofollow' href="//cdn.syncfusion.com/15.1.0.37/js/web/flat-azure/ej.web.all.min.css" 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> 
        </div> 
    </script> 
 
Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/angularsample-1385799858 
 
Regards, 
Shyam G 


Milos
Replied On April 12, 2017 03:24 AM

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.

Regards,
Milos

Attachment: DurandalSyncfusionStarterKit_de379b7f.zip

Shyam G [Syncfusion]
Replied On April 17, 2017 08:40 AM

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", 
                                .. . . 
} 
 
Modified sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/DurandalSyncfusionStarterKitmodified1556561843 
 
Regards, 
Shyam G 


Milos
Replied On April 18, 2017 02:58 AM

Hi Shyam,

Thank you.
Issue has been resolved. 

Regards,
Milos

Shyam G [Syncfusion]
Replied On April 18, 2017 11:58 PM

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


CONFIRMATION

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.

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.

;