click event - rectangle

4 posts, 1 answers
  1. Justin Lee
    Justin Lee avatar
    164 posts
    Member since:
    Dec 2009

    Posted 14 Jul Link to this post

    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!

  2. Justin Lee
    Justin Lee avatar
    164 posts
    Member since:
    Dec 2009

    Posted 14 Jul Link to this post

    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.

  3. Justin Lee
    Justin Lee avatar
    164 posts
    Member since:
    Dec 2009

    Posted 14 Jul Link to this post

    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
    }
  4. Answer
    Stefan
    Admin
    Stefan avatar
    1147 posts

    Posted 18 Jul Link to this post

    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 visualization (charts) and form elements.
Back to Top