-
Data Grid
- Overview
-
Data Binding
-
Paging and Scrolling
-
Editing
-
Grouping
-
Filtering and Sorting
- Focused Row
-
Row Drag & Drop
-
Selection
-
Columns
- State Persistence
-
Appearance
-
Templates
-
Data Summaries
-
Master-Detail
-
Export to Excel
-
Adaptability
- Keyboard Navigation
-
Pivot Grid
- Overview
-
Data Binding
-
Field Chooser
-
Features
-
Tree List
- Overview
-
Data Binding
- Sorting
- Paging
-
Editing
- Node Drag & Drop
- Focused Row
-
Selection
-
Filtering
-
Column Customization
- State Persistence
- Adaptability
- Keyboard Navigation
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Features
-
Grouping
-
Customization
- Adaptability
-
Html Editor (CTP)
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
- UI Customization
- Adaptability
-
Charts
- Overview
-
Data Binding
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Line Charts
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
-
Sparkline Charts
-
Tree Map
-
Funnel and Pyramid Charts
- Sankey Chart
-
Combinations
-
More Features
-
Export
-
Selection
-
Tooltips
-
Zooming
-
-
Gantt
- Overview
-
Data
-
UI Customization
- Strip Lines
-
Gauges
- Overview
-
Data Binding
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Navigation
- Overview
- Accordion
- Menu
- Multi View
-
Drawer
-
Tab Panel
- Tabs
- Toolbar
-
Tree View
- Right-to-Left Support
-
Editors
- Overview
- Autocomplete
- Calendar
- Check Box
- Color Box
-
Date Box
-
Drop Down Box
-
Number Box
-
Select Box
- Switch
-
Tag Box
- Text Area
- Text Box
- Validation
- Custom Text Editor Buttons
- Right-to-Left Support
- Styling Mode
-
Forms and Multi-Purpose
- Overview
- Box
- Button Group
- Field Set
-
Filter Builder
-
Form
- Radio Group
-
Range Selector
- Numeric Scale (Lightweight)
- Numeric Scale
- Date-Time Scale (Lightweight)
- Date-Time Scale
- Logarithmic Scale
- Discrete scale
- Custom Formatting
- Use Range Selection for Calculation
- Use Range Selection for Filtering
- Image on Background
- Chart on Background
- Customized Chart on Background
- Chart on Background with Series Template
- Range Slider
- Responsive Box
- Scroll View
- Slider
-
Sortable
-
File Management
-
File Manager
-
File Uploader
-
-
Actions and Lists
- Overview
-
Action Sheet
-
Button
- Floating Action Button
- Drop Down Button
-
Context Menu
-
Gallery
-
List
-
Lookup
-
Tile View
-
Maps
-
Dialogs and Notifications
-
Localization
Related Demos:
Your search did not match any results.
Web API Service
This demo shows the Diagram widget loading data from a Web API service.
Was this demo helpful?
Thank you!
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
x
Send Feedback
Thank you!
We appreciate your feedback.
We appreciate your feedback.
@(Html.DevExtreme().Diagram()
.ID("diagram")
.Nodes(ns => ns
.DataSource(d => d.WebApi()
.RouteName("DiagramEmployees")
.LoadAction("Employees")
.InsertAction("InsertEmployee")
.UpdateAction("UpdateEmployee")
.DeleteAction("DeleteEmployee")
.Key("ID")
.OnInserting("onInserting")
)
.KeyExpr("ID")
.TextExpr("Title")
.ParentKeyExpr("HeadID")
.AutoLayout(al => al
.Type(DiagramDataLayoutType.Tree)
)
)
.Toolbox(t => t
.Groups(g => g
.Add().Category(DiagramShapeCategory.General).Title("General")
)
)
)
<script type="text/javascript">
function onInserting(values) {
values["ID"] = 0;
values["HeadID"] = 0;
values["Title"] = "New Position";
values["Prefix"] = "Mr";
values["FullName"] = "New Employee";
values["City"] = "LA";
values["State"] = "CA";
values["HireDate"] = new Date();
}
</script>
using System.Web.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
namespace DevExtreme.MVC.Demos.Controllers {
public class DiagramController : Controller {
public ActionResult WebAPIService() {
return View();
}
}
}
#diagram {
height: 725px;
}