BuyLog In
Example T1261312
Visible to All Users

DevExtreme Diagram - Getting Started

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.

Diagram

Files to Review

Documentation

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)

Example Code

jQuery/src/index.js 
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'],
      }]
    },
  });
});
Angular/src/app/app.component.html 
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>
Angular/src/app/app.component.ts 
TypeScript
import { 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(),
    });
  }
}
Vue/src/components/HomeContent.vue 
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>
React/src/App.js 
JavaScript
import 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;

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.