Unable to display diagram on webpage

[Chong Yee Mei]

Hi,

We have been trying to display a simple diagram on the webpage, but after including all the JavaScript and even creating the combined one via the csg.syncfusion, the diagram does not display at all and even messes up the default behavior of the page. Attached in the project is the sample that emulates what we are facing, please advise.

Attachment: TestDiagramViewer_c72f550a.rar

[Shyam G]

Hi Chong

Thanks for using Syncfusion Products.

We have modified the changes in your sample as below

1. We suggest you to set font color property for Diagram label not fill color.

2. Please note that to render our diagram control we need to include scripts in aspx page as below

 <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

 <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>

            <script src="Scripts/jquery.easing-1.3.min.js" type="text/javascript"></script>

            <script src="Scripts/jquery.globalize.min.js" type="text/javascript"></script>

            <script src="Scripts/ej.widget.all.dark.js" type="text/javascript" />

            <link rel='nofollow' href="Styles/ej.widget.metro-azure-dark.css" rel="Stylesheet" />

Please let me know if any concerns.

Regards,

Shyam G

Attachment: TestDiagramViewer_54af8be4.zip

[Chong Yee Mei]

Hi Shyam,

We have started the solution you have given us and it works, but when we compare the change back to our actual solution, it again does not render. We are using back the same js and css files, and referring them in the page itself. ScriptManager is not added to the page due to being added in the master file already.

As or your first point, where do we set the fontcolor? As the css that we are using was downloaded directly from the Javascript generator, not edited by us.

[Shyam G]

Hi Chong

Thanks for the update.

 

Query	Response
We have started the solution you have given us and it works, but when we compare the change back to our actual solution, it again does not render. We are using back the same js and css files, and referring them in the page itself. ScriptManager is not added to the page due to being added in the master file already.	We have modified your sample by adding a script manager in the master page and we are unable to reproduce the reported issue at our end. Could you please modify the below attached sample to reproduce the issue in our end? This will help us to verify and to provide better solution.
As or your first point, where do we set the fontcolor? As the css that we are using was downloaded directly from the Javascript generator, not edited by us.	We have found fill color in your sample in the line as follows <ej:DiagramConnector Name="Connector3" SourceNode="BoardDecision" TargetNode="Reject">                                <SourceDecorator Shape="None" />                 <Labels>                     <ej:DiagramLabel Name="Connector3_Label" Text="No" FillColor="white"></ej:DiagramLabel>                 </Labels>   We suggest you to set the font color for diagram label not fill color and modified the line as follows.   <ej:DiagramConnector Name="Connector3" SourceNode="BoardDecision" TargetNode="Reject">                                <SourceDecorator Shape="None" />                 <Labels>                     <ej:DiagramLabel Name="Connector3_Label" Text="No" FontColor="white"></ej:DiagramLabel>                 </Labels>

Please let me know if any concerns.

Regards,

Shyam G

 

Attachment: TestDiagramViewer_(2)_cccd7ac3.zip

[Chong Yee Mei]

Hi Shyam,

We found the problem, but do not understand why it is causing the issue.

Once we changed the script tag as below, it displays the diagram.

<link rel='nofollow' href="Styles/ej.widget.metro-azure-dark.css" rel="Stylesheet" />

to

<link rel='nofollow' href="Styles/ej.widget.metro-azure-dark.css" rel="Stylesheet"></link>

[Shyam G]

Hi Chong

Thanks for the update.

Please note that self-closed script elements are valid but not understood by browsers.so we suggest you to set script elements as follows.

<script src="Scripts/ej.widget.all.dark.js" type="text/javascript"></script>

Please refer the below link for more information

Link

Please let me know if any concerns.

Regards,

Shyam G