In searching this forum I came across this post from 2013.... https://www.telerik.com/forums/get-scheduler-timeslot-on-kendodroptarget
It mentions that this may be implemented in a future release. I've not found any information that indicates this is possible. I'm looking at placing a series of div objects that represent different types of events (work, lunch, meeting, day-off etc) along side a Scheduler. A user will drag and drop a div onto a scheduler and that will create a scheduler event in the slot it was dropped onto. Is this possible?
Thanks
Hi.
Is it possible to drag an item from one browser window to another (both on the same site)? I can get this to work with the HTML5 drag and drop, but not kendoDraggable. The draggable item will not move outside the window/container.
Example here: https://dojo.telerik.com/oCogArOf
- Odd
hello,
i'm trying to Integrate kendoDraggable with kendoSortable (inside ListView)
here is an example : https://dojo.telerik.com/iZOfuNoW
i want to drag a button and drop it inside Sortable ListView
Hello,
I have problems getting draggable to work in IE 11.
Example here:
https://dojo.telerik.com/OVeseMiQ/6
It is working in the latest version of Firefox and Chrome and also Edge.
Not sure if it's a kendo issue or maybe a JQuery problem.
Can you help ?
Hi,
Do we have anything similar to https://jqueryui.com/draggable/#snap-to where i can specify grid height width
I don't want to use Diagram here
//Defines grid of main Kendo grid for Questions
$scope.questionsDataSource =
new
kendo.data.DataSource({
autoSync:
true
,
schema: {
model: {
fields: {
GroupId: { type:
"int"
, editable:
false
},
GroupName: { type:
"string"
, editable:
false
, title:
"Group"
},
GroupSortOrder: { type:
"int"
, editable:
false
},
Id: { type:
"int"
, editable:
false
},
Text: { type:
"string"
, editable:
true
},
AnswerTypeLU: { type:
"int"
, editable:
false
},
RowNumber: { type:
"int"
, editable:
false
},
IsRequired: { type:
"bool"
, editable:
false
},
IsHidden: { type:
"bool"
, editable:
false
},
AllowNotes: { type:
"bool"
, editable:
false
},
AllowAttachFiles: { type:
"bool"
, editable:
false
},
Special: { type:
"string"
, editable:
false
},
Response: { type:
"string"
, editable:
false
},
AnswerId: { type:
"int"
, editable:
false
},
AnswerValue: { type:
"string"
, editable:
false
},
CorrectAnswer: { type:
"bool"
, editable:
false
},
AnswerBitValue: { type:
"int"
, editable:
false
},
AnswerArray: { type:
"string"
, editable:
false
},
}
}
},
//This allows the Kendo grid to group questions based on the group they are in
group: {
field:
"GroupName"
},
//Sets default sort order for table. Current settings sorts by row and number
sort: [ { field:
"RowNumber"
, dir:
"asc"
}]
});
$scope.questionsGrid = {
dataSource: $scope.questionsDataSource,
scrollable:
false
,
sortable:
true
,
selectable:
'multiple'
,
resizable:
true
,
persistSelection:
true
,
filterable:
true
,
reorderable:
true
,
editable:
false
,
columnMenu:
true
,
excel: {
fileName:
"questionnaire.xlsx"
,
allPages:
true
,
proxyURL:
"/Common/FileHandlers/KendoSaveFile.aspx"
},
toolbar: kendo.template(
'<div class="toolbar">'
+
'<a type="button" id="questionsGridExport" class="btn btn-default k-button-icontext k-grid-Export pull-right"><span class="k-icon k-i-excel"></span>Export to Excel</a>'
+
'</div>'
),
dataBound:
function
(e) {
$scope.dataBound(e);
},
columns: [
//Add, remove, or customize kendo columns here
////{ field: "GroupName", template: "#=GroupName#", groupHeaderTemplate: "Group: #=value#" },
//{ title: '<input onclick=\'selectAll(this)\' type=\'checkbox\' />', template: "<input class='checkbox' type='checkbox' />", width: "30px" },
{ field:
"RowNumber"
, title:
"#"
, width:
"10px"
},
{
field:
"Text"
, title:
"Question"
,
groupHeaderTemplate:
"Name: #:count#"
,
template:
//Quick Kendo Tip: 'dataItem' is key for plugging in data
//These 3 rows add icons for if the question is required, notes are allowed, and if attach files are allowed
"<i ng-show='questionAddon(dataItem.IsRequired)' style='color:red; float:right;' class='fa fa-asterisk addon pull-right;'></i>"
+
"<i ng-show='questionAddon(dataItem.AllowNotes)' style='color:orange; float:right;' class='icon icon-note addon'></i>"
+
"<i ng-show='questionAddon(dataItem.AllowAttachFiles)' style='color:dodgerblue; float:right;' class='icon icon-cloud-upload addon'></i>"
+
"<i ng-show='questionAddon(dataItem.MultiFileUpload)' style='color:purple; float:right;' class='fa fa-copy addon'></i>"
+
"#: Text #"
//Kendo template function overides anything that would normally show in the 'field'. So you need to have '#: fieldName #' included in the template to show the field data
},
{ field:
"IsRequired"
, title:
"Required"
, template:
"{{Is_Required[dataItem.IsRequired]}}"
},
{ field:
"AnswerValue"
, title:
"Answer"
},
{ field:
"AnswerTypeLU"
, title:
"Type"
, template:
"{{AnswerTypeLUCodes[dataItem.AnswerTypeLU]}}"
},
{
title:
"Edit"
,
template:
"<button class='btn btn-default' data-target='.edit-question-modal' ng-click='editQuestion(dataItem)' data-toggle='modal' style='margin:0px; padding:2px 5px 2px 5px;'><i class='fa fa-pencil' title='Edit' style='margin-right:5px;'></i>Edit</button>"
,
width:
"30px"
,
},
{ field:
"questionId"
, hidden:
true
, title:
"Id"
, template:
"{{dataItem.Id}}"
},
]
}
$scope.sortableOptions = {
//This needs it's own Kendo sortable wrapper to make the table sortable in the HTML doc
filter:
".k-grid tr[data-uid]"
,
//cursor: "move",
placeholder:
function
(element) {
return
element
.clone()
.removeAttr(
"uid"
)
.addClass(
"k-state-hover"
)
.css(
"opacity"
, 0.65);
},
container:
".k-grid tbody"
,
change:
function
(e) {
var
grid = $scope.questionsGrid;
var
oldIndex = e.oldIndex;
var
newIndex = e.newIndex;
var
dataItem = grid.dataSource.getByUid(e.item.data(
"uid"
));
// reorder the datasource
if
(newIndex != oldIndex) {
grid.dataSource.remove(dataItem);
grid.dataSource.insert(newIndex, dataItem);
}
var
droppedQuestions = $.grep($scope.questionnaire.FlatQuestions,
function
(data, index) {
return
dataItem.Id === data.Id;
});
var
questiontoUpdate = droppedQuestions[0];
questiontoUpdate.SortOrder = newIndex;
questiontoUpdate.RowNumber = newIndex + 1;
var
questionsGrid = $(
"#questionsGrid"
).data(
"kendoGrid"
);
var
data = questionsGrid.dataSource.data();
var
totalNumber = data.length;
var
csv_sorted_questioIds =
""
;
var
currentGroupId =
null
;
var
currentGroupName =
""
;
var
currentGroupSortOrder = 0;
var
needToSaveQuestion =
false
;
// get the list of questionIds in the order we want
for
(
var
i = 0; i < totalNumber; i++) {
var
currentDataItem = data[i];
// get the group info of the current data item
currentGroupId = currentDataItem.GroupId;
currentGroupName = currentDataItem.GroupName;
currentGroupSortOrder = currentDataItem.GroupSortOrder;
if
(csv_sorted_questioIds ===
""
) {
csv_sorted_questioIds = currentDataItem.Id.toString();
}
else
{
csv_sorted_questioIds +=
","
+ currentDataItem.Id.toString();
}
if
(newIndex === i && questiontoUpdate.GroupId !== currentGroupId) {
// update the row with the new group info
questiontoUpdate.GroupId = currentGroupId;
questiontoUpdate.GroupName = currentGroupName;
questiontoUpdate.GroupSortOrder = currentGroupSortOrder;
needToSaveQuestion =
true
;
}
}
$scope.saveQuestionSortOrder($scope.clientData.EventId, $scope.clientData.QuestionnaireId, $scope.questionnaire.HostCompanyId, $scope.questionnaire.Name, $scope.questionnaire.Label, csv_sorted_questioIds);
}
};
Recently, I have tried to minimize the size of my Kendo js file. I am only selecting elements that I have used in the application. On publishing the application I am getting this error in the console. Any idea, which dependent js files are missing.
Below the error:
kendo.all.min_latest.js:9 Uncaught TypeError: p.HierarchicalDragAndDrop is not a constructor
at init._dragging (kendo.all.min_latest.js:9)
at new init (kendo.all.min_latest.js:9)
at HTMLDivElement.<anonymous> (kendo.all.min_latest.js:2)
at Function.each (jquery.min.js:3)
at init.each (jquery.min.js:3)
at init.e.fn.(anonymous function) [as kendoTreeView] (http://localhost:8080/app/kendo2015/kendo.all.min_latest.js:2:2754)
at ChartTablesTree.prepareView (chartTablesTree.js:882)
at Worker.$thisClass.processTableColumnWorker.onmessage (chartTablesTree.js:509)
Hello i am using .kendoSortable and i want to restrict the user from dropping rows at the column headers line. is this possible?
Hi,
I have a "table" and labels inside table's td.I applied kendoDraggable to all labels in tds. And the all tds also droppable. Briefly, i want to move elements (which insde table cell) to another cell.
Everything seems ok, i can drag and drop but when i drag element to not droppable area, element disappeared, not reverting with animation. And some laggy behaviour when dragging. Am i missing a point ?
Here is my implementation
$("#itemTable label.item-label").kendoDraggable({
hint: function (element) {
var clone = $(element).clone();
$(clone).css('border', "1px solid black");
$(clone).css('width', 'auto');
$(clone).css('background-color', '#ffffff');
return clone;
},
dragstart: draggableOnDragStart,
drag: draggableOnDrag,
dragend: draggableOnDragEnd,
dragcancel: draggableOnCancel
});
$("#itemTable tbody tr td").kendoDropTarget({
dragenter: droptargetOnDragEnter,
dragleave: droptargetOnDragLeave,
drop: droptargetOnDrop
});
function droptargetOnDrop(e) {
console.log("drop");
console.log(e);
$(e.draggable.currentTarget).appendTo($(e.dropTarget[0]));
}
Thanks