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

Confused how to run some samples in documentation mixed TS and ES

Dear Support
I am confused on how to run some sample codes in your documentation for example i received the following sample from you ( attached) , and it runs perfectly
but one i tried to combine the sample code present in the symbol palette section (appended) it turns out that it contains TS code
what should i do to be able to make it work


Add palettes to SymbolPalette

let connectorSymbols: ConnectorModel[] = [{
let palette: any;

Attachment: erddiagram301321552_bd6443d9.zip

3 Replies

RT Ramya Thirugnanam Syncfusion Team April 12, 2019 07:15 AM UTC

Hi Hani, 
We can create a Vue CLI app with TypeScript config using the following steps.  
  1. Create a vue app using following command in command prompt.
vue create {app-name}   
  1. Select typescript alone in the features needed for your project. 
  1. Configure the App.vue in the src folder .In the  App.Vue file add the symbol palette component and include necessary code snippet and styles for symbol palette. 
  2. In the script section set language as ts. So that you can include a ts code in the file
<script lang="ts">  
  1. Run the app using the following command.
npm run serve   
 We have created a sample for your requirement. Please find the sample in below link  
Ramya T 

HY Hani Yasin April 16, 2019 08:21 AM UTC

Thank you for the snippets , it is clear now 
i do not know if i have to open a new thread or it is acceptable to append , the issue is related and goes like this
from the code you have attached i tried to edit and add the UmlClassifier shapes to the Pallete
but did not succeed
i tried to follow the documentation and saw the NodeModel can accept UmlClassifierShapeModel, but the shape does not show in the pallete instead the pallete is broken,in order to make sure i tried with the swimlane and it shows , but for the UMLclass not
can you please help

let basicShapes1: NodeModel[] = [{
id: "Patient",
//Position of the node
offsetX: 200,
offsetY: 200,
shape: {
type: "UmlClassifier",
//Define class object
class: {
name: "Patient",
//Define class attributes
attributes: [{ name: "accepted", type: "Date" }],
//Define class methods
methods: [{ name: "getHistory", type: "getHistory" }]
classifier: "Class"

RT Ramya Thirugnanam Syncfusion Team April 17, 2019 06:18 AM UTC

Hi Hani, 
Currently, we don’t have support to add Uml Class Shapes in symbol palette. We have logged “Support to add UML shapes in symbol palette” as a feature request. We will implement this feature in any of our upcoming release. Please find the feature description below. 
Feature description: 
In Uml class shape, class, members, interface and separator will be rendered as an individual shape in symbol palette. So that you can drag the shapes from palette onto the diagram and create as an Uml class shapes. 
Now, you can now track the status of your request, review the proposed resolution timeline, and contact us for any further inquiries through below link.   
Ramya T 

Live Chat Icon For mobile
Up arrow icon