Connection caption in Html.

3 posts, 1 answers
  1. Mihail
    Mihail avatar
    3 posts
    Member since:
    May 2014

    Posted 28 Aug 2015 Link to this post

    I try to export diagram to Html. But connection caption is hidden in .html file. How can i add connection caption into .html?
  2. Answer
    Martin
    Admin
    Martin avatar
    1099 posts

    Posted 02 Sep 2015 Link to this post

    Hello Mihail,

    I guess you are using the implementation from the RadDiagram.js file demonstrated in the diagram-html-export example. If so, keep in mind that the RDImporter from the example doesn't implement drawing of the connection's Content. In order to display it you will need to implement custom javascript code in the RadDiagram.js file that creates the text element for the connection's content. For example, you can plug the creation of the content in the "createConnections" function.
    RDImporter.prototype.createConnections = function (connections) {
        // some code
         
        for(var i = 0; i < connections.length; i++) {
         
            var connection = connections[i];
            var connectionProps = this.extractConnectionProperties(connection);    
            var startP = this.parsePoint(connectionProps.startpoint);
            var endP = this.parsePoint(connectionProps.endpoint);
             
            // some code
                 
                if (connection.Properties["content"] != null) {
                     
                    var content = connection.Properties["content"];            
     
                    var text = new svg.TextBlock();
                     
                    text.Text = content.trim();
                    text.dx = 5;                       
                    text.Background = "black";
     
                    this.diagram.MainLayer.Append(text);                       
     
                    var contentX = ((endP.x - startP.x) / 2) + startP.x;
                    var contentY = ((endP.y - startP.y) / 2) + startP.y;
     
                    var contentWidth = text.native.clientWidth;
                    var contentHeigth = text.native.clientHeight;
     
                    text.Position = new svg.Point(contentX - contentWidth / 2, contentY - contentHeigth / 2);
                }
     
            // some code
             
        }
    };

    Please let me know if this information helps.

    Regards,
    Martin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. Mihail
    Mihail avatar
    3 posts
    Member since:
    May 2014

    Posted 07 Sep 2015 in reply to Martin Link to this post

    It's helped for me. Now connection's Сontent become visible on .html pages.
Back to Top