This repository stores code for the following DevExpress tutorial: Getting Started with DevExtreme Diagram. The project creates a UI component that supplies a visual interface to help you design new and modify existing diagrams.
Files to Review
- jQuery
- Angular
- Vue
- React
Documentation
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
JavaScript$(function () {
$("#diagram").dxDiagram({
nodes: {
dataSource: new DevExpress.data.ArrayStore({
key: 'ID',
data: projectTasks,
}),
keyExpr: "ID",
parentKeyExpr: "Parent_ID",
textExpr: "Task_Name",
},
simpleView: true,
pageColor: "#f0f0f0",
defaultItemProperties: {
textStyle: "font-family: 'Courier New', monospace;"
},
propertiesPanel: {
tabs: [
{
groups: [{ title: 'Object Properties', commands: ['lineStyle', 'lineColor', 'fillColor'] }],
},
],
},
toolbox: {
showSearch: false,
groups: [{
category: 'general',
shapes: ['text', 'rectangle'],
}]
},
});
});
HTML<dx-diagram [simpleView]="true" pageColor="#f0f0f0">
<dxo-nodes [dataSource]="dataSource" keyExpr="ID" parentKeyExpr="Parent_ID" textExpr="Task_Name">
</dxo-nodes>
<dxo-default-item-properties textStyle="font-family: 'Courier New', monospace;">
</dxo-default-item-properties>
<dxo-properties-panel>
<dxi-tab>
<dxi-group title="Object Properties" [commands]="objectCommands"></dxi-group>
</dxi-tab>
</dxo-properties-panel>
<dxo-toolbox [showSearch]="false">
<dxi-group category="general" [shapes]="['text', 'rectangle']"></dxi-group>
</dxo-toolbox>
</dx-diagram>
TypeScriptimport { Component } from '@angular/core';
import { AppService, Task } from './app.service';
import ArrayStore from 'devextreme/data/array_store';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
providers: [AppService],
})
export class AppComponent {
projectTasks: Task[];
dataSource: ArrayStore;
constructor(service: AppService) {
this.projectTasks = service.getTasks();
this.dataSource = new ArrayStore({
key: 'ID',
data: service.getTasks(),
});
}
}
Code<template>
<DxDiagram :simple-view="true" page-color="#f0f0f0">
<DxNodes :data-source="dataSource" :key-expr="'ID'" :text-expr="'Task_Name'" :parent-key-expr="'Parent_ID'" />
<DxDefaultItemProperties text-style="font-family: 'Courier New', monospace;" />
<DxPropertiesPanel>
<DxTab>
<DxGroup title="Object Properties" :commands="objectCommands" />
</DxTab>
</DxPropertiesPanel>
<DxToolbox :show-search="false">
<DxGroup :category="'general'" :shapes="toolboxShapes" />
</DxToolbox>
</DxDiagram>
</template>
<script setup>
import 'devexpress-diagram/dist/dx-diagram.min.css';
import 'devextreme/dist/css/dx.material.blue.light.compact.css';
import DxDiagram, { DxNodes, DxDefaultItemProperties, DxToolbox, DxPropertiesPanel, DxTab, DxGroup } from 'devextreme-vue/diagram';
import ArrayStore from 'devextreme/data/array_store';
import service from './data.js';
const dataSource = new ArrayStore({
key: 'ID',
data: service.getTasks(),
});
const objectCommands = ['lineStyle', 'lineColor', 'fillColor'];
const toolboxShapes = ['text', 'rectangle'];
</script>
JavaScriptimport React from "react";
import 'devexpress-diagram/dist/dx-diagram.min.css';
import 'devextreme/dist/css/dx.material.blue.light.compact.css';
import ArrayStore from "devextreme/data/array_store";
import Diagram, { Nodes, DefaultItemProperties, Toolbox, PropertiesPanel, Tab, Group } from 'devextreme-react/diagram';
import service from './data.js';
const dataSource = new ArrayStore({
key: 'ID',
data: service.getTasks(),
});
const objectCommands = ['lineStyle', 'lineColor', 'fillColor'];
const toolboxShapes = ['text', 'rectangle'];
function App() {
return (
<Diagram
simpleView={true}
pageColor="#f0f0f0"
>
<Nodes
dataSource={dataSource}
keyExpr="ID"
textExpr="Task_Name"
parentKeyExpr="Parent_ID"
/>
<DefaultItemProperties
textStyle="font-family: 'Courier New', monospace;"
/>
<PropertiesPanel>
<Tab>
<Group
title="Object Properties"
commands={objectCommands}
/>
</Tab>
</PropertiesPanel>
<Toolbox showSearch={false} >
<Group
category="general"
shapes={toolboxShapes}
/>
</Toolbox>
</Diagram>
);
};
export default App;