Hello,
When rendering a very big diagram in our application we found out that there is a scroll limit when using maximum zoom in the diagram.
In the simple example below: max zoom to the first diagram element on the left and then by ctrl + left mouse click scroll to the right, around yellow shape you come to the limit and you cannot scroll anymore to the right.
The workaround is to zoomout to the initial position and zoom in again to the yellow element.
I found out that the limit of scrolling is around 20000px. Is there any way to change it or is there any workaround for this? I found a solution for this and I did my own scrolling mechanism and I can scroll on the diagram wherever I want with no limitations but then when using the kendoContextMenu on the diagram the function open() on this menu causes diagram to be scrolled back to the 20000px limit.
Example (without context menu but with the scroll limit):
https://dojo.telerik.com/AREcIrIk
I am using a diagram for a very specific purpose and have disabled most of the editing. I only want my customers to be able to drag and drop the objects. No resizing, rotating, adjusting connections..etc.
I have successfully completed all of that but there is a workaround for the user if they click and do not drag a shape, when they release the mouse button a popup appears with some controls.
How do i disable this popup or what object event is causing it to come up so i can override it?
thank you!
Hi,
How can I customize the diagram background? I would like to draw some horizontal bands with custom size, specific background colour and border to separate the diagram boxes levels. I would like to achieve something like "https://www.telerik.com/products/winforms/diagram.aspx" in section "Shapes, Container Shapes and Connections". On that page we have a sample with separation for "First Game", "Second Game" etc.
Hi,
Is it possible to configure the "HorizontalSeparation" between diagram elements (shapes) for every diagram level?
If parent diagram element is wide and all it's childs are not so wide, then parent elements are overlapping.
Example with this problem can be found here: https://dojo.telerik.com/erAFiwIB/2
Hello,
I use the following code to format the text if it is too long.
function createShape(options) {
var shapeOptions = {
editable: false,
selectable: false,
id: options.id,
x: options.positionX || 0,
y: options.positionY || 0,
width: options.width || 200,
height: options.height || 50,
type: options.type,
path: options.path || undefined,
content: {
text: options.textData || undefined,
color: '#fff',
fontSize: 15
},
fill: options.fillColor || '#0088CC',
stroke: options.strokeColor || '#0088CC',
};
var shape = new kendo.dataviz.diagram.Shape(shapeOptions);
var texts = options.textData.split(" ");
for (var i = 0; i < texts.length; i++) {
shape.visual.append(new kendo.dataviz.diagram.TextBlock({
text: texts[i],
color: "#fff"
}));
}
shape.visual.reflow();
return shape;
}
I would like to be able to use the method : reflow() afterwards; so that the words of the text place this correctly. Can you tell me how to do that? Thank you for your help.
I have developed a workflow builder tool using RADDiagram and I am, for the most part, quite happy with the result. That said, I would like try to add a bit more polish to the finished product by adding "arrows" to the tooltip callout pointing to the selected shape (see attached image). Is this mod possible? FWIW, I have tooltips working now but they are simply rounded rectangles.
Thanks.
I'm diagramming some product structures with 50-100 parts (3 levels). Rendering is taking about a minute (sometimes longer) in IE11 and sometimes the page is dying. If I break, it's always in kendo.all.min.js.
Does this sound right? It seems slow...
Attaching a picture of a typical diagram and my initial code. I'm using Kendo UI v2015.2.902
<
div
id
=
"diagram"
style
=
"width: 100%; height: 800px;"
>
@(Html.Kendo().Diagram()
.Name("diagram")
.DataSource(dataSource => dataSource
.Read(read => read.Action("_GetParts", "Diagram", new { partId = Model.PartId, level = Model.Level }))
.Model(m => m.Children("Children"))
)
.Editable(false)
.Layout(l => l
.Type(DiagramLayoutType.Tree)
.Subtype(DiagramLayoutSubtype.Tipover)
.HorizontalSeparation(10)
.VerticalSeparation(10)
)
.ConnectionDefaults(cd => cd
.Stroke(s => s
.Color("#bbb")
.Width(1)
)
.Editable(false)
)
.ShapeDefaults(sd => sd
.Visual("visualTemplate")
)
.Events(e => e.Select("onClick"))
<
script
type
=
"text/javascript"
>
function visualTemplate(options) {
var dataviz = kendo.dataviz;
var g = new dataviz.diagram.Group();
var dataItem = options.dataItem;
var imageLink = "../../Content/images/cc/" + dataItem.CommCode + ".png";
var lc = dataItem.Lifecycle;
if (lc == null) {
lc = "?";
}
if (dataItem.IsParentLevel) {
g.append(new dataviz.diagram.Rectangle({
width: 400,
height: 50,
stroke: {
width: 1,
color: "#000"
},
fill: {
color: "#efefef"
}
}));
g.append(new dataviz.diagram.Image({
source: imageLink,
x: 10,
y: 3,
width: 16,
height: 16
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.PartNum,
x: 32,
y: 3,
color: "#000",
fontSize: "14"
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.ItemDesc,
x: 12,
y: 28,
color: "#000",
fontSize: "9"
}));
g.append(new dataviz.diagram.TextBlock({
text: lc,
x: 300,
y: 3,
color: "#000",
fontSize: "9"
}));
g.append(new dataviz.diagram.Rectangle({
width: 4,
height: 50,
fill: dataItem.DiagramColor,
stroke: {
width: 0
}
}));
} else {
g.append(new dataviz.diagram.Rectangle({
width: 120,
height: 36,
stroke: {
width: 1,
color: "#000"
},
fill: {
color: "#efefef"
}
}));
g.append(new dataviz.diagram.Image({
source: imageLink,
x: 10,
y: 3,
width: 16,
height: 16
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.PartNum,
x: 32,
y: 3,
color: "#000",
fontSize: "10"
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.ShortDesc,
x: 10,
y: 23,
color: "#000",
fontSize: "8"
}));
g.append(new dataviz.diagram.Rectangle({
width: 3,
height: 36,
fill: dataItem.DiagramColor,
stroke: {
width: 0
}
}));
}
return g;
}
</
script
>
)
</
div
>