click event - rectangle

[Justin Lee]

I have a diagram with multiple shapes.  Each shape has multiple rectangles.

1. Is there a way (do you have examples) to identify which rectangle in the shape was clicked in the Click event? 

2. Is there any mechanism to store data in the rectangles? i.e. Similar to data-id="5" in standard html. I'm pretty sure I can figure out the Id of each rectangle from the shape.dataItem - but it would be alot easier if I could store data with each rectangle.

 

Thanks!

[Justin Lee]

I figured out #2 -I was forgetting you're basically working with javascript objects, so I just set the property.  (myRect.ItemId = 5)

Still haven't figured out #1 though.

[Justin Lee]

Ok, I figured out #1 now too, and it seems to be working. Here is how it did it:

function onDiagramShapeClicked(e) {
  var cnvId;
  var shapeBounds = e.item.bounds();
  $.each(e.item.shapeVisual.children, function(i) {
    var child = e.item.shapeVisual.children[i];
    if (!child.cnvId) // only shapes that have a custom id
      return;

    var x1 = shapeBounds.x + child.options.x;
    var x2 = x1 + child.options.width;
    var y1 = shapeBounds.y + child.options.y;
    var y2 = y1 + child.options.height;

    if (e.point.x >= x1 && e.point.x <= x2 && e.point.y >= y1 && e.point.y <= y2) {
      cnvId = child.cnvId;
      return false;
    }
  });
  alert(cnvId); // do something with the id
}

[Stefan]

Hello Justin,

I'm glad to hear that the issues are resolved.

We highly appreciate sharing the solutions with the Kendo UI community:

Both implementations look good and should work as expected.

Regards,
Stefan
Progress Telerik