Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Drag and Drop between Listviews

1 Answer 262 Views
Drag and Drop
This is a migrated thread and some comments may be shown as answers.
Rick
Top achievements
Rank 2
Rick asked on 17 Apr 2016, 02:26 PM
drag-and-drop-between-listviews-07.zip

I needed to be able to edit arrays of objects. Not finding a working example I finally came across a flawed example, sort of, at www.codeproject.com/Tips/678743/Kendo-UI-Drag-Drop-between-Listviews-Step-by-Step by Nasir M@hmood. So, I built it in Dojo and fixed it to work for my purposes.

I needed the user to be able to move tags back and forth and have their array objects move back and forth as well. This does that.

I hope it can help other people.

It is attached as a zip file. I am also putting it into this message in case folks can't read the zip file.

Bon appétit.

Rick

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Drag and Drop between Listviews 07</title>
 
 
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<body>
<script type="text/x-kendo-tmpl" id="mappedtagtemplate">       
  <div style=""display:inline-block"">
    <div class="tags k-block"> #:Name# </div>
  </div>
</script>
<div style="padding:30px;">
    <table>
        <tr>
            <td><h2>Unmapped Tags</h2></td>
            <td><h2>Mapped Tags</h2></td>
        </tr>
        <tr>
            <td>
                <div id="unmappedtag_listview"
                class="tagcontainer"></div>       
            </td>
            <td>
                <div id="mappedtag_listview"
                class="tagcontainer"></div>
            </td>
        </tr>
    </table>
</div>
<script>
 
var mappedtag_taglist = [{ "ID": 100, "Name":
"Razor View" }, { "ID": 101, "Name": "JQuery"},
{ "ID": 102, "Name": "MS Sql"},
{ "ID": 103, "Name": "My Sql"},
{ "ID": 104, "Name": "Ruby"},
{ "ID": 105, "Name": "SQL"}];
   
var mappedtag_datasource = new kendo.data.DataSource({
    data: mappedtag_taglist
});
 
var unmappedtag_taglist = [{ "ID": 1,
"Name": "ASP.NET" },
{ "ID": 2, "Name": "Kendo UI"},
{ "ID": 3, "Name": "CSharp"},{ "ID": 4,
"Name": "Java Script"},
{ "ID": 5, "Name": "PHP"},{ "ID": 6,
"Name": "Java"},{ "ID": 7, "Name": "CSS"},
{ "ID": 8, "Name": "HTML"},{ "ID": 9,
"Name": "Unix"},{ "ID": 10, "Name": "Mac"}];
   
var unmappedtag_datasource = new kendo.data.DataSource({
    data: unmappedtag_taglist
});
 
$("#mappedtag_listview").kendoListView({
    dataSource: mappedtag_datasource,
    template: '<div class="tags move k-block">  #:Name# </div>'
});
   
$("#unmappedtag_listview").kendoListView({
    dataSource: unmappedtag_datasource,
    template: '<div class="tags move k-block">  #:Name# </div>'
});
 
   
$("#mappedtag_listview").kendoDraggable({
    filter: ".move",
    hint: function (element) {
        return element.clone();
    }
});
 
$("#unmappedtag_listview").kendoDraggable({
    filter: ".move",
    hint: function (element) {
        return element.clone();
    }
});
    
$("#mappedtag_listview").kendoDropTarget({
    dragenter: function (e) {
        e.draggable.hint.css("opacity", 0.6);                 
    },
    dragleave: function (e) {
        e.draggable.hint.css("opacity", 1);                 
    },
    drop: function (e) {                                                       
        var item = unmappedtag_datasource.getByUid(e.draggable.hint.data().uid);
        mappedtag_datasource.add(item);                   
        unmappedtag_datasource.remove(item);
        console.error("MappedTags", kendo.stringify(mappedtag_datasource.data()));
        console.error("UnmappedTags", kendo.stringify(unmappedtag_datasource.data()));
    }
});
   
$("#unmappedtag_listview").kendoDropTarget({
    dragenter: function (e) {
        e.draggable.hint.css("opacity", 0.6);                 
    },
    dragleave: function (e) {
        e.draggable.hint.css("opacity", 1);                 
    },
    drop: function (e) {                                                       
        var item = mappedtag_datasource.getByUid(e.draggable.hint.data().uid);
        unmappedtag_datasource.add(item);                   
        mappedtag_datasource.remove(item);
        console.error("MappedTags", kendo.stringify(mappedtag_datasource.data()));
        console.error("UnmappedTags", kendo.stringify(unmappedtag_datasource.data()));
    }
});
</script>
<style>
.move
{
    cursor: move;
}
.tagcontainer
{
    float: left;
    margin-left: 10px;
    min-width: 400px;
    min-height: 510px;
    width: 400px;
}
.tagitemcls
{
    width: 24px;
    float: left;
    margin-left: -18px;
    margin-top: 10px;
    padding-top: 6px;
    padding-bottom: 8px;
    padding-left: 2px;
}
.tags
{
    margin: 10px;
    padding: 10px;
    float: left;
    color: #000;
}
table > div
{
    border:1px solid #CDCDCD;
}
</style> 
</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Rick
Top achievements
Rank 2
answered on 21 Apr 2016, 12:55 PM

Oops. Testing revealed an anomaly. If you drag a tag and drop it before leaving the draggable area you will find the 'item' undefined. That's because the code for each area looks for it in the OTHER area.

No problem. Just check if it's undefined and ignore the drop.

Like below.

Rick

var item = window.Content.UnassignedCategoryDS.getByUid(e.draggable.hint.data().uid); if (dbg > 4) console.debug("assigned drop item",item);
if (typeof item != "undefined") {
        .
        .
        .
} else { if (dbg > 3) console.info("assigned category area drop ignored.") }
Tags
Drag and Drop
Asked by
Rick
Top achievements
Rank 2
Answers by
Rick
Top achievements
Rank 2
Share this question
or