├── WidgetGallery ├── wwwroot │ ├── uploads │ │ └── .keep │ ├── css │ │ └── site.css │ ├── images │ │ ├── 01.png │ │ ├── 02.png │ │ ├── 03.png │ │ ├── 04.png │ │ ├── 05.png │ │ ├── 06.png │ │ ├── 07.png │ │ ├── 08.png │ │ ├── 09.png │ │ └── 10.png │ ├── SampleData │ │ ├── Copper.json │ │ ├── Wind.json │ │ ├── VectorMap.json │ │ ├── Stock.json │ │ └── TreeMap.json │ └── dx.aspnet.mvc.js ├── .bowerrc ├── Views │ ├── _ViewStart.cshtml │ ├── _ViewImports.cshtml │ ├── Home │ │ ├── Navigation │ │ │ ├── _Menu.cshtml │ │ │ ├── _TreeView.cshtml │ │ │ ├── _Accordion.cshtml │ │ │ ├── _TabPanel.cshtml │ │ │ └── _Toolbar.cshtml │ │ ├── Gauges │ │ │ ├── _SubvaluesLinearGauge.cshtml │ │ │ ├── _DeviationsBarGauge.cshtml │ │ │ ├── _SubvaluesCircularGauge.cshtml │ │ │ ├── _SpeedBarGauge.cshtml │ │ │ ├── _HumidityLinearGauge.cshtml │ │ │ ├── _RangesLinearGauge.cshtml │ │ │ ├── _TemperatureLinearGauge.cshtml │ │ │ ├── _RangesCircularGauge.cshtml │ │ │ └── _PressureLinearGauge.cshtml │ │ ├── TreeMap.cshtml │ │ ├── Charts.cshtml │ │ ├── FileUploader.cshtml │ │ ├── Charts │ │ │ ├── _PolarChart.cshtml │ │ │ ├── _Chart.cshtml │ │ │ ├── _PieChart.cshtml │ │ │ └── _StockChart.cshtml │ │ ├── Navigation.cshtml │ │ ├── DataGridOData.cshtml │ │ ├── Gallery.cshtml │ │ ├── PivotGrid.cshtml │ │ ├── Gauges.cshtml │ │ ├── GeoMap.cshtml │ │ ├── List.cshtml │ │ ├── Scheduler.cshtml │ │ ├── VectorMap.cshtml │ │ ├── SparklinesBullets.cshtml │ │ ├── DataGrid.cshtml │ │ ├── Overlays.cshtml │ │ ├── RangeSelector.cshtml │ │ ├── Validation.cshtml │ │ ├── Form.cshtml │ │ └── Editors.cshtml │ └── Shared │ │ ├── _LayoutNavigation.cshtml │ │ └── _Layout.cshtml ├── Northwind.mdf ├── Northwind.sqlite ├── ViewModels │ ├── FormViewModel.cs │ ├── GalleryViewModel.cs │ ├── ValidationViewModel.cs │ └── EditorsViewModel.cs ├── appsettings.json ├── bower.json ├── Models │ ├── SchedulerResource.cs │ └── Northwind │ │ ├── Shipper.cs │ │ ├── Category.cs │ │ ├── Order_Detail.cs │ │ ├── Customer.cs │ │ ├── Supplier.cs │ │ ├── Product.cs │ │ ├── Employee.cs │ │ ├── Order.cs │ │ └── NorthwindContext.cs ├── web.config ├── Program.cs ├── Extensions.cs ├── Controllers │ ├── ListDataController.cs │ ├── PivotGridDataController.cs │ ├── FileUploaderController.cs │ ├── SchedulerDataController.cs │ ├── GridSparklineDataController.cs │ ├── ChartsDataController.cs │ ├── NavigationDataController.cs │ ├── SiteNavigationDataController.cs │ ├── GridDataController.cs │ ├── HomeController.cs │ └── GeoNamesController.cs ├── Properties │ └── launchSettings.json ├── WidgetGallery.xproj ├── project.json └── Startup.cs ├── .gitignore ├── global.json ├── NuGet.config ├── Dockerfile └── WidgetGallery.sln /WidgetGallery/wwwroot/uploads/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /WidgetGallery/.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "wwwroot/lib" 3 | } 4 | -------------------------------------------------------------------------------- /WidgetGallery/Views/_ViewStart.cshtml: -------------------------------------------------------------------------------- 1 | @{ 2 | Layout = "_Layout"; 3 | } 4 | -------------------------------------------------------------------------------- /WidgetGallery/wwwroot/css/site.css: -------------------------------------------------------------------------------- 1 | .p-t-6 { 2 | padding-top: 60px; 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | bin 2 | obj 3 | .vs 4 | WidgetGallery/wwwroot/lib 5 | *.suo 6 | *.user 7 | project.lock.json 8 | -------------------------------------------------------------------------------- /WidgetGallery/Northwind.mdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevExpress/DevExtreme.AspNet.Mvc-Demos-NETCore/HEAD/WidgetGallery/Northwind.mdf -------------------------------------------------------------------------------- /global.json: -------------------------------------------------------------------------------- 1 | { 2 | "projects": [ "WidgetGallery" ], 3 | "sdk": { 4 | "version": "1.0.0-preview2-003121" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /WidgetGallery/Northwind.sqlite: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevExpress/DevExtreme.AspNet.Mvc-Demos-NETCore/HEAD/WidgetGallery/Northwind.sqlite -------------------------------------------------------------------------------- /WidgetGallery/wwwroot/images/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevExpress/DevExtreme.AspNet.Mvc-Demos-NETCore/HEAD/WidgetGallery/wwwroot/images/01.png -------------------------------------------------------------------------------- /WidgetGallery/wwwroot/images/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevExpress/DevExtreme.AspNet.Mvc-Demos-NETCore/HEAD/WidgetGallery/wwwroot/images/02.png -------------------------------------------------------------------------------- /WidgetGallery/wwwroot/images/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevExpress/DevExtreme.AspNet.Mvc-Demos-NETCore/HEAD/WidgetGallery/wwwroot/images/03.png -------------------------------------------------------------------------------- /WidgetGallery/wwwroot/images/04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevExpress/DevExtreme.AspNet.Mvc-Demos-NETCore/HEAD/WidgetGallery/wwwroot/images/04.png -------------------------------------------------------------------------------- /WidgetGallery/wwwroot/images/05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevExpress/DevExtreme.AspNet.Mvc-Demos-NETCore/HEAD/WidgetGallery/wwwroot/images/05.png -------------------------------------------------------------------------------- /WidgetGallery/wwwroot/images/06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevExpress/DevExtreme.AspNet.Mvc-Demos-NETCore/HEAD/WidgetGallery/wwwroot/images/06.png -------------------------------------------------------------------------------- /WidgetGallery/wwwroot/images/07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevExpress/DevExtreme.AspNet.Mvc-Demos-NETCore/HEAD/WidgetGallery/wwwroot/images/07.png -------------------------------------------------------------------------------- /WidgetGallery/wwwroot/images/08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevExpress/DevExtreme.AspNet.Mvc-Demos-NETCore/HEAD/WidgetGallery/wwwroot/images/08.png -------------------------------------------------------------------------------- /WidgetGallery/wwwroot/images/09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevExpress/DevExtreme.AspNet.Mvc-Demos-NETCore/HEAD/WidgetGallery/wwwroot/images/09.png -------------------------------------------------------------------------------- /WidgetGallery/wwwroot/images/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevExpress/DevExtreme.AspNet.Mvc-Demos-NETCore/HEAD/WidgetGallery/wwwroot/images/10.png -------------------------------------------------------------------------------- /WidgetGallery/Views/_ViewImports.cshtml: -------------------------------------------------------------------------------- 1 | @using WidgetGallery 2 | @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 3 | @using DevExtreme.AspNet.Mvc 4 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Navigation/_Menu.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().Menu() 2 | .DataSource(d => d.WebApi().Controller("NavigationData").LoadAction("ProductsByCategories")) 3 | .DisplayExpr("name") 4 | .ItemsExpr("products") 5 | ) 6 | -------------------------------------------------------------------------------- /NuGet.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /WidgetGallery/ViewModels/FormViewModel.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | 5 | namespace WidgetGallery.ViewModels { 6 | public class FormViewModel { 7 | public object FormData { get; set; } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /WidgetGallery/appsettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "Logging": { 3 | "IncludeScopes": false, 4 | "LogLevel": { 5 | "Default": "Debug", 6 | "System": "Information", 7 | "Microsoft": "Information" 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /WidgetGallery/ViewModels/GalleryViewModel.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | 5 | namespace WidgetGallery.ViewModels { 6 | public class GalleryViewModel { 7 | public IEnumerable Images { get; set; } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Navigation/_TreeView.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().TreeView() 2 | .DataSource(d => d.WebApi().Controller("NavigationData").LoadAction("TreeViewData")) 3 | .VirtualModeEnabled(true) 4 | .RootValue("") 5 | .DataStructure(TreeViewDataStructure.Plain) 6 | .Height(500) 7 | ) 8 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Shared/_LayoutNavigation.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().TreeView() 2 | .DataSource(d => d.WebApi().Controller("SiteNavigationData")) 3 | .ItemTemplate(@ 4 | <%= obj.Caption %> 5 | ) 6 | .ExpandedExpr("Expanded") 7 | .ItemsExpr("Children") 8 | .FocusStateEnabled(false) 9 | ) 10 | -------------------------------------------------------------------------------- /WidgetGallery/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "asp.net", 3 | "private": true, 4 | "dependencies": { 5 | "bootstrap": "3.3.6", 6 | "jquery-validation": "1.14.0", 7 | "jquery-validation-unobtrusive": "3.2.6", 8 | "underscore": "1.8.3", 9 | "devextreme": "16.1.5", 10 | "devextreme-aspnet-data": "1.0.0" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Gauges/_SubvaluesLinearGauge.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().LinearGauge() 2 | .Scale(s => s 3 | .StartValue(0) 4 | .EndValue(10) 5 | .TickInterval(1)) 6 | .Value(5) 7 | .Subvalues(new double[] { 2, 8 }) 8 | .SubvalueIndicator(i => i 9 | .Type(GaugeIndicatorType.TriangleMarker) 10 | .Color("#779ECB") 11 | ) 12 | ) 13 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM microsoft/dotnet:1.0.0-preview2-sdk 2 | 3 | RUN apt-get update \ 4 | && apt-get install -y nodejs npm \ 5 | && ln -s /usr/bin/nodejs /usr/bin/node \ 6 | && npm i -g bower 7 | 8 | ADD WidgetGallery NuGet.config /WidgetGallery/ 9 | WORKDIR /WidgetGallery 10 | 11 | RUN bower install --allow-root \ 12 | && dotnet restore \ 13 | && dotnet build 14 | 15 | EXPOSE 5555 16 | 17 | CMD dotnet run 18 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/TreeMap.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().TreeMap() 2 | .Title("The Most Populated Cities by Continents") 3 | .DataSource("~/SampleData/TreeMap.json") 4 | .Colorizer(c => c 5 | .Type(TreeMapColorizerType.Gradient) 6 | .Palette(VizPalette.Violet) 7 | ) 8 | .Size(s => s.Height(600)) 9 | .Tooltip(t => t 10 | .Enabled(true) 11 | .Format(Format.Thousands) 12 | ) 13 | ) 14 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Gauges/_DeviationsBarGauge.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().BarGauge() 2 | .Title("Deviations") 3 | .StartValue(-50) 4 | .EndValue(50) 5 | .BaseValue(0) 6 | .Values(new[] { -21.3, 14.8, -30.9, 45.2 }) 7 | .Label(l => l.CustomizeText("deviationsGauge_label_customizeText")) 8 | ) 9 | 10 | 15 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Charts.cshtml: -------------------------------------------------------------------------------- 1 |
2 |
3 | @Html.Partial("Charts/_Chart") 4 |
5 |
6 | @Html.Partial("Charts/_PieChart") 7 |
8 |
9 | 10 |
11 |
12 | @Html.Partial("Charts/_StockChart") 13 |
14 |
15 | @Html.Partial("Charts/_PolarChart") 16 |
17 |
18 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/FileUploader.cshtml: -------------------------------------------------------------------------------- 1 |
2 |
3 | @(Html.DevExtreme().FileUploader() 4 | .SelectButtonText("Add images") 5 | .LabelText("Drop images here") 6 | .Name("myFile") 7 | .UploadMode(FileUploadMode.UseButtons) 8 | .Accept("image/*") 9 | .UploadUrl(Url.Action("Upload", "FileUploader")) 10 | .Multiple(true) 11 | ) 12 |
13 |
14 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Gauges/_SubvaluesCircularGauge.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().CircularGauge() 2 | .Geometry(g => g 3 | .StartAngle(180) 4 | .EndAngle(0) 5 | ) 6 | .Scale(s => s 7 | .StartValue(0) 8 | .EndValue(10) 9 | .TickInterval(1) 10 | ) 11 | .Value(5) 12 | .Subvalues(new double[] { 2, 8 }) 13 | .SubvalueIndicator(i => i 14 | .Type(GaugeIndicatorType.TriangleNeedle) 15 | .Color("#779ECB") 16 | ) 17 | ) 18 | -------------------------------------------------------------------------------- /WidgetGallery/Models/SchedulerResource.cs: -------------------------------------------------------------------------------- 1 | using Newtonsoft.Json; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.Linq; 5 | using System.Text; 6 | using System.Threading.Tasks; 7 | 8 | namespace WidgetGallery.Models { 9 | class SchedulerResource { 10 | [JsonProperty("id")] 11 | public int ID { get; set; } 12 | 13 | [JsonProperty("text")] 14 | public string Text { get; set; } 15 | 16 | [JsonProperty("color")] 17 | public string Color { get; set; } 18 | 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Gauges/_SpeedBarGauge.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().BarGauge() 2 | .Title("Average Speed by Racer") 3 | .StartValue(0) 4 | .EndValue(200) 5 | .Values(new[] { 121.4, 135.4, 115.9, 141.1, 127.5 }) 6 | .Tooltip(t => t 7 | .CustomizeTooltip("speedGauge_tooltip_customizeTooltip") 8 | .Enabled(true) 9 | ) 10 | .Label(l => l.Visible(false)) 11 | ) 12 | 13 | 18 | -------------------------------------------------------------------------------- /WidgetGallery/ViewModels/ValidationViewModel.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | 5 | namespace WidgetGallery.ViewModels { 6 | public class ValidationViewModel { 7 | public string Name { get; set; } 8 | public DateTime BirthDate { get; set; } 9 | public string Country { get; set; } 10 | public string City { get; set; } 11 | public int ZipCode { get; set; } 12 | public string Address { get; set; } 13 | public string Phone { get; set; } 14 | public bool Agreement { get; set; } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Gauges/_HumidityLinearGauge.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().LinearGauge() 2 | .Title(t => t 3 | .Text("Humidity (%)") 4 | .Font(f => f.Size(16)) 5 | ) 6 | .Geometry(g => g.Orientation(Orientation.Vertical)) 7 | .Scale(s => s 8 | .StartValue(0) 9 | .EndValue(100) 10 | .TickInterval(10) 11 | ) 12 | .RangeContainer(c => c.BackgroundColor("#CACACA")) 13 | .ValueIndicator(i => i 14 | .Type(GaugeIndicatorType.Rhombus) 15 | .Color("#A4DDED") 16 | ) 17 | .Value(81) 18 | .Size(s => s.Height(450)) 19 | ) 20 | -------------------------------------------------------------------------------- /WidgetGallery/web.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /WidgetGallery/Program.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.IO; 4 | using System.Linq; 5 | using System.Threading.Tasks; 6 | using Microsoft.AspNetCore.Hosting; 7 | 8 | namespace WidgetGallery { 9 | public class Program { 10 | public static void Main(string[] args) { 11 | var host = new WebHostBuilder() 12 | .UseUrls("http://0.0.0.0:5555") 13 | .UseKestrel() 14 | .UseContentRoot(Directory.GetCurrentDirectory()) 15 | .UseIISIntegration() 16 | .UseStartup() 17 | .Build(); 18 | 19 | host.Run(); 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /WidgetGallery/Extensions.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Mvc.ModelBinding; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.Linq; 5 | using System.Text; 6 | using System.Threading.Tasks; 7 | 8 | namespace WidgetGallery { 9 | 10 | static class Extensions { 11 | 12 | public static string GetFullErrorMessage(this ModelStateDictionary modelState) { 13 | var messages = new List(); 14 | 15 | foreach(var entry in modelState) { 16 | foreach(var error in entry.Value.Errors) 17 | messages.Add(error.ErrorMessage); 18 | } 19 | 20 | return String.Join(" ", messages); 21 | } 22 | 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /WidgetGallery/wwwroot/SampleData/Copper.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "country": "Chile", 4 | "copper": 5700000 5 | }, 6 | { 7 | "country": "United States", 8 | "copper": 1220000 9 | }, 10 | { 11 | "country": "Peru", 12 | "copper": 1300000 13 | }, 14 | { 15 | "country": "China", 16 | "copper": 1650000 17 | }, 18 | { 19 | "country": "Australia", 20 | "copper": 990000 21 | }, 22 | { 23 | "country": "Russia", 24 | "copper": 930000 25 | }, 26 | { 27 | "country": "DR Congo", 28 | "copper": 900000 29 | }, 30 | { 31 | "country": "Finland", 32 | "copper": 119000 33 | } 34 | ] -------------------------------------------------------------------------------- /WidgetGallery/wwwroot/dx.aspnet.mvc.js: -------------------------------------------------------------------------------- 1 | (function($, DX) { 2 | 3 | var ui = DX.ui; 4 | 5 | ui.setTemplateEngine("underscore"); 6 | 7 | $.extend(DX, { 8 | AspNet: { 9 | renderComponent: function(name, options) { 10 | var id = "dx-" + new DX.data.Guid(), 11 | templateRendered = ui.templateRendered; 12 | 13 | var render = function(_, container) { 14 | $("#" + id, container)[name](options); 15 | templateRendered.remove(render); 16 | }; 17 | 18 | templateRendered.add(render); 19 | 20 | return "
"; 21 | } 22 | } 23 | }); 24 | 25 | })(jQuery, DevExpress); -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Charts/_PolarChart.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().PolarChart() 2 | .Title("Wind Rose, Philadelphia PA") 3 | .DataSource("~/SampleData/Wind.json") 4 | .CommonSeriesSettings(s => s.Type(PolarChartSeriesType.Stackedbar)) 5 | .Legend(l => l.Visible(true)) 6 | .ArgumentAxis(a => a 7 | .DiscreteAxisDivisionMode(DiscreteAxisDivisionMode.CrossLabels) 8 | .FirstPointOnStartAngle(true) 9 | ) 10 | .ValueAxis(a => a.ValueMarginsEnabled(false)) 11 | .Series(series => { 12 | series.Add().ValueField("val1").Name("1.3-4 m/s"); 13 | series.Add().ValueField("val2").Name("4-8 m/s"); 14 | series.Add().ValueField("val3").Name("8-13 m/s"); 15 | series.Add().ValueField("val4").Name("13-19 m/s"); 16 | }) 17 | ) 18 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Gauges/_RangesLinearGauge.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().LinearGauge() 2 | .Scale(s => s 3 | .StartValue(0) 4 | .EndValue(100) 5 | .TickInterval(10)) 6 | .Value(75) 7 | .RangeContainer(c => c 8 | .Ranges(ranges => { 9 | 10 | ranges.Add() 11 | .StartValue(0) 12 | .EndValue(20) 13 | .Color("#CE2029"); 14 | 15 | ranges.Add() 16 | .StartValue(20) 17 | .EndValue(50) 18 | .Color("#FFD700"); 19 | 20 | ranges.Add() 21 | .StartValue(50) 22 | .EndValue(100) 23 | .Color("#228B22"); 24 | }) 25 | ) 26 | .ValueIndicator(i => i.Type(GaugeIndicatorType.RangeBar)) 27 | ) 28 | -------------------------------------------------------------------------------- /WidgetGallery/Controllers/ListDataController.cs: -------------------------------------------------------------------------------- 1 | using DevExtreme.AspNet.Data; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.Linq; 5 | using Microsoft.AspNetCore.Mvc; 6 | using WidgetGallery.Models.Northwind; 7 | using Microsoft.EntityFrameworkCore; 8 | 9 | namespace WidgetGallery.Controllers { 10 | 11 | [Route("api/[controller]/[action]")] 12 | public class ListDataController : Controller { 13 | NorthwindContext _nwind; 14 | 15 | public ListDataController(NorthwindContext nwind) { 16 | _nwind = nwind; 17 | } 18 | 19 | [HttpGet] 20 | public object Get(DataSourceLoadOptions loadOptions) { 21 | return DataSourceLoader.Load(_nwind.Products.Include(p => p.Category), loadOptions); 22 | } 23 | 24 | } 25 | 26 | } 27 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Gauges/_TemperatureLinearGauge.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().LinearGauge() 2 | .Title(t => t 3 | .Text("Temperature (°C)") 4 | .Font(f => f.Size(16)) 5 | ) 6 | .Geometry(g => g.Orientation(Orientation.Vertical)) 7 | .Scale(s => s 8 | .StartValue(-40) 9 | .EndValue(40) 10 | .TickInterval(40) 11 | ) 12 | .RangeContainer(c => c 13 | .BackgroundColor("none") 14 | .Ranges(ranges => { 15 | 16 | ranges.Add() 17 | .StartValue(-40) 18 | .EndValue(0) 19 | .Color("#679EC5"); 20 | 21 | ranges.Add() 22 | .StartValue(0) 23 | .EndValue(40); 24 | 25 | }) 26 | ) 27 | .Value(10) 28 | .Size(s => s.Height(450)) 29 | ) 30 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Navigation.cshtml: -------------------------------------------------------------------------------- 1 |
2 |
3 | @Html.Partial("Navigation/_Menu") 4 |
5 |
6 | 7 |
8 |
9 | @Html.Partial("Navigation/_TreeView") 10 |
11 |
12 |
13 |
14 | @Html.Partial("Navigation/_Toolbar") 15 |
16 |
17 |
18 |
19 | @Html.Partial("Navigation/_TabPanel") 20 |
21 |
22 |
23 | 24 |
25 | @Html.Partial("Navigation/_Accordion") 26 |
27 |
28 | -------------------------------------------------------------------------------- /WidgetGallery/Models/Northwind/Shipper.cs: -------------------------------------------------------------------------------- 1 | using Newtonsoft.Json; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.ComponentModel.DataAnnotations; 5 | using System.ComponentModel.DataAnnotations.Schema; 6 | 7 | namespace WidgetGallery.Models.Northwind { 8 | 9 | public partial class Shipper { 10 | public Shipper() { 11 | Orders = new HashSet(); 12 | } 13 | 14 | [Column("ShipperID")] 15 | [Key] 16 | public int ShipperID { get; set; } 17 | 18 | [Required] 19 | [MaxLength(40)] 20 | public string CompanyName { get; set; } 21 | 22 | [MaxLength(24)] 23 | public string Phone { get; set; } 24 | 25 | [InverseProperty("Shipper")] 26 | [JsonIgnore] 27 | public virtual ICollection Orders { get; set; } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Charts/_Chart.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().Chart() 2 | .Title("Sales By Category/Year") 3 | .DataSource(d => d.WebApi().Controller("ChartsData").LoadAction("SalesByCategoryYear")) 4 | .CommonSeriesSettings(s => s 5 | .ArgumentField("Category") 6 | .ValueField("Sales") 7 | .Type(SeriesType.Bar) 8 | ) 9 | .SeriesTemplate(t => t.NameField("Year")) 10 | .Legend(l => l 11 | .VerticalAlignment(VerticalEdge.Bottom) 12 | .HorizontalAlignment(HorizontalAlignment.Center) 13 | ) 14 | .ValueAxis(axisList => 15 | axisList.Add().Label(l => l.Format(Format.Currency)) 16 | ) 17 | .Size(s => s.Height(500)) 18 | .ZoomingMode(ChartManipulationMode.All) 19 | .Tooltip(t => t 20 | .Enabled(true) 21 | .Format(Format.Currency) 22 | .Font(f => f.Size(16)) 23 | ) 24 | ) 25 | -------------------------------------------------------------------------------- /WidgetGallery/Properties/launchSettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "iisSettings": { 3 | "windowsAuthentication": false, 4 | "anonymousAuthentication": true, 5 | "iisExpress": { 6 | "applicationUrl": "http://localhost:55555/", 7 | "sslPort": 0 8 | } 9 | }, 10 | "profiles": { 11 | "IIS Express": { 12 | "commandName": "IISExpress", 13 | "launchBrowser": true, 14 | "environmentVariables": { 15 | "ASPNETCORE_ENVIRONMENT": "Development" 16 | } 17 | }, 18 | "WidgetGallery": { 19 | "commandName": "Project", 20 | "launchBrowser": true, 21 | "launchUrl": "http://localhost:5555", 22 | "environmentVariables": { 23 | "ASPNETCORE_ENVIRONMENT": "Development" 24 | } 25 | 26 | } 27 | } 28 | } -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Navigation/_Accordion.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().Accordion() 2 | .Items(items => { 3 | 4 | items.Add() 5 | .Title("Beverages") 6 | .Option("id", 1); 7 | 8 | items.Add() 9 | .Title("Condiments") 10 | .Option("id", 2); 11 | 12 | items.Add() 13 | .Title("Confections") 14 | .Option("id", 3); 15 | 16 | items.Add() 17 | .Title("Dairy Products") 18 | .Option("id", 4); 19 | 20 | }) 21 | .ItemTemplate(@ 22 | @(Html.DevExtreme().List() 23 | .DataSource(d => d.WebApi() 24 | .Controller("NavigationData") 25 | .LoadAction("ProductsByCategory") 26 | .LoadParams(new { Id = new JS("id") })) 27 | .ItemTemplate("<%= name %>") 28 | ) 29 | ) 30 | ) 31 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/DataGridOData.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().DataGrid() 2 | .DataSource(d => d.OData() 3 | .Version(4) 4 | .Url("http://services.odata.org/V4/Northwind/Northwind.svc/Products") 5 | .JSONP(true) 6 | .Key("ProductID") 7 | .Expand("Category") 8 | ) 9 | .Columns(columns => { 10 | columns.Add().DataField("ProductName"); 11 | columns.Add().DataField("Category.CategoryName").Caption("Category"); 12 | columns.Add().DataField("UnitPrice").Format(f => f.Type(Format.Currency).Precision(2)); 13 | columns.Add().DataField("Discontinued"); 14 | }) 15 | .Paging(p => p.PageSize(10)) 16 | .FilterRow(f => f.Visible(true)) 17 | .Selection(s => s 18 | .Mode(SelectionMode.Multiple) 19 | .ShowCheckBoxesMode(GridSelectionShowCheckBoxesMode.Always) 20 | .AllowSelectAll(false) 21 | ) 22 | ) 23 | -------------------------------------------------------------------------------- /WidgetGallery/ViewModels/EditorsViewModel.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | 5 | namespace WidgetGallery.ViewModels { 6 | public class EditorsViewModel { 7 | 8 | public string Name { get; set; } 9 | public string Password { get; set; } 10 | public string Phone { get; set; } 11 | public string Extension { get; set; } 12 | public string Country { get; set; } 13 | public string Description { get; set; } 14 | public int Age { get; set; } 15 | public string Drink { get; set; } 16 | public string City { get; set; } 17 | public IEnumerable Colors { get; set; } 18 | public IEnumerable SelectedColors { get; set; } 19 | public string Color { get; set; } 20 | public DateTime Date { get; set; } 21 | public bool Accepted { get; set; } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Gauges/_RangesCircularGauge.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().CircularGauge() 2 | .Geometry(g => g 3 | .StartAngle(180) 4 | .EndAngle(0) 5 | ) 6 | .Scale(s => s 7 | .StartValue(0) 8 | .EndValue(100) 9 | .TickInterval(10) 10 | ) 11 | .Value(75) 12 | .RangeContainer(c => c 13 | .Ranges(ranges => { 14 | 15 | ranges.Add() 16 | .StartValue(0) 17 | .EndValue(20) 18 | .Color("#CE2029"); 19 | 20 | ranges.Add() 21 | .StartValue(20) 22 | .EndValue(50) 23 | .Color("#FFD700"); 24 | 25 | ranges.Add() 26 | .StartValue(50) 27 | .EndValue(100) 28 | .Color("#228B22"); 29 | }) 30 | ) 31 | .ValueIndicator(i => i.Type(GaugeIndicatorType.RangeBar)) 32 | ) 33 | -------------------------------------------------------------------------------- /WidgetGallery/Models/Northwind/Category.cs: -------------------------------------------------------------------------------- 1 | using Newtonsoft.Json; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.ComponentModel.DataAnnotations; 5 | using System.ComponentModel.DataAnnotations.Schema; 6 | 7 | namespace WidgetGallery.Models.Northwind { 8 | 9 | public partial class Category { 10 | public Category() { 11 | Products = new HashSet(); 12 | } 13 | 14 | [Column("CategoryID")] 15 | [Key] 16 | public int CategoryID { get; set; } 17 | 18 | [Required] 19 | [MaxLength(15)] 20 | public string CategoryName { get; set; } 21 | 22 | [Column(TypeName = "ntext")] 23 | public string Description { get; set; } 24 | 25 | [Column(TypeName = "image")] 26 | public byte[] Picture { get; set; } 27 | 28 | [JsonIgnore] 29 | [InverseProperty("Category")] 30 | public virtual ICollection Products { get; set; } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /WidgetGallery/Models/Northwind/Order_Detail.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.ComponentModel.DataAnnotations; 4 | using System.ComponentModel.DataAnnotations.Schema; 5 | 6 | namespace WidgetGallery.Models.Northwind { 7 | 8 | [Table("Order Details")] 9 | public partial class Order_Detail { 10 | [Column("OrderID")] 11 | public int OrderID { get; set; } 12 | 13 | [Column("ProductID")] 14 | public int ProductID { get; set; } 15 | 16 | [Column(TypeName = "money")] 17 | public decimal UnitPrice { get; set; } 18 | 19 | public short Quantity { get; set; } 20 | 21 | public float Discount { get; set; } 22 | 23 | [ForeignKey("OrderID")] 24 | [InverseProperty("Order_Details")] 25 | public virtual Order Order { get; set; } 26 | 27 | [ForeignKey("ProductID")] 28 | [InverseProperty("Order_Details")] 29 | public virtual Product Product { get; set; } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Gallery.cshtml: -------------------------------------------------------------------------------- 1 | @model WidgetGallery.ViewModels.GalleryViewModel 2 | 3 |
4 |
5 | @(Html.DevExtreme().Gallery() 6 | .DataSource(Model.Images) 7 | .Height(430) 8 | .Width(800) 9 | .Loop(true) 10 | .SelectedIndex(2) 11 | .ShowNavButtons(true) 12 | ) 13 |
14 |
15 | @(Html.DevExtreme().Gallery() 16 | .DataSource(Model.Images) 17 | .Height(120) 18 | .Width(800) 19 | .Loop(false) 20 | .ShowIndicator(false) 21 | .WrapAround(true) 22 | .SelectedIndex(1) 23 | .InitialItemWidth(144) 24 | .ShowNavButtons(false) 25 | .ItemTemplate(@ 26 | 27 | ) 28 | ) 29 |
30 | 31 |
32 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Navigation/_TabPanel.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().TabPanel() 2 | .Items(items => { 3 | 4 | items.Add() 5 | .Title("Beverages") 6 | .Icon("coffee") 7 | .Option("id", 1); 8 | 9 | items.Add() 10 | .Title("Condiments") 11 | .Icon("box") 12 | .Badge("12") 13 | .Option("id", 2); 14 | 15 | items.Add() 16 | .Title("Confections") 17 | .Icon("gift") 18 | .Option("id", 3); 19 | 20 | items.Add() 21 | .Title("Dairy Products") 22 | .Icon("food") 23 | .Option("id", 4); 24 | 25 | }) 26 | .ItemTemplate(@ 27 | @(Html.DevExtreme().List() 28 | .DataSource(d => d.WebApi() 29 | .Controller("NavigationData") 30 | .LoadAction("ProductsByCategory") 31 | .LoadParams(new { Id = new JS("id") })) 32 | .ItemTemplate("<%= name %>") 33 | ) 34 | ) 35 | .ShowNavButtons(true) 36 | ) 37 | -------------------------------------------------------------------------------- /WidgetGallery/Controllers/PivotGridDataController.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Net.Http; 5 | using Microsoft.AspNetCore.Mvc; 6 | using WidgetGallery.Models.Northwind; 7 | 8 | namespace WidgetGallery.Controllers { 9 | 10 | [Route("api/[controller]/[action]")] 11 | public class PivotGridDataController : Controller { 12 | NorthwindContext _nwind; 13 | 14 | public PivotGridDataController(NorthwindContext nwind) { 15 | _nwind = nwind; 16 | } 17 | 18 | [HttpGet] 19 | public object Get() { 20 | var q = from d in _nwind.Order_Details 21 | let p = d.Product 22 | let o = d.Order 23 | select new { 24 | o.OrderDate, 25 | p.ProductName, 26 | p.Category.CategoryName, 27 | Sum = d.Quantity * d.UnitPrice 28 | }; 29 | 30 | return q; 31 | } 32 | 33 | } 34 | 35 | } 36 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Gauges/_PressureLinearGauge.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().LinearGauge() 2 | .Title(t => t 3 | .Text("Barometric Pressure (mb)") 4 | .Font(f => f.Size(16)) 5 | ) 6 | .Geometry(g => g.Orientation(Orientation.Vertical)) 7 | .Scale(s => s 8 | .StartValue(900) 9 | .EndValue(1100) 10 | .CustomTicks(new double[] { 900, 1000, 1020, 1100 }) 11 | ) 12 | .RangeContainer(c => c 13 | .Ranges(ranges => { 14 | 15 | ranges.Add() 16 | .StartValue(900) 17 | .EndValue(1000) 18 | .Color("#679EC5"); 19 | 20 | ranges.Add() 21 | .StartValue(1000) 22 | .EndValue(1020) 23 | .Color("#A6C567"); 24 | 25 | ranges.Add() 26 | .StartValue(1020) 27 | .EndValue(1100) 28 | .Color("#E18E92"); 29 | }) 30 | ) 31 | .ValueIndicator(i => i 32 | .Type(GaugeIndicatorType.Circle) 33 | .Color("#E3A857") 34 | ) 35 | .Value(1002.1) 36 | .Size(s => s.Height(450)) 37 | ) 38 | -------------------------------------------------------------------------------- /WidgetGallery/WidgetGallery.xproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14.0 5 | $(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion) 6 | 7 | 8 | 9 | 5e632b97-d1c4-4031-b97c-e5fc5c4780d2 10 | WidgetGallery 11 | .\obj 12 | .\bin\ 13 | v4.5.2 14 | 15 | 16 | 2.0 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/PivotGrid.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().PivotGrid() 2 | .Height(500) 3 | .AllowExpandAll(true) 4 | .AllowSorting(true) 5 | .AllowSortingBySummary(true) 6 | .AllowFiltering(true) 7 | .DataSource(d => d 8 | .Fields(fields => { 9 | fields.Add().DataField("CategoryName") 10 | .Area(PivotGridArea.Row) 11 | .Width(120); 12 | 13 | fields.Add().DataField("ProductName") 14 | .Area(PivotGridArea.Row) 15 | .Width(150); 16 | 17 | fields.Add().DataField("OrderDate") 18 | .Area(PivotGridArea.Column) 19 | .DataType(PivotGridDataType.Date); 20 | 21 | fields.Add().DataField("Sum") 22 | .Caption("Total") 23 | .DataType(PivotGridDataType.Number) 24 | .SummaryType(SummaryType.Sum) 25 | .Format(Format.Currency) 26 | .Area(PivotGridArea.Data); 27 | }) 28 | .Store(s => s.WebApi().Controller("PivotGridData")) 29 | ) 30 | .FieldChooser(f => f.Layout(PivotGridFieldChooserLayout.Layout0)) 31 | .Scrolling(s => s.Mode(PivotGridScrollingMode.Virtual)) 32 | .FieldPanel(p => p.Visible(true).ShowFilterFields(false)) 33 | ) 34 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Gauges.cshtml: -------------------------------------------------------------------------------- 1 |
2 |
3 | @Html.Partial("Gauges/_DeviationsBarGauge") 4 |
5 |
6 | @Html.Partial("Gauges/_SpeedBarGauge") 7 |
8 |
9 | 10 |
11 |
12 |
13 |
14 | @Html.Partial("Gauges/_TemperatureLinearGauge") 15 |
16 |
17 | @Html.Partial("Gauges/_HumidityLinearGauge") 18 |
19 |
20 | @Html.Partial("Gauges/_PressureLinearGauge") 21 |
22 |
23 |
24 |
25 |
26 |
27 | @Html.Partial("Gauges/_SubvaluesLinearGauge") 28 |
29 |
30 | @Html.Partial("Gauges/_RangesLinearGauge") 31 |
32 |
33 |
34 |
35 | @Html.Partial("Gauges/_SubvaluesCircularGauge") 36 |
37 |
38 | @Html.Partial("Gauges/_RangesCircularGauge") 39 |
40 |
41 |
42 |
43 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Charts/_PieChart.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().PieChart() 2 | .Title("Sales by Category") 3 | .DataSource(d => d.WebApi().Controller("ChartsData").LoadAction("SalesByCategory")) 4 | .Type(PieChartType.Donut) 5 | .Size(s => s.Height(500)) 6 | .Series(series => { 7 | 8 | series.Add() 9 | .ArgumentField("Category") 10 | .ValueField("Count") 11 | .Label(l => l 12 | .Visible(true) 13 | .Position(PieChartLabelPosition.Inside) 14 | .BackgroundColor("rgba(0, 0, 0, 0)") 15 | ); 16 | 17 | series.Add() 18 | .ArgumentField("Category") 19 | .ValueField("Sales") 20 | .Label(l => l 21 | .Visible(true) 22 | .Format(Format.Currency) 23 | .Position(PieChartLabelPosition.Columns) 24 | .CustomizeText("pieChart_salesSerie_label_customizeText") 25 | .Connector(c => c 26 | .Visible(true) 27 | .Width(0.5) 28 | ) 29 | ); 30 | 31 | }) 32 | .Legend(l => l 33 | .VerticalAlignment(VerticalEdge.Bottom) 34 | .HorizontalAlignment(HorizontalAlignment.Center) 35 | ) 36 | ) 37 | 38 | 43 | -------------------------------------------------------------------------------- /WidgetGallery/Controllers/FileUploaderController.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.IO; 4 | using Microsoft.AspNetCore.Mvc; 5 | using Microsoft.AspNetCore.Hosting; 6 | 7 | namespace WidgetGallery.Controllers { 8 | 9 | [Route("api/[controller]/[action]")] 10 | public class FileUploaderController : Controller { 11 | IHostingEnvironment _hostingEnvironment; 12 | 13 | public FileUploaderController(IHostingEnvironment hostingEnvironment) { 14 | _hostingEnvironment = hostingEnvironment; 15 | } 16 | 17 | [HttpPost] 18 | public ActionResult Upload() { 19 | // Learn more on the functionality of the dxFileUploader widget at: 20 | // http://js.devexpress.com/Documentation/Guide/UI_Widgets/UI_Widgets_-_Deep_Dive/dxFileUploader/ 21 | 22 | var myFile = Request.Form.Files["myFile"]; 23 | var targetLocation = Path.Combine(_hostingEnvironment.WebRootPath, "uploads"); 24 | 25 | try { 26 | var path = Path.Combine(targetLocation, myFile.FileName); 27 | 28 | // Uncomment to save the file 29 | //using(var fileStream = System.IO.File.Create(path)) { 30 | // myFile.CopyTo(fileStream); 31 | //} 32 | } catch { 33 | Response.StatusCode = 400; 34 | } 35 | 36 | return new EmptyResult(); 37 | } 38 | } 39 | 40 | } 41 | -------------------------------------------------------------------------------- /WidgetGallery/Models/Northwind/Customer.cs: -------------------------------------------------------------------------------- 1 | using Newtonsoft.Json; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.ComponentModel.DataAnnotations; 5 | using System.ComponentModel.DataAnnotations.Schema; 6 | 7 | namespace WidgetGallery.Models.Northwind { 8 | 9 | public partial class Customer { 10 | public Customer() { 11 | Orders = new HashSet(); 12 | } 13 | 14 | [Column("CustomerID", TypeName = "nchar(5)")] 15 | [Key] 16 | public string CustomerID { get; set; } 17 | 18 | [Required] 19 | [MaxLength(40)] 20 | public string CompanyName { get; set; } 21 | 22 | [MaxLength(30)] 23 | public string ContactName { get; set; } 24 | 25 | [MaxLength(30)] 26 | public string ContactTitle { get; set; } 27 | 28 | [MaxLength(60)] 29 | public string Address { get; set; } 30 | 31 | [MaxLength(15)] 32 | public string City { get; set; } 33 | 34 | [MaxLength(15)] 35 | public string Region { get; set; } 36 | 37 | [MaxLength(10)] 38 | public string PostalCode { get; set; } 39 | 40 | [MaxLength(15)] 41 | public string Country { get; set; } 42 | 43 | [MaxLength(24)] 44 | public string Phone { get; set; } 45 | 46 | [MaxLength(24)] 47 | public string Fax { get; set; } 48 | 49 | [JsonIgnore] 50 | [InverseProperty("Customer")] 51 | public virtual ICollection Orders { get; set; } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/GeoMap.cshtml: -------------------------------------------------------------------------------- 1 |
2 |
3 | @(Html.DevExtreme().Map() 4 | .Key(k => k.Google("AIzaSyDk2m6n8ICK7FSmTHBLlapAWF3epiDdkHE")) 5 | .ID("map") 6 | .Provider(GeoMapProvider.Google) 7 | .Height(400) 8 | .Width("100%") 9 | .Zoom(14) 10 | .Controls(true) 11 | .Center(40.753889, -73.981389) 12 | .Markers(markers => { 13 | markers.Add().Coordinates(40.753889, -73.981389); 14 | }) 15 | .Routes(routes => { 16 | routes.Add().Locations(locations => { 17 | locations.Add().Coordinates(40.753889, -73.981389); 18 | locations.Add().Coordinates(40.753889, -73.95); 19 | }); 20 | }) 21 | ) 22 |
23 |
24 |
25 |
26 | @(Html.DevExtreme().SelectBox() 27 | .Items(items => { 28 | items.Add().Text("Google").Option("value", "google"); 29 | items.Add().Text("Bing").Option("value", "bing"); 30 | }) 31 | .ValueExpr("value") 32 | .DisplayExpr("text") 33 | .Value("google") 34 | .OnValueChanged("selectBox_valueChanged") 35 | ) 36 |
37 |
38 | 39 | 44 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/List.cshtml: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | @(Html.DevExtreme().List() 5 | .ItemTemplate(@ 6 |
<%= ProductName %>
7 |
<%= Globalize.formatCurrency(UnitPrice, "USD") %>
8 | ) 9 | .DataSource(d => d.WebApi().Controller("ListData")) 10 | .DataSourceOptions(d => d 11 | .PageSize(1) 12 | .Sort("ProductName") 13 | .Group("Category.CategoryName") 14 | .Filter("[ 'UnitPrice', '>', '15' ]") 15 | ) 16 | .Grouped(true) 17 | .CollapsibleGroups(true) 18 | .ItemDeleteMode(ListItemDeleteMode.SlideItem) 19 | .SelectionMode(ListSelectionMode.Multiple) 20 | .ShowSelectionControls(true) 21 | .PageLoadMode(ListPageLoadMode.ScrollBottom) 22 | .Height(600) 23 | ) 24 |
25 |
26 | @(Html.DevExtreme().List() 27 | .ItemTemplate(@ 28 |
<%= ProductName %>
29 | ) 30 | .DataSource(d => d.WebApi().Controller("ListData")) 31 | .DataSourceOptions(d => d 32 | .PageSize(20) 33 | .Sort("ProductName") 34 | ) 35 | .AllowItemReordering(true) 36 | .PullRefreshEnabled(true) 37 | .PageLoadMode(ListPageLoadMode.ScrollBottom) 38 | .Height(600) 39 | ) 40 |
41 |
42 | -------------------------------------------------------------------------------- /WidgetGallery.sln: -------------------------------------------------------------------------------- 1 | 2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio 14 4 | VisualStudioVersion = 14.0.25420.1 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{7A4718A2-7E6E-489B-8D91-609869DDDFCE}" 7 | EndProject 8 | Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{4ECC3795-C8E6-4A12-AAD5-625ECFD6F2DC}" 9 | ProjectSection(SolutionItems) = preProject 10 | global.json = global.json 11 | EndProjectSection 12 | EndProject 13 | Project("{8BB2217D-0F2D-49D1-97BC-3654ED321F3B}") = "WidgetGallery", "WidgetGallery\WidgetGallery.xproj", "{5E632B97-D1C4-4031-B97C-E5FC5C4780D2}" 14 | EndProject 15 | Global 16 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 17 | Debug|Any CPU = Debug|Any CPU 18 | Release|Any CPU = Release|Any CPU 19 | EndGlobalSection 20 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 21 | {5E632B97-D1C4-4031-B97C-E5FC5C4780D2}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 22 | {5E632B97-D1C4-4031-B97C-E5FC5C4780D2}.Debug|Any CPU.Build.0 = Debug|Any CPU 23 | {5E632B97-D1C4-4031-B97C-E5FC5C4780D2}.Release|Any CPU.ActiveCfg = Release|Any CPU 24 | {5E632B97-D1C4-4031-B97C-E5FC5C4780D2}.Release|Any CPU.Build.0 = Release|Any CPU 25 | EndGlobalSection 26 | GlobalSection(SolutionProperties) = preSolution 27 | HideSolutionNode = FALSE 28 | EndGlobalSection 29 | GlobalSection(NestedProjects) = preSolution 30 | {5E632B97-D1C4-4031-B97C-E5FC5C4780D2} = {7A4718A2-7E6E-489B-8D91-609869DDDFCE} 31 | EndGlobalSection 32 | EndGlobal 33 | -------------------------------------------------------------------------------- /WidgetGallery/Models/Northwind/Supplier.cs: -------------------------------------------------------------------------------- 1 | using Newtonsoft.Json; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.ComponentModel.DataAnnotations; 5 | using System.ComponentModel.DataAnnotations.Schema; 6 | 7 | namespace WidgetGallery.Models.Northwind { 8 | 9 | public partial class Supplier { 10 | public Supplier() { 11 | Products = new HashSet(); 12 | } 13 | 14 | [Column("SupplierID")] 15 | [Key] 16 | public int SupplierID { get; set; } 17 | 18 | [Required] 19 | [MaxLength(40)] 20 | public string CompanyName { get; set; } 21 | 22 | [MaxLength(30)] 23 | public string ContactName { get; set; } 24 | 25 | [MaxLength(30)] 26 | public string ContactTitle { get; set; } 27 | 28 | [MaxLength(60)] 29 | public string Address { get; set; } 30 | 31 | [MaxLength(15)] 32 | public string City { get; set; } 33 | 34 | [MaxLength(15)] 35 | public string Region { get; set; } 36 | 37 | [MaxLength(10)] 38 | public string PostalCode { get; set; } 39 | 40 | [MaxLength(15)] 41 | public string Country { get; set; } 42 | 43 | [MaxLength(24)] 44 | public string Phone { get; set; } 45 | 46 | [MaxLength(24)] 47 | public string Fax { get; set; } 48 | 49 | [Column(TypeName = "ntext")] 50 | public string HomePage { get; set; } 51 | 52 | [InverseProperty("Supplier")] 53 | [JsonIgnore] 54 | public virtual ICollection Products { get; set; } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /WidgetGallery/Models/Northwind/Product.cs: -------------------------------------------------------------------------------- 1 | using Newtonsoft.Json; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.ComponentModel.DataAnnotations; 5 | using System.ComponentModel.DataAnnotations.Schema; 6 | 7 | namespace WidgetGallery.Models.Northwind { 8 | 9 | public partial class Product { 10 | public Product() { 11 | Order_Details = new HashSet(); 12 | } 13 | 14 | [Column("ProductID")] 15 | [Key] 16 | public int ProductID { get; set; } 17 | 18 | [Required] 19 | [MaxLength(40)] 20 | public string ProductName { get; set; } 21 | 22 | [Column("SupplierID")] 23 | public int? SupplierID { get; set; } 24 | 25 | [Column("CategoryID")] 26 | public int? CategoryID { get; set; } 27 | 28 | [MaxLength(20)] 29 | public string QuantityPerUnit { get; set; } 30 | 31 | [Column(TypeName = "money")] 32 | public decimal? UnitPrice { get; set; } 33 | 34 | public short? UnitsInStock { get; set; } 35 | 36 | public short? UnitsOnOrder { get; set; } 37 | 38 | public short? ReorderLevel { get; set; } 39 | 40 | public bool Discontinued { get; set; } 41 | 42 | [ForeignKey("CategoryID")] 43 | [InverseProperty("Products")] 44 | public virtual Category Category { get; set; } 45 | 46 | [JsonIgnore] 47 | [InverseProperty("Product")] 48 | public virtual ICollection Order_Details { get; set; } 49 | 50 | [ForeignKey("SupplierID")] 51 | [InverseProperty("Products")] 52 | public virtual Supplier Supplier { get; set; } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Navigation/_Toolbar.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().Toolbar() 2 | 3 | .Items(items => { 4 | 5 | items.Add() 6 | .Widget(w => w 7 | .Button() 8 | .Type(ButtonType.Back) 9 | .Text("Go back") 10 | ) 11 | .Location(ToolbarItemLocation.Before); 12 | 13 | items.Add() 14 | .Text("ToolBar") 15 | .Location(ToolbarItemLocation.Center); 16 | 17 | items.Add() 18 | .Widget(w => w.Button().Text("Add")) 19 | .Location(ToolbarItemLocation.After) 20 | .LocateInMenu(ToolbarItemLocateInMenuMode.Always); 21 | 22 | items.Add() 23 | .Widget(w => w.Button().Text("Edit")) 24 | .Location(ToolbarItemLocation.After) 25 | .LocateInMenu(ToolbarItemLocateInMenuMode.Always); 26 | 27 | items.Add() 28 | .Widget(w => w.Button().Text("Remove")) 29 | .Location(ToolbarItemLocation.After) 30 | .LocateInMenu(ToolbarItemLocateInMenuMode.Always); 31 | 32 | items.Add() 33 | .Widget(w => w 34 | .Button() 35 | .Type(ButtonType.Normal) 36 | .Icon("search") 37 | .Hint("Search") 38 | ) 39 | .Location(ToolbarItemLocation.After); 40 | 41 | items.Add() 42 | .Widget(w => w 43 | .Button() 44 | .Type(ButtonType.Normal) 45 | .Icon("favorites") 46 | .Hint("Favorites") 47 | ) 48 | .Location(ToolbarItemLocation.After); 49 | }) 50 | ) 51 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Scheduler.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().Scheduler() 2 | .DataSource(d => d.WebApi() 3 | .Controller("SchedulerData") 4 | .LoadAction("Appointments") 5 | .Key("OrderID") 6 | ) 7 | .StartDateExpr("OrderDate") 8 | .EndDateExpr("ShippedDate") 9 | .TextExpr("CustomerName") 10 | .RemoteFiltering(true) 11 | .Groups(new [] { "ShipVia" }) 12 | .Resources(res => { 13 | res.Add() 14 | .FieldExpr("ShipVia") 15 | .Label("Shipper") 16 | .AllowMultiple(false) 17 | .DataSource(x => x.WebApi() 18 | .Controller("SchedulerData") 19 | .LoadAction("Resources") 20 | ); 21 | }) 22 | .RecurrenceRuleExpr("") 23 | .CurrentDate(new DateTime(1997, 7, 4)) 24 | .Views(new SchedulerView[] { 25 | SchedulerView.Month, 26 | SchedulerView.Agenda 27 | }) 28 | .CurrentView(SchedulerView.Month) 29 | .Editing(e => e.AllowAdding(false).AllowDeleting(false)) 30 | .OnAppointmentFormCreated("scheduler_appointmentFormCreated") 31 | .Height(600) 32 | ) 33 | 34 | 48 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/VectorMap.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().VectorMap() 2 | .Layers(layers => { 3 | 4 | layers.Add() 5 | .Name("map") 6 | .DataSource(new JS("DevExpress.viz.map.sources.world")) 7 | .Palette(VizPalette.Violet) 8 | .ColorGroupingField("pop_est") 9 | .ColorGroups(new double[] { 0, 10E+6, 50E+6, 100E+6, 500E+6, 2000E+6 }) 10 | .Label(b => b 11 | .DataField("name") 12 | .Enabled(true) 13 | ); 14 | 15 | layers.Add() 16 | .Name("markers") 17 | .DataSource("~/SampleData/VectorMap.json") 18 | .ElementType(VectorMapLayerElementType.Bubble) 19 | .HoverEnabled(false) 20 | .BorderColor("white") 21 | .BorderWidth(5) 22 | .SizeGroups(new double[] { 0, 8000, 10000, 50000 }) 23 | .DataField("value"); 24 | 25 | }) 26 | .Size(s => s.Height(600)) 27 | .Tooltip(t => t 28 | .Enabled(true) 29 | .CustomizeTooltip("vectorMap_tooltip_customizeTooltip") 30 | ) 31 | .Legends(legends => { 32 | 33 | legends.Add() 34 | .Source(s => s 35 | .Layer("markers") 36 | .Grouping("size") 37 | ) 38 | .MarkerShape(VectorMapMarkerShape.Circle) 39 | .CustomizeText("vectorMap_markersLegend_customizeText"); 40 | 41 | }) 42 | .ZoomFactor(1.5) 43 | .Bounds(new double[] { -180, 85, 180, -75 }) 44 | ) 45 | 46 | 55 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/SparklinesBullets.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().DataGrid() 2 | .DataSource(d => d.WebApi().Controller("GridSparklineData")) 3 | .Columns(columns => { 4 | 5 | columns.Add() 6 | .DataField("CompanyName"); 7 | 8 | columns.Add() 9 | .Caption("Sales") 10 | .AllowGrouping(false) 11 | .AllowSorting(false) 12 | .CellTemplate(@ 13 | 14 | @(Html.DevExtreme().Sparkline() 15 | .ArgumentField("Month") 16 | .ValueField("Sum") 17 | .Type(SparklineType.StepArea) 18 | .ShowMinMax(true) 19 | .ShowFirstLast(true) 20 | .Tooltip(t => t.ZIndex(2)) 21 | .DataSource(d => d.WebApi() 22 | .Controller("GridSparklineData") 23 | .LoadAction("Sparkline") 24 | .LoadParams(new { customerID = new JS("data.CustomerID") }) 25 | ) 26 | ) 27 | 28 | ); 29 | 30 | columns.Add() 31 | .DataField("SumOfSales") 32 | .AllowGrouping(false) 33 | .SortIndex(0) 34 | .SortOrder(SortOrder.Desc) 35 | .CellTemplate(@ 36 | 37 | @(Html.DevExtreme().Bullet() 38 | .ShowZeroLevel(true) 39 | .ShowTarget(true) 40 | .Value(new JS("value")) 41 | .StartScaleValue(0) 42 | .EndScaleValue(50000) 43 | .Tooltip(t => t 44 | .Enabled(false) 45 | ) 46 | ) 47 | 48 | ); 49 | }) 50 | .Height(500) 51 | .Scrolling(s => s.Mode(GridScrollingMode.Virtual)) 52 | ) 53 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Charts/_StockChart.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().Chart() 2 | .Title("Stock Price") 3 | .DataSource("~/SampleData/Stock.json") 4 | .Panes(panes => { 5 | panes.Add().Name("stock"); 6 | panes.Add().Name("chart"); 7 | }) 8 | .Palette(VizPalette.Pastel) 9 | .ValueAxis(axisList => { 10 | axisList.Add() 11 | .TickInterval(1) 12 | .Title("USD") 13 | .Label(l => l 14 | .Format(f => f.Type(Format.Currency).Precision(1)) 15 | ); 16 | }) 17 | .ArgumentAxis(a => a 18 | .ArgumentType(ChartDataType.DateTime) 19 | .Label(l => l.Format(Format.ShortDate)) 20 | ) 21 | .Tooltip(t => t 22 | .Enabled(true) 23 | .CustomizeTooltip("stockChart_tooltip_customizeTooltip") 24 | ) 25 | .Series(series => { 26 | 27 | series.Add() 28 | .Name("Dell") 29 | .OpenValueField("o") 30 | .CloseValueField("c") 31 | .HighValueField("h") 32 | .LowValueField("l") 33 | .Reduction(r => r.Color("red")) 34 | .Pane("stock") 35 | .Type(SeriesType.Candlestick); 36 | 37 | series.Add() 38 | .Name("Dell High") 39 | .ValueField("h") 40 | .ArgumentField("date") 41 | .Pane("chart") 42 | .Point(p => p.Visible(false)) 43 | .Type(SeriesType.Line); 44 | 45 | series.Add() 46 | .Name("Dell Low") 47 | .ValueField("l") 48 | .ArgumentField("date") 49 | .Pane("chart") 50 | .Point(p => p.Visible(false)) 51 | .Type(SeriesType.Line); 52 | }) 53 | ) 54 | 55 | 66 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Shared/_Layout.cshtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DevExtreme ASP.NET MVC Wrappers 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 |
38 |
39 |

DevExtreme ASP.NET MVC Wrappers

40 |
41 |
42 |
43 |
44 | @Html.Partial("_LayoutNavigation") 45 |
46 |
47 | @RenderBody() 48 |
49 |
50 |
51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /WidgetGallery/Models/Northwind/Employee.cs: -------------------------------------------------------------------------------- 1 | using Newtonsoft.Json; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.ComponentModel.DataAnnotations; 5 | using System.ComponentModel.DataAnnotations.Schema; 6 | 7 | namespace WidgetGallery.Models.Northwind { 8 | 9 | public partial class Employee { 10 | public Employee() { 11 | Orders = new HashSet(); 12 | } 13 | 14 | [Column("EmployeeID")] 15 | [Key] 16 | public int EmployeeID { get; set; } 17 | 18 | [Required] 19 | [MaxLength(20)] 20 | public string LastName { get; set; } 21 | 22 | [Required] 23 | [MaxLength(10)] 24 | public string FirstName { get; set; } 25 | 26 | [MaxLength(30)] 27 | public string Title { get; set; } 28 | 29 | [MaxLength(25)] 30 | public string TitleOfCourtesy { get; set; } 31 | 32 | [Column(TypeName = "datetime")] 33 | public DateTime? BirthDate { get; set; } 34 | 35 | [Column(TypeName = "datetime")] 36 | public DateTime? HireDate { get; set; } 37 | 38 | [MaxLength(60)] 39 | public string Address { get; set; } 40 | 41 | [MaxLength(15)] 42 | public string City { get; set; } 43 | 44 | [MaxLength(15)] 45 | public string Region { get; set; } 46 | 47 | [MaxLength(10)] 48 | public string PostalCode { get; set; } 49 | 50 | [MaxLength(15)] 51 | public string Country { get; set; } 52 | 53 | [MaxLength(24)] 54 | public string HomePhone { get; set; } 55 | 56 | [MaxLength(4)] 57 | public string Extension { get; set; } 58 | 59 | [JsonIgnore] 60 | [Column(TypeName = "image")] 61 | public byte[] Photo { get; set; } 62 | 63 | [Column(TypeName = "ntext")] 64 | public string Notes { get; set; } 65 | 66 | [JsonIgnore] 67 | public int? ReportsTo { get; set; } 68 | 69 | [MaxLength(255)] 70 | public string PhotoPath { get; set; } 71 | 72 | [JsonIgnore] 73 | [InverseProperty("Employee")] 74 | public virtual ICollection Orders { get; set; } 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /WidgetGallery/Models/Northwind/Order.cs: -------------------------------------------------------------------------------- 1 | using Newtonsoft.Json; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.ComponentModel.DataAnnotations; 5 | using System.ComponentModel.DataAnnotations.Schema; 6 | 7 | namespace WidgetGallery.Models.Northwind { 8 | 9 | public partial class Order { 10 | public Order() { 11 | Order_Details = new HashSet(); 12 | } 13 | 14 | [Column("OrderID")] 15 | [Key] 16 | public int OrderID { get; set; } 17 | 18 | [Column("CustomerID", TypeName = "nchar(5)")] 19 | public string CustomerID { get; set; } 20 | 21 | [Column("EmployeeID")] 22 | public int? EmployeeID { get; set; } 23 | 24 | [Column(TypeName = "datetime")] 25 | public DateTime? OrderDate { get; set; } 26 | 27 | [Column(TypeName = "datetime")] 28 | public DateTime? RequiredDate { get; set; } 29 | 30 | [Column(TypeName = "datetime")] 31 | public DateTime? ShippedDate { get; set; } 32 | 33 | public int? ShipVia { get; set; } 34 | 35 | [Column(TypeName = "money")] 36 | public decimal? Freight { get; set; } 37 | 38 | [MaxLength(40)] 39 | public string ShipName { get; set; } 40 | 41 | [MaxLength(60)] 42 | public string ShipAddress { get; set; } 43 | 44 | [MaxLength(15)] 45 | public string ShipCity { get; set; } 46 | 47 | [MaxLength(15)] 48 | public string ShipRegion { get; set; } 49 | 50 | [MaxLength(10)] 51 | public string ShipPostalCode { get; set; } 52 | 53 | [MaxLength(15)] 54 | public string ShipCountry { get; set; } 55 | 56 | [ForeignKey("CustomerID")] 57 | [InverseProperty("Orders")] 58 | public virtual Customer Customer { get; set; } 59 | 60 | [ForeignKey("EmployeeID")] 61 | [InverseProperty("Orders")] 62 | public virtual Employee Employee { get; set; } 63 | 64 | [JsonIgnore] 65 | [InverseProperty("Order")] 66 | public virtual ICollection Order_Details { get; set; } 67 | 68 | [ForeignKey("ShipVia")] 69 | [InverseProperty("Orders")] 70 | public virtual Shipper Shipper { get; set; } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /WidgetGallery/Controllers/SchedulerDataController.cs: -------------------------------------------------------------------------------- 1 | using DevExtreme.AspNet.Data; 2 | using Newtonsoft.Json; 3 | using Newtonsoft.Json.Linq; 4 | using System; 5 | using System.Collections.Generic; 6 | using System.Linq; 7 | using Microsoft.AspNetCore.Mvc; 8 | using WidgetGallery.Models; 9 | using WidgetGallery.Models.Northwind; 10 | 11 | namespace WidgetGallery.Controllers { 12 | 13 | [Route("api/[controller]/[action]")] 14 | public class SchedulerDataController : Controller { 15 | NorthwindContext _nwind; 16 | 17 | public SchedulerDataController(NorthwindContext nwind) { 18 | _nwind = nwind; 19 | } 20 | 21 | [HttpGet] 22 | public object Appointments(DataSourceLoadOptions loadOptions) { 23 | var q = from o in _nwind.Orders 24 | where o.EmployeeID == 7 25 | select new { 26 | OrderDate = o.OrderDate, 27 | ShippedDate = o.ShippedDate, 28 | CustomerName = o.Customer.CompanyName, 29 | ShipVia = o.ShipVia, 30 | OrderID = o.OrderID 31 | }; 32 | 33 | return DataSourceLoader.Load(q, loadOptions); 34 | } 35 | 36 | [HttpGet] 37 | public object Resources() { 38 | var list = (from s in _nwind.Shippers 39 | select new SchedulerResource { 40 | ID = s.ShipperID, 41 | Text = s.CompanyName 42 | }) 43 | .ToArray(); 44 | 45 | list[0].Color = "#cb6bb2"; 46 | list[1].Color = "#56ca85"; 47 | list[2].Color = "#1e90ff"; 48 | 49 | return list; 50 | } 51 | 52 | [HttpPut] 53 | public ActionResult Put(int key, string values) { 54 | var valuesObj = JsonConvert.DeserializeObject(values); 55 | 56 | var order = _nwind.Orders.First(o => o.OrderID == key); 57 | order.OrderDate = (DateTime)valuesObj["orderDate"]; 58 | order.ShippedDate = (DateTime)valuesObj["shippedDate"]; 59 | order.ShipVia = (int)valuesObj["shipVia"]; 60 | 61 | if(!TryValidateModel(order)) 62 | return BadRequest(ModelState.GetFullErrorMessage()); 63 | 64 | _nwind.SaveChanges(); 65 | 66 | return Ok(); 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /WidgetGallery/wwwroot/SampleData/Wind.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "arg": "N", 4 | "val1": 0.7, 5 | "val2": 1.7, 6 | "val3": 1.8, 7 | "val4": 0.8 8 | }, 9 | { 10 | "arg": "NNE", 11 | "val1": 0.1, 12 | "val2": 0.6, 13 | "val3": 0.1, 14 | "val4": 0 15 | }, 16 | { 17 | "arg": "NE", 18 | "val1": 0.3, 19 | "val2": 0.8, 20 | "val3": 0.1, 21 | "val4": 0 22 | }, 23 | { 24 | "arg": "ENE", 25 | "val1": 0.3, 26 | "val2": 0.7, 27 | "val3": 0.1, 28 | "val4": 0 29 | }, 30 | { 31 | "arg": "E", 32 | "val1": 0.7, 33 | "val2": 3.2, 34 | "val3": 2.5, 35 | "val4": 0 36 | }, 37 | { 38 | "arg": "ESE", 39 | "val1": 0.8, 40 | "val2": 1.5, 41 | "val3": 0.3, 42 | "val4": 0 43 | }, 44 | { 45 | "arg": "SE", 46 | "val1": 0.3, 47 | "val2": 1.3, 48 | "val3": 0.4, 49 | "val4": 0 50 | }, 51 | { 52 | "arg": "SSE", 53 | "val1": 0.1, 54 | "val2": 2.4, 55 | "val3": 0.3, 56 | "val4": 0 57 | }, 58 | { 59 | "arg": "S", 60 | "val1": 1.1, 61 | "val2": 4.2, 62 | "val3": 2.2, 63 | "val4": 0 64 | }, 65 | { 66 | "arg": "SSW", 67 | "val1": 0.6, 68 | "val2": 3.6, 69 | "val3": 3.5, 70 | "val4": 0.4 71 | }, 72 | { 73 | "arg": "SW", 74 | "val1": 0.8, 75 | "val2": 2.5, 76 | "val3": 5, 77 | "val4": 1.3 78 | }, 79 | { 80 | "arg": "WSW", 81 | "val1": 0.3, 82 | "val2": 2.6, 83 | "val3": 3.2, 84 | "val4": 0.4 85 | }, 86 | { 87 | "arg": "W", 88 | "val1": 0.6, 89 | "val2": 1.7, 90 | "val3": 2.6, 91 | "val4": 0.3 92 | }, 93 | { 94 | "arg": "WNW", 95 | "val1": 0.7, 96 | "val2": 2.5, 97 | "val3": 3.1, 98 | "val4": 0.3 99 | }, 100 | { 101 | "arg": "NW", 102 | "val1": 1, 103 | "val2": 3.2, 104 | "val3": 2.6, 105 | "val4": 0.8 106 | }, 107 | { 108 | "arg": "NNW", 109 | "val1": 0.6, 110 | "val2": 3.8, 111 | "val3": 4.3, 112 | "val4": 2.2 113 | } 114 | ] -------------------------------------------------------------------------------- /WidgetGallery/Controllers/GridSparklineDataController.cs: -------------------------------------------------------------------------------- 1 | using DevExtreme.AspNet.Data; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.Linq; 5 | using Microsoft.AspNetCore.Mvc; 6 | using Microsoft.EntityFrameworkCore; 7 | using WidgetGallery.Models.Northwind; 8 | 9 | namespace WidgetGallery.Controllers { 10 | 11 | [Route("api/[controller]/[action]")] 12 | public class GridSparklineDataController : Controller { 13 | NorthwindContext _nwind; 14 | 15 | public GridSparklineDataController(NorthwindContext nwind) { 16 | _nwind = nwind; 17 | } 18 | 19 | const int YEAR = 1997; 20 | 21 | [HttpGet] 22 | public object Get(DataSourceLoadOptions loadOptions) { 23 | var customers = _nwind.Customers.ToArray(); 24 | var orderDetails = _nwind.Order_Details.Include(d => d.Order).ToArray(); 25 | 26 | var query = from c in customers 27 | select new { 28 | c.CustomerID, 29 | c.CompanyName, 30 | SumOfSales = (decimal?)(from d in orderDetails 31 | where d.Order.CustomerID == c.CustomerID 32 | where d.Order.OrderDate.Value.Year == YEAR 33 | select d.Quantity * d.UnitPrice).Sum() 34 | }; 35 | 36 | return DataSourceLoader.Load(query, loadOptions); 37 | } 38 | 39 | [HttpGet] 40 | public object Sparkline(string customerID) { 41 | var salesPerMonth = Enumerable.Range(1, 12).ToDictionary(i => i, i => 0M); 42 | 43 | var salesQuery = from d in _nwind.Order_Details 44 | let date = d.Order.OrderDate.Value 45 | where d.Order.CustomerID == customerID && date.Year == YEAR 46 | select new { 47 | date.Month, 48 | Sum = d.Quantity * d.UnitPrice 49 | }; 50 | 51 | foreach(var i in salesQuery) 52 | salesPerMonth[i.Month] += i.Sum; 53 | 54 | return from i in salesPerMonth 55 | orderby i.Key 56 | select new { 57 | Month = i.Key, 58 | Sum = i.Value 59 | }; 60 | } 61 | 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/DataGrid.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().DataGrid() 2 | .Columns(columns => { 3 | columns.Add() 4 | .DataField("CustomerID") 5 | .Caption("Сustomer") 6 | .Lookup(lookup => lookup 7 | .DataSource(d => d.WebApi().Controller("GridData").LoadAction("CustomersLookup").Key("Value")) 8 | .ValueExpr("Value") 9 | .DisplayExpr("Text") 10 | ); 11 | 12 | columns.Add() 13 | .DataField("OrderDate") 14 | .DataType(GridColumnDataType.Date); 15 | 16 | columns.Add() 17 | .DataField("Freight") 18 | .HeaderFilter(f => f.GroupInterval(100)); 19 | 20 | columns.Add() 21 | .DataField("ShipCountry"); 22 | 23 | columns.Add() 24 | .DataField("ShipRegion"); 25 | 26 | columns.Add() 27 | .DataField("ShipVia") 28 | .Caption("Shipping Company") 29 | .Lookup(lookup => lookup 30 | .DataSource(d => d.WebApi().Controller("GridData").LoadAction("ShippersLookup").Key("Value")) 31 | .ValueExpr("Value") 32 | .DisplayExpr("Text") 33 | ); 34 | 35 | }) 36 | .DataSource(d => d.WebApi().Controller("GridData").Key("OrderID")) 37 | .FilterRow(f => f.Visible(true)) 38 | .HeaderFilter(f => f.Visible(true)) 39 | .GroupPanel(p => p.Visible(true)) 40 | .Scrolling(s => s.Mode(GridScrollingMode.Virtual)) 41 | .Height(600) 42 | .ShowBorders(true) 43 | .MasterDetail(md => md 44 | .Enabled(true) 45 | .Template(@ 46 | 47 | @(Html.DevExtreme().DataGrid() 48 | .DataSource(d => d.WebApi() 49 | .Controller("GridData") 50 | .LoadAction("OrderDetails") 51 | .LoadParams(new { orderID = new JS("data.OrderID") }) 52 | ) 53 | ) 54 | 55 | ) 56 | ) 57 | .Editing(e => e.AllowAdding(true).AllowDeleting(true).AllowUpdating(true)) 58 | .RemoteOperations(true) 59 | .Grouping(g => g.AutoExpandAll(false)) 60 | .Summary(s => s 61 | .TotalItems(totalItems => { 62 | totalItems.Add().Column("Freight").SummaryType(SummaryType.Sum); 63 | }) 64 | .GroupItems(groupItems => { 65 | groupItems.Add().Column("Freight").SummaryType(SummaryType.Sum); 66 | groupItems.Add().SummaryType(SummaryType.Count); 67 | }) 68 | ) 69 | ) 70 | -------------------------------------------------------------------------------- /WidgetGallery/Controllers/ChartsDataController.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using WidgetGallery.Models.Northwind; 5 | using Microsoft.AspNetCore.Mvc; 6 | 7 | namespace WidgetGallery.Controllers { 8 | 9 | [Route("api/[controller]/[action]")] 10 | public class ChartsDataController : Controller { 11 | NorthwindContext _nwind; 12 | 13 | public ChartsDataController(NorthwindContext nwind) { 14 | _nwind = nwind; 15 | } 16 | 17 | [HttpGet] 18 | public object SalesByCategoryYear() { 19 | var sales = from d in _nwind.Order_Details 20 | let year = d.Order.OrderDate.Value.Year 21 | let category = d.Product.Category.CategoryName 22 | orderby year, category 23 | group d by new { Year = year, Category = category } into g 24 | select new { 25 | g.Key.Year, 26 | g.Key.Category, 27 | Sales = g.Sum(d => d.Quantity * d.UnitPrice) 28 | }; 29 | 30 | return sales; 31 | } 32 | 33 | [HttpGet] 34 | public object SalesByCategory() { 35 | var catSales = from d in _nwind.Order_Details 36 | group d by d.Product.Category.CategoryName into g 37 | let sales = g.Sum(d => d.Quantity * d.UnitPrice) 38 | orderby sales descending 39 | select new { 40 | Category = g.Key, 41 | Sales = sales, 42 | Count = g.Count() 43 | }; 44 | 45 | return catSales; 46 | } 47 | 48 | [HttpGet] 49 | public object ShipsByMonth(string shipper) { 50 | var ships = from o in _nwind.Orders 51 | where o.Shipper != null 52 | orderby o.OrderDate 53 | group o by new DateTime(o.OrderDate.Value.Year, o.OrderDate.Value.Month, 1, 0, 0, 0) into g 54 | select new { 55 | Month = g.Key, 56 | Amount = g.Count(o => o.Shipper.CompanyName == shipper), 57 | TotalAmount = g.Count() 58 | }; 59 | 60 | return ships; 61 | } 62 | 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Overlays.cshtml: -------------------------------------------------------------------------------- 1 | @(Html.DevExtreme().Popup() 2 | .ID("popup") 3 | .Title("Orders") 4 | .CloseOnOutsideClick(true) 5 | .ContentTemplate(@ 6 | @(Html.DevExtreme().DataGrid() 7 | .DataSource(d => d.WebApi().Controller("GridData")) 8 | .Columns(columns => { 9 | columns.Add() 10 | .DataField("OrderDate") 11 | .DataType(GridColumnDataType.Date); 12 | columns.Add().DataField("ShipName"); 13 | columns.Add().DataField("ShipCountry"); 14 | columns.Add().DataField("ShipCity"); 15 | columns.Add().DataField("ShipAddress"); 16 | }) 17 | .Height("100%") 18 | ) 19 | ) 20 | ) 21 | 22 | @(Html.DevExtreme().LoadPanel() 23 | .ID("loadPanel") 24 | .CloseOnOutsideClick(true) 25 | ) 26 | 27 | @(Html.DevExtreme().Toast() 28 | .ID("toast") 29 | .Position(p => p 30 | .At(HorizontalAlignment.Center, VerticalAlignment.Top) 31 | .Offset(0, 50) 32 | ) 33 | .Message("This is a toast message") 34 | ) 35 | 36 | @(Html.DevExtreme().Popover() 37 | .ID("popover") 38 | .Target("#popoverButton") 39 | .Title("Details") 40 | .ShowTitle(true) 41 | .Width(300) 42 | .ContentTemplate(@Popover content.) 43 | ) 44 | 45 | @(Html.DevExtreme().Tooltip() 46 | .ID("tooltip") 47 | .Target("#tooltipButton") 48 | .Position(Position.Top) 49 | .ContentTemplate(@Tooltip text.) 50 | ) 51 | 52 |
53 | @Html.DevExtreme().Button().Text("Show Popup").OnClick("popupButton_click") 54 | @Html.DevExtreme().Button().Text("Show LoadPanel").OnClick("loadPanelButton_click") 55 | @Html.DevExtreme().Button().Text("Show Toast").OnClick("toastButton_click") 56 | @Html.DevExtreme().Button().ID("popoverButton").Text("Show Popover").OnClick("popoverButton_click") 57 | @Html.DevExtreme().Button().ID("tooltipButton").Text("Show Tooltip").OnClick("tooltipButton_click") 58 |
59 | 60 | 83 | -------------------------------------------------------------------------------- /WidgetGallery/project.json: -------------------------------------------------------------------------------- 1 | { 2 | 3 | "dependencies": { 4 | "Microsoft.NETCore.App": { 5 | "version": "1.0.0", 6 | "type": "platform" 7 | }, 8 | "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0", 9 | "Microsoft.AspNetCore.Server.Kestrel": "1.0.0", 10 | "Microsoft.AspNetCore.Diagnostics": "1.0.0", 11 | "Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore": "1.0.0", 12 | "Microsoft.AspNetCore.Mvc": "1.0.0", 13 | "Microsoft.AspNetCore.StaticFiles": "1.0.0", 14 | "Microsoft.AspNetCore.Razor.Tools": { 15 | "version": "1.0.0-preview2-final", 16 | "type": "build" 17 | }, 18 | "Microsoft.Extensions.Logging": "1.0.0", 19 | "Microsoft.Extensions.Logging.Console": "1.0.0", 20 | "Microsoft.Extensions.Logging.Debug": "1.0.0", 21 | "Microsoft.Extensions.Configuration.Json": "1.0.0", 22 | "Microsoft.EntityFrameworkCore": "1.0.0", 23 | "Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.0.0", 24 | "Microsoft.EntityFrameworkCore.Tools": { 25 | "version": "1.0.0-preview2-final", 26 | "type": "build" 27 | }, 28 | "Microsoft.EntityFrameworkCore.SqlServer": "1.0.0", 29 | "Microsoft.EntityFrameworkCore.SqlServer.Design": "1.0.0", 30 | "Microsoft.EntityFrameworkCore.Sqlite": "1.0.0", 31 | "DevExtreme.AspNet.Mvc": "16.1.5-*" 32 | }, 33 | 34 | "tools": { 35 | "Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview2-final", 36 | "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final", 37 | "Microsoft.EntityFrameworkCore.Tools": "1.0.0-preview2-final" 38 | }, 39 | 40 | "frameworks": { 41 | "netcoreapp1.0": { 42 | "imports": [ "dotnet" ] 43 | } 44 | }, 45 | 46 | "buildOptions": { 47 | "emitEntryPoint": true, 48 | "preserveCompilationContext": true, 49 | "define": [ 50 | "DB_SQLITE" 51 | //"DB_LOCALDB" 52 | ], 53 | "compile": { 54 | "exclude": [ "wwwroot" ] 55 | } 56 | }, 57 | 58 | "runtimeOptions": { 59 | "configProperties": { 60 | "System.GC.Server": true 61 | } 62 | }, 63 | 64 | "publishOptions": { 65 | "include": [ 66 | "wwwroot", 67 | "Views", 68 | "appsettings.json", 69 | "web.config" 70 | ] 71 | }, 72 | 73 | "scripts": { 74 | // Uncomment for LocalDB 75 | //"postcompile": [ 76 | // "cmd /c sqllocaldb create devextreme || exit 0", 77 | // "cmd /c sqllocaldb start devextreme || exit 0" 78 | //] 79 | } 80 | 81 | } 82 | -------------------------------------------------------------------------------- /WidgetGallery/Controllers/NavigationDataController.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using WidgetGallery.Models.Northwind; 5 | using DevExtreme.AspNet.Data; 6 | using System.IO; 7 | using Microsoft.AspNetCore.Mvc; 8 | using Microsoft.EntityFrameworkCore; 9 | using Microsoft.AspNetCore.Hosting; 10 | 11 | namespace WidgetGallery.Controllers { 12 | 13 | [Route("api/[controller]/[action]")] 14 | public class NavigationDataController : Controller { 15 | NorthwindContext _nwind; 16 | IHostingEnvironment _hostingEnvironment; 17 | 18 | public NavigationDataController(NorthwindContext nwind, IHostingEnvironment hostingEnvironment) { 19 | _nwind = nwind; 20 | _hostingEnvironment = hostingEnvironment; 21 | } 22 | 23 | [HttpGet] 24 | public object ProductsByCategories(DataSourceLoadOptions loadOptions) { 25 | var temp = _nwind.Categories.Include(c => c.Products).Take(4); 26 | 27 | var data = from c in temp 28 | select new { 29 | name = c.CategoryName, 30 | expanded = c.CategoryName == "Beverages", 31 | products = from p in c.Products 32 | select new { name = p.ProductName } 33 | }; 34 | 35 | return DataSourceLoader.Load(data, loadOptions); 36 | } 37 | 38 | [HttpGet] 39 | public object ProductsByCategory(int id, DataSourceLoadOptions loadOptions) { 40 | var products = from p in _nwind.Products 41 | where p.CategoryID == id 42 | select new { name = p.ProductName }; 43 | 44 | return DataSourceLoader.Load(products, loadOptions); 45 | } 46 | 47 | [HttpGet] 48 | public object TreeViewData(DataSourceLoadOptions loadOptions) { 49 | #warning using filter parts doesn't feel right, sort it out 50 | var parentId = (string)loadOptions.Filter[1]; 51 | 52 | var rootPath = _hostingEnvironment.ContentRootPath; 53 | var parentPath = Path.Combine(rootPath, parentId); 54 | 55 | var childNodes = Directory.EnumerateFileSystemEntries(parentPath) 56 | .Select(path => new { 57 | id = Path.Combine(parentId, Path.GetFileName(path)), 58 | parentId = parentId, 59 | text = Path.GetFileName(path), 60 | hasItems = System.IO.File.GetAttributes(path).HasFlag(FileAttributes.Directory) 61 | }) 62 | .Where(i => i.text != "bin" && i.text != "obj") 63 | .OrderByDescending(i => i.hasItems) 64 | .ThenBy(i => i.text); 65 | 66 | return childNodes; 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/RangeSelector.cshtml: -------------------------------------------------------------------------------- 1 |
2 |
3 | @(Html.DevExtreme().RangeSelector() 4 | .Title("Ships By Month") 5 | .DataSource(d => d.WebApi() 6 | .Controller("ChartsData") 7 | .LoadAction("ShipsByMonth") 8 | .LoadParams(new { shipper = "Federal Shipping" }) 9 | ) 10 | .Size(s => s.Height(400)) 11 | .Chart(c => c 12 | .CommonSeriesSettings(s => s 13 | .Type(SeriesType.StepArea) 14 | .ArgumentField("Month") 15 | ) 16 | .Series(series => { 17 | 18 | series.Add() 19 | .ValueField("TotalAmount") 20 | .Color("yellow"); 21 | 22 | series.Add() 23 | .ValueField("Amount"); 24 | 25 | }) 26 | ) 27 | .Scale(s => s 28 | .ValueType(ChartDataType.DateTime) 29 | .TickInterval(i => i.Months(1)) 30 | .MinorTickInterval(i => i.Months(1)) 31 | ) 32 | .SliderMarker(m => m.Format(Format.MonthAndYear)) 33 | ) 34 |
35 |
36 |
37 |
38 | @(Html.DevExtreme().RangeSelector() 39 | .Title("Copper Production in 2013") 40 | .DataSource("~/SampleData/Copper.json") 41 | .Chart(c => c 42 | .CommonSeriesSettings(s => s 43 | .ArgumentField("country") 44 | .Type(SeriesType.Bar) 45 | ) 46 | .Series(series => { 47 | series.Add() 48 | .Name("Copper") 49 | .ValueField("copper"); 50 | }) 51 | 52 | ) 53 | .Scale(s => s.UseTicksAutoArrangement(false)) 54 | ) 55 |
56 |
57 |
58 |
59 | @(Html.DevExtreme().RangeSelector() 60 | .Title("Vacation Period") 61 | .Scale(s => s 62 | .StartValue(new DateTime(2016, 3, 1)) 63 | .EndValue(new DateTime(2016, 9, 1)) 64 | .MinorTickInterval(VizTimeInterval.Day) 65 | .TickInterval(i => i.Days(7)) 66 | .MinRange(VizTimeInterval.Week) 67 | .MaxRange(r => r.Months(4)) 68 | .MinorTick(t => t.Visible(false)) 69 | ) 70 | .SliderMarker(m => m.Format(Format.MonthAndDay)) 71 | .SelectedRange(r => r 72 | .StartValue(new DateTime(2016, 6, 30)) 73 | .EndValue(new DateTime(2016, 7, 14)) 74 | ) 75 | .Margin(m => m.Top(20)) 76 | .Size(s => s.Height(175)) 77 | ) 78 |
79 |
80 | -------------------------------------------------------------------------------- /WidgetGallery/Controllers/SiteNavigationDataController.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using Microsoft.AspNetCore.Mvc; 5 | 6 | namespace WidgetGallery.Controllers { 7 | 8 | [Route("api/[controller]/[action]")] 9 | public class SiteNavigationDataController : Controller { 10 | class Node { 11 | public string Caption; 12 | public string Url = "#"; 13 | public bool Expanded = true; 14 | 15 | public IEnumerable Children; 16 | } 17 | 18 | [HttpGet] 19 | public object Get() { 20 | return new[] { 21 | new Node { 22 | Caption = "Grids", 23 | Children = new[] { 24 | MakeWidgetNode("Data Grid (WebApi)", "DataGrid"), 25 | MakeWidgetNode("Data Grid (OData)", "DataGridOData"), 26 | MakeWidgetNode("Pivot Grid", "PivotGrid"), 27 | } 28 | }, 29 | new Node { 30 | Caption = "Data Visualization", 31 | Children = new[] { 32 | MakeWidgetNode("Charts", "Charts"), 33 | MakeWidgetNode("Gauges", "Gauges"), 34 | MakeWidgetNode("Range Selector", "RangeSelector"), 35 | MakeWidgetNode("Vector Map", "VectorMap"), 36 | MakeWidgetNode("Treemap", "TreeMap"), 37 | MakeWidgetNode("Sparklines & Bullets", "SparklinesBullets"), 38 | 39 | } 40 | }, 41 | new Node { 42 | Caption = "Data Editing", 43 | Children = new[] { 44 | MakeWidgetNode("Form Widget", "Form"), 45 | MakeWidgetNode("Editors", "Editors"), 46 | MakeWidgetNode("Validation", "Validation"), 47 | MakeWidgetNode("File Uploader", "FileUploader") 48 | } 49 | }, 50 | new Node { 51 | Caption = "Multi-Purpose", 52 | Children = new[] { 53 | MakeWidgetNode("Scheduler", "Scheduler"), 54 | MakeWidgetNode("List", "List"), 55 | MakeWidgetNode("Navigation", "Navigation"), 56 | MakeWidgetNode("Overlays", "Overlays"), 57 | MakeWidgetNode("Image Gallery", "Gallery"), 58 | MakeWidgetNode("Geo Map", "GeoMap"), 59 | } 60 | } 61 | }; 62 | } 63 | 64 | Node MakeWidgetNode(string caption, string actionName) { 65 | return new Node { 66 | Caption = caption, 67 | Url = Url.RouteUrl("default", new { 68 | controller = "Home", 69 | action = actionName 70 | }) 71 | }; 72 | } 73 | 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /WidgetGallery/Startup.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Threading.Tasks; 5 | using Microsoft.AspNetCore.Builder; 6 | using Microsoft.AspNetCore.Hosting; 7 | using Microsoft.Extensions.Configuration; 8 | using Microsoft.Extensions.DependencyInjection; 9 | using Microsoft.Extensions.Logging; 10 | using WidgetGallery.Models.Northwind; 11 | using Microsoft.EntityFrameworkCore; 12 | using System.IO; 13 | using Newtonsoft.Json.Serialization; 14 | 15 | namespace WidgetGallery { 16 | public class Startup { 17 | public Startup(IHostingEnvironment env) { 18 | var builder = new ConfigurationBuilder() 19 | .SetBasePath(env.ContentRootPath) 20 | .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true) 21 | .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true) 22 | .AddEnvironmentVariables(); 23 | Configuration = builder.Build(); 24 | } 25 | 26 | public IConfigurationRoot Configuration { get; } 27 | 28 | // This method gets called by the runtime. Use this method to add services to the container. 29 | public void ConfigureServices(IServiceCollection services) { 30 | // Add framework services. 31 | services 32 | .AddMvc() 33 | .AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver()); 34 | 35 | services 36 | .AddLogging() 37 | .AddDbContext(ConfigureNorthwindContext); 38 | 39 | #if DB_LOCALDB 40 | services.AddEntityFrameworkSqlServer(); 41 | #endif 42 | 43 | #if DB_SQLITE 44 | services.AddEntityFrameworkSqlite(); 45 | #endif 46 | } 47 | 48 | static void ConfigureNorthwindContext(IServiceProvider serviceProvider, DbContextOptionsBuilder options) { 49 | var hosting = serviceProvider.GetRequiredService(); 50 | 51 | #if DB_LOCALDB 52 | var dbPath = Path.Combine(hosting.ContentRootPath, "Northwind.mdf"); 53 | var connectionString = $@"Data Source=(localdb)\devextreme; AttachDbFileName={dbPath}; Integrated Security=True; MultipleActiveResultSets=True; App=EntityFramework"; 54 | options.UseSqlServer(connectionString); 55 | #endif 56 | 57 | #if DB_SQLITE 58 | var dbPath = Path.Combine(hosting.ContentRootPath, "Northwind.sqlite"); 59 | options.UseSqlite("Data Source=" + dbPath); 60 | #endif 61 | } 62 | 63 | // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. 64 | public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) { 65 | loggerFactory.AddConsole(Configuration.GetSection("Logging")); 66 | loggerFactory.AddDebug(); 67 | 68 | if(env.IsDevelopment()) { 69 | app.UseDeveloperExceptionPage(); 70 | app.UseBrowserLink(); 71 | } else { 72 | app.UseExceptionHandler("/Home/Error"); 73 | } 74 | 75 | app.UseStaticFiles(); 76 | 77 | app.UseMvc(routes => { 78 | routes.MapRoute( 79 | name: "default", 80 | template: "{controller=Home}/{action=Index}/{id?}"); 81 | }); 82 | } 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /WidgetGallery/wwwroot/SampleData/VectorMap.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "FeatureCollection", 3 | "features": [ 4 | { 5 | "type": "Feature", 6 | "geometry": { 7 | "type": "Point", 8 | "coordinates": [ -74, 40.7 ] 9 | }, 10 | "properties": { 11 | "value": 8406, 12 | "text": "New York City" 13 | } 14 | }, 15 | { 16 | "type": "Feature", 17 | "geometry": { 18 | "type": "Point", 19 | "coordinates": [ 100.47, 13.75 ] 20 | }, 21 | "properties": { 22 | "value": 8281, 23 | "text": "Bangkok" 24 | } 25 | }, 26 | { 27 | "type": "Feature", 28 | "geometry": { 29 | "type": "Point", 30 | "coordinates": [ 37.62, 55.75 ] 31 | }, 32 | "properties": { 33 | "value": 12111, 34 | "text": "Moscow" 35 | } 36 | }, 37 | { 38 | "type": "Feature", 39 | "geometry": { 40 | "type": "Point", 41 | "coordinates": [ 121.5, 31.2 ] 42 | }, 43 | "properties": { 44 | "value": 24150, 45 | "text": "Shanghai" 46 | } 47 | }, 48 | { 49 | "type": "Feature", 50 | "geometry": { 51 | "type": "Point", 52 | "coordinates": [ -43.18, -22.9 ] 53 | }, 54 | "properties": { 55 | "value": 6429, 56 | "text": "Rio de Janeiro" 57 | } 58 | }, 59 | { 60 | "type": "Feature", 61 | "geometry": { 62 | "type": "Point", 63 | "coordinates": [ 31.23, 30.05 ] 64 | }, 65 | "properties": { 66 | "value": 8922, 67 | "text": "Cairo" 68 | } 69 | }, 70 | { 71 | "type": "Feature", 72 | "geometry": { 73 | "type": "Point", 74 | "coordinates": [ 28.95, 41 ] 75 | }, 76 | "properties": { 77 | "value": 14160, 78 | "text": "Istanbul" 79 | } 80 | }, 81 | { 82 | "type": "Feature", 83 | "geometry": { 84 | "type": "Point", 85 | "coordinates": [ 127, 37.55 ] 86 | }, 87 | "properties": { 88 | "value": 10388, 89 | "text": "Seoul" 90 | } 91 | }, 92 | { 93 | "type": "Feature", 94 | "geometry": { 95 | "type": "Point", 96 | "coordinates": [ 139.68, 35.68 ] 97 | }, 98 | "properties": { 99 | "value": 9071, 100 | "text": "Tokyo" 101 | } 102 | }, 103 | { 104 | "type": "Feature", 105 | "geometry": { 106 | "type": "Point", 107 | "coordinates": [ 103.83, 1.28 ] 108 | }, 109 | "properties": { 110 | "value": 5399, 111 | "text": "Singapore" 112 | } 113 | }, 114 | { 115 | "type": "Feature", 116 | "geometry": { 117 | "type": "Point", 118 | "coordinates": [ 30.3, 59.95 ] 119 | }, 120 | "properties": { 121 | "value": 5131, 122 | "text": "Saint Petersburg" 123 | } 124 | }, 125 | { 126 | "type": "Feature", 127 | "geometry": { 128 | "type": "Point", 129 | "coordinates": [ 28.03, -26.2 ] 130 | }, 131 | "properties": { 132 | "value": 4434, 133 | "text": "Johannesburg" 134 | } 135 | }, 136 | { 137 | "type": "Feature", 138 | "geometry": { 139 | "type": "Point", 140 | "coordinates": [ 144.95, -37.8 ] 141 | }, 142 | "properties": { 143 | "value": 4252, 144 | "text": "Melbourne" 145 | } 146 | } 147 | ] 148 | } -------------------------------------------------------------------------------- /WidgetGallery/Controllers/GridDataController.cs: -------------------------------------------------------------------------------- 1 | using DevExtreme.AspNet.Data; 2 | using Newtonsoft.Json; 3 | using System; 4 | using System.Collections.Generic; 5 | using System.Linq; 6 | using Microsoft.AspNetCore.Mvc; 7 | using WidgetGallery.Models.Northwind; 8 | 9 | namespace WidgetGallery.Controllers { 10 | 11 | [Route("api/[controller]/[action]")] 12 | public class GridDataController : Controller { 13 | NorthwindContext _nwind; 14 | 15 | public GridDataController(NorthwindContext nwind) { 16 | _nwind = nwind; 17 | } 18 | 19 | [HttpGet] 20 | public object Get(DataSourceLoadOptions loadOptions) { 21 | return DataSourceLoader.Load(_nwind.Orders, loadOptions); 22 | } 23 | 24 | [HttpPost] 25 | public IActionResult Post(string values) { 26 | var newOrder = new Order(); 27 | JsonConvert.PopulateObject(values, newOrder); 28 | 29 | if(!TryValidateModel(newOrder)) 30 | return BadRequest(ModelState.GetFullErrorMessage()); 31 | 32 | _nwind.Orders.Add(newOrder); 33 | _nwind.SaveChanges(); 34 | 35 | return Ok(); 36 | } 37 | 38 | [HttpPut] 39 | public IActionResult Put(int key, string values) { 40 | var order = _nwind.Orders.First(o => o.OrderID == key); 41 | JsonConvert.PopulateObject(values, order); 42 | 43 | if(!TryValidateModel(order)) 44 | return BadRequest(ModelState.GetFullErrorMessage()); 45 | 46 | _nwind.SaveChanges(); 47 | 48 | return Ok(); 49 | } 50 | 51 | [HttpDelete] 52 | public void Delete(int key) { 53 | var order = _nwind.Orders.First(o => o.OrderID == key); 54 | _nwind.Orders.Remove(order); 55 | _nwind.SaveChanges(); 56 | } 57 | 58 | // additional actions 59 | 60 | [HttpGet] 61 | public object OrderDetails(int orderID, DataSourceLoadOptions loadOptions) { 62 | return DataSourceLoader.Load( 63 | from i in _nwind.Order_Details 64 | where i.OrderID == orderID 65 | select new { 66 | Product = i.Product.ProductName, 67 | Price = i.UnitPrice, 68 | Quantity = i.Quantity, 69 | Sum = i.UnitPrice * i.Quantity 70 | }, 71 | loadOptions 72 | ); 73 | } 74 | 75 | [HttpGet] 76 | public object ShippersLookup(DataSourceLoadOptions loadOptions) { 77 | var lookup = from i in _nwind.Shippers 78 | orderby i.CompanyName 79 | select new { 80 | Value = i.ShipperID, 81 | Text = i.CompanyName 82 | }; 83 | 84 | return DataSourceLoader.Load(lookup, loadOptions); 85 | } 86 | 87 | [HttpGet] 88 | public object CustomersLookup(DataSourceLoadOptions loadOptions) { 89 | var lookup = from i in _nwind.Customers 90 | let text = i.CompanyName + " (" + i.Country + ")" 91 | orderby i.CompanyName 92 | select new { 93 | Value = i.CustomerID, 94 | Text = text 95 | }; 96 | 97 | return DataSourceLoader.Load(lookup, loadOptions); 98 | } 99 | } 100 | 101 | } 102 | -------------------------------------------------------------------------------- /WidgetGallery/Controllers/HomeController.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using Microsoft.AspNetCore.Mvc; 5 | using WidgetGallery.Models.Northwind; 6 | using WidgetGallery.ViewModels; 7 | using Microsoft.Extensions.DependencyInjection; 8 | 9 | namespace WidgetGallery.Controllers { 10 | 11 | public class HomeController : Controller { 12 | 13 | public ActionResult Index() { 14 | return RedirectToAction("DataGrid"); 15 | } 16 | 17 | public ActionResult Editors() { 18 | return View(new EditorsViewModel { 19 | Colors = new[] { "red", "orange", "yellow", "green", "blue", "indigo", "violet" }, 20 | SelectedColors = new[] { "red", "orange", "yellow" }, 21 | Color = "#ff8800", 22 | Date = DateTime.Now, 23 | Age = 50, 24 | Accepted = true, 25 | Drink = "Coffee", 26 | City = "New York", 27 | Extension = "5467", 28 | Phone = "+1(202)555-01-92", 29 | Description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare, magna ut lobortis eleifend, tellus est fringilla neque." 30 | }); 31 | } 32 | 33 | public ActionResult Overlays() { 34 | return View(); 35 | } 36 | 37 | public ActionResult List() { 38 | return View(); 39 | } 40 | 41 | public ActionResult Gallery() { 42 | var images = new List(); 43 | foreach(var i in Enumerable.Range(1, 10)) 44 | images.Add(Url.Content(String.Format("~/images/{0:D2}.png", i))); 45 | 46 | return View(new GalleryViewModel { 47 | Images = images 48 | }); 49 | } 50 | 51 | public ActionResult DataGrid() { 52 | return View(); 53 | } 54 | 55 | public ActionResult PivotGrid() { 56 | return View(); 57 | } 58 | 59 | public ActionResult DataGridOData() { 60 | return View(); 61 | } 62 | 63 | public ActionResult Form() { 64 | var nwind = HttpContext.RequestServices.GetService(); 65 | 66 | return View(new FormViewModel { 67 | FormData = nwind.Employees.First() 68 | }); 69 | } 70 | 71 | public ActionResult Charts() { 72 | return View(); 73 | } 74 | 75 | public ActionResult Navigation() { 76 | return View(); 77 | } 78 | 79 | public ActionResult Scheduler() { 80 | return View(); 81 | } 82 | 83 | public ActionResult GeoMap() { 84 | return View(); 85 | } 86 | 87 | public ActionResult Gauges() { 88 | return View(); 89 | } 90 | 91 | public ActionResult RangeSelector() { 92 | return View(); 93 | } 94 | 95 | public ActionResult SparklinesBullets() { 96 | return View(); 97 | } 98 | 99 | public ActionResult VectorMap() { 100 | return View(); 101 | } 102 | 103 | public ActionResult TreeMap() { 104 | return View(); 105 | } 106 | 107 | public ActionResult Validation() { 108 | return View(new ValidationViewModel()); 109 | } 110 | 111 | public ActionResult FileUploader() { 112 | return View(); 113 | } 114 | 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /WidgetGallery/wwwroot/SampleData/Stock.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "date": "1994/03/01", 4 | "l": 24.0, 5 | "h": 25.0, 6 | "o": 25.0, 7 | "c": 24.875 8 | }, 9 | { 10 | "date": "1994/03/02", 11 | "l": 23.625, 12 | "h": 25.125, 13 | "o": 24.0, 14 | "c": 24.875 15 | }, 16 | { 17 | "date": "1994/03/03", 18 | "l": 26.25, 19 | "h": 28.25, 20 | "o": 26.75, 21 | "c": 27.0 22 | }, 23 | { 24 | "date": "1994/03/04", 25 | "l": 26.5, 26 | "h": 27.875, 27 | "o": 26.875, 28 | "c": 27.25 29 | }, 30 | { 31 | "date": "1994/03/07", 32 | "l": 26.375, 33 | "h": 27.5, 34 | "o": 27.375, 35 | "c": 26.75 36 | }, 37 | { 38 | "date": "1994/03/08", 39 | "l": 25.75, 40 | "h": 26.875, 41 | "o": 26.75, 42 | "c": 26.0 43 | }, 44 | { 45 | "date": "1994/03/09", 46 | "l": 25.75, 47 | "h": 26.75, 48 | "o": 26.125, 49 | "c": 26.25 50 | }, 51 | { 52 | "date": "1994/03/10", 53 | "l": 25.75, 54 | "h": 26.375, 55 | "o": 26.375, 56 | "c": 25.875 57 | }, 58 | { 59 | "date": "1994/03/11", 60 | "l": 24.875, 61 | "h": 26.125, 62 | "o": 26.0, 63 | "c": 25.375 64 | }, 65 | { 66 | "date": "1994/03/14", 67 | "l": 25.125, 68 | "h": 26.0, 69 | "o": 25.625, 70 | "c": 25.75 71 | }, 72 | { 73 | "date": "1994/03/15", 74 | "l": 25.875, 75 | "h": 26.625, 76 | "o": 26.125, 77 | "c": 26.375 78 | }, 79 | { 80 | "date": "1994/03/16", 81 | "l": 26.25, 82 | "h": 27.375, 83 | "o": 26.25, 84 | "c": 27.25 85 | }, 86 | { 87 | "date": "1994/03/17", 88 | "l": 26.875, 89 | "h": 27.25, 90 | "o": 27.125, 91 | "c": 26.875 92 | }, 93 | { 94 | "date": "1994/03/18", 95 | "l": 26.375, 96 | "h": 27.125, 97 | "o": 27.0, 98 | "c": 27.125 99 | }, 100 | { 101 | "date": "1994/03/21", 102 | "l": 26.75, 103 | "h": 27.875, 104 | "o": 26.875, 105 | "c": 27.75 106 | }, 107 | { 108 | "date": "1994/03/22", 109 | "l": 26.75, 110 | "h": 28.375, 111 | "o": 27.5, 112 | "c": 27.0 113 | }, 114 | { 115 | "date": "1994/03/23", 116 | "l": 26.875, 117 | "h": 28.125, 118 | "o": 27.0, 119 | "c": 28.0 120 | }, 121 | { 122 | "date": "1994/03/24", 123 | "l": 26.25, 124 | "h": 27.875, 125 | "o": 27.75, 126 | "c": 27.625 127 | }, 128 | { 129 | "date": "1994/03/25", 130 | "l": 27.5, 131 | "h": 28.75, 132 | "o": 27.75, 133 | "c": 28.0 134 | }, 135 | { 136 | "date": "1994/03/28", 137 | "l": 25.75, 138 | "h": 28.25, 139 | "o": 28.0, 140 | "c": 27.25 141 | }, 142 | { 143 | "date": "1994/03/29", 144 | "l": 26.375, 145 | "h": 27.5, 146 | "o": 27.5, 147 | "c": 26.875 148 | }, 149 | { 150 | "date": "1994/03/30", 151 | "l": 25.75, 152 | "h": 27.5, 153 | "o": 26.375, 154 | "c": 26.25 155 | }, 156 | { 157 | "date": "1994/03/31", 158 | "l": 24.75, 159 | "h": 27.0, 160 | "o": 26.5, 161 | "c": 25.25 162 | } 163 | ] -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Validation.cshtml: -------------------------------------------------------------------------------- 1 |
2 |
3 | @(Html.DevExtreme().Form() 4 | .ID("form") 5 | .ShowValidationSummary(false) 6 | .Items(items => { 7 | 8 | items.AddSimple() 9 | .DataField("Name") 10 | .Editor(e => e.TextBox()) 11 | .IsRequired(true); 12 | 13 | items.AddSimple() 14 | .DataField("BirthDate") 15 | .Label(l => l.Text("Date of birth")) 16 | .Editor(e => e 17 | .DateBox() 18 | .Value(DateTime.Now) 19 | ) 20 | .IsRequired(true) 21 | .ValidationRules(rules => rules 22 | .AddRange() 23 | .Max(DateTime.Now.AddYears(-21)) 24 | .Message("You must be at least 21 years old") 25 | ); 26 | 27 | items.AddSimple() 28 | .DataField("Country") 29 | .Editor(e => e 30 | .SelectBox() 31 | .DataSource(d => d.WebApi().Controller("GeoNames").LoadAction("Countries")) 32 | ) 33 | .IsRequired(true); 34 | 35 | items.AddSimple() 36 | .DataField("City") 37 | .Editor(e => e 38 | .Autocomplete() 39 | .MinSearchLength(2) 40 | .DataSource(d => d.WebApi().Controller("GeoNames").LoadAction("Cities")) 41 | ) 42 | .IsRequired(true) 43 | .ValidationRules(rules => { 44 | 45 | rules.AddPattern() 46 | .Pattern(@"^[a-zA-Z\s]+$") 47 | .Message("Do not use digits in the City name."); 48 | 49 | rules.AddPattern() 50 | .Pattern("^.{2,}$") 51 | .Message("City must have at least 2 symbols"); 52 | 53 | }); 54 | 55 | items.AddSimple() 56 | .DataField("ZipCode") 57 | .Editor(e => e.NumberBox()) 58 | .IsRequired(true) 59 | .ValidationRules(rules => rules 60 | .AddStringLength() 61 | .Min(5) 62 | .Max(10) 63 | .Message("Zip code can not be less than 5 or greater than 10 digits") 64 | ); 65 | 66 | items.AddSimple() 67 | .DataField("Address") 68 | .Editor(e => e.TextBox()) 69 | .IsRequired(true); 70 | 71 | items.AddSimple() 72 | .DataField("Phone") 73 | .HelpText("Enter the phone number in the following format +0 (000) 000-00-00") 74 | .Editor(e => e.TextBox()) 75 | .ValidationRules(rules => rules 76 | .AddPattern() 77 | .Pattern(@"^\+\s*\d\s*\(\s*\d{3}\)\s*\d{3}\s*-\s*\d{2}\s*-\s*\d{2}$") 78 | .Message("The phone must have the following format: +0 (000) 000-00-00") 79 | ); 80 | }) 81 | .FormData(Model) 82 | 83 | ) 84 |
85 |
86 | @(Html.DevExtreme().Button() 87 | .Text("Submit") 88 | .OnClick("submitButton_click") 89 | ) 90 |
91 |
92 | 93 | 98 | -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Form.cshtml: -------------------------------------------------------------------------------- 1 | @model WidgetGallery.ViewModels.FormViewModel 2 | 3 | @(Html.DevExtreme().Form() 4 | .ColCount(2) 5 | .FormData(Model.FormData) 6 | .Items(rootItems => { 7 | 8 | rootItems.AddGroup() 9 | .Caption("General Info") 10 | .Items(generalGroup => { 11 | generalGroup.AddSimple() 12 | .DataField("EmployeeID") 13 | .HelpText("This field is generated automatically") 14 | .Editor(e => e 15 | .TextBox() 16 | .ReadOnly(true) 17 | ); 18 | 19 | generalGroup.AddSimple() 20 | .DataField("FirstName") 21 | .IsRequired(true) 22 | .Editor(e => e.TextBox()); 23 | 24 | generalGroup.AddSimple() 25 | .DataField("LastName") 26 | .IsRequired(true) 27 | .Editor(e => e.TextBox()); 28 | 29 | generalGroup.AddSimple() 30 | .DataField("HireDate") 31 | .Editor(e => e.DateBox()); 32 | 33 | generalGroup.AddSimple() 34 | .DataField("Title") 35 | .Editor(e => e.TextBox()); 36 | 37 | generalGroup.AddSimple() 38 | .DataField("TitleOfCourtesy") 39 | .Editor(e => e 40 | .SelectBox() 41 | .DataSource(new[] { "Mr.", "Ms.", "Mrs.", "Dr." }) 42 | ); 43 | }); 44 | 45 | rootItems.AddGroup() 46 | .Caption("Personal Info") 47 | .Items(personalGroup => { 48 | 49 | personalGroup.AddSimple() 50 | .DataField("BirthDate") 51 | .Editor(e => e.DateBox()); 52 | 53 | personalGroup.AddTabbed() 54 | .Tabs(tabs => { 55 | 56 | tabs.Add() 57 | .Title("Address") 58 | .Items(addressItems => { 59 | 60 | addressItems.AddSimple() 61 | .Label(l => l.Location(FormLabelLocation.Left)) 62 | .DataField("Address"); 63 | 64 | addressItems.AddSimple() 65 | .Label(l => l.Location(FormLabelLocation.Left)) 66 | .DataField("City"); 67 | 68 | addressItems.AddSimple() 69 | .Label(l => l 70 | .Text("State") 71 | .Location(FormLabelLocation.Left) 72 | ) 73 | .DataField("Region"); 74 | 75 | addressItems.AddSimple() 76 | .Label(l => l.Location(FormLabelLocation.Left)) 77 | .DataField("PostalCode"); 78 | 79 | addressItems.AddSimple() 80 | .Label(l => l.Location(FormLabelLocation.Left)) 81 | .DataField("Country"); 82 | 83 | }); 84 | 85 | tabs.Add() 86 | .Title("Phone") 87 | .Items(phoneItems => { 88 | 89 | phoneItems.AddSimple() 90 | .Label(l => l.Location(FormLabelLocation.Left)) 91 | .DataField("HomePhone"); 92 | 93 | phoneItems.AddSimple() 94 | .Label(l => l.Location(FormLabelLocation.Left)) 95 | .DataField("Extension"); 96 | 97 | }); 98 | 99 | tabs.Add() 100 | .Title("Notes") 101 | .Items(notesItems => { 102 | 103 | notesItems.AddSimple() 104 | .DataField("Notes") 105 | .Editor(e => e.TextArea().Height(100)); 106 | 107 | }); 108 | 109 | }); 110 | }); 111 | 112 | }) 113 | .LabelLocation(FormLabelLocation.Top) 114 | .MinColWidth(100) 115 | ) 116 | -------------------------------------------------------------------------------- /WidgetGallery/Models/Northwind/NorthwindContext.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using Microsoft.EntityFrameworkCore; 3 | using Microsoft.EntityFrameworkCore.Metadata; 4 | using Microsoft.EntityFrameworkCore.Infrastructure; 5 | 6 | namespace WidgetGallery.Models.Northwind { 7 | 8 | public partial class NorthwindContext : DbContext { 9 | 10 | public NorthwindContext(DbContextOptions options) 11 | : base(options) { 12 | } 13 | 14 | public virtual DbSet Categories { get; set; } 15 | public virtual DbSet Customers { get; set; } 16 | public virtual DbSet Employees { get; set; } 17 | public virtual DbSet Order_Details { get; set; } 18 | public virtual DbSet Orders { get; set; } 19 | public virtual DbSet Products { get; set; } 20 | public virtual DbSet Shippers { get; set; } 21 | public virtual DbSet Suppliers { get; set; } 22 | 23 | protected override void OnModelCreating(ModelBuilder modelBuilder) { 24 | modelBuilder.Entity(entity => { 25 | entity.HasIndex(e => e.City) 26 | .HasName("City"); 27 | 28 | entity.HasIndex(e => e.CompanyName) 29 | .HasName("CompanyName"); 30 | 31 | entity.HasIndex(e => e.PostalCode) 32 | .HasName("PostalCode"); 33 | 34 | entity.HasIndex(e => e.Region) 35 | .HasName("Region"); 36 | }); 37 | 38 | modelBuilder.Entity(entity => { 39 | entity.HasIndex(e => e.LastName) 40 | .HasName("LastName"); 41 | 42 | entity.HasIndex(e => e.PostalCode) 43 | .HasName("PostalCode"); 44 | }); 45 | 46 | modelBuilder.Entity(entity => { 47 | entity.HasKey(e => new { e.OrderID, e.ProductID }) 48 | .HasName("PK_Order_Details"); 49 | 50 | entity.HasIndex(e => e.OrderID) 51 | .HasName("OrdersOrder_Details"); 52 | 53 | entity.HasIndex(e => e.ProductID) 54 | .HasName("ProductsOrder_Details"); 55 | 56 | entity.Property(e => e.Discount).HasDefaultValueSql("0"); 57 | 58 | entity.Property(e => e.Quantity).HasDefaultValueSql("1"); 59 | 60 | entity.Property(e => e.UnitPrice).HasDefaultValueSql("0"); 61 | }); 62 | 63 | modelBuilder.Entity(entity => { 64 | entity.HasIndex(e => e.CustomerID) 65 | .HasName("CustomersOrders"); 66 | 67 | entity.HasIndex(e => e.EmployeeID) 68 | .HasName("EmployeesOrders"); 69 | 70 | entity.HasIndex(e => e.OrderDate) 71 | .HasName("OrderDate"); 72 | 73 | entity.HasIndex(e => e.ShipPostalCode) 74 | .HasName("ShipPostalCode"); 75 | 76 | entity.HasIndex(e => e.ShipVia) 77 | .HasName("ShippersOrders"); 78 | 79 | entity.HasIndex(e => e.ShippedDate) 80 | .HasName("ShippedDate"); 81 | 82 | entity.Property(e => e.Freight).HasDefaultValueSql("0"); 83 | }); 84 | 85 | modelBuilder.Entity(entity => { 86 | entity.HasIndex(e => e.CategoryName) 87 | .HasName("CategoryName"); 88 | }); 89 | 90 | modelBuilder.Entity(entity => { 91 | entity.HasIndex(e => e.CategoryID) 92 | .HasName("CategoryID"); 93 | 94 | entity.HasIndex(e => e.ProductName) 95 | .HasName("ProductName"); 96 | 97 | entity.HasIndex(e => e.SupplierID) 98 | .HasName("SuppliersProducts"); 99 | 100 | entity.Property(e => e.Discontinued).HasDefaultValueSql("0"); 101 | 102 | entity.Property(e => e.ReorderLevel).HasDefaultValueSql("0"); 103 | 104 | entity.Property(e => e.UnitPrice).HasDefaultValueSql("0"); 105 | 106 | entity.Property(e => e.UnitsInStock).HasDefaultValueSql("0"); 107 | 108 | entity.Property(e => e.UnitsOnOrder).HasDefaultValueSql("0"); 109 | }); 110 | 111 | modelBuilder.Entity(entity => { 112 | entity.HasIndex(e => e.CompanyName) 113 | .HasName("CompanyName"); 114 | 115 | entity.HasIndex(e => e.PostalCode) 116 | .HasName("PostalCode"); 117 | }); 118 | } 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /WidgetGallery/Controllers/GeoNamesController.cs: -------------------------------------------------------------------------------- 1 | using DevExtreme.AspNet.Data; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.Linq; 5 | using Microsoft.AspNetCore.Mvc; 6 | 7 | namespace WidgetGallery.Controllers { 8 | 9 | [Route("api/[controller]/[action]")] 10 | public class GeoNamesController : Controller { 11 | static readonly string[] COUNTRIES = new[] { 12 | "Afghanistan", 13 | "Albania", 14 | "Algeria", 15 | "Andorra", 16 | "Angola", 17 | "Antigua and Barbuda", 18 | "Argentina", 19 | "Armenia", 20 | "Australia", 21 | "Austria", 22 | "Azerbaijan", 23 | "The Bahamas", 24 | "Bahrain", 25 | "Bangladesh", 26 | "Barbados", 27 | "Belarus", 28 | "Belgium", 29 | "Belize", 30 | "Benin", 31 | "Bhutan", 32 | "Bolivia", 33 | "Bosnia and Herzegovina", 34 | "Botswana", 35 | "Brazil", 36 | "Brunei", 37 | "Bulgaria", 38 | "Burkina Faso", 39 | "Burma", 40 | "Burundi", 41 | "Cambodia", 42 | "Cameroon", 43 | "Canada", 44 | "Cape Verde", 45 | "Central African Republic", 46 | "Chad", 47 | "Chile", 48 | "China", 49 | "Colombia", 50 | "Comoros", 51 | "Democratic Republic of the Congo", 52 | "Republic of the Congo", 53 | "Costa Rica", 54 | "Ivory Coast", 55 | "Croatia", 56 | "Cuba", 57 | "Cyprus", 58 | "Czech Republic", 59 | "Denmark", 60 | "Djibouti", 61 | "Dominica", 62 | "Dominican Republic", 63 | "East Timor", 64 | "Ecuador", 65 | "Egypt", 66 | "El Salvador", 67 | "Equatorial Guinea", 68 | "Eritrea", 69 | "Estonia", 70 | "Ethiopia", 71 | "Fiji", 72 | "Finland", 73 | "France", 74 | "Gabon", 75 | "The Gambia", 76 | "Georgia", 77 | "Germany", 78 | "Ghana", 79 | "Greece", 80 | "Grenada", 81 | "Guatemala", 82 | "Guinea", 83 | "Guinea-Bissau", 84 | "Guyana", 85 | "Haiti", 86 | "Honduras", 87 | "Hungary", 88 | "Iceland", 89 | "India", 90 | "Indonesia", 91 | "Iran", 92 | "Iraq", 93 | "Republic of Ireland", 94 | "Israel", 95 | "Italy", 96 | "Jamaica", 97 | "Japan", 98 | "Jordan", 99 | "Kazakhstan", 100 | "Kenya", 101 | "Kiribati", 102 | "North Korea", 103 | "South Korea", 104 | "Kuwait", 105 | "Kyrgyzstan", 106 | "Laos", 107 | "Latvia", 108 | "Lebanon", 109 | "Lesotho", 110 | "Liberia", 111 | "Libya", 112 | "Liechtenstein", 113 | "Lithuania", 114 | "Luxembourg", 115 | "Republic of Macedonia", 116 | "Madagascar", 117 | "Malawi", 118 | "Malaysia", 119 | "Maldives", 120 | "Mali", 121 | "Malta", 122 | "Marshall Islands", 123 | "Mauritania", 124 | "Mauritius", 125 | "Mexico", 126 | "Federated States of Micronesia", 127 | "Moldova", 128 | "Monaco", 129 | "Mongolia", 130 | "Montenegro", 131 | "Morocco", 132 | "Mozambique", 133 | "Namibia", 134 | "Nauru", 135 | "Nepal", 136 | "Kingdom of the Netherlands", 137 | "New Zealand", 138 | "Nicaragua", 139 | "Niger", 140 | "Nigeria", 141 | "Norway", 142 | "Oman", 143 | "Pakistan", 144 | "Palau", 145 | "State of Palestine", 146 | "Panama", 147 | "Papua New Guinea", 148 | "Paraguay", 149 | "Peru", 150 | "Philippines", 151 | "Poland", 152 | "Portugal", 153 | "Qatar", 154 | "Romania", 155 | "Russia", 156 | "Rwanda", 157 | "Saint Kitts and Nevis", 158 | "Saint Lucia", 159 | "Saint Vincent and the Grenadines", 160 | "Samoa", 161 | "San Marino", 162 | "São Tomé and Príncipe", 163 | "Saudi Arabia", 164 | "Senegal", 165 | "Serbia", 166 | "Seychelles", 167 | "Sierra Leone", 168 | "Singapore", 169 | "Slovakia", 170 | "Slovenia", 171 | "Solomon Islands", 172 | "Somalia", 173 | "South Africa", 174 | "South Sudan", 175 | "Spain", 176 | "Sri Lanka", 177 | "Sudan", 178 | "Suriname", 179 | "Swaziland", 180 | "Sweden", 181 | "Switzerland", 182 | "Syria", 183 | "Tajikistan", 184 | "Tanzania", 185 | "Thailand", 186 | "Togo", 187 | "Tonga", 188 | "Trinidad and Tobago", 189 | "Tunisia", 190 | "Turkey", 191 | "Turkmenistan", 192 | "Tuvalu", 193 | "Uganda", 194 | "Ukraine", 195 | "United Arab Emirates", 196 | "United Kingdom", 197 | "United States", 198 | "Uruguay", 199 | "Uzbekistan", 200 | "Vanuatu", 201 | "Vatican City", 202 | "Venezuela", 203 | "Vietnam", 204 | "Yemen", 205 | "Zambia", 206 | "Zimbabwe" 207 | }; 208 | 209 | static readonly string[] CITIES = new[] { 210 | "Albuquerque", 211 | "Anaheim", 212 | "Anchorage", 213 | "Arlington", 214 | "Atlanta", 215 | "Aurora", 216 | "Austin", 217 | "Bakersfield", 218 | "Baltimore", 219 | "Baton Rouge", 220 | "Boise", 221 | "Boston", 222 | "Buffalo", 223 | "Chandler", 224 | "Charlotte", 225 | "Chesapeake", 226 | "Chicago", 227 | "Chula Vista", 228 | "Cincinnati", 229 | "Cleveland", 230 | "Colorado Springs", 231 | "Columbus", 232 | "Corpus Christi", 233 | "Dallas", 234 | "Denver", 235 | "Detroit", 236 | "Durham", 237 | "El Paso", 238 | "Fort Wayne", 239 | "Fort Worth", 240 | "Fremont", 241 | "Fresno", 242 | "Garland", 243 | "Gilbert", 244 | "Glendale", 245 | "Greensboro", 246 | "Henderson", 247 | "Hialeah", 248 | "Honolulu", 249 | "Houston", 250 | "Indianapolis", 251 | "Irvine", 252 | "Irving", 253 | "Jacksonville", 254 | "Jersey City", 255 | "Kansas City", 256 | "Laredo", 257 | "Las Vegas", 258 | "Lexington", 259 | "Lincoln", 260 | "Long Beach", 261 | "Los Angeles", 262 | "Louisville", 263 | "Lubbock", 264 | "Madison", 265 | "Memphis", 266 | "Mesa", 267 | "Miami", 268 | "Milwaukee", 269 | "Minneapolis", 270 | "Nashville", 271 | "New Orleans", 272 | "New York", 273 | "Newark", 274 | "Norfolk", 275 | "North Las Vegas", 276 | "Oakland", 277 | "Oklahoma City", 278 | "Omaha", 279 | "Orlando", 280 | "Philadelphia", 281 | "Phoenix", 282 | "Pittsburgh", 283 | "Plano", 284 | "Portland", 285 | "Raleigh", 286 | "Reno", 287 | "Richmond", 288 | "Riverside", 289 | "Sacramento", 290 | "Saint Paul", 291 | "San Antonio", 292 | "San Diego", 293 | "San Francisco", 294 | "San Jose", 295 | "Santa Ana", 296 | "Scottsdale", 297 | "Seattle", 298 | "St. Louis", 299 | "St. Petersburg", 300 | "Stockton", 301 | "Tampa", 302 | "Toledo", 303 | "Tucson", 304 | "Tulsa", 305 | "Virginia Beach", 306 | "Washington", 307 | "Wichita", 308 | "Winston–Salem" 309 | }; 310 | 311 | 312 | [HttpGet] 313 | public object Countries(DataSourceLoadOptions loadOptions) { 314 | return DataSourceLoader.Load(COUNTRIES, loadOptions); 315 | } 316 | 317 | [HttpGet] 318 | public object Cities(DataSourceLoadOptions loadOptions) { 319 | return DataSourceLoader.Load(CITIES, loadOptions); 320 | } 321 | 322 | } 323 | 324 | } 325 | -------------------------------------------------------------------------------- /WidgetGallery/wwwroot/SampleData/TreeMap.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Africa", 4 | "items": [ 5 | { 6 | "value": 21324000, 7 | "name": "Lagos", 8 | "country": "Nigeria" 9 | }, 10 | { 11 | "value": 9735000, 12 | "name": "Kinshasa", 13 | "country": "Democratic Republic of the Congo" 14 | }, 15 | { 16 | "value": 9278441, 17 | "name": "Cairo", 18 | "country": "Egypt" 19 | }, 20 | { 21 | "value": 4434827, 22 | "name": "Johannesburg", 23 | "country": "South Africa" 24 | }, 25 | { 26 | "value": 4395243, 27 | "name": "Abidjan", 28 | "country": " Ivory Coast" 29 | }, 30 | { 31 | "value": 4364541, 32 | "name": "Dar es Salaam", 33 | "country": "Tanzania" 34 | }, 35 | { 36 | "value": 4239988, 37 | "name": "Giza", 38 | "country": "Egypt" 39 | }, 40 | { 41 | "value": 3740026, 42 | "name": "Cape Town", 43 | "country": "South Africa" 44 | }, 45 | { 46 | "value": 3284000, 47 | "name": "Casablanca", 48 | "country": "Morocco" 49 | } 50 | ] 51 | }, 52 | { 53 | "name": "Asia", 54 | "items": [ 55 | { 56 | "value": 24256800, 57 | "name": "Shanghai", 58 | "country": "China" 59 | }, 60 | { 61 | "value": 23500000, 62 | "name": "Karachi", 63 | "country": "Pakistan" 64 | }, 65 | { 66 | "value": 21516000, 67 | "name": "Beijing", 68 | "country": "China" 69 | }, 70 | { 71 | "value": 16787941, 72 | "name": "Delhi", 73 | "country": "India" 74 | }, 75 | { 76 | "value": 15200000, 77 | "name": "Tianjin", 78 | "country": "China" 79 | }, 80 | { 81 | "value": 13297629, 82 | "name": "Tokyo", 83 | "country": "Japan" 84 | }, 85 | { 86 | "value": 13080500, 87 | "name": "Guangzhou", 88 | "country": "China" 89 | }, 90 | { 91 | "value": 12478447, 92 | "name": "Mumbai", 93 | "country": "India" 94 | }, 95 | { 96 | "value": 10467400, 97 | "name": "Shenzhen", 98 | "country": "China" 99 | }, 100 | { 101 | "value": 10075310, 102 | "name": "Jakarta", 103 | "country": "Indonesia" 104 | }, 105 | { 106 | "value": 10048850, 107 | "name": "Seoul", 108 | "country": "South Korea" 109 | }, 110 | { 111 | "value": 6318745, 112 | "name": "Lahore", 113 | "country": "Pakistan" 114 | } 115 | ] 116 | }, 117 | { 118 | "name": "Australia", 119 | "items": [ 120 | { 121 | "value": 4840600, 122 | "name": "Sydney", 123 | "country": "Austraila" 124 | }, 125 | { 126 | "value": 4440000, 127 | "name": "Melbourne", 128 | "country": "Austraila" 129 | }, 130 | { 131 | "value": 2274560, 132 | "name": "Brisbane", 133 | "country": "Austraila" 134 | }, 135 | { 136 | "value": 2021203, 137 | "name": "Perth", 138 | "country": "Austraila" 139 | }, 140 | { 141 | "value": 1304631, 142 | "name": "Adelaide", 143 | "country": "Austraila" 144 | } 145 | ] 146 | }, 147 | { 148 | "name": "Europe", 149 | "items": [ 150 | { 151 | "value": 14160467, 152 | "name": "Istanbul", 153 | "country": "Turkey" 154 | }, 155 | { 156 | "value": 12197596, 157 | "name": "Moscow", 158 | "country": "Russia" 159 | }, 160 | { 161 | "value": 8538689, 162 | "name": "London", 163 | "country": "United Kingdom" 164 | }, 165 | { 166 | "value": 5191690, 167 | "name": "Saint Petersburg", 168 | "country": "Russia" 169 | }, 170 | { 171 | "value": 4470800, 172 | "name": "Ankara", 173 | "country": "Turkey" 174 | }, 175 | { 176 | "value": 3517424, 177 | "name": "Berlin", 178 | "country": "Germany" 179 | }, 180 | { 181 | "value": 3207247, 182 | "name": "Madrid", 183 | "country": "Spain" 184 | }, 185 | { 186 | "value": 2761477, 187 | "name": "Rome", 188 | "country": "Italy" 189 | }, 190 | { 191 | "value": 2848597, 192 | "name": "Kyiv", 193 | "country": "Ukraine" 194 | }, 195 | { 196 | "value": 2249977, 197 | "name": "Paris", 198 | "country": "France" 199 | }, 200 | { 201 | "value": 1949400, 202 | "name": "Minsk", 203 | "country": "Belarus" 204 | }, 205 | { 206 | "value": 1924425, 207 | "name": "Bucharest", 208 | "country": "Romania" 209 | } 210 | ] 211 | }, 212 | { 213 | "name": "North America", 214 | "items": [ 215 | { 216 | "value": 8874724, 217 | "name": "Mexico City", 218 | "country": "Mexico" 219 | }, 220 | { 221 | "value": 8550405, 222 | "name": "New York City", 223 | "country": "United States" 224 | }, 225 | { 226 | "value": 3884307, 227 | "name": "Los Angeles", 228 | "country": "United States" 229 | }, 230 | { 231 | "value": 2808503, 232 | "name": "Toronto", 233 | "country": "Canada" 234 | }, 235 | { 236 | "value": 2722389, 237 | "name": "Chicago", 238 | "country": "United States" 239 | }, 240 | { 241 | "value": 2239558, 242 | "name": "Houston", 243 | "country": "United States" 244 | }, 245 | { 246 | "value": 2121871, 247 | "name": "Havana", 248 | "country": "Cuba" 249 | }, 250 | { 251 | "value": 1742023, 252 | "name": "Ecatepec de Morelos", 253 | "country": "Mexico" 254 | }, 255 | { 256 | "value": 1731245, 257 | "name": "Montreal", 258 | "country": "Canada" 259 | } 260 | ] 261 | }, 262 | { 263 | "name": "South America", 264 | "items": [ 265 | { 266 | "value": 11895893, 267 | "name": "São Paulo", 268 | "country": "Brazil" 269 | }, 270 | { 271 | "value": 8693387, 272 | "name": "Lima", 273 | "country": "Peru" 274 | }, 275 | { 276 | "value": 7776845, 277 | "name": "Bogotá", 278 | "country": "Colombia" 279 | }, 280 | { 281 | "value": 6429923, 282 | "name": "Rio de Janeiro", 283 | "country": "Brazil" 284 | }, 285 | { 286 | "value": 5743719, 287 | "name": "Santiago", 288 | "country": "Chile" 289 | }, 290 | { 291 | "value": 3273863, 292 | "name": "Caracas", 293 | "country": "Venezuela" 294 | }, 295 | { 296 | "value": 3054300, 297 | "name": "Buenos Aires", 298 | "country": "Argentina" 299 | }, 300 | { 301 | "value": 2902927, 302 | "name": "Salvador", 303 | "country": "Brazil" 304 | }, 305 | { 306 | "value": 2852372, 307 | "name": "Brasília", 308 | "country": "Brazil" 309 | }, 310 | { 311 | "value": 2571896, 312 | "name": "Fortaleza", 313 | "country": "Brazil" 314 | }, 315 | { 316 | "value": 2560505, 317 | "name": "Guayaquil", 318 | "country": "Ecuador" 319 | } 320 | ] 321 | } 322 | ] -------------------------------------------------------------------------------- /WidgetGallery/Views/Home/Editors.cshtml: -------------------------------------------------------------------------------- 1 | @model WidgetGallery.ViewModels.EditorsViewModel 2 | 3 |
4 |
5 |
6 |
7 | 8 | @(Html.DevExtreme().TextBox() 9 | .MaxLength(20) 10 | .Placeholder("Max length 20") 11 | .Value(Model.Name) 12 | ) 13 |
14 | 15 |
16 | 17 | @(Html.DevExtreme().TextBox() 18 | .Mode(TextBoxMode.Password) 19 | .Placeholder("Enter password") 20 | .Value(Model.Password) 21 | ) 22 |
23 | 24 |
25 | 26 | @(Html.DevExtreme().TextBox() 27 | .Mode(TextBoxMode.Tel) 28 | .Placeholder("Enter phone") 29 | .Mask("+0 (000) 000-00-00") 30 | .UseMaskedValue(true) 31 | .Value(Model.Phone) 32 | ) 33 |
34 | 35 |
36 | 37 | @(Html.DevExtreme().TextBox() 38 | .Mode(TextBoxMode.Text) 39 | .ReadOnly(true) 40 | .Value(Model.Extension) 41 | ) 42 |
43 | 44 |
45 | 46 | @(Html.DevExtreme().TextArea() 47 | .Value("Some text") 48 | .Spellcheck(true) 49 | .Value(Model.Description) 50 | ) 51 |
52 | 53 |
54 | 55 |
56 | @(Html.DevExtreme().NumberBox() 57 | .Max(100) 58 | .Min(0) 59 | .Mode(NumberBoxMode.Number) 60 | .Placeholder("Enter a number...") 61 | .ReadOnly(false) 62 | .ShowClearButton(true) 63 | .ShowSpinButtons(true) 64 | .Step(1) 65 | .Value(Model.Age) 66 | ) 67 |
68 |
69 | 70 |
71 | 72 |
73 |
74 | @(Html.DevExtreme().RadioGroup() 75 | .Items(items => { 76 | items.Add().Text("Tea"); 77 | items.Add().Text("Coffee"); 78 | items.Add().Text("Juice"); 79 | }) 80 | ) 81 |
82 |
83 | @(Html.DevExtreme().RadioGroup() 84 | .Items(items => { 85 | items.Add().Text("Tea"); 86 | items.Add().Text("Coffee"); 87 | items.Add().Text("Juice"); 88 | }) 89 | .ValueExpr("text") 90 | .Value(Model.Drink) 91 | .Layout(Orientation.Horizontal) 92 | ) 93 |
94 |
95 |
96 | 97 |
98 | 99 |
100 | @(Html.DevExtreme().Autocomplete() 101 | .DisplayValue("") 102 | .MaxItemCount(6) 103 | .MinSearchLength(2) 104 | .Placeholder("Type country name") 105 | .SearchMode(DropDownSearchMode.StartsWith) 106 | .SearchTimeout(200) 107 | .ShowClearButton(true) 108 | .DataSource(d => d.WebApi().Controller("GeoNames").LoadAction("Countries")) 109 | .Value(Model.Country) 110 | ) 111 |
112 |
113 | 114 |
115 | 116 |
117 | @(Html.DevExtreme().Lookup() 118 | .Placeholder("Select the city") 119 | .ApplyButtonText("Select") 120 | .ApplyValueMode(EditorValueApplyMode.UseButtons) 121 | .DataSource(d => d.WebApi().Controller("GeoNames").LoadAction("Cities").Key("this")) 122 | .CloseOnOutsideClick(true) 123 | .FieldTemplate(@<%= obj %>) 124 | .PageLoadMode(ListPageLoadMode.NextButton) 125 | .SearchMode(DropDownSearchMode.StartsWith) 126 | .SearchPlaceholder("Enter the first letters") 127 | .Shading(true) 128 | .MinSearchLength(2) 129 | .ShowDataBeforeSearch(true) 130 | .ShowPopupTitle(false) 131 | .Value(Model.City) 132 | ) 133 |
134 |
135 | 136 |
137 | 138 |
139 | @(Html.DevExtreme().SelectBox() 140 | .Placeholder("Select the color") 141 | .DataSource(Model.Colors) 142 | .AcceptCustomValue(true) 143 | ) 144 |
145 |
146 | 147 |
148 | 149 |
150 | @(Html.DevExtreme().TagBox() 151 | .Placeholder("Select the color") 152 | .DataSource(Model.Colors) 153 | .AcceptCustomValue(true) 154 | .Value(Model.SelectedColors) 155 | ) 156 |
157 |
158 | 159 |
160 |
161 | @(Html.DevExtreme().Button() 162 | .Text("Submit") 163 | .Icon("check") 164 | .Type(ButtonType.Success) 165 | ) 166 |
167 |
168 |
169 | 170 |
171 | 172 |
173 | 174 | @(Html.DevExtreme().ColorBox() 175 | .ApplyButtonText("Set Color") 176 | .ApplyValueMode(EditorValueApplyMode.UseButtons) 177 | .EditAlphaChannel(true) 178 | .Placeholder("Edit color") 179 | .Value(Model.Color) 180 | ) 181 |
182 | 183 |
184 | 185 | @(Html.DevExtreme().DateBox() 186 | .ApplyValueMode(EditorValueApplyMode.UseButtons) 187 | .DisplayFormat(Format.ShortDateShortTime) 188 | .Type(DateBoxFormat.Datetime) 189 | .Interval(10) 190 | .PickerType(DateBoxPickerType.Calendar) 191 | .Value(Model.Date) 192 | ) 193 |
194 | 195 |
196 | 197 | @(Html.DevExtreme().DateBox() 198 | .ApplyValueMode(EditorValueApplyMode.Instantly) 199 | .Type(DateBoxFormat.Date) 200 | .PickerType(DateBoxPickerType.List) 201 | .Value(Model.Date) 202 | ) 203 |
204 | 205 |
206 | 207 | @(Html.DevExtreme().Calendar() 208 | .FirstDayOfWeek(FirstDayOfWeek.Monday) 209 | .ZoomLevel(CalendarZoomLevel.Year) 210 | .ShowTodayButton(true) 211 | .Value(Model.Date) 212 | ) 213 |
214 | 215 |
216 | 217 | @(Html.DevExtreme().Slider() 218 | .KeyStep(1) 219 | .Label(l => l 220 | .Visible(true) 221 | .Position(VerticalEdge.Bottom) 222 | ) 223 | .Tooltip(t => t 224 | .ShowMode(SliderTooltipShowMode.Always) 225 | .Enabled(true) 226 | ) 227 | .Value(Model.Age) 228 | .Min(0) 229 | .Max(100) 230 | ) 231 |
232 | 233 |
234 | 235 | @(Html.DevExtreme().RangeSlider() 236 | .KeyStep(0.01) 237 | .Step(0.01) 238 | .Label(l => l 239 | .Visible(true) 240 | .Position(VerticalEdge.Bottom) 241 | ) 242 | .Tooltip(t => t 243 | .ShowMode(SliderTooltipShowMode.OnHover) 244 | .Enabled(true) 245 | ) 246 | .Start(-1.5) 247 | .End(7.5) 248 | .Visible(true) 249 | .Min(-10) 250 | .Max(10) 251 | ) 252 |
253 | 254 |
255 | 256 |
257 | @(Html.DevExtreme().Switch() 258 | .Value(Model.Accepted) 259 | .OnText("I") 260 | .OffText("O") 261 | ) 262 | 263 | @(Html.DevExtreme().Switch() 264 | .Value(!Model.Accepted) 265 | ) 266 |
267 | 268 |
269 | 270 |
271 | 272 |
273 | @(Html.DevExtreme().CheckBox() 274 | .Value(Model.Accepted) 275 | .Text("Checked") 276 | ) 277 | 278 | @(Html.DevExtreme().CheckBox() 279 | .Value(JS.Undefined) 280 | .Text("Indeterminate") 281 | ) 282 | 283 | @(Html.DevExtreme().CheckBox() 284 | .Value(!Model.Accepted) 285 | .Text("Unchecked") 286 | ) 287 |
288 |
289 | 290 |
291 |
292 | 293 |
294 | --------------------------------------------------------------------------------