Hello,
I have a quite complex drag&drop scenario:
- 2 grids with different column structure
- multiselect
- move rows between the grids
- move rows inside the same grid (reordering)
- dropping rows on an empty grid
- dropping rows to be inserted after the position of the row where the drop happened
After some testing I found a solution which works quite good. But strangely just when I load the test application from a local test web server.
If I install the application on a remote Web Server the identification of the grid row where the drop occured fails. I stripped down everything
which does not belong to that problem (for example angularjs to have the same behaviour jQuery based). Here is the reduced code. To even
exclude the possibility that it could have to do something with my eval version of kendo I used the libraries from CDN.
- Are the 2 methods which I use to get the uid of the drop row at all recommended?
- Is there a reliable way to get the uid of the drop row?
- I assume some type of run time problem here but the behaviour is stable (local server works always, remote server never).
Can be tested here: http://medialan.de:9800/dragdroptest.html
On dojo the code is working!
<!DOCTYPE html>
<html>
<head>
<link href="../kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="../kendo/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="../kendo/styles/kendo.default.min.css" rel="stylesheet" />
<link href="../kendo/styles/kendo.default.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="../kendo/js/jquery.min.js"></script>
<script src="../kendo/js/kendo.all.min.js"></script>
<script>
$(function() {
var d = [
{ v : "a" },
{ v : "b" },
{ v : "c" }];
var grid = $('#grid').kendoGrid({
dataSource: new kendo.data.DataSource({ data: d }),
selectable : "row",
columns: [ { field: "v" } ]
}).data('kendoGrid');
grid.table.kendoDropTarget({
drop: function(e) {
e.draggable.hint.hide();
// dropuid is undefined, when providing the test from a remote server
// - e.target is div.k-grid.k-widget when using remote server
// - e.target is td when using a local server
var dropuid = $($(e.target).parent()).data("uid");
console.log('dropuid is: ' + dropuid);
dropuid = grid.dataItem(e.target.closest("tr")).uid;
console.log('dropuid is: ' + dropuid);
}
});
grid.table.kendoDraggable({
filter: "tbody > tr",
cursorOffset : { top: 1, left: 1},
hint: function(e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
1 Answer, 1 is accepted
Hello Matthias,
Actually we do not suggest using the Kendo UI Grid Multirow selection with the drag and drop functionality.
The reason is because the grid Kendo UI Grid Multirow selection overlaps with the draggable triggers - basically, both are triggered on drag, with the selection taking precedence. Given that, the two feature sets are not compatible - if the draggable worked, the selection might not work or cause some unexpected behavior.
I such cases I would suggest to implement a column with check box ( using columns.template) to mark the rows you want to drag. In this case the multirow selection can be removed and the events should be triggered as expected.
Regards,
Boyan Dimitrov
Telerik by Progress