StartCap, EndCap

[Alan Wang]

Hi,

I tried your Diagram  control and using StartCap="FilledCircle" EndCap="ArrowEnd". For some reason,  FilledCircle and ArrowEnd doesn't show up on the diagram. Wondering where I did wrong and  following is my code:

<telerik:RadDiagram ID="theDiagram" runat="server" Width="1050" Height="600">
          <ShapesCollection>
            <telerik:DiagramShape Id="DiagramShape1" Width="100" Height="70" X="260" Y="100"
              Type="rectangle" Background="#25a0da">
              <ContentSettings Text="Parent" />
            </telerik:DiagramShape>
            <telerik:DiagramShape Id="DiagramShape2" Width="120" Height="50" X="60" Y="250" Type="circle"
              Background="#FFBE33">
              <ContentSettings Text="Child 1" />
            </telerik:DiagramShape>
            <telerik:DiagramShape Id="DiagramShape3" Width="120" Height="50" X="245" Y="250"
              Type="circle" Background="#FFBE33">
              <ContentSettings Text="Child 2" />
            </telerik:DiagramShape>
            <telerik:DiagramShape Id="DiagramShape4" Width="120" Height="50" X="440" Y="250"
              Type="circle" Background="#FFBE33">
              <ContentSettings Text="Child 3" />
            </telerik:DiagramShape>
          </ShapesCollection>
          <ConnectionsCollection>
            <telerik:DiagramConnection StartCap="None" EndCap="ArrowEnd">
              <FromSettings Connector="Bottom" ShapeId="DiagramShape1" />
              <ToSettings Connector="Top" ShapeId="DiagramShape2" />
            </telerik:DiagramConnection>
            <telerik:DiagramConnection StartCap="FilledCircle" EndCap="ArrowEnd">
              <FromSettings Connector="Bottom" ShapeId="DiagramShape1" />
              <ToSettings Connector="Top" ShapeId="DiagramShape3" />
            </telerik:DiagramConnection>
            <telerik:DiagramConnection StartCap="FilledCircle" EndCap="ArrowEnd">
              <FromSettings Connector="Bottom" ShapeId="DiagramShape1" />
              <ToSettings Connector="Top" ShapeId="DiagramShape4" />
            </telerik:DiagramConnection>
          </ConnectionsCollection>
        </telerik:RadDiagram>

[Vessy]

Hi Alan,

Thank you for bringing this issue to our attention.

I managed to reproduce it and can confirm that it is a bug in the RadDiagram control. I have logged into our feedback portal and you can track the progress of the item and vote for it here: feedback portal.

I have also updated your Telerik points accordingly as a small sign of gratitude for your report.

Kind regards,
Vessy
Telerik

 

 

[Hans]

Hi Alan,

if you have the kendoWidget object in the client side code, you can fix it by overriding the options:
radDiagram.options.connectionDefaults.endCap = 'ArrowEnd';

Kind regards,
Hans

[Alan Wang]

unfortunately, I don't have. But thanks anyway for your reply.

[Vessy]

Hi Alan,

You can get a reference to the Kendo UI Diagram widget through the RadDiagram's kendoWidget property in the way described in this help article: Client-Side Basics. For example, you can do it in the RadDiagram's Client-side Load event.

Hope this helps.

Regards,
Vessy
Telerik

 

 

[Alan Wang]

Vessy,

I tried 2014Q2 Sp1 and StartCap, EndCap still doesn't work. Do you you when this problem can be fixed.

Thanks a lot!

Alan

[Alan Wang]

Vessy,

I took your advise and using Kendo UI Diagram widget and still doesn't work for me. Please let me know if I did anything wrong.

Thanks

Alan

<script type="text/javascript">
         function OnLoad(diagram) {
           var diagram = $find("<%=theDiagram.ClientID %>").kendoWidget;
           diagram.options.connectionDefaults.endCap = 'ArrowEnd';
           diagram.options.connectionDefaults.startCap = 'FilledCircle';
         }
       </script>
       <telerik:RadDiagram ID="theDiagram" runat="server" Width="1050" Height="600" SkinID="Default">
         <ClientEvents OnLoad="OnLoad" />
         <ShapesCollection>
           <telerik:DiagramShape Id="DiagramShape1" Width="100" Height="70" X="260" Y="100"
             Type="rectangle" Background="#25a0da">
             <ContentSettings Text="Parent" />
           </telerik:DiagramShape>
           <telerik:DiagramShape Id="DiagramShape2" Width="120" Height="50" X="60" Y="250" Type="circle"
             Background="#FFBE33">
             <ContentSettings Text="Child 1" />
           </telerik:DiagramShape>
           <telerik:DiagramShape Id="DiagramShape3" Width="120" Height="50" X="245" Y="250"
             Type="circle" Background="#FFBE33">
             <ContentSettings Text="Child 2" />
           </telerik:DiagramShape>
           <telerik:DiagramShape Id="DiagramShape4" Width="120" Height="50" X="440" Y="250"
             Type="circle" Background="#FFBE33">
             <ContentSettings Text="Child 3" />
           </telerik:DiagramShape>
         </ShapesCollection>
         <ConnectionsCollection>
           <telerik:DiagramConnection StartCap="FilledCircle" EndCap="ArrowEnd">
             <FromSettings Connector="Bottom" ShapeId="DiagramShape1" />
             <ToSettings Connector="Top" ShapeId="DiagramShape2" />
           </telerik:DiagramConnection>
           <telerik:DiagramConnection StartCap="FilledCircle" EndCap="ArrowEnd">
             <FromSettings Connector="Bottom" ShapeId="DiagramShape1" />
             <ToSettings Connector="Top" ShapeId="DiagramShape3" />
           </telerik:DiagramConnection>
           <telerik:DiagramConnection StartCap="FilledCircle" EndCap="ArrowEnd">
             <FromSettings Connector="Bottom" ShapeId="DiagramShape1" />
             <ToSettings Connector="Top" ShapeId="DiagramShape4" />
           </telerik:DiagramConnection>
         </ConnectionsCollection>
       </telerik:RadDiagram>
     <

[Alan Wang]

Anyone from Telerik can help on this issue?

[Slav]

Hi Alan,

You need to call the redraw method of the connections in order to apply the change in their settings. The start and end caps should appear if you execute the following script when the diagram is loaded:

<script type="text/javascript">
    function OnLoad(diagram) {
        var diagram = $find("<%=theDiagram.ClientID %>").kendoWidget;
        var options = { startCap: "FilledCircle", endCap: "ArrowEnd" };
        for (var i = 0; i < diagram.connections.length; i++) {
                diagram.connections[i].redraw(options);
        }
    }
</script>

Regards,
Slav
Telerik

 

 

[Rick]

I tried the last posted solution with no affect.  The ends do not show up.  

I am using a datasource to populate the diagram control.

Here is the markup:

<telerik:RadDiagram ID="theDiagram"
                    runat="server"
                    Width="100%"
                    Height="100%"
                    DataSourceId="GoalDataSource"
                    ConnectionDataSourceId="GoalSupportDataSource"
                   EnableViewState="false">
    <ClientEvents OnLoad="OnLoad"/>

    <LayoutSettings
        Enabled="true"
        Type="Tree"
        Subtype="Down"
        RadialFirstLevelSeparation="20"
        RadialSeparation="10"/>

    <ShapeDefaultsSettings Width="180"
                           Height="70"
                           Editable="false"
                           Type="circle"
                           Background="#FFBE33">
        <StrokeSettings Color="#000"/>
    </ShapeDefaultsSettings>

    <ConnectionDefaultsSettings StartCap="FilledCircle"
                                EndCap="ArrowEnd">
    </ConnectionDefaultsSettings>

    <BindingSettings>

        <ShapeSettings
            DataContentTextField="Name"
            DataIdField="GoalId"/>

        <ConnectionSettings
            DataFromShapeIdField="SupportingGoalId"
            DataToShapeIdField="SupportedGoalId"/>

    </BindingSettings>

</telerik:RadDiagram>

Here is the client side code:

function OnLoad(diagram)
{
    var diagram = $find("<%=theDiagram.ClientID %>").kendoWidget;
    var options = { startCap: "FilledCircle", endCap: "ArrowEnd" };
    for (var i = 0; i < diagram.connections.length; i++)
    {
        diagram.connections[i].redraw(options);
    }
}

The diagram renders fine, but there are no filled circles or ending arrows.

Any ideas?

[Slav]

Hi Rick,

I attached a page that shows how to use previously posted script for redrawing the diagram connections. Please check it and let me know if there are differences in the setup when you compare it to your actual project. Note that you need to add a connection string for the Telerik database in order to run the example.

If possible, modify the attached example until the problem is reproducible and send it back for further inspection.

Regards,
Slav
Telerik