New to Kendo UI for Angular? Start a free 30-day trial

Diagram Data Binding

The Kendo UI for Angular Diagram supports comprehensive data binding capabilities that allow you to create dynamic diagrams from your data models. This article demonstrates how to bind shapes, connections, and layouts to data sources for creating organizational charts, process flows, network diagrams, and other data-driven visualizations.

Overview

Data binding in the Diagram component involves three main aspects:

Shape data binding—Binding individual shapes to data items with properties like text, styling, and positioning.
Connection data binding—Defining relationships between shapes through connection data that specifies source and target relationships.
Layout integration—Using automatic layout algorithms to position data-bound shapes and connections in hierarchical or network structures.

The following example demonstrates how to bind shapes and connections to an array of data items representing an organizational chart.

Change Theme

Theme

Loading ...

Shape Data Binding

Shapes can be bound to an array of data items where each item represents a shape in the diagram:

typescript

public employees = [
    { id: 'ceo', name: 'John Smith', title: 'CEO' },
    { id: 'cto', name: 'Sarah Johnson', title: 'CTO', managerId: 'ceo' }
];

public shapes: ShapeOptions[] = this.employees.map(employee => ({
    id: employee.id,
    content: { text: `${employee.name}\n${employee.title}` },
    width: 120,
    height: 60
}));

For more information regarding shape data binding, refer to the Binding Shapes to Data documentation.

Connection Data Binding

Connections represent relationships between shapes and can be generated from relational data:

typescript

public connections: ConnectionOptions[] = this.employees
    .filter(employee => employee.managerId)
    .map(employee => ({
        from: employee.managerId,
        to: employee.id
    }));

Layout Integration

Combine data binding with automatic layouts for organized diagrams:

typescript

public layout = {
    type: 'tree',
    subtype: 'down',
    horizontalSeparation: 50,
    verticalSeparation: 80
};

public connectionDefaults = {
    type: 'cascading',
    startCap: { type: 'None' },
    endCap: { type: 'ArrowEnd' }
};

Dynamic Data Updates

Update diagram data by regenerating the shapes and connections arrays:

typescript

public addEmployee(newEmployee: EmployeeData) {
    this.employees.push(newEmployee);
    this.shapes = this.generateShapes(this.employees);
    this.connections = this.generateConnections(this.employees);
}

Async Data Loading

Use observables for data that loads asynchronously:

typescript

public employees$ = this.employeeService.getEmployees();
public shapes$ = this.employees$.pipe(
    map(employees => this.generateShapes(employees))
);

The following example demonstrates how to bind shapes to data items and use an asynchronous data service to load employee information dynamically.

Change Theme

Theme

Loading ...

Best Practices

Use unique identifiers—Ensure each data item has a unique id property for proper shape and connection mapping.
Maintain data consistency—Ensure connection references remain valid after shape data changes.
Leverage layouts—Use automatic layouts to reduce manual positioning complexity.
Implement error handling—Validate data relationships to prevent invalid connections.