-
Data Grids / Data Management
-
Data Grid
- Overview
-
Data Binding
-
Filtering
- Sorting
-
Editing
-
Grouping
-
Selection
- Focused Row
- Paging
-
Scrolling
-
Columns
-
Master-Detail
-
Data Summaries
-
Drag & Drop
-
Export to PDF
-
Export to Excel
- Appearance
-
Customization
- State Persistence
-
Adaptability
-
Keyboard Navigation
- Right-To-Left Support
-
Tree List
- Overview
-
Data Binding
-
Filtering
- Sorting
-
Editing
-
Selection
- Focused Row
- Paging
-
Columns
- Drag & Drop
- State Persistence
- Adaptability
-
Keyboard Navigation
-
Card View
-
Pivot Grid
- Overview
-
Data Binding
-
Field Management
-
Data Summaries
- Drill Down
- Filtering
-
Scrolling
-
Export to Excel
- Chart Integration
- Customization
- State Persistence
-
Filter Builder
-
-
Data Visualization
-
Charts
- Overview
-
Data Binding
-
Common Concepts
-
Axis
-
Aggregation
-
Tooltips
-
Selection
-
Customization
-
Zooming
-
Export
-
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Funnel and Pyramid Charts
-
Line Charts
- Pareto Chart
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
- Sankey Chart
-
Sparkline Charts
-
Tree Map
-
Gauges
- Overview
-
Runtime update
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
-
Scheduling / Planning
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Appointments
-
Timetable
- Editing
-
Grouping
- Virtual Scrolling
- Drag & Drop
-
Customization
- Adaptability
-
Gantt
- Overview
- Data Binding
-
Filtering
- Sorting
- Strip Lines
- Export to PDF
- Validation
-
Customization
-
-
Messaging
-
WYSIWYG Editor
-
Forms
-
Data Editors
- Overview
-
Common Concepts
-
Calendar
- Check Box
- Color Box
- Date Box
-
Date Range Box
-
Number Box
- Radio Group
-
Range Selector
- Range Slider
- Slider
- Switch
- Text Area
- Text Box
-
Drop-Downs
- Autocomplete
-
Drop Down Box
-
Select Box
-
Tag Box
-
Lookup
-
Buttons
-
File Upload / File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Popup and Notifications
-
Navigation
- Overview
- Accordion
-
Context Menu
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
-
Stepper
- Pagination
-
List
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
-
-
Interactive Wrappers
-
Sortable
- Resizable
-
-
Progress Indicators
-
Maps
- Overview
-
Map
-
Vector Map
-
Data Binding
- Multiple Layers
-
Markers
- Legend
-
Zooming and Panning
-
Customization
-
-
Localization
Related Demos:
Your search did not match any results.
Diagram - Advanced Data Binding
The Diagram component accepts functions as expression property values. It allows you to implement custom logic when you bind a diagram to a data source.
In this demo, the nodes and edges collections are bound to a data source. Custom functions are used to get different shape types and font styles for items based on additional data source information.
The autoLayout property specifies an auto-layout algorithm type and orientation that the component uses to build diagrams.
Was this demo helpful?
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@model DevExtreme.MVC.Demos.Models.SampleData.OrgData
@(Html.DevExtreme().Diagram()
.ID("diagram")
.Nodes(ns => ns
.DataSource(d => d
.Array()
.Key("ID")
.Data(Model.Items)
)
.KeyExpr("ID")
.TextExpr("Name")
.TypeExpr(new JS("itemTypeExpr"))
.WidthExpr(new JS("itemWidthExpr"))
.HeightExpr(new JS("itemHeightExpr"))
.TextStyleExpr(new JS("itemTextStyleExpr"))
.StyleExpr(new JS("itemStyleExpr"))
.AutoLayout(al => al
.Type(DiagramDataLayoutType.Tree)
.Orientation(DiagramDataLayoutOrientation.Horizontal)
)
)
.Edges(ns => ns
.DataSource(d => d
.Array()
.Key("ID")
.Data(Model.Links)
)
.KeyExpr("ID")
.FromExpr("From")
.ToExpr("To")
.StyleExpr(new JS("linkStyleExpr"))
.FromLineEndExpr(new JS("linkFromLineEndExpr"))
.ToLineEndExpr(new JS("linkToLineEndExpr"))
)
.Toolbox(t => t
.Groups(g => g
.Add().Category(DiagramShapeCategory.General).Title("General")
)
)
)
<script type="text/javascript">
function itemTypeExpr(obj, value) {
if(value)
obj.Type = (value === "rectangle") ? undefined : "group";
else
return obj.Type === "group" ? "ellipse" : "rectangle";
}
function itemWidthExpr(obj, value) {
if(value)
obj.Width = value;
else
return obj.Width || (obj.Type === "group" && 1.5) || 1;
}
function itemHeightExpr(obj, value) {
if(value)
obj.Height = value;
else
return obj.Height || (obj.Type === "group" && 1) || 0.75;
}
function itemTextStyleExpr(obj) {
if(obj.Level === "senior")
return { "font-weight": "bold", "text-decoration": "underline" };
return {};
}
function itemStyleExpr(obj) {
let style = { "stroke": "#444444" };
if(obj.Type === "group")
style["fill"] = "#f3f3f3";
return style;
}
function linkStyleExpr(obj) {
return { "stroke": "#444444" };
}
function linkFromLineEndExpr(obj) {
return "none";
}
function linkToLineEndExpr(obj) {
return "none";
}
</script>
using System.Web.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
namespace DevExtreme.MVC.Demos.Controllers {
public class DiagramController : Controller {
public ActionResult AdvancedDataBinding() {
return View(new OrgData { Items = SampleData.OrgItemsAdvanced, Links = SampleData.OrgLinksAdvanced });
}
}
}
#diagram {
height: 900px;
}