Questions on Kendo UI for jQuery Forum

1 answer

607 views

Extend draggable behavior to dynamically created elements

I have the base functionality of D&D working just fine. What I need to know is how to bind the behavior to dynamically created elements. I've found no reference in the documentation to allow the draggable event to bubble up to the newly created element. I don't want to have to unbind and rebind the kendoDraggable every time I create an element. Here's an example of what I'm trying to do:

https://dojo.telerik.com/OxUJE

Thanks

Drag and Drop

answered on 19 Jan 2018

1 answer

144 views

Drag and Drop with kendoSortable and TabStrip

hi,

Need your help.

I have a problem with kendoSortable and tabStrip.
when the direction in the page is right to left it does not work correctly.
I'm using your demo of kendoSortable with tabStrip from:
http://demos.telerik.com/kendo-ui/sortable/integration-tabstrip
just add to the body dir="rtl"

thanks

Drag and Drop

answered on 27 Nov 2017

1 answer

70 views

Drop on a Column

Here's my situation:
When a user drags a node from a TreeView and drops it in a grid, I add a column. That works... When a user drops a node onto an existing column in the grid, I want to ask the user if they'd like to append that same column or insert a new column to the right of that one... How can I do this?

I'm struggling to identify the index of the column the user dropped on, etc... Make the grid a kendoDropTargetArea? Make each column its own DropTarget?

Drag and Drop

answered on 04 Apr 2017

6 answers

243 views

reinitialize kendoDraggable

I need to reinitialize kendoDraggable on list of elements that were previously initialized.

I tried doing:
$('selector').removeData("kendoDraggable")

but this does not help: I still get hing from previous definition.

Drag and Drop

answered on 22 Mar 2017

3 answers

190 views

TreeView item with url property won't drag/drop

If I remove the url property on the data item, behavior is normal.

I've got a jsFiddle that demonstrates the problem here. The last node, 'Carpets' has a url property and can't be dropped and won't fire the drag event.

Drag and Drop

answered on 08 Feb 2017

6 answers

518 views

Draggable prevents focusing text inputs with mouse

Hi -- there seems to be a bug with the Draggable widget, where text <input> elements inside the draggable element cannot be focused with the mouse. See the following simple JS Fiddle:

http://jsfiddle.net/kQ5Sm/2/

Please let me know if there is a fix/workaround for this issue. Thanks!

ryan

Drag and Drop

answered on 08 Feb 2017

1 answer

508 views

Kendo Grid find out the drop row's uid

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>

Drag and Drop

answered on 15 Dec 2016

1 answer

172 views

Mulitselect drag and drop not working from 1 listview to another

Hi,

I am trying to implement Multi select items drag and drop from 1 listview to another.

I know that both selectable and draggable listen to the same event Select, hence directly we cannot do. Can someone help with some work around?

Here is my working code for single selection drag and drop: I want to make it work for selecting multiple drag and drop.

var dataSourceSalesRole = new kendo.data.DataSource({

data: salesRole,

pageSize: 21

});

var dataSourceSalesRoleContainer = new kendo.data.DataSource({

data: salesRoleContainer,

pageSize: 21

});

$("#listViewSalesRole").kendoListView({

dataSource: dataSourceSalesRole,

template: kendo.template($("#templateSalesRole").html())

});

$("#listViewSalesRoleContainer").kendoListView({

dataSource: dataSourceSalesRoleContainer,

template: kendo.template($("#templateSalesRoleContainer").html())

});

$("#listViewSalesRole").kendoDraggable({

group: "salesRole",

filter: ".move",

hint: function (element) {

return element.clone();

}

});

$("#listViewSalesRoleContainer").kendoDropTarget({

group: "salesRole",

dragenter: function (e) {

e.draggable.hint.css("opacity", 0.6);

},

dragleave: function (e) {

e.draggable.hint.css("opacity", 1);

},

drop: function (e) {

var count = 0;

var dropItem = dataSourceSalesRole.getByUid(e.draggable.hint.data().uid);

var salesRoleId = dropItem.SalesRoleId;

var saleRoleContainerData = dataSourceSalesRoleContainer.data();

$(saleRoleContainerData).each(function () {

if (this.SalesRoleId == salesRoleId) {

alert('Sales Role already exist! Cannot add.');

count++;

}

});

if (count == 0) {

dataSourceSalesRoleContainer.add(dropItem);

dataSourceSalesRole.remove(dropItem);

}

});

Drag and Drop

answered on 14 Oct 2016

5 answers

144 views

Drag and Drop to/from different scopes

I'm trying to configure a DnD from a TreeList view onto custom sidebar. I'm using Angular 1.x, and the the sidebar is configured as a directive complete with its own scope.

Is there a recommended way to transfer the data model that's tied to the treelist row to and from this sidebar given they are separate in scope?

Looking as many of the demos, it was difficult for me to determine how exactly to apply those techniques to my scenario.

Drag and Drop

answered on 05 Oct 2016

3 answers

423 views

Drag and drop from grid into input field

Using AngularJS I have a grid that I can drag the header from and place into an input field.

What I would like to do is drag and place this header in the same fashion that DataTransfer.setData() works, this will allow me to keep adding information to the input field in whichever order I would like.

Here is a plunker with an example of what I am trying to achieve though some reason the kendo header won't populate the input in plunker but it does work on my local project.

Thanks, any help on this would be great as I really want to use the kendo grid for this

Drag and Drop