Diagram How To Questions

[Kevin]

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!

[Daniel]

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

 

 

[Kevin]

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.

[Daniel]

Hello again Kevin,

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

Regards,
Daniel
Telerik

 

 

[Kevin]

Thanks, I got it to work. :)

 

K.

[Zoltan]

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]

[Daniel]

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

 

 

[Alan]

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

[Vessy]

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

[Alan]

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>

 

 

 

[Vessy]

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