Awesome ASP.net Web-Forms 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
get ids
DragAndDropDemo.aspx
<% GridReord.Grid() .Url(Page.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())); %> <awe:Ocon runat="server" ID="GridReord" /> <br /> <button type="button" onclick="getIds()" class="awe-btn">get ids</button> <div id="log" class="log"></div> <script> $(function () { $('#<%=GridReord.ClientID %>').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.ClientID %>').find('.awe-row').map(function (i, el) { return $(el).data('k'); }).get(); $('#log').html(JSON.stringify(ids)); } </script>
From one grid to another
DragAndDropDemo.aspx
<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.ClientID %>, #<%=MealsGrid2.ClientID %>').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.ClientID %>').find('.awe-row').map(function (i, el) { return $(el).data('k'); }).get(); }); }); </script> <% MealsGrid1.Grid() .Url(Page.Url().Action("MealsGridSrc", "DragAndDropDemo")) .Mod(o => o.MovableRows(MealsGrid1.ClientID, MealsGrid2.ClientID).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())); %> <awe:Ocon runat="server" ID="MealsGrid1" /> <br /> <br /> <% MealsGrid2.Grid() .Url(Page.Url().Action("MealsGridSel", "DragAndDropDemo")) .Mod(o => o.MovableRows(MealsGrid1.ClientID, MealsGrid2.ClientID).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())); %> <awe:Ocon runat="server" ID="MealsGrid2" /> </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
DragAndDropDemo.aspx
<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
DragAndDropDemo.aspx
<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
DragAndDropDemo.aspx
<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.
DragAndDropDemo.aspx
<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