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

Diagram How To Questions

10 Answers 371 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 23 Mar 2016, 02:19 PM

In my code I am using the Diagram to show a series of options to a user, in a hierarchical format.  The data source gets its info from a web call, and the visual template is simply a rectangle and some text.  I create the diagram with the following options:

                    layout: {
                        type: "layered"
                    },
                    connectionDefaults: {
                        selectable: false
                    },
                    editable: false,
                    click: selectFunc

The "selectFunc" simply sees if the click occurred on an item, and if so, sets a variable to that item for later retrieval. 

What I want to be able to do is treat this diagram as single selection only.  So, how do I:

 

1) Disable mouse selection rectangle?  If you click and drag the mouse, a selection rectangle forms that will select all shapes it intersects.

2) Disable [CTRL]-Click, which allows multiple selection?  In my selectFunc method, I undo the multiple selection and only select the last clicked on item, but the user still sees the multi-select action occur.

3) Make the diagram resizable?  It seems if I do not specify an explicit width and height in CSS, the diagram will draw larger than the <div> it is contained within; and my attempts to use CSS to specify margins is also mostly ignored.

4) I utilize the "bringIntoView" method with a parameter of the first shape in the collection to make sure the diagram shows at least the first object in the hierarchy, but can I also specify to show it centered at the top of the available space?

 

Thanks in advance!

10 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 25 Mar 2016, 09:12 AM
Hello,

Disabling the multiple selection is not currently supported. We plan to add an option for the multiple selection for the next official release.

I am not sure if I understand the question about the diagram being resizable but the surface size is infinite. Meaning, the area occupied by the shapes and connections can be larger than the element size. if you are referring to the diagram element itself, it has 600px height specified with the styles which you can override via CSS.

Yes, you can use the bringIntoView align option for this purpose - example.

Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Kevin
Top achievements
Rank 1
answered on 29 Mar 2016, 03:57 PM

For the diagram sizing.  I can't get it to resize with the HTML window.  So, if in the CSS I specify:

height: auto;

I get a 600px high diagram that does not size to the window, requiring scrolling or making the window size bigger to see it all.

If I specify:

height: 100px;

I do get a 100px high diagram, but of course, it doesn't change size ever.

If I specify:

height: auto;
min-height: 100px;
max-height: 600px;

I get a 100px height diagram that never changes its height value.

The width, on the other hand, does work by simply stating:

width: auto;

and setting the appropriate margin values.

0
Accepted
Daniel
Telerik team
answered on 31 Mar 2016, 07:36 AM
Hello again Kevin,

You can use 100% height style on the element in order to achieve this - example.

Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Kevin
Top achievements
Rank 1
answered on 31 Mar 2016, 02:59 PM

Thanks, I got it to work. :)

 

K.

0
Zoltan
Top achievements
Rank 1
answered on 16 Jun 2016, 10:41 AM

Hello, is disabling multiple selection of shapes implemented yet?

[quote]Daniel said:Hello,
Disabling the multiple selection is not currently supported. We plan to add an option for the multiple selection for the next official release.
...

Regards,
Daniel
Telerik

[/quote]
0
Daniel
Telerik team
answered on 17 Jun 2016, 09:10 AM
Hi,

Yes, the option is implemented:
selectable: {
  multiple: false
}
but seems to be missing from the documentation. We will include it as soon as possible.

Regards,
Daniel
Telerik
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Alan
Top achievements
Rank 1
answered on 09 Jan 2017, 03:36 PM

I've got a Telerik Diagram control embedded in a div with a size that is resized when the web page resizes. The diagram itself has a large fixed area and the enclosing div has a style of 'overflow:hidden' so that it can provide a scrolling view of the diagram.

Viewing works fine but any attempt to interact with the diagram (e.g. to drag a node to a new relative position in the diagram) causes the position of the diagram within the div to revert to top left.

Is there any way to prevent this re positioning or how else can I provide a mechanism to display and manipulate a diagram that is larger than the display area of a web page.

(I am aware that I can scale the diagram and that does help but because the nodes contain text this is not a good solution particularly as the diagrams get larger or the display area gets smaller)

Thanks AVB

0
Vessy
Telerik team
answered on 11 Jan 2017, 11:31 AM
Hi Alan,

The described scenario sound pretty much like the one showcased in the following How-to article, am I correct?
http://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/diagram/how-to/using-scrollbar

Can you examine the sample given in it and see whether you are experiencing the same problem? Does the configuration applied there differs the one used by you?

Regards,
Vessy
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.
0
Alan
Top achievements
Rank 1
answered on 13 Jan 2017, 06:28 PM

Thanks Vessy,

That example does indeed seem to achieve the effect I'm after (having modified the sample to show make it editable). I suspect the key is the dataBound function that is defined. My use of the Tererik Diagram is based on a static (AJAX) definition of the diagram (see below) - can you tell me how I go about adding the dataBound function in that senario?

 

AVB

 

        #diagramOuter
        {
            position:relative;
            left:0px;
            top:0px;
            overflow:auto;
            border:1px solid black;
        }

...

    <div id="diagramOuter" >
            <telerik:RadDiagram ID="InfluenceMap" runat="server" Width="2000" Height="2000" ZoomMin="0.4" ZoomMax="2.0" Resizable="false" Rotatable="false" EnableViewState="true" >
                <LayoutSettings Enabled="true" Type="Layered" Subtype="Down" ></LayoutSettings>
                <ClientEvents OnPan="_T_OnPan" OnLoad="_T_Diagram_load" OnItemBoundsChange="_T_OnItemBoundsChange" OnChange="_T_Diagram_change" OnZoomStart="_T_StartZoom" OnSelect="_T_OnSelect" OnEdit="_T_OnEdit" OnDragStart="_T_OnDragStart" OnDragEnd="_T_OnDragEnd" OnClick="_T_OnClick" />
                <ShapeDefaultsSettings
                    Visual="_T_Diagram_ImageTemplate"
                    Width="200"
                    Height="120"
                    Fill="#000000"  
                    Editable="true"                      
                    Selectable="true">
                </ShapeDefaultsSettings>
                <ConnectionDefaultsSettings EndCap="ArrowEnd" Editable="false" Selectable="true "></ConnectionDefaultsSettings>
                <ShapesCollection></ShapesCollection>
                <ConnectionsCollection></ConnectionsCollection>
                <EditableSettings Remove="false" Resize="false" Rotate="false"></EditableSettings>
            </telerik:RadDiagram>
    </div>

 

 

 

0
Vessy
Telerik team
answered on 17 Jan 2017, 12:34 PM
Hi Kevin,

I am afraid that I am not able to replicate the described behavior with the provided code. I am attaching my test page to this reply - are you reproducing the problem with it?

As for the dataBound event - it corresponds to the OnDataBound event of RadDiagram. You can also find useful information on how to access the Kendo diagram widget throyug the RadDiagram API here:
http://docs.telerik.com/devtools/aspnet-ajax/controls/diagram/client-side-programming/overview


Regards,
Vessy
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
Kevin
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Kevin
Top achievements
Rank 1
Zoltan
Top achievements
Rank 1
Alan
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or