Questions on Kendo UI for jQuery Forum

6 answers

159 views

Manually position a node

Is there a way in which we position a node manually at a position and it retains that position?

Diagram

answered on 10 Sep 2020

1 answer

108 views

Customize Shapes toolbar when using datasource in diagram

Referring to the below example:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/configuration/shapes.editable.tools

I would like to customize the toolbar of shapes when using a datasource.

$("#diagram").kendoDiagram({
dataSource: shapesDataSource,
connectionsDataSource: connectionsDataSource,
layout: {
type: "tree",
subtype: "tipover",
underneathHorizontalOffset: 140
},
shapeDefaults: {
visual: visualTemplate,
content: {
template: "#= dataItem.JobTitle #",
fontSize: 17
}
},
connectionDefaults: {
stroke: {
color: "black",
width: 2
}
},
//editable: {
// tools: [{name: "createShape"}]
//},
dataBound: onDataBound,
toolBarClick: onToolBarClick
});

Diagram

answered on 28 Aug 2020

1 answer

149 views

Diagram - updating datasource from Custom toolbar

I am trying to add custom tool in org chart to update a value on node. The value gets updated on the datasource but not on the chart.

Nor does it trigger API hit to update the new value

$("#diagram").kendoDiagram({

dataSource: shapesDataSource,

connectionsDataSource: connectionsDataSource,

layout: {

type: "tree",

subtype: "tipover",

underneathHorizontalOffset: 140

},

shapeDefaults: {

visual: visualTemplate,

content: {

template: "#= dataItem.JobTitle #",

fontSize: 17

}

},

connectionDefaults: {

stroke: {

color: "black",

width: 2

}

},

//editable: {

// tools: [{ name: "createShape" }, { name: "edit" },

// { name: "undo" }, { name: "redo" }],

// shapeTemplate: kendo.template($("#popup-editor").html())

//},

editable: {

tools: [{

type: "button",

text: "Set Selected Content",

click: function () {

var selected = $("#diagram").getKendoDiagram().select();

var content = $("#content").val();

for (var idx = 0; idx < selected.length; idx++) {

selected[idx].dataItem.JobTitle = content;

}

}, {

template: "<input id='content' class='k-textbox' value='Foo' />"

}]

},

dataBound: onDataBound,

toolBarClick: onToolBarClick

});

Diagram

answered on 28 Aug 2020

1 answer

60 views

Diagram create shape error

Hi,

My code :

<div id="diagram"></div>

<script>

var dataSource = new kendo.data.HierarchicalDataSource({

data: [{

"name": "Progress",

"items": [

{"name": "Kendo UI",

"items":[

{"name": "TreeList"},

{"name": "Chart"}

]

},

{"name": "NativeScript"}

]

}],

schema: {

model: {

children: "items"

}

});

$("#diagram").kendoDiagram({

dataSource: dataSource,

editable : {

tools : [

{ name : "createShape" }

]

},

layout: {

type: "tree",

subtype: "down"

},

shapeDefaults: {

type: "circle",

content: {

template: "#= name #"

},

width: 80,

height: 80,

hover: {

fill: "Orange"

}

},

connectionDefaults: {

stroke: {

color: "#979797",

width: 1

},

type: "polyline",

startCap: "FilledCircle",

endCap: "ArrowEnd"

}

});

When you press add, you can see the error details from the console, how can I solve it?

app.js:35020 Uncaught TypeError: Cannot set property 'element' of undefined at init.createShape (app.js:35020) at init.createShape (app.js:35022) at init.click (app.js:35022) at init.proxy (app.js:34131) at init.trigger (app.js:34387) at init._buttonClick (app.js:34690) at init.proxy (app.js:34131) at init.trigger (app.js:34387) at init._click (app.js:34454) at HTMLAnchorElement.arguments.length.arguments.<computed>.indexOf.t.<computed>.t.<computed>.options.t.<computed> (app.js:34388) createShape @ app.js:35020 createShape @ app.js:35022 click @ app.js:35022 proxy @ app.js:34131 trigger @ app.js:34387 _buttonClick @ app.js:34690 proxy @ app.js:34131 trigger @ app.js:34387 _click @ app.js:34454 arguments.length.arguments.<computed>.indexOf.t.<computed>.t.<computed>.options.t.<computed> @ app.js:34388 dispatch @ app.js:28789 elemData.handle @ app.js:28593

Diagram

answered on 17 Aug 2020

1 answer

299 views

Connection content overlapping with each other

Hi,

Is there a way to avoid the overlapping of content of two connectors from each other. After going through the connection defaults I don't see any property which can avoid this overlapping. connections.content has only font related properties. Please see attached screenshot for the overlapping content.

Below is the connection deafults which I have configured.

connectionDefaults: {
                        endCap: "ArrowEnd",
                        startCap: "FilledCircle",
                        content: {
                            template: "# if (dataItem.percentage) {# #= dataItem.percentage #% #} #"
                        },
                        stroke: {
                            color: "#000000",
                            width: 2
                        },
                        editable: {
                            connect: true,
                            remove: true,
                            tools: [{ name: "edit" }]
                        },
                        type: "polyline"
                    },

Diagram

answered on 10 Jul 2020

1 answer

263 views

Disabling Cut, Copy, Paste

How can I disable the cut, copy, paste in the dialog component? I've tried adding an .on event to the canvas and the parent div of the dialog but it isn't working

Diagram

answered on 17 Mar 2020

6 answers

135 views

Issue Setting Shape's Coordinates Based on Fields in Datasource

My goal here is to use a diagram that will save the coordinates of the diagram's shapes to a table in a SQL database. Then have a datasource that reads from that table and display the shapes in the same position the next time the user accesses that diagram.

I'm trying to test this out by setting up a static list of data in my Controller and accessing that data in the diagram's data source. In my Kendo Diagram I am using shapesDefaults.visual to set a visual template that then grabs it's x and y values from the item in the data source.

The shapes on the screen then show correctly positioned on the diagram, but everything from the content of the shapes and the area that interacts with the shape are all stacked in the 0,0 position in the top left corner of the diagram.

I've included my code in the attached zip file, as well as a screenshot of the resulting diagram.

What am I missing to get then entire diagram shape, content and interaction ability to position to my coordinates?

Diagram

answered on 18 Nov 2019

1 answer

70 views

Persist connection connector point

Is there a way to persist the connection connector point?

In this example only the connections are saved: https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/diagram/how-to/persist-shape-properties .

The points (connector) where the connections are attached are not persisted.

Diagram

answered on 15 Nov 2019

6 answers

375 views

Export to JSON

Can i export my diagram and all the data inside him to a formatted json model ?

Diagram

answered on 08 Nov 2019

9 answers

295 views

Getting "TypeError: Cannot read property 'updateOptionsFromModel' of undefined" every time I'm trying to update the saved before object

When two shapes are connected by a connection and the "Konfiguration" dialog of the connection is opened and one presses "+Text" then an element is added to the dialog.

If one now saves the entire workflow and reload the workflow and open the connection's "Konfiguration" dialog and press "+Text" nothing happens and the following error pops up in the browser console:

TypeError: Cannot read property 'updateOptionsFromModel' of undefined

After closing and re-opening the "Konfiguration" dialog the previously added element is now displayed.

Was wondering if anyone had such an issue before and found the solution.

Thank you in advance!

Diagram