Telerik Forums
Kendo UI for jQuery Forum
3 answers
189 views

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

 

 

Tsvetina
Telerik team
 answered on 10 Jul 2018
3 answers
280 views

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!

Alex Hajigeorgieva
Telerik team
 answered on 06 Jul 2018
1 answer
156 views
Is there a way to set a background image for the diagram so that it will resize with the pan/zoom features?  Or is there a way to place an image shape at the bottom layer?
Tsvetina
Telerik team
 answered on 26 Jun 2018
9 answers
398 views
Hello,
I am using Kendo Diagram in order to define shapes needed for my workflow application, I need to add a shape corresponding to vertical and horizontal swimlanes with the possibility to edit the text in each lane, is there any suggestion?
Thanks.
Tsvetina
Telerik team
 answered on 08 Jun 2018
5 answers
275 views

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.

Tsvetina
Telerik team
 answered on 31 May 2018
5 answers
135 views

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

Konstantin Dikov
Telerik team
 answered on 31 May 2018
6 answers
186 views
Hello,

I need to organize my diagram in a way that each time I drop a shape or draw a connection, it is lined up properly.
Also is there a way to increase the movement's step of a given shape in order to make the dropped shapes organized in a better way?

Thanks in advance.
Konstantin Dikov
Telerik team
 answered on 29 May 2018
4 answers
367 views

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.


François
Top achievements
Rank 1
 answered on 27 Mar 2018
1 answer
189 views

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.

Boyan Dimitrov
Telerik team
 answered on 15 Feb 2018
7 answers
390 views

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>

Stefan
Telerik team
 answered on 10 Jan 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Patrick
Top achievements
Rank 1
Iron
Iron
Iron
MIS
Top achievements
Rank 1
Ross
Top achievements
Rank 1
Marcin
Top achievements
Rank 1
Iron
Iron
Sean
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Patrick
Top achievements
Rank 1
Iron
Iron
Iron
MIS
Top achievements
Rank 1
Ross
Top achievements
Rank 1
Marcin
Top achievements
Rank 1
Iron
Iron
Sean
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?