This is a migrated thread and some comments may be shown as answers.

Swimlanes

9 Answers 377 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 23 Feb 2015, 03:43 PM
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.

9 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 25 Feb 2015, 01:03 PM
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!
 
0
John
Top achievements
Rank 1
answered on 26 Feb 2015, 07:31 AM
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.
0
John
Top achievements
Rank 1
answered on 26 Feb 2015, 07:33 AM
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?
0
Accepted
T. Tsonev
Telerik team
answered on 02 Mar 2015, 05:54 AM
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!
 
0
Alex
Top achievements
Rank 1
answered on 04 Jun 2018, 09:18 PM
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?
0
Tsvetina
Telerik team
answered on 06 Jun 2018, 02:49 PM
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.
0
Alex
Top achievements
Rank 1
answered on 06 Jun 2018, 04:30 PM

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

 

0
Alex
Top achievements
Rank 1
answered on 06 Jun 2018, 10:18 PM
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?
0
Tsvetina
Telerik team
answered on 08 Jun 2018, 11:05 AM
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.
Tags
Diagram
Asked by
John
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
John
Top achievements
Rank 1
Alex
Top achievements
Rank 1
Tsvetina
Telerik team
Share this question
or