Context
We're using Scheduler component and a custom list of items. We're also using the Draggable component to let the items to be dropped into the Scheduler component. You can find the layout of the implementation in the attachment.
The configuration of the items is the following:
$(element)
.find(`.${NS}customer-list__draggable`)
.kendoDraggable({
hint: () => {
var draggableElem = $(`
<span class="ui-draggable ${NS}customer-list__dragging">
${scope.customer.name} <br>
</span>
`);
draggableElem.css({
borderLeft: `3px solid ${scope.customer.displayColor}`
});
return draggableElem;
},
dragstart: event => {
// prevent dragging on agenda view
if ($rootScope.scheduler.viewName() === "agenda") {
event.preventDefault();
}
},
autoScroll: false,
containment: "window",
cursorOffset: { right: 0, top: 0, left: 0, bottom: 0 },
distance: 50,
group: "schedulerCustomerGroup"
});
The configuration of the Drop are is the following:
scheduler.view().table.kendoDropTargetArea({
group: 'schedulerCustomerGroup',
filter: '.k-scheduler-table td, .k-scheduler-header-all-day td, .k-event',
dragenter: (e) => {
var offset = $(e.dropTarget).offset(),
slot = scheduler.slotByPosition(offset.left, offset.top);
$(slot.element).css('background', '#bce8f1');
},
dragleave: (e) => {
var offset = $(e.dropTarget).offset(),
slot = scheduler.slotByPosition(offset.left, offset.top);
$(slot.element).css('background', '');
},
drop: (event) => {
var offset = $(event.dropTarget).offset(),
slot = scheduler.slotByPosition(offset.left, offset.top),
dragElem = event.draggable.element[0],
customer = _.find($rootScope.customers, {id: $(dragElem).data('customerId')});
$(slot.element).css('background', '');
scheduler.addEvent({
title: customer.name,
start: slot.startDate,
end: slot.endDate,
description: '',
customerId: customer.id,
streetAddr: customer.streetAddr,
city: customer.city,
state: customer.state,
country: customer.country,
zip: customer.zip,
phone: customer.phone,
lat: customer.lat,
long: customer.long,
accountId: customer.accountId,
contactId: customer.d_tx_uid,
isAllDay: slot.isDaySlot,
});
}
});
You can notice the group setting is the same in both configurations: schedulerCustomerGroup.
The filter configured in the kendoDropTargetArea is the following:
As you can see, the filter include all the cells in the Scheduler component.
Problem
The problem I'm having is when using the Work Week, and resizing the browser to an specific dimension, some cells are not being detected as drop area.
As you can see, I cannot drop the item in Wed 2/21.
A workaround is to resize the browser, but that's not a final solution I'm expecting to have.
Hi !
hello. Below is a simple test page.
https://dojo.telerik.com/eSAqaXuw/2
A counter for kendosplitter resize event and a counter for splitbar's dragenter event.
It should be resize cnt = dragenter + 1.
But, the more you go on, the more you go on, the more time goes by.
The gap widens. The difference increases.
Is there any way to strengthen dragenter's recognition?
How can dragenter events always be recognized?
Why isn't the dragenter event recognized properly?
I am very worried about this issue.
Thank you for reading.
We have an existing Kendo Grid inside a Bootstrap Collapse. We are attempted to enable the Drag & Drop functionality on it. If the Collapse starts out visible, it works as expected; if the Collapse starts out collapsed, drag-and-drop does not work. You can drag, but you can't drop.
I attempted to swap out the Bootstrap Collapse for a Kendo ExpansionPanel, but it suffered the same issues: it works if pre-expanded, and not if pre-collapsed.
I don't see this noted in the known limitations. Is there anything we're doing incorrectly, or is this a bug?
Good day,
When I'm dragging a row, if I hover over the insert indicator on the left of the grid it causes the tooltip (and sometimes the whole row) to flicker/flash, Ive noticed this issue exists on the tutorial page too, is there a work around for this?
The tutorial I used: https://demos.telerik.com/kendo-ui/grid/drag-drop
Kind regards
Chris
Hi,
There are question as below, I could not provide a code snippet because for editing require an API which are not available as development is in progress
transport: {
read: {
url: crudServiceBaseUrl ,
dataType: "json"
},
create: {
url: crudServiceBaseUrl + "/add",
dataType: "json"
},
update: {
url: crudServiceBaseUrl + "/update",
dataType: "json"
},
destroy: {
url: crudServiceBaseUrl + "/delete",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
{"Project":"e81af126-13cd-40c4-951b-9611fa85f39c","ID":"fc980fda-40c5-4fda-b97d-dfc0aced6a10","Description":"123123","WBSType":1,"SequenceNumber":0,"Parent":null,"BudgetSalesAmountDC":0.0,"BudgetCostsAmountDC":0.0,"Quantity":10.0,"WBSIcon":"","ReportsTo":null,"WBSRunningNumber":0,"hasChildren":false}
Hi,
On the roadmap page there is a "Dock Manager Component" listed, but I don't see any information on this anywhere.
Anyone have more information or an ETA on this?
Thanks
Christopher
Hi,
I was developing using kendo UI TreeList, however I found an issue when I drop a row from 1 parent to another, the source was not reparenting to the correct parent. Instead if was set to wrong position (as for my case it become a parent itself).
Step to reproduce:
Open this url https://dojo.telerik.com/UCUXaloN
Drag "Sprint planning (2012-2728)" and drop it to "Kick off" as per image below
After the drop the e.position should be "over" and I expect the row will appear inside "Kick Off" node and not as a parent itself. In the drop event after the "over" I will have my own logic to perform certain task.
Help is needed as I try with different and still not able to position it correctly.
Hi,
Reordering rows using the draggable column might seem a bit buggy, as you have to move the cursor to the right before dropping to reorder the rows successfully, as can be seen in the following example https://dojo.telerik.com/ipOyacoH . It would be nice if dragging and dropping directly above and below (inside the draggable column) would work without moving the cursor to the right, but I can't seem to make this work. Could somebody please help me with this?
Thanks in advance!