Insert link in connection Label

[MaiK]

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!

[Patrick | Technical Support Engineer, Senior]

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

[MaiK]

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 | Technical Support Engineer, Senior]

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]

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 | Technical Support Engineer, Senior]

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]

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 | Technical Support Engineer, Senior]

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.

[MaiK]

Hello Patrik,

I added that property to drawingElement.

text1.drawingElement.options.dataItem = customInfo;

And when I receive the event I can retrieve data.

onSurfaceClick : function(e){
   e.element.options.dataItem
}

It worked well.

Thanks for all!