StartCap, EndCap

11 posts, 0 answers
  1. Alan Wang
    Alan Wang avatar
    40 posts
    Member since:
    Jul 2012

    Posted 08 Jul 2014 Link to this post

    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>
  2. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 09 Jul 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Hans
    Hans avatar
    11 posts
    Member since:
    Jul 2014

    Posted 15 Jul 2014 Link to this post

    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
  5. Alan Wang
    Alan Wang avatar
    40 posts
    Member since:
    Jul 2012

    Posted 15 Jul 2014 in reply to Hans Link to this post

    unfortunately, I don't have. But thanks anyway for your reply.
  6. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 17 Jul 2014 Link to this post

    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.

     
  7. Alan Wang
    Alan Wang avatar
    40 posts
    Member since:
    Jul 2012

    Posted 15 Aug 2014 in reply to Vessy Link to this post

    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
  8. Alan Wang
    Alan Wang avatar
    40 posts
    Member since:
    Jul 2012

    Posted 16 Aug 2014 in reply to Vessy Link to this post

    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>
         <
  9. Alan Wang
    Alan Wang avatar
    40 posts
    Member since:
    Jul 2012

    Posted 20 Aug 2014 Link to this post

    Anyone from Telerik can help on this issue?
  10. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 20 Aug 2014 Link to this post

    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.

     
  11. Rick
    Rick avatar
    1 posts
    Member since:
    Nov 2010

    Posted 29 Sep 2014 in reply to Slav Link to this post

    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?
  12. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 02 Oct 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017