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:
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
0
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
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
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
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
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
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
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
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:
Regards,
Slav
Telerik
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:
Here is the client side code:
The diagram renders fine, but there are no filled circles or ending arrows.
Any ideas?
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
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
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.