HTML template example

[Milos]

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]

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]

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]

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]

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]

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]

Hi Shyam,

Thank you.

Issue has been resolved. 

Regards,

Milos

[Shyam G]

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