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

click event - rectangle

3 Answers 164 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Justin Lee
Top achievements
Rank 1
Justin Lee asked on 14 Jul 2017, 01:29 PM

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!

3 Answers, 1 is accepted

Sort by
0
Justin Lee
Top achievements
Rank 1
answered on 14 Jul 2017, 02:19 PM

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.

0
Justin Lee
Top achievements
Rank 1
answered on 14 Jul 2017, 02:53 PM

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
}
0
Accepted
Stefan
Telerik team
answered on 18 Jul 2017, 10:23 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
Tags
Diagram
Asked by
Justin Lee
Top achievements
Rank 1
Answers by
Justin Lee
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or