Diagram How To Questions

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

    Posted 23 Mar 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
    2117 posts

    Posted 25 Mar 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. Kendo UI is VS 2017 Ready
  4. Kevin
    Kevin avatar
    7 posts
    Member since:
    Oct 2015

    Posted 29 Mar 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.

  5. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 31 Mar 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!
     
  6. Kevin
    Kevin avatar
    7 posts
    Member since:
    Oct 2015

    Posted 31 Mar in reply to Daniel Link to this post

    Thanks, I got it to work. :)

     

    K.

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

    Posted 16 Jun 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

  8. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 17 Jun 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.
     
Back to Top
Kendo UI is VS 2017 Ready