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

Is it possible to create a 1px line?

1 Answer 81 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 31 Jan 2017, 03:14 AM
Shapes seem to have a minimium width of 20px. Is it possible to have a line tool?

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 02 Feb 2017, 03:08 PM

Hello Andrew,

In the diagram lines are called connections. For example

<telerik:RadDiagram ID="theDiagram" runat="server" Width="600px" Height="430px">
    <ShapesCollection>
        <telerik:DiagramShape Id="shape1" X="300" Y="20" Width="70" Height="70">
            <ContentSettings Text="Anna" Color="#fff" />
        </telerik:DiagramShape>
        <telerik:DiagramShape Id="shape2" X="400" Y="40" Width="120" Height="120">
            <ContentSettings Text="Rene" Color="#fff" />
        </telerik:DiagramShape>
    </ShapesCollection>
    <ConnectionsCollection>
        <telerik:DiagramConnection>
            <FromSettings ShapeId="shape1" />
            <ToSettings ShapeId="shape2" />
        </telerik:DiagramConnection>
    </ConnectionsCollection>
</telerik:RadDiagram>

You can see how to further customize their appearance here: http://demos.telerik.com/aspnet-ajax/diagram/examples/customizingelements/defaultcs.aspx.

The shapes are not limited to 20px size, however, and you can reduce them further if you want, e.g.:

<telerik:DiagramShape Id="shape1" X="300" Y="20" Width="10" Height="10">
    <ContentSettings Text="Anna" Color="#fff" />
</telerik:DiagramShape>
<telerik:DiagramShape Id="shape2" X="400" Y="40" Width="10" Height="10">
    <ContentSettings Text="Rene" Color="#fff" />
</telerik:DiagramShape>

An alternative would be to use the shape visuals and create your own shapes from scratch, as explained here: http://docs.telerik.com/devtools/aspnet-ajax/controls/diagram/functionality/shape-templates.

Regards,

Marin Bratanov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Diagram
Asked by
Andrew
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or