@model IEnumerable<DevExtreme.NETCore.Demos.Models.TreeList.EmployeeTask>
<div id="demo-container">
<div class="widget-container">
@(Html.DevExtreme().ScrollView()
.ID("scroll")
.Direction(ScrollDirection.Vertical)
.ShowScrollbar(ShowScrollbarMode.Always)
.Content(
Html.DevExtreme().Sortable()
.ID("list")
.MoveItemOnDrop(true)
.Content(@<text>
@foreach(var task in Model) {
<div class="item dx-card dx-theme-text-color dx-theme-background-color">
@task.Task_Subject
</div>
}
</text>).ToString()
)
)
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Drop Feedback Mode:</span>
@(Html.DevExtreme().SelectBox()
.DataSource(new string[] { "push", "indicate" })
.Value("push")
.InputAttr("aria-label", "Drop Feedback Mode")
.OnValueChanged("dropFeedbackMode_changed")
)
</div>
<div class="option">
<span>Item Orientation:</span>
@(Html.DevExtreme().SelectBox()
.DataSource(new string[] { "vertical", "horizontal" })
.Value("vertical")
.InputAttr("aria-label", "Orientation")
.OnValueChanged("itemOrientation_changed")
)
</div>
<div class="option">
<span>Drag Direction:</span>
@(Html.DevExtreme().SelectBox()
.ID("drag-direction")
.DataSource(new string[] { "both", "vertical" })
.InputAttr("aria-label", "Drag Direction")
.Value("both")
.OnValueChanged("dragDirection_changed")
)
</div>
<div class="option">
<span>Scroll Speed:</span>
@(Html.DevExtreme().NumberBox()
.Value(30)
.InputAttr("aria-label", "Scroll Speed")
.OnValueChanged("scrollSpeed_changed")
)
</div>
<div class="option">
<span>Scroll Sensitivity:</span>
@(Html.DevExtreme().NumberBox()
.Value(60)
.InputAttr("aria-label", "Scroll Sensitivity")
.OnValueChanged("scrollSensitivity_changed")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Text("Use Handle")
.OnValueChanged("handle_changed")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Text("Use Drag Template")
.OnValueChanged("dragTemplate_changed")
)
</div>
</div>
</div>
<script>
function getSortableInstance() {
return $("#list").dxSortable("instance");
}
function dropFeedbackMode_changed(data) {
getSortableInstance().option("dropFeedbackMode", data.value);
}
function itemOrientation_changed(data) {
getSortableInstance().option("itemOrientation", data.value);
$("#scroll").toggleClass("horizontal", data.value === "horizontal");
$("#scroll").dxScrollView({
direction: data.value
});
$("#drag-direction").dxSelectBox({
value: "both",
inputAttr: { 'aria-label': 'Drag Direction' },
items: ["both", data.value]
});
}
function dragDirection_changed(data) {
getSortableInstance().option("dragDirection", data.value);
}
function scrollSpeed_changed(data) {
getSortableInstance().option("scrollSpeed", data.value);
}
function scrollSensitivity_changed(data) {
getSortableInstance().option("scrollSensitivity", data.value);
}
function handle_changed(data) {
if (data.value) {
$(".item").append("<i class='dx-icon dx-icon-dragvertical handle'></i>");
} else {
$(".item").children("i").remove();
}
$(".item").toggleClass("item-with-handle", data.value);
getSortableInstance().option("handle", data.value ? ".handle" : "");
}
function dragTemplate(options) {
return $("<div>")
.addClass("item dx-theme-border-color dx-theme-text-color dx-theme-background-color")
.css({ fontWeight: "bold", width: 200, padding: 10 })
.text(options.itemElement.text());
}
function dragTemplate_changed(data) {
getSortableInstance().option("dragTemplate", data.value ? dragTemplate : null);
getSortableInstance().option("cursorOffset", e.value ? { x: 10, y: 20 } : null);
}
</script>
using System.Linq;
using DevExtreme.NETCore.Demos.Models.SampleData;
using DevExtreme.NETCore.Demos.ViewModels;
using Microsoft.AspNetCore.Mvc;
namespace DevExtreme.NETCore.Demos.Controllers {
public class SortableController : Controller {
public ActionResult Customization() {
return View(SampleData.EmployeeTasks.Where(task => task.Task_Parent_ID != 0));
}
}
}
.widget-container {
margin-right: 320px;
}
#scroll {
height: 500px;
}
#scroll.horizontal {
margin-top: 170px;
display: block;
width: auto;
height: auto;
white-space: nowrap;
}
.handle {
position: absolute;
left: 4px;
top: 10px;
font-size: 18px;
line-height: 19px;
}
.horizontal .handle {
margin-right: 10px;
}
.item {
box-sizing: border-box;
position: relative;
padding: 10px 20px;
margin-bottom: 10px;
background: white;
}
.item-with-handle {
padding-left: 30px;
}
.horizontal .item {
display: inline-block;
width: 200px;
height: 100px;
margin-bottom: 0;
margin-right: 10px;
white-space: normal;
}
.options {
padding: 20px;
position: absolute;
bottom: 0;
right: 0;
width: 260px;
top: 0;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}