This is a migrated thread and some comments may be shown as answers.

StartCap, EndCap

10 Answers 80 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Alan Wang
Top achievements
Rank 1
Alan Wang asked on 08 Jul 2014, 05:03 PM
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>

10 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 09 Jul 2014, 02:46 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Hans
Top achievements
Rank 1
answered on 15 Jul 2014, 09:43 AM
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
0
Alan Wang
Top achievements
Rank 1
answered on 15 Jul 2014, 02:51 PM
unfortunately, I don't have. But thanks anyway for your reply.
0
Vessy
Telerik team
answered on 17 Jul 2014, 01:39 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Alan Wang
Top achievements
Rank 1
answered on 15 Aug 2014, 07:59 PM
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
0
Alan Wang
Top achievements
Rank 1
answered on 16 Aug 2014, 12:51 PM
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>
     <
0
Alan Wang
Top achievements
Rank 1
answered on 20 Aug 2014, 01:42 PM
Anyone from Telerik can help on this issue?
0
Slav
Telerik team
answered on 20 Aug 2014, 01:48 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Rick
Top achievements
Rank 1
answered on 29 Sep 2014, 08:12 PM
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?
0
Slav
Telerik team
answered on 02 Oct 2014, 03:23 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Diagram
Asked by
Alan Wang
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Hans
Top achievements
Rank 1
Alan Wang
Top achievements
Rank 1
Slav
Telerik team
Rick
Top achievements
Rank 1
Share this question
or