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
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
Thanks in advance.
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
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
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
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