Merge example changes from main branch

Author: AlisherAmonulloev

ASP.NET Core/Views/Home/Index.cshtml

@@ -1,29 +1,23 @@
-@using ASP_NET_Core.Models
-
-<h2>Home</h2>
-
-@(Html.DevExtreme().DataGrid<SampleOrder>()
-    .ShowBorders(true)
-    .DataSource(d => d.Mvc().Controller("SampleData").LoadAction("Get").Key("OrderID"))
-    .Columns(columns => {
-        columns.AddFor(m => m.OrderID);
-        columns.AddFor(m => m.OrderDate);
-        columns.AddFor(m => m.CustomerName);
-        columns.AddFor(m => m.ShipCountry);
-        columns.AddFor(m => m.ShipCity);
+<div class="demo-header">
+    <h3>DataGrid - Select multiple items and drag'n'drop</h3>
+    <div id="toggle-container">
+        <span>Clear selection after drop</span>
+        @(Html.DevExtreme().Switch().ID("clearAfterDropSwitch"))
+    </div>
+</div>
+@(Html.DevExtreme().TabPanel()
+    .Items(tabs => {
+        tabs.Add().Title("Plain Data")
+            .Template(@<text>
+                <div>
+                    @(await Html.PartialAsync("../PartialViews/DataGridLocal"))
+                    </div>
+                </text>);
+        tabs.Add().Title("Hierarchical Data")
+        .Template(@<text>
+            <div>
+                @(await Html.PartialAsync("../PartialViews/DataGridRemote"))
+                </div>
+            </text>);
     })
-    .Paging(p => p.PageSize(10))
-    .FilterRow(f => f.Visible(true))
-    .HeaderFilter(f => f.Visible(true))
-    .GroupPanel(p => p.Visible(true))
-    .Grouping(g => g.AutoExpandAll(false))
-    .RemoteOperations(true)
-    .Summary(s => s
-        .TotalItems(totalItems => {
-            totalItems.AddFor(m => m.ShipCity).SummaryType(SummaryType.Count);
-        })
-        .GroupItems(groupItems => {
-            groupItems.Add().SummaryType(SummaryType.Count);
-        })
-    )
 )

ASP.NET Core/Views/PartialViews/DataGridLocal.cshtml

@@ -0,0 +1,21 @@
+@(
+Html.DevExtreme().DataGrid()
+    .DataSource(new JS("customers"))
+    .KeyExpr("ID")
+    .RowDragging(drag => drag
+        .AllowReordering(true)
+        .OnDragStart("LocalGrid.dragStart")
+        .OnDragChange("LocalGrid.dragChange")
+        .OnReorder("LocalGrid.reorder")
+        .DragTemplate(new JS("LocalGrid.dragTemplate"))
+    )
+    .Selection(s => s.Mode(SelectionMode.Multiple))
+    .Sorting(s => s.Mode(GridSortingMode.None))
+    .Columns(col => {
+        col.Add().DataField("ID").Width(55);
+        col.Add().DataField("CompanyName");
+        col.Add().DataField("Address");
+        col.Add().DataField("City");
+        col.Add().DataField("State");
+    })
+)

ASP.NET Core/Views/PartialViews/DataGridRemote.cshtml

@@ -0,0 +1,41 @@
+@(
+Html.DevExtreme().DataGrid()
+    .DataSource(d => d.RemoteController()
+        .LoadUrl("https://js.devexpress.com/Demos/Mvc/api/RowReordering/Tasks")
+        .UpdateUrl("https://js.devexpress.com/Demos/Mvc/api/RowReordering/UpdateTask")
+        .OnBeforeSend("RemoteGrid.beforeSend")
+        .Key("ID"))
+    .RemoteOperations(true)
+    .RowDragging(drag => drag
+        .AllowReordering(true)
+        .OnDragStart("RemoteGrid.dragStart")
+        .OnDragChange("RemoteGrid.dragChange")
+        .OnReorder("RemoteGrid.reorder")
+        .DragTemplate(new JS("RemoteGrid.dragTemplate"))
+    )
+    .Selection(s => s.Mode(SelectionMode.Multiple))
+    .Sorting(s => s.Mode(GridSortingMode.None))
+    .Scrolling(s => s.Mode(GridScrollingMode.Virtual))
+    .Height(480)
+    .Columns(columns => {
+        columns.Add().DataField("ID").Width(55);
+        columns.Add().DataField("Owner").Lookup(lookup => lookup
+            .DataSource(d => d.RemoteController()
+                .LoadUrl("https://js.devexpress.com/Demos/Mvc/api/RowReordering/Employees")
+                .Key("ID"))
+            .ValueExpr("ID")
+            .DisplayExpr("FullName")
+        );
+        columns.Add().DataField("AssignedEmployee")
+        .Width(150)
+        .Caption("Assignee")
+        .Lookup(lookup => lookup
+            .DataSource(d => d.RemoteController()
+                .LoadUrl("https://js.devexpress.com/Demos/Mvc/api/RowReordering/Employees")
+                .Key("ID"))
+            .ValueExpr("ID")
+            .DisplayExpr("FullName")
+        );
+        columns.Add().DataField("Subject");
+    })
+)

ASP.NET Core/Views/Shared/_Layout.cshtml

@@ -17,6 +17,9 @@
     <link rel="stylesheet" href="~/css/vendor.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/css/Site.css" />
     <script src="~/js/vendor.js" asp-append-version="true"></script>
+    <script src="~/js/LocalDataArray.js"></script>
+    <script src="~/js/GridLocal.js"></script>
+    <script src="~/js/GridRemote.js"></script>
 </head>
 
 <body class="dx-viewport">

ASP.NET Core/wwwroot/css/Site.css

@@ -1,7 +1,35 @@
 .demo-container {
-    margin: 50px;
-    width: 90vw;
+    margin: 50px 50px;
+    width: 90vh;
 }
 body {
     margin: 8px;
 }
+.tab-item-content {
+    margin: auto;
+}
+
+.demo-header {
+    display: flex;
+    justify-content: space-between;
+}
+
+#toggle-container {
+    padding-top: 20px;
+}
+
+#clearAfterDropSwitch {
+    vertical-align: text-bottom;
+}
+
+#toggle-container span {
+    padding-right: 10px;
+}
+
+.drag-container {
+    padding: 10px;
+}
+
+.drag-container td {
+    padding: 0px 10px 0px 10px;
+}