Diagram How To Questions

11 posts, 1 answers
  1. Kevin
    Kevin avatar
    7 posts
    Member since:
    Oct 2015

    Posted 23 Mar 2016 Link to this post

    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!

  2. Daniel
    Admin
    Daniel avatar
    2142 posts

    Posted 25 Mar 2016 Link to this post

    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!
     
  3. Kevin
    Kevin avatar
    7 posts
    Member since:
    Oct 2015

    Posted 29 Mar 2016 in reply to Daniel Link to this post

    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.

  4. Answer
    Daniel
    Admin
    Daniel avatar
    2142 posts

    Posted 31 Mar 2016 Link to this post

    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!
     
  5. Kevin
    Kevin avatar
    7 posts
    Member since:
    Oct 2015

    Posted 31 Mar 2016 in reply to Daniel Link to this post

    Thanks, I got it to work. :)

     

    K.

  6. Zoltan
    Zoltan avatar
    4 posts
    Member since:
    Feb 2012

    Posted 16 Jun 2016 in reply to Daniel Link to this post

    Hello, is disabling multiple selection of shapes implemented yet?

    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

  7. Daniel
    Admin
    Daniel avatar
    2142 posts

    Posted 17 Jun 2016 Link to this post

    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.
     
  8. Alan
    Alan avatar
    5 posts
    Member since:
    Aug 2016

    Posted 09 Jan Link to this post

    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

  9. Vessy
    Admin
    Vessy avatar
    1492 posts

    Posted 11 Jan Link to this post

    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.
  10. Alan
    Alan avatar
    5 posts
    Member since:
    Aug 2016

    Posted 13 Jan in reply to Vessy Link to this post

    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>

     

     

     

  11. Vessy
    Admin
    Vessy avatar
    1492 posts

    Posted 17 Jan Link to this post

    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.
Back to Top