Questions on Kendo UI for jQuery Forum

0 answers

75 views

Inserting a background grid into the diagram

Hi, I'm trying to insert a grid in the background of a diagram and have found some suggestions on how to do it, but the problem with these solutions is that when I try to remove a specific element, the other element disappears.

The problem is this insert

diagram.mainLayer.drawingElement.insertAt(grid, 0)

As far as I understand, this breaks the sequence and removes the previous element.

Does anyone know how to avoid this behavior or another solution to insert grid?

PS: The grid is only needed for positioning.

Diagram

updated question on 21 Oct 2022

0 answers

85 views

Diagram Refresh

I have a diagram configured that reads data from an MVC Controller. It displays and works fine. I need to do a long poll and refresh the diagram from the database. I have tried all kinds of things.

Called refresh on the diagram object, called read on the datasource.

What is the proper way to get a Diagram to read the data again and redraw itself.

Diagram

asked on 07 Sep 2022

1 answer

321 views

KendoUi Font icons are not loading

Actually we have kendoUi in angularjs project. which ic giving error in developer console like server not responding 404 error for webcomponentsicon.ttf and webcomponentsicon.woff. because of this icons are not loading. can anyone please help me to clear this issue

Hierarchical Data Source

answered on 15 Jun 2022

1 answer

61 views

Sending Diagram to server

In our project we have a web page that produces a diagram on screen; we would like to take this diagram and place it in a report. The report is generated on our server and the diagram is obviously shown in the browser on the client computer.

My question is, is there a way of taking the current view and sending it to the server and may be storing it in the database as a BLOB image? If I can do this then I will be able to insert the image in to the reports I generate/build.

Diagram

answered on 23 Mar 2022

1 answer

89 views

unable to generate pdf in iphone 11. we are using kendo pdf export saveAs method

We are not able to generate pdf in phone 11 safari browser. we are using kendo pdf export (save As method). we are not getting any error in console.

answered on 28 Feb 2022

2 answers

229 views

Insert link in connection Label

Hello,

I am working with diagrams and I need to replace connection textbox for a link.

I tryed setting content, template and visual, but nothing worked.

That does not work, the id I set to the group doest not appear in the HTML :/

Is there anyway to do it?

Thanks!

Diagram

answered on 23 Nov 2021

0 answers

58 views

Format Nodes Headers in a Diagram

I am trying to figure out how to format some nodes in my diagram. See attached dojo. https://dojo.telerik.com/ASinArEh

I would like:

The Circles to be centered under the titles.
The Node Name to be centered in the circle, not the group.
The Connections to hook to the Circle connectors, not the group connectors.

It seems like my visual template needs to create the circles, then possibly go back and add groups to the diagram then include the existing circles in the new groups, but I haven't figured out a way to do that yet

Diagram

asked on 02 Aug 2021

1 answer

75 views

Diagram limit shapes to 2

This code if pasted into a dojo works to build a diagram example.

<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/diagram/index">

<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.min.css" />

<script src="//kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="diagram"></div>
<script>
var data = [{
level: 0,
ordCode: "Org1",
orgName: "Org1 Level 0",
parentOrg: "",
items: [{
level: 1,
ordCode: "Org2A",
orgName: "Org2A Level 1",
parentOrg: "Org1"
},
{
level: 1,
ordCode: "Org2B",
orgName: "Org2B Level 1",
parentorg: "Org1"
},
{
level: 1,
ordCode: "Org2C",
orgName: "Org2C Level 1",
parentOrg: "Org1",
items:
[
{
level: 2,
ordCode: "Org3A",
orgName: "Org3A Level 2",
parentOrg: "Org2C"
},
{
level: 2,
ordCode: "Org3B",
orgName: "Org3B Level 2",
parentorg: "Org2C"
},
{
level: 2,
ordCode: "Org3C",
orgName: "Org3C Level 2",
parentOrg: "Org2C",
items:[]
},
{
level: 2,
ordCode: "Org3D",
orgName: "Org3D Level 2",
parentOrg: "Org2C"
},
]
},
{
level: 1,
ordCode: "Org2D",
orgName: "Org2D Level 1",
parentOrg: "Org1"
},
]
}];

function visualTemplate(options) {
var dataviz = kendo.dataviz;
var g = new dataviz.diagram.Group();
var dataItem = options.dataItem;

g.append(new dataviz.diagram.Rectangle({
width: 210,
height: 75,
stroke: {
width: 0
},
fill: {
gradient: {
type: "linear",
stops: [{
color: "green",
offset: 0,
opacity: 0.5
}, {
color: "green",
offset: 1,
opacity: 1
}]
}
}
}));

g.append(new dataviz.diagram.TextBlock({
text: dataItem.ordCode,
x: 85,
y: 20,
fill: "#fff"
}));

g.append(new dataviz.diagram.TextBlock({
text: dataItem.orgName,
x: 85,
y: 40,
fill: "#fff"
}));

return g;
}

function createDiagram() {
$("#diagram").kendoDiagram({
dataSource: new kendo.data.HierarchicalDataSource({
data: data,
schema: {
model: {
children: "items"
}
}
}),
layout: {
type: "layered"
},
shapeDefaults: {
visual: visualTemplate
},
connectionDefaults: {
stroke: {
color: "#979797",
width: 2
}
}
});

var diagram = $("#diagram").getKendoDiagram();
diagram.bringIntoView(diagram.shapes);
}

$(document).ready(createDiagram);
</script>
</div>

</body>
</html>

I would like to limit the number of shapes to a number (i.e. 2) per level. See attached image for example.

Diagram

answered on 30 Jun 2021

1 answer

221 views

Allows user to edit connections path or prevent connections passing though shape

Is there a way to allow user to edit connections path by interacting with points? Or is possible to make the connections does not passing through shapes?

The "editable" option just allows user to change the start and end of connection, not the path, I need to allow user to change the path because Kendo Diagram does not has an option to prevent connections of passing through shapes.

Example: https://dojo.telerik.com/@rodrigo_x10/AGExALED

You can see that connection between 1 and 3 is passing through Shape 2, which is a bad visualization of data.

Edit:

- Each shape has specific connectors (they dont change)

- Each connection is a link between a specific connector to another specific connector (so cant ignore this option and let kendo change the start and end connector)

- What I want is allow the user to change the path of the connection without changing the start or the end

- I can add points to connections, but they are fixed, the user cant interact with points.

Diagram

updated question on 11 May 2021

2 answers

81 views

Is there a way to keep connectors visible even without hover the diagram shape?

Get the example diagram in https://dojo.telerik.com/oNOJidug from example in Diagram Connections page reference

With the basic configuration:

$("#diagram").kendoDiagram({
    shapes:[
      {
        id:"1",
        content:{
          text: "State 1"
        },
        x: 20,
        y: 20
      },
      {
        id:"2",
        content: {
          text: "State 2"
        },
        x: 300,
        y: 20
      }
    ],
    connections:[
      {
        from: "1",
        to: "2",
        content: {
            text: "Step 1"
        },
        stroke: {
            color: "#33ccff"
        }
      }
    ]
  });