Hi,
I have a kendo-panelBar with this:
<
kendo:panelBar-items
>
<
span
class
=
"shapeItem"
data-role
=
"draggable"
id
=
"atv"
> <
kendo:panelBar-item
text
=
"Atividade"
imageUrl
=
"${ atv }"
/>
</
span
>
</
kendo:panelBar-items
>
and down there, more with this:
$(
"#shapesPanelBar .shapeItem"
).kendoDraggable({
hint :
function
() {
return createElement
(
);
}
});
$(
"#diagram"
).kendoDropTarget({
drop :
function
(e) {
var
item, pos, transformed;
if
(e.draggable.hint) {
item = e.draggable.hint.data(
"shape"
);
pos = e.draggable.hintOffset;
pos =
new
Point(pos.left, pos.top);
var
transformed = diagram.documentToModel(pos);
item.x = transformed.x;
item.y = transformed.y;
diagram.addShape(item);
}
}
});
function
createElement() {
var
dataviz = kendo.dataviz;
var
g =
new
dataviz.diagram.Group();
g.append(
new
dataviz.diagram.Image(
{
source :
'data:image/svg+xml;base64,[...]'
,
width : 90,
height : 120
}));
return
g;
}
But when i drag nothing happens and this error occurs on console browser:
Uncaught TypeError: Cannot read property 'ownerDocument' of undefined
jquery.min.js:5
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
So, how i make a panel bar with elements and drag they to KendoDiagram ?
8 Answers, 1 is accepted
The hint function currently returns a Diagram shape. The Draggable tries to append it to the DOM, but fails as this is not possible.
Try returning a copy of the list item itself:
hint: function() {
return this.element.clone();
}
Regards,
T. Tsonev
Telerik

Hi T. Tsonev,
thank you for your answer!!
Sure, it helps.
Can you guide me with that in attach ?
If I understand correctly, the createElement method is part of the implementation of the drop hint.
As such, there's no need to create diagram shapes just yet. All it should care about is the visual cue (hint) for the dragged shape.
Therefore the default implementation should suffice:
hint: function() {
return this.element.clone();
}
Creating the image should be a concern for the drop handler. There you can access the original data attributes as:
drop: function(e) {
var item, pos, transformed;
if (e.draggable.hint) {
item = e.draggable.hint.data("shape");
...
Regards,
T. Tsonev
Telerik

Hi T. Tsonev, thank you for your answer!
I solved how to get the id from e.draggable.hint element.
And yes, that make sense but how i supposed to pick up id from var options (line 223 on attached image) ?
Sorry for that kind of questions, i do not found any doc of that elements.
And when i pass through createElement method the id (line 206 on attached image)​,
the dataSvg var do not works, but the value that getDataSVGFromId method return it is correct !
The problems you're experiencing come from the fact that the createElement function is not receiving options as parameter.
In fact, it is currently receiving the id.
Therefore you should be able to write:
createElement(id) {
...
}
I hope this helps.
Regards,
T. Tsonev
Telerik

Hi T. Tsonev,
Thank you for your answer!
I do it that way
$(
"#diagram"
).kendoDropTarget({
filter :
"#diagram"
,
drop :
function
(e) {
var
item, pos, transformed;
if
(e.draggable.hint) {
item = e.draggable.hint.data(
"shape"
);
pos = e.draggable.hintOffset;
pos =
new
Point(pos.left, pos.top);
var
transformed = diagram.documentToModel(pos);
var
hintId = e.draggable.hint.attr(
"id"
);
var
b64 = getDataSVGFromId(hintId);
//
diagram.addShape({
x : transformed.x,
y : transformed.y,
visual :
function
() {
return
new
kendo.dataviz.diagram.Image({
source : b64[1],
width : b64[2],
height : b64[3]
});
}
});
}
}
});

Great, I'm glad to see you've got this working. It makes sense to keep all the handling in the drop handler. The code is much more clear now.
Regards,
T. Tsonev
Telerik