Swimlanes

10 posts, 1 answers
  1. John
    John  avatar
    15 posts
    Member since:
    May 2014

    Posted 23 Feb 2015 Link to this post

    Hello,
    I am using Kendo Diagram in order to define shapes needed for my workflow application, I need to add a shape corresponding to vertical and horizontal swimlanes with the possibility to edit the text in each lane, is there any suggestion?
    Thanks.
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2804 posts

    Posted 25 Feb 2015 Link to this post

    Hi,

    The diagram doesn't currently offer an easy way to build "swimlanes".

    Please, file a request for this feature on our UserVoice portal if you have minute.
    This will help us gauge the overall interest and prioritize.

    Apologies for the caused inconvenience.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. John
    John  avatar
    15 posts
    Member since:
    May 2014

    Posted 26 Feb 2015 in reply to T. Tsonev Link to this post

    Thanks for your answer, in the same context, is there an easy way to edit a given shape in kendo Diagram by changing its text, so for example, when dropping a shape in the diagram I am able to change its text and then to edit it whenever needed.

    Thanks in advance.
  4. John
    John  avatar
    15 posts
    Member since:
    May 2014

    Posted 26 Feb 2015 in reply to T. Tsonev Link to this post

    Thanks for your answer, another question please, is there an easy way to change a shape in Kendo diagram by modifying its text, for example after dropping a given shape, I can put a text on it in whatever position I want and then I can edit it whenever needed?
  5. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2804 posts

    Posted 01 Mar 2015 Link to this post

    Hello,

    Editing is supported out of the box when binding to the dedicated shapes and connection data sources.

    What gets drawn on the shape is determined by its visual template.
    It can be fully customized, as demonstrated in this demo.

    Please, let me know if there's anything specific that we can help with.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Alex
    Alex avatar
    3 posts
    Member since:
    May 2018

    Posted 04 Jun Link to this post

    Is there a straight forward to build swim lanes in Diagram now? Will drawing lines inside a drawing group and append the drawing group into diagram group work? If not, is there any alternative suggestion?
  7. Tsvetina
    Admin
    Tsvetina avatar
    2269 posts

    Posted 06 Jun Link to this post

    Hi Alex,

    The Diagram still does not have the ability to render swim lanes. I found a feedback item that was added to the portal, where you can add your vote for such a feature:
    Swim Lane for Kendo Diagram

    A while ago a colleague created a basic example, which shows a way to achieve what you suggested—draw the swim lanes after the Diagram is rendered:
    http://dojo.telerik.com/@tsveti/ERaCUNEw
    It isn't perfect in terms of interactivity, so panning and zooming are disabled for the Diagram, but if your scenario does not require a great amount of interactivity, it could work for you.


    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Alex
    Alex avatar
    3 posts
    Member since:
    May 2018

    Posted 06 Jun in reply to Tsvetina Link to this post

    Thank you so much for your answer! Couple of follow up questions:

    1. About alternatives. What about drawing boundary rects on diagram to group the part of diagram/flow chart that needed to be grouped together. I want the each rect to be placed relatively to certain elements instead of fixed location. So I need to get the positions of elements in diagram which leads to second question.

    2. How do I get positions of diagram elements? I'm using typescript declaration file as my module for an angular project. So while I can do group.position() to get {x,y} with js, I can't get coordinates value with typescript because position() returns void.

    3. The sequence of creating the above alternative solution would be : diagram -> diagram group -> append(shapes + connections)

    -> append a boundary rect for previous appended elements. Is it doable if I can set opacity of the rect to translucent level(also assuming I can get positions of elements already)?

    Thanks!

    Best,

    Alex

     

  9. Alex
    Alex avatar
    3 posts
    Member since:
    May 2018

    Posted 06 Jun in reply to Tsvetina Link to this post

    Is it because of the added drawing layer that the diagram become undraggable? Is it right to conclude that two different layers stacked together will make the UI surface/canvas undraggable?
  10. Tsvetina
    Admin
    Tsvetina avatar
    2269 posts

    Posted 08 Jun Link to this post

    Hello John,

    The Diagram rendering cannot be altered, so it is not possible to wrap the shapes and connections of the Diagram in separate drawing groups to produce the different lanes. That is why the suggested workaround draws the lanes as a static overlay on top of the Diagram. It relies on placing the shapes relatively to the lane that they are assigned to, not the other way around:
    var xOrigin = 150;         
    var yOrigin = 50;
    var xScale = 200;
    var yScale = 150;
    var data = [{
        id: 1,
        xIdx: 0,
          laneIdx: 2,
        type: "circle",
        text: "Start"
      }, {
        id: 2,
        xIdx: 1,
          laneIdx: 1,
        type: "rectangle",
        text: "step1"
      }, {
        id: 3,
        xIdx: 2,
          laneIdx: 0,
        type: "rectangle",
        text: "step2"
      }, {
        id: 4,
        xIdx: 3,
          laneIdx: 1,
        type: "rectangle",
        text: "step3"
      }, {
        id: 5,
        xIdx: 4,
        laneIdx: 3,
        type: "circle",
        text: "end"
      }];
    var item;
    for (var idx = 0; idx < data.length; idx++) {
      item = data[idx];
      item.x = xOrigin + item.xIdx * xScale;
      item.y = yOrigin + item.laneIdx * yScale;
    }

    The interactions in the Diagram are disabled explicitly because of the limited functionality of this approach:
    editable: false,
    pannable: false,
    zoomRate: 0

    You can enable them, but you will see some side effects like editing resulting in the lanes disappearance (because the Diagram is reloaded with the edited data) and the ability to drag a shape anywhere within the diagram, including the lane titles. That is why I included the comment about this implementation not recommended for scenarios where interactivity is needed in the Diagram (some users only need to display a static Diagram based on some data).

    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular 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