custom css

[Danish Merchant]

While creating a sample for Syncfusion Diagram component. why we need to use <link rel='nofollow' href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> css mandatorily.

Without using above stylesheet diagram does not load and i am not able to drag and drop any shapes from palette.

What if i want to use custom css then what all changes we need to do

[Aravind Ravi]

Hi Danish, 

 

In the diagram, theme files are just used to style the diagram elements. If you refer the material theme file in your sample means then when you select the node then node and connector resize handles all appear with red color. If you does not apply theme means then it displays with white color.  

 

Without using theme	Using theme

 

So theme file is just used to style elements, symbol palette also rendered properly if we use theme file in the sample. You cannot able to use the custom css , however you can able to override the css used for the diagram.  In the below sample we have override the style for the node handles, please find the code snippet and sample below 

 

<style> 

  .e-diagram-resize-handle { 

  fill: blue; 

  stroke: #fff; 

} 

.e-diagram-border { 

  stroke: blue; 

} 

  </style> 

 

Sample: https://stackblitz.com/edit/angular-c6dmfq-9neths 

 

Regards 

Aravind Ravi 

[Danish Merchant]

Hi,

Problem is in your sample you have added nodes in your html itself and not dragging from palette.

So,

-- if you remove all the nodes and also remove theme file reference from your index.html then you will not be able to see empty diagram.

--if you remove all the nodes and just keep theme file reference in your index.html then you will be able to see the empty diagram.

My point is why can't we show empty diagram without any theme references.

Also if you don't add theme reference then context menu will not work properly.

Please check by editing your sample project.

Thanks,

Danish Merchant

[Aravind Ravi]

Hi Danish, 

 

Could you please confirm us whether you want to show an diagram without grid lines. If yes, then please set SnapConstraints as None. In the diagram’s snapSettings set SnapConstraints as None. So that diagram has been rendered without grid lines. Please refer to below code snippet 

 

//TS 

 

public snaSettings: SnapSettingsModel = { constraints: SnapConstraints.None} 

 

//HTML 

 

<ejs-diagram #diagram id="diagram" width="100%" height="540px" [rulerSettings]='rulerSettings' (created)='diagramCreate($event)' [snapSettings]='snaSettings' [constraints]="constraints"> 

            </ejs-diagram> 

 

Regards 

Aravind Ravi