Image within shapes

5 posts, 0 answers
  1. Jason
    Jason avatar
    3 posts
    Member since:
    Oct 2015

    Posted 27 Nov 2015 Link to this post

    Hello, 

    I am attempting to insert a small image next to the text as the content on all the diagram shapes using Server-side programming. I have attempted the following on 'code behind'.

    DiagramShape.ContentSettings.Html = "<img src=\"" + path + "\"/>" + text;

     As i understand, the diagram gets rendered using SVG, and this <img> gets replaced with an svg <image> tag and the proper attributes. The svg image elements look fine, however multiple shapes often have the same path in my case, and only the first instance of each path actually results in the image being displayed (all subsequent instances have height=0 and width=0). 

    Anyone ideas on how to make this work? Or how to achieve the desired effect using server-side programming?

    <g transform="matrix(1,0,0,1,540,0)">
    <path d="M0 0 L 90 0 90 30 0 30Z" stroke-width="0" fill="#428bca" transform="matrix(1,0,0,1,0,0)"></path>
      <g transform="matrix(1,0,0,1,7,7.5)">
        <g transform="matrix(1,0,0,1,1000000,1000000)">
          <g>
            <g clip-path="url(#kdef29)"></g>
            <text style="font:normal normal normal 11px Tahoma, Arial, sans-serif;" x="-999984" y="-999987" stroke="none" fill="rgb(51, 51, 51)">text1</text>
            <g>
              <g clip-path="url(#kdef30)"></g>
              <image preserveAspectRatio="none" x="-1000000" y="-1000000" width="16px" height="13px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/folder/image.gif" clip-path="url(#kdef31)"></image>
    </g></g></g></g></g> </p>
     

    <g transform="matrix(1,0,0,1,540,0)"><path d="M0 0 L 90 0 90 30 0 30Z" stroke-width="0" fill="#428bca" transform="matrix(1,0,0,1,0,0)"></path><g transform="matrix(1,0,0,1,7,7.5)"><g transform="matrix(1,0,0,1,1000000,1000000)"><g><g clip-path="url(#kdef29)"></g><text style="font:normal normal normal 11px Tahoma, Arial, sans-serif;" x="-999984" y="-999987" stroke="none" fill="rgb(51, 51, 51)">Introduction</text><g><g clip-path="url(#kdef30)"></g><image preserveAspectRatio="none" x="-1000000" y="-1000000" width="16px" height="13px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://localhost:51758/CourseAuthoring_WebApp/theme/default/common/icons/s_1Media1TextJump_sm.gif" clip-path="url(#kdef31)"></image></g></g></g></g></g> 

     

    Thank you very much,

    Jason

  2. Jason
    Jason avatar
    3 posts
    Member since:
    Oct 2015

    Posted 27 Nov 2015 in reply to Jason Link to this post

    That time when you accidentaly hit the submit button. Apologies for the formatting. The "view-source" of the rendered page is shown in the above code block. Other shapes show identical mark-up, but width and height are set to 0. 

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 01 Dec 2015 Link to this post

    Hi Jason,

    I tried to replicate the described by you behavior, but all images and shapes are rendered as expected on my side. I am pasting my test code below - are you able to reproduce the problem with it? Can you examine it and see whether and how it differs from the configuration used on your side?
    <telerik:RadDiagram ID="RadDiagram1" runat="server" Width="1200px" Height="400px">
        <LayoutSettings Enabled="true" Type="Tree" Subtype="Right">
        </LayoutSettings>
        <ShapesCollection>
            <telerik:DiagramShape Id="s1" Height="150" Width="190">
                <ContentSettings Html="<img src='https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-128.png'></img> Image 1" />
            </telerik:DiagramShape>
            <telerik:DiagramShape Id="s2" Height="150" Width="190">
                <ContentSettings Html="<img src='https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-128.png'></img> Image 2" />
            </telerik:DiagramShape>
            <telerik:DiagramShape Id="s3" Height="150" Width="190">
                <ContentSettings Html="<img src='https://cdn3.iconfinder.com/data/icons/free-social-icons/67/skype_circle_color-128.png'></img> Image 3" />
            </telerik:DiagramShape>
            <telerik:DiagramShape Id="s4" Height="150" Width="190">
                <ContentSettings Html="<img src='https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-128.png'></img> Image 4" />
            </telerik:DiagramShape>
        </ShapesCollection>
        <ConnectionsCollection>
            <telerik:DiagramConnection>
                <FromSettings ShapeId="s1" />
                <ToSettings ShapeId="s2" />
            </telerik:DiagramConnection>
            <telerik:DiagramConnection>
                <FromSettings ShapeId="s2" />
                <ToSettings ShapeId="s3" />
            </telerik:DiagramConnection>
            <telerik:DiagramConnection>
                <FromSettings ShapeId="s3" />
                <ToSettings ShapeId="s4" />
            </telerik:DiagramConnection>
        </ConnectionsCollection>
    </telerik:RadDiagram>



    Regards,
    Vessy
    Telerik
  5. Jason
    Jason avatar
    3 posts
    Member since:
    Oct 2015

    Posted 01 Dec 2015 in reply to Vessy Link to this post

    The code you have posted also works for me, however it doesn't replicate what i am trying to do. The issue arises when all of <img> within the shapes use the SAME path. When i changed the src so that all of them use the same path, only the first shape has an image displayed. 

    My work-around has been to modify my images to have white space on the side, make the shapes type='image', and direct their source to the modified image, then write the text on top of it with some nbsp's to push the text where i need it. 

    The method i am currently using satisfies my need, but it's still an issue. 

    Thanks so much Vessy,

    Jason Syrotuck

     

     

  6. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 02 Dec 2015 Link to this post

    Hi Jason,

    Thank you for the additional information. I managed to reproduced similar to the describer problem and fixed it by setting the size of the image elements explicitly:
    <telerik:RadDiagram ID="RadDiagram1" runat="server" Width="1200px" Height="400px">
        <LayoutSettings Enabled="true" Type="Tree" Subtype="Right">
        </LayoutSettings>
        <ShapesCollection>
            <telerik:DiagramShape Id="s1" Height="150" Width="190">
                <ContentSettings Html="<img width='128px' height='128px' src='https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-128.png'/> Image 2" />
            </telerik:DiagramShape>
            <telerik:DiagramShape Id="s2" Height="150" Width="190">
                <ContentSettings Html="<img width='128px' height='128px' src='https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-128.png'/> Image 2" />
            </telerik:DiagramShape>
            <telerik:DiagramShape Id="s3" Height="150" Width="190">
                <ContentSettings Html="<img width='128px' height='128px' src='https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-128.png'/> Image 3" />
            </telerik:DiagramShape>
            <telerik:DiagramShape Id="s4" Height="150" Width="190">
                <ContentSettings Html="<img width='128px' height='128px' src='https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-128.png'/> Image 4" />
            </telerik:DiagramShape>
        </ShapesCollection>
        <ConnectionsCollection>
            <telerik:DiagramConnection>
                <FromSettings ShapeId="s1" />
                <ToSettings ShapeId="s2" />
            </telerik:DiagramConnection>
            <telerik:DiagramConnection>
                <FromSettings ShapeId="s2" />
                <ToSettings ShapeId="s3" />
            </telerik:DiagramConnection>
            <telerik:DiagramConnection>
                <FromSettings ShapeId="s3" />
                <ToSettings ShapeId="s4" />
            </telerik:DiagramConnection>
        </ConnectionsCollection>
    </telerik:RadDiagram>

    I would suggest that you give a try to the approach above and see whether it will fit your scenario better than the currently used by you workaround.

    Regards,
    Vessy
    Telerik
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017