Image within shapes

[Jason]

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

[Jason]

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. 

[Vessy]

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

[Jason]

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

 

 

[Vessy]

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

[Raimundo]

Hi Vessi,

I have a shapes collection that contains your data stored in an SQL table, with images that I would like displayed on the shapes.
Can you suggest a code example for this situation?
Below is an excerpt from my code:

<telerik:RadDiagram ID="RadDiagram1" runat="server" Width="100%" Height="100%" Skin="Metro">
    <ClientEvents OnLoad="diagram_load" />
<LayoutSettings Enabled="true" Iterations="350">
</LayoutSettings>
<BindingSettings>
<ShapeSettings DataContentTextField="AlcunhaIni" DataIdField="idIndividuo" 
DataFillColorField="corShape" DataTypeField="tipoShape">
</ShapeSettings>
<ConnectionSettings DataFromShapeIdField="idIndAscend" DataToShapeIdField="idIndividuo" />
</BindingSettings>
</telerik:RadDiagram>

 

private DataSet ds = new DataSet();
private DataSet dc = new DataSet();
private DataSet da = new DataSet();
private DataSet dn = new DataSet();

protected void Form1_OnLoad()
{
DataSet dr = Dao.RunSql("SELECT TOP 1 idIndividuo, AlcunhaIni, idIndAscend FROM VwIndividuo WHERE " + Session["eVsFltDiag"].ToString() + " ORDER BY IndicePos");

idLblDiagRoot.Text = dr.Tables[0].Rows[0]["AlcunhaIni"].ToString();
idLblDiagIdRt.Text = dr.Tables[0].Rows[0]["idIndividuo"].ToString();

ds = Dao.RunSql("SELECT idIndividuo, AlcunhaIni, idIndAscend, tipoShape, corShape, indFoto1, indGrcSigla, idPosGrCrim, PosGrCrime, idPosAscend, indPriori, corPriori, cftPriori FROM VwIndividuo WHERE " 
+ Session["eVsFltDiag"].ToString() + " ORDER BY IndicePos");
da = Dao.RunSql("SELECT idIndividuo, AlcunhaIni, idIndAscend, tipoShape, corShape, indFoto1 FROM VwIndividuo WHERE " + Session["eVsFasDiag"].ToString() + " ORDER BY IndicePos");

ds.Tables[0].Merge(da.Tables[0], false);

LblQtdRegInd.Text = ds.Tables[0].Rows.Count.ToString();

            foreach (DataRow dsr in ds.Tables[0].Rows) {
dsr["indFoto1"] = ResolveUrl(!String.IsNullOrEmpty(dsr["indFoto1"].ToString()) ? dsr["indFoto1"].ToString() : "~/Images/naoDisponivel.jpg");
            }

RadDiagram1.Width = 1280;
RadDiagram1.Height = 1200;
RadDiagram1.ShapeDefaultsSettings.Width = 80;
RadDiagram1.ShapeDefaultsSettings.Height = 80;
RadDiagram1.ShapeDefaultsSettings.StrokeSettings.Color = "#fff";

RadDiagram1.LayoutSettings.Enabled = true;
RadDiagram1.LayoutSettings.Type = Telerik.Web.UI.Diagram.LayoutType.Tree;
RadDiagram1.LayoutSettings.Subtype = Telerik.Web.UI.Diagram.LayoutSubtype.Down;
RadDiagram1.LayoutSettings.VerticalSeparation = 20;
RadDiagram1.LayoutSettings.HorizontalSeparation = 30;

RadDiagram1.DataSource = ds.Tables[0].DefaultView.ToTable(true, "idIndividuo", "AlcunhaIni", "idIndAscend", "tipoShape", "corShape", "indFoto1");
RadDiagram1.ConnectionDataSource = GetConnections();
RadDiagram1.DataBind();

DataSet dspgr = Dao.RunSql("SELECT * FROM TbPosGrCrime ORDER BY indicePos");
DataTable dtpgr = dspgr.Tables[0];
rptMarkersPosGr.DataSource = dtpgr;
rptMarkersPosGr.DataBind();

DataTable dtind = ds.Tables[0];
rptMarkersIndSh.DataSource = dtind;
rptMarkersIndSh.DataBind();
}

private IEnumerable GetConnections()
{
    dc = Dao.RunSql("SELECT idIndividuo, idIndAscend FROM VwIndividuo WHERE " + Session["eVsFltDiag"].ToString() + " AND (idIndAscend > 0) ORDER BY IndicePos");

var data = dc.Tables[0].AsEnumerable().Select(row =>
new { idIndividuo = row["idIndividuo"].ToString(),
  idIndAscend = row["idIndAscend"].ToString()
});

return data;
}