Telerik Forums
Kendo UI for jQuery Forum
2 answers
106 views

Anyone by chance have any luck implementing fontawesome pro icons in a diagram? I was shown how to use the fontawesome free library icons like this:

g.append(new dataviz.diagram.TextBlock({
    text: String.fromCharCode(0xf005)  + " " + dataItem.firstName + " " + dataItem.lastName,
    x: 85,
    y: 20,
    fill: "#fff",
    fontFamily: "FontAwesome"
}));

... but this doesn't work:

g.append(new dataviz.diagram.TextBlock({
    text: String.fromCharCode(0xf82c)  + " " + dataItem.firstName + " " + dataItem.lastName,
    x: 85,
    y: 20,
    fill: "#fff",
    fontFamily: "FontAwesome"
}));

FontAwesome Icon Cheatsheet: https://fontawesome.com/cheatsheet/pro/regular

Mark
Top achievements
Rank 1
Veteran
 answered on 10 Apr 2021
5 answers
356 views
Can we get cursor position on diagram while clicking (or even not clicking) on the diagram canvas like e.point in click event?
Georgi Denchev
Telerik team
 answered on 01 Apr 2021
6 answers
141 views
I can select a shape dynamically with the select method, can deselect a shape dynamically too? 
Edward
Top achievements
Rank 1
Veteran
Iron
 answered on 26 Mar 2021
7 answers
198 views

Zooming In and Out works well in Chrome, but I just realised it never zooms In in Firefox. By scrolling the mouse wheel both ways it always zooms Out.

Any Idea what could affect that issue? Thanks in advance!

Here is my diagram, I also tried to remove all properties, but that didn't change the described on top behaviour, nothing specific:

var kendoDiagram = diagram.kendoDiagram({
        dataSource: shapesDataSource,
        connectionsDataSource: connectionsDataSource,
        shapeDefaults: {
            editable: {
                tools: false
            },
            visual: visualTemplate,
            content: {
                template: '#= typeof dataItem.customData === "undefined" || typeof dataItem.customData.status === "undefined" || dataItem.customData.status === "" ? dataItem.text : dataItem.customData.status #'
            }
        },
        connectionDefaults: {
            editable: {
                tools: false
            },
            startCap: "FilledCircle",
            endCap: 'ArrowEnd',
            type: "polyline"
        },
        dragEnd: function(e) {
 
            var el = e.connections[0];
 
            if (typeof el !== 'undefined') {
                var source = el.sourceConnector,
                    target = el.targetConnector;
 
                if( typeof source == 'undefined' || typeof target == 'undefined') {
                    //console.log('connection is not connected both sides!');
                    el.options.stroke.color = '#ff0000';
                    el.options.hover.stroke.color = '#ff0000';
                } else {
                    el.options.stroke.color = '#2e2e2e';
                    el.options.hover.stroke.color = '#2e2e2e';
                }
            }
        },
        change: function (e) {
            var element = e.added[0];
            if (element && element instanceof kendo.dataviz.diagram.Shape) {
                var dataItem = element.dataItem;
                var point = new kendo.dataviz.diagram.Point(dataItem.x, dataItem.y);
                element.position(point);
            }
        },
        pannable: {
            key: "shift"
        },
        editable: {
            resize: false,
            tools: false
        },
        zoomMax: 3.5,
        zoomMin: 0.2,
        click: function(e) {
            e.preventDefault();
            console.log('click...');
        }
    }).getKendoDiagram();
Oleksa
Top achievements
Rank 1
 answered on 01 Mar 2021
8 answers
176 views
I'm having multiple issues with this control. It was less surprising when it was still considered to be in beta, but things have gotten worse. I have a simple trykendo demo here:

http://trykendoui.telerik.com/uZeN

The rotatable and resizable are both set to false, and yet I can still rotate and resize shapes. Please let me know why these fields exist if they are ignored.
Stewart
Top achievements
Rank 1
 answered on 23 Feb 2021
5 answers
117 views

Hello,

I'm having trouble with bringIntoView.

I'd like to pan a diagram so that a shape to be the center of the diagram.

It works when the first time calling bringIntoView() with a shape.

However after the first call, calling bringIntoView() with a shape does not move that shape to the center of the diagram.

I created a Dojo snippet.

To reproduce this problem, first click the shape1 button and click the shape2 button.

 

You will see the shape1 becomes the center of diagram, however when the shape2 button is clicked, the shape2 will be positioned at a weird place.

https://dojo.telerik.com/@jshin@hcim.com/ICANObOz

Or click the shape1 button and click the shape1 button once again.

I created this snippet based on the pan example in the API reference (https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/methods/pan).

How can I make a shape to be at the center of the diagram every time I call bringIntoView ()?

 

 

Attached is a recording of the steps to reproduce this issue.

 

Thank you!

Georgi Denchev
Telerik team
 answered on 29 Jan 2021
1 answer
246 views

Hello.

I'm trying to allow users to choose the mouse left click and drag behavior.

The default behavior of mouse left click and drag is selecting shapes and connections.

But I want the user to choose to select shapes and connection or pan the diagram using mouse left click and drag.

I found a thread about this, and I used diagram.scroller.enabled = true to change the mouse left click and drag behavior.

But there are some minor issues.

First issue is the mouse cursor. I want the mouse cursor to be the grab cursor, but it looks like diagram forces the cursor to be pointer.

I tried changing the cursor manually after the diagram is initialized, but it looks like the cursor inline style changes whenever the mouse hovers the diagram.

How can I change the cursor?

 

Another issue is the selection rectangle is still being rendered when diagram.scroller.enabled is set to true.

As you can see in the attachment, when diagram.scroller.enabled is true, and mouse left is clicked and dragged, the diagram pans as expected, but it renders a small selection rectangle. 

How can I remove this selection rectangle? when diagram.scroller.enabled  == true?

Or is using diagram.scroller.enabled the right way?

 

Thank you!

Tsvetomir
Telerik team
 answered on 29 Jan 2021
3 answers
307 views

I'm trying to customize the shape hover template and add edit and delete buttons to allow users to click like the screenshot, and these buttons must display only when the mouse hovers on the shape.

I also need to capture user's click events from these buttons, because I need to open a custom window for edit and popup a confirm dialog.

Is there a way I can do this?

Georgi
Telerik team
 answered on 26 Jan 2021
2 answers
152 views

Hello,

How can I change shapes and connections text after adding them to the diagram?

For example, when a user creates a connection, an add event is called which contain a newly created connection object.

And I assigned text to the newly created connection object like this.

e.connection.options.content.text = "True"

 

 

 

But this text change did not apply.

Is there a way to redraw the options? after changing it? or is there any ways to change text dynamically?

Thank you!

Anton Mironov
Telerik team
 answered on 25 Jan 2021
4 answers
91 views

Hello.

There is a bug with diagram.addConnection();

I followed the sample in this page (https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/methods/addconnection), and I'm getting an error when clicking on the connection.

I created a Dojo snippet (https://dojo.telerik.com/eluKEMOn) and you can reproduce the bug by

1. Clicking the Run button.

2. Clicking the connection that connects the shapes.

This generates an Uncaught TypeError: Cannot read property 'tools' of undefined, and this messes up the diagram.

Is there a workaround to this? I need to add connections after the diagram is initialized.

And addShape() takes both kendo.dataviz.diagram.Shape() and a plan object like this.

{
  id: "2",
  content: {
    text: "State 2"
  },
  x: 300,
  y: 20
}

But addConnection only takes kendo.dataviz.diagram.Connection().

Do you have any plans to accept a pure javascript object for addConnection()?

Attached is the screenshot of an error produced by the Dojo snippet.

Thank you!

Georgi
Telerik team
 answered on 22 Jan 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?