Awesome ASP.net Core and MVC Controls

Drag and Drop demo

Grid reorder rows

on touch you can scroll the grids with movable rows by touching from the right or left side of the grid

DragAndDropDemo/Index.cshtml
@(Html.Awe().Grid("GridReord")
.Url(Url.Action("MealsGrid", "Data"))
.Mod(o => o.MovableRows())
.Height(300)
.Paging(false)
.Groupable(false)
.Sortable(false)
.Columns(
new Column { Bind = "Id", Width = 100 },
new Column { Bind = "Name", Width = 200 },
new Column { Bind = "Description" }.Mod(o => o.Autohide())))
<br />
<button type="button" onclick="getIds()" class="awe-btn">get ids</button>
<div id="log" class="log"></div>

<script>
$(function () {
$('#GridReord').on('awedrop', function (e, data) {
var row = $(e.target);
$('#log').prepend(utils.model(row).Name + ' moved from ' + data.previ + ' to ' + row.index() + '<br/>');
});
});

function getIds() {
var ids = $('#GridReord').find('.awe-row').map(function (i, el) { return $(el).data('k'); }).get();
$('#log').html(JSON.stringify(ids));
}
</script>

From one grid to another



DragAndDropDemo/Index.cshtml
<div class="frame">
<script>
var selected = [];

// used by the grids to tell the server which items to include/exclude
function getSelected() {
return { selected: selected };
}

$(function () {
$('#MealsGrid1, #MealsGrid2').on('awedrop', function (e, data) {
var row = $(e.target);
$('#log').prepend(utils.model(row).Name + ' moved from ' + data.from.closest('.awe-grid').attr('id') +
' to ' + row.closest('.awe-grid').attr('id') + '<br/>');

selected = $('#MealsGrid2').find('.awe-row').map(function (i, el) { return $(el).data('k'); }).get();
});
});
</script>

@(Html.Awe().Grid("MealsGrid1")
.Url(Url.Action("MealsGridSrc"))
.Mod(o => o.MovableRows("MealsGrid1", "MealsGrid2").ColumnsSelector())
.Height(200)
.Paging(false)
.ParameterFunc("getSelected")
.Groupable(false)
.Columns(
new Column { Bind = "Id", Width = 100 },
new Column { Bind = "Name", Width = 200 },
new Column { Bind = "Description" }.Mod(o => o.Autohide())))
<br />
<br />
@(Html.Awe().Grid("MealsGrid2")
.Url(Url.Action("MealsGridSel"))
.Mod(o => o.MovableRows("MealsGrid1", "MealsGrid2").ColumnsSelector())
.Height(200)
.Paging(false)
.ParameterFunc("getSelected")
.Groupable(false)
.Columns(
new Column { Bind = "Id", Width = 100 },
new Column { Bind = "Name", Width = 200 },
new Column { Bind = "Description" }.Mod(o => o.Autohide())))
</div>
Demos/Grid/DragAndDropDemoController.cs
public ActionResult MealsGridSrc(GridParams g, int[] selected)
{
selected = selected ?? new int[] {};
var items = Db.Meals.Where(o => !selected.Contains(o.Id)).AsQueryable();
return Json(new GridModelBuilder<Meal>(items, g) { Key = "Id" }.Build());
}

public ActionResult MealsGridSel(GridParams g, int[] selected)
{
selected = selected ?? new int[] { };
var items = Db.Meals.Where(o => selected.Contains(o.Id)).AsQueryable();
return Json(new GridModelBuilder<Meal>(items, g) { Key = "Id" }.Build());
}

Simple drag and drop demo

drag source

a
b
c

drop target

DragAndDropDemo/Index.cshtml
<div class="dropZone">
<p>drag source</p>
<div class="dragItem">a</div>
<div class="dragItem">b</div>
<div class="dragItem">c</div>
</div>
<br />
<div class="dropZone">
<p>drop target</p>
</div>

<script>
$(function () {
awem.dragAndDrop({
from: $('.dropZone'),
sel: '.dragItem',
dropSel: '.dropZone',
hover: function (cx) {
cx.cont.addClass('awe-highlight');
},
drop: function (cx) {
cx.cont.append(cx.drgo);
},
reshov: function () {
$('.dropZone').removeClass('awe-highlight');
},
hide: 1
});
});
</script>

<style>
.dropZone {
border: 1px solid #9E9E9E;
border-radius: 2px;
height: 100px;
padding: 5px;
}

.dragItem {
display: inline-block;
background: gray;
color: white;
padding: .5em 2.5em;
border-radius: 2px;
cursor: default;
margin-right: 5px;
}
</style>

Drag Cards and Items

item 1
item 2
item 3
item 4
item 5
item 6
item 7


Shared/Demos/CardsAndItems.cshtml
<script>
$(function () {
awem.dragReor({ from: $('#board1 .card'), to: '#board1 .card', sel: '.item' });

// don't drag board when mouse down on .item
function cancel(cx) { return $(cx.e.target).closest('.item').length; }

awem.dragReor({ from: $('#board1'), to: '#board1', sel: '.card', cancel: cancel });

// write to log
$('#board1').on('awedrop', function (e, data) {
var o = $(e.target);
var msg = name(o) + ' moved from ' + name(data.from) + ' to ' + name(o.parent()) +
' | previ = ' + data.previ + ' newi = ' + o.index();
$('#logci').html(msg + '</br>');
});

function name(o) {
var r = o.attr('class');
if (o.data('k')) r += ' ' + o.data('k');
if (o.hasClass('item')) r = o.html();
return r;
}
});
</script>

<div class="board" id="board1">
<div class="card" data-k="a">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
</div>

<div class="card" data-k="b">
<div class="item">item 4</div>
<div class="item">item 5</div>
</div>

<div class="card" data-k="c">
<div class="item">item 6</div>
<div class="item">item 7</div>
</div>
</div>
<br />
<br />
<div id="logci" class="log2"></div>
<style>
.item.o-plh, .card.o-plh {
background: #f8da4e !important;
color: #915608 !important;
}
</style>

Handle

a
b
c
DragAndDropDemo/Index.cshtml
<script>
$(function () {
awem.dragReor({ from: $('#b2'), to: '#b2', sel: '.card', handle: '.handle' });
});
</script>

<div class="board" id="b2">
<div class="card">
<div class="handle"></div>
<div class="big">a</div>
</div>

<div class="card">
<div class="handle"></div>
<div class="big">b</div>
</div>

<div class="card">
<div class="handle"></div>
<div class="big">c</div>
</div>
</div>

Sticky placeholder, drag reorder and drop while outside of the drop area

Cards can be reordered using drag and drop, you can drag and drop the card while dragging outside and around of the drop area.
Used for the multiselect to reorder selected items.
A
B
C
X
Y
Z
Shared/Demos/ReorderCardsSplh.cshtml
<script>
$(function () {
awem.dragReor({
from: $('#board0'),
to: 'body', // execute drop/hover over body
sel: '.mcard',
splh: 1, // sticky placeholder
gcon: function (cx) {
// get drop/hov container ( default was 'body' (to) )
return $('#board0');
}
});
});
</script>

<div class="board" id="board0">
<div class="mcard">
<div class="big">A</div>
</div>
<div class="mcard">
<div class="big">B</div>
</div>
<div class="mcard">
<div class="big">C</div>
</div>

<div class="mcard">
<div class="big">X</div>
</div>
<div class="mcard">
<div class="big">Y</div>
</div>
<div class="mcard">
<div class="big">Z</div>
</div>
</div>

<style>
#board0 {
max-width: 26em;
}

.mcard.o-plh {
background: #f8da4e !important;
color: #915608 !important;
}
</style>



Comments