Insert link in connection Label

2 Answers 16 Views
Diagram
MaiK
Top achievements
Rank 1
Iron
MaiK asked on 12 Nov 2021, 09:13 AM

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!

2 Answers, 1 is accepted

Sort by
0
Patrick | Senior Technical Support Engineer
Telerik team
answered on 16 Nov 2021, 06:38 PM

Hi MaiK,

The id of the connection pertains to the model's id rather than the DOM's id.  The id can be set when defining the connection options:

JavaScript

      var connection = diagram.connect(
        shape1, 
        shape2,{
          id: "customID",
          from: "1",
          to: "2",
          content: {
            visual: function(e) {
              var g = new kendo.dataviz.diagram.Group({
                autoSize: true
              });

              var circle = new kendo.dataviz.diagram.Circle({
                width: 15,
                height: 15,
                fill: {
                  color: "LimeGreen"
                }
              });
              var text = new kendo.dataviz.diagram.TextBlock({
                text: "currentState.action",
                fontSize: 16,
                x: 20
              });

              g.append(circle);
              g.append(text);
              return g;
            }
          }}
      );

In the case of navigating to another page based on the id, utilize the Diagram's click event, determine the id, and navigate using JavaScript.

JavaScript

      $("#diagram").kendoDiagram({
        click: function(e){

          //if item id is the connection
          if(e.item.id == "customID"){

            //navigate
            window.location.href = "https://www.bing.com";
          }
        },
      });

Please take a look at the following Progress Kendo UI Dojo which shows the above in action, and let me know if you have any questions.

Regards,
Patrick
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
MaiK
Top achievements
Rank 1
Iron
answered on 23 Nov 2021, 11:15 AM

Hello Patrick, thanks for the response.

It's  good solution use events to manage that issue, I am working on it.

Is posible to change cursor to point only when mouse is over connection text/content and not over the lines?

I try with mouseEnter event from diagram and it only is fired when mouse is over shapes or lines, but not over content of connections.

Thanks!

 

Patrick | Senior Technical Support Engineer
Telerik team
commented on 23 Nov 2021, 03:30 PM

Happy to help MaiK!  And it's possible to change the pointer of the Circle and TextBlock by referencing the drawingElements of each, and setting the cursor:

              var circle = new kendo.dataviz.diagram.Circle({
                width: 15,
                height: 15,
                fill: {
                  color: "LimeGreen"
                }
              });
              circle.drawingElement.options.cursor = "pointer";
              
              var text = new kendo.dataviz.diagram.TextBlock({
                text: "currentState.action",
                fontSize: 16,
                x: 20
              });

              text.drawingElement.options.cursor = "pointer";

Here's an updated Progress Kendo UI Dojo which a shows a pointer cursor for only the connection content.  The shapes and connections have a default cursor using the approach in this Kendo UI knowledge base article.

Hope this helps!

MaiK
Top achievements
Rank 1
Iron
commented on 29 Nov 2021, 10:20 AM

Thank worked well!

But I have another problem  when in receive click event from diagram, if the mouse is over the content of the connection, click event is not fired.

Is it possible to handle that click event over the content?

Thanks!

Patrick | Senior Technical Support Engineer
Telerik team
commented on 29 Nov 2021, 07:50 PM

Glad that helped!

Pertaining to the click event of the content, only the surface's click event is available to the custom visuals as they are separated from the connector/shapes.  

JavaScript

      var diagram = $("#diagram").data("kendoDiagram");
      var surface = diagram.canvas.surface;
      
      surface.bind("click", onSurfaceClick);

      function onSurfaceClick(e){
        	console.log(e);
      }
Please take a look of this in action in the following Progress Kendo UI Dojo.  If you would like to see a feature where clicking on the custom visuals would launch a click event, please feel free to create a feature request in our Progress Kendo UI Feedback Portal.  

MaiK
Top achievements
Rank 1
Iron
commented on 30 Nov 2021, 09:28 AM

Thank you Patrik, It worked!

 

Is it possible to set custom data to that items to get it in the event?

Ssomething like dataitem of shape or connection.

Regards!

Patrick | Senior Technical Support Engineer
Telerik team
commented on 30 Nov 2021, 03:44 PM

Currently, the only way to reference a connection or shape would be to use the properties available from the drawingElement.  For example, the following uses the element's content to search the Kendo UI Diagram's shapes based on the shape id:

JavaScript

      function onSurfaceClick(e){

        //use a property of the visual to determine connection
        //if the content exists and it follows the condition
        if(e.element.content && e.element.content() == "currentState.action"){

          //get diagram
          var diagram = $("#diagram").data("kendoDiagram");

          //Diagram connections available
          var diagramConnections = diagram.connections;

          //Or use getShapeById method with custom ID
          var connection = diagram.getShapeById("customID");
          
          console.log(connection);
        }
      }

Here's an updated Kendo UI Dojo with the approach above which demonstrates if the user clicks on the text of the visual.

Tags
Diagram
Asked by
MaiK
Top achievements
Rank 1
Iron
Answers by
Patrick | Senior Technical Support Engineer
Telerik team
MaiK
Top achievements
Rank 1
Iron
Share this question
or