Diagram upgrade problem

[Amir]

Hi,

I am trying raddiagram to generate dynamic organizational charts.

Every thing worked fine with version 2015.03.930.

But when we upgrade to any other version such as 2015.03.1111 the diagram does not render properly.

here is the markup used for raddiagram:

<telerik:RadDiagram ID="_rdUnit1" ClientIDMode="Static" runat="server" Editable="False" EnableViewState="False"
         OnItemDataBound="_rdUnit1_OnItemDataBound">

        <clientevents onclick="OnClick" onload="diagram_load" />
        <%--<layoutsettings enabled="True" type="Tree" subtype="TipOver"></layoutsettings>--%>
        <shapedefaultssettings type="rectangle" height="35" width="110" visual="visualizeShape">
            <StrokeSettings DashType="Solid" Color="Black" Width="0.9"></StrokeSettings>
            <ContentSettings Align="center" Color="Black" FontSize="18" FontFamily="Byekan"></ContentSettings>
            <FillSettings Color="White"></FillSettings>
        </shapedefaultssettings>
        <bindingsettings>
                <ShapeSettings DataIdField="UnitId" DataContentTextField="Name" DataTypeField="ShapeType" DataFillColorField="BackColor"
                     DataStrokeDashTypeField="BorderType" DataXField="Xposition" DataYField="Yposition"
                    DataWidthField="WidthShape" DataHeightField="HeightShape" DataStrokeColorField="BorderColor"
                    DataContentAlignField="FontSize"/>
                <ConnectionSettings DataFromShapeIdField="ParentId" DataToShapeIdField="UnitId" />
            </bindingsettings>
    </telerik:RadDiagram>

I've attached the correct rendering and the one that does not render properly.

Am I doing something wrong?

[Vessy]

Hi Amir,

I tested the provided code but everything behaves properly on my side with both of the mentioned versions. I assume that the experienced issue is related with the Visual template logic used on your side. I am attaching the isolated version of your code I used for my tests. Can you modify it up to a point where the problem occurs and send it for a further investigation?

I addition, during the investigation of the code, I noticed that the ClientIdMode property of the diagram is set to Static. Please note that RadDiagram (and all controls from the UI for ASP.NET AJAX suite) supports only ClientIdMode="AutoID" and it is highly recommended to configure it this way in order to generate correct client IDs.

Regards,
Vessy
Telerik

[Amir]

Hi Vessy,

Thanks for the reply. Your answer helped us a lot to resolve the problem. The problem was with the javascript we used to wrap long text in shapes. We'd got the script from the Diagram Overview Demo. On our side we did have the function appendToGroupWithoutOffset and we directly used shapeGroup.append(shape).

Maybe the demo is updated with telerik web ui version.

Thanks.

Amir

[Vessy]

Hi Amir,

I am really glad the provided solution was helpful for you in pinpointing the problem. Apart from applying the approach from our live demo (yes, the logic in it is updated), you can consider setting the content of the shape through the newly implemented Html property, allowing you to add html elements and CSS styling to the shape's content.

<telerik:RadDiagram ID="diagram1" runat="server">
    <ShapesCollection>
        <telerik:DiagramShape Id="Shape1" Width="120">
            <ContentSettings Html="<div style='width:60px;'>Some long content</div>" />
        </telerik:DiagramShape>
    </ShapesCollection>
</telerik:RadDiagram>

Regards,
Vessy
Telerik