Drag and Drop in Diagram with attributes

4 posts, 0 answers
  1. Sandhia
    Sandhia avatar
    2 posts
    Member since:
    Jan 2013

    Posted 22 Jul 2019 Link to this post

    Hello

    We have a requirement to do the following.  Can you please tell me whether it is doable (or how much of it is doable) at the moment using Telerik Diagram.  If it is, can you please point me to a starting point?

    So we need to --

    - allow user to drag and drop blocks into a canvas

    - be able to relate blocks

    - have a popup appear when relating two blocks to allow input of one or more attributes

    - allow editing of relationship by may be double clicking on the relational lines

    - save diagram on a web page

    - export diagram to excel

    - have an auto-layout button option or allow user to manually move boxes around

    - allow user to color code blocks based on some attribute

     

    I did find a page

    https://demos.telerik.com/aspnet-ajax/diagram/examples/interactions/defaultcs.aspx

     

    that does some of what we want but not everything.

     

    Any help will be appreciated.

    Thank you

    Sandhia

  2. Vessy
    Admin
    Vessy avatar
    2091 posts

    Posted 24 Jul 2019 Link to this post

    Hi Sandhia,

    Almost all of the listed features are implemented/demonstrated in our Diagramming Tool, so you can find it useful as a base for your implementation:

    https://demos.telerik.com/aspnet-ajax/sample-applications/diagram-app/

    The whole source code for it is available for downloading here (the top right corner of the page)

    https://demos.telerik.com/aspnet-ajax/sample-applications/diagram-app/DiagramAppSource.zip

     

    Please, examine the sample app linked above and let me know if I can assist you any further on this matter.

     

    Regards, Vessy
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Sandhia
    Sandhia avatar
    2 posts
    Member since:
    Jan 2013

    Posted 24 Jul 2019 Link to this post

    Hello Vessy

    Thank you so much for the information.  However I am very new to 'diagraming' and so am a bit clueless.

    I don't see how to connect two shapes via arrows or how to insert attributes for the blocks and the connectors.  For ex., I may want to name two blocks "A" and "B" and have the connector line have an attribute that says "builds". 

    This example seems to have the blocks and relationships hardcodes in the page.  Where can I find an example of diagram being generate dynamically?

    Thanks again.
    Sandhia

  4. Vessy
    Admin
    Vessy avatar
    2091 posts

    Posted 29 Jul 2019 Link to this post

    Hi Sandhia,

    Indeed the given sample app demonstrates a more complex scenario. If you want to see a basic sample on how to create diagram along with shapes and connection dynamically, you can refer the following article:

    https://docs.telerik.com/devtools/aspnet-ajax/controls/diagram/server-side-programming#configuring-a-diagram-from-the-code-behind

     

    Another (simpler) approach on how to drag and drop shapes into diagram can be seen here:

    https://demos.telerik.com/aspnet-ajax/diagram/examples/interactions/defaultcs.aspx

     

    Regards, Vessy
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top