shapeClick not working

4 posts, 0 answers
  1. Matt
    Matt avatar
    38 posts
    Member since:
    Nov 2014

    Posted 02 Jul 2015 Link to this post

    I've been working on a map project, and I had shapeClick working, but suddenly it stopped working.  I was working on other parts of the page, but I don't think any of them would have caused this problem.  I've been banging my head against it for 2 hours, and I still have no idea why it won't trigger the shapeClick event any more.

     Here's the function I'm using to create the map and the onShapeClick function as well.  I've got multiple bubble layers, but the one I've been trying to click on the bubbles for is the first one with the dataSource: BLOCKS.

    function createMap() {
            $("#map").kendoMap({
                center: [38.268107, -97.744821], zoom: 4,//These two options may be something to set to div options
                height: 400,
                layers: [{
                    type: "bing",
                    imagerySet: "aerialWithLabels",
                    key: "Ajo4NRDLFtd7zTT_LKi4lHrCZCWahx69-ZjmruTcGlBNdIPDUD--iWmlmWl5We_E"
                }, {
                    type: "bubble",
                    dataSource: BLOCKS,
                    locationField: "Location",
                    valueField: "Value",
                    symbol: function(e) {
                        var map = $("#map").data("kendoMap");
     
                        var location = e.location;
                        var circleGeometry = new geom.Circle(e.center, e.dataItem.Value);
                        //var rectGeometry = new geom.Rect([e.center[0] - 20, e.center[1] - 10], [e.center[0] + 20, e.center[1] + 10]);
     
                        //alert(e.dataItem);
                        //alert(e.shape);
     
                        // Draw the circle shape
                        //
                        var circle = new draw.Circle(circleGeometry, {
                            fill: {
                                color: e.dataItem.Color,
                                opacity: 0.7
                            },
                            stroke: {
                                width: 0
                            }
                        });
     
                        // Draw the text
                        //
                        var text = new draw.Text(e.dataItem.Name, e.center, {//e.dataItem.Name
                            font: "12px sans-serif"
                        });
                 
                        // Align it in the circle center
                        //
                        // http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-align
                        // http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-vAlign
                        draw.align([text], circle.bbox(), "center");
                        draw.vAlign([text], circle.bbox(), "center");
     
                        circle.dataItem = e.dataItem;
                        circle.bubbleType = "block";
                        //alert(1);
                        $(circle).click(function () {
                            alert(this);
                            alert(this.dataItem);
                        });
                        //alert(2);
                        text.dataItem = e.dataItem;
                        text.bubbleType = "block";
                        $(text).click(function () {
                            alert(this);
                            alert(this.dataItem);                       
                        });
                        var symbol = new draw.Group();
                        symbol.append(circle, text);
                        symbol.dataItem = e.dataItem;
                        symbol.bubbleType = "block";
                        $(symbol).click(function () {
                            alert(this);
                            alert(this.dataItem);
                        });
     
                        return symbol;
                    }
                }, {
                    type: "shape",
                    dataSource: shapes
                }
                , {
                    type: "bubble",
                    dataSource: pingBubbles,
                    locationField: "Location",
                    valueField: "Value",
                    symbol: function (e) {
                        var map = $("#map").data("kendoMap");
     
                        var location = e.location;
                        var circleGeometry = new geom.Circle(e.center, e.dataItem.Value);
                        //var rectGeometry = new geom.Rect([e.center[0] - 20, e.center[1] - 10], [e.center[0] + 20, e.center[1] + 10]);
     
                        //alert(e.dataItem);
                        //alert(e.shape);
     
                        // Draw the circle shape
                        //
                        var circle = new draw.Circle(circleGeometry, {
                            fill: {
                                color: e.dataItem.Color,
                                opacity: 0.7
                            },
                            stroke: {
                                width: 0
                            }
                        });
     
                        // Draw the text
                        //
                        var text = new draw.Text(e.dataItem.Name, e.center, {//e.dataItem.Name
                            font: "12px sans-serif"
                        });
     
                        // Align it in the circle center
                        //
                        // http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-align
                        // http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-vAlign
                        draw.align([text], circle.bbox(), "center");
                        draw.vAlign([text], circle.bbox(), "center");
     
                        circle.dataItem = e.dataItem;
                        circle.bubbleType = "ping";
                        text.dataItem = e.dataItem;
                        text.bubbleType = "ping";
                        var symbol = new draw.Group();
                        symbol.append(circle, text);
                        symbol.dataItem = e.dataItem;
                        symbol.bubbleType = "ping";
     
                        return symbol;
                    }
                }, {
                    type: "bubble",
                    dataSource: incidentBubbles,
                    locationField: "Location",
                    valueField: "Value",
                    symbol: function (e) {
                        var map = $("#map").data("kendoMap");
     
                        var location = e.location;
                        var circleGeometry = new geom.Circle(e.center, e.dataItem.Value);
                        //var rectGeometry = new geom.Rect([e.center[0] - 20, e.center[1] - 10], [e.center[0] + 20, e.center[1] + 10]);
     
                        //alert(e.dataItem);
                        //alert(e.shape);
     
                        // Draw the circle shape
                        //
                        var circle = new draw.Circle(circleGeometry, {
                            fill: {
                                color: e.dataItem.Color,
                                opacity: 0.7
                            },
                            stroke: {
                                width: 0
                            }
                        });
     
                        // Draw the text
                        //
                        var text = new draw.Text(e.dataItem.Name, e.center, {//e.dataItem.Name
                            font: "12px sans-serif"
                        });
     
                        // Align it in the circle center
                        //
                        // http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-align
                        // http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-vAlign
                        draw.align([text], circle.bbox(), "center");
                        draw.vAlign([text], circle.bbox(), "center");
     
                        circle.dataItem = e.dataItem;
                        circle.bubbleType = "incident";
                        text.dataItem = e.dataItem;
                        text.bubbleType = "incident";
                        var symbol = new draw.Group();
                        symbol.append(circle, text);
                        symbol.dataItem = e.dataItem;
                        symbol.bubbleType = "incident";
     
                        return symbol;
                    }
                }, {
                    type: "bubble",
                    dataSource: SELECTEDBLOCKS,
                    locationField: "Location",
                    valueField: "Value",
                    symbol: function (e) {
                        var map = $("#map").data("kendoMap");
     
                        var location = e.location;
                        var circleGeometry = new geom.Circle(e.center, e.dataItem.Value);
                        //var rectGeometry = new geom.Rect([e.center[0] - 20, e.center[1] - 10], [e.center[0] + 20, e.center[1] + 10]);
     
                        //alert(e.dataItem);
                        //alert(e.shape);
     
                        // Draw the circle shape
                        //
                        var circle = new draw.Circle(circleGeometry, {
                            fill: {
                                color: e.dataItem.Color,
                                opacity: 0.7
                            },
                            stroke: {
                                width: 0
                            }
                        });
     
                        // Draw the text
                        //
                        var text = new draw.Text(e.dataItem.Name, e.center, {//e.dataItem.Name
                            font: "12px sans-serif"
                        });
     
                        // Align it in the circle center
                        //
                        // http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-align
                        // http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-vAlign
                        draw.align([text], circle.bbox(), "center");
                        draw.vAlign([text], circle.bbox(), "center");
     
                        circle.dataItem = e.dataItem;
                        circle.bubbleType = "block";
                        text.dataItem = e.dataItem;
                        text.bubbleType = "block";
                        var symbol = new draw.Group();
                        symbol.append(circle, text);
                        symbol.dataItem = e.dataItem;
                        symbol.bubbleType = "block";
     
                        return symbol;
                    }
                }
                ],
                shapeClick: onShapeClick
            });
        }
     
        function onShapeClick(e) {
            alert('hola');
        }

    As you can see, I tried adding click events to the symbol as well, but that's not working either.

     In case it matters, here's the DataSource definition for BLOCKS:

    var BLOCKS = new kendo.data.DataSource({
            type: "odata",
            schema: {
                data: "data",
                model: {
                    fields: {
                        BlockId: { type: "number" },
                        Name: { type: "string" },
                        Value: { type: "number" },
                        Location: { type: "object" },
                        Color: { type: "string" },
                        CurrentRouteName: { type: "string" },
                        VehicleId: { type: "number" },
                        VehicleName: { type: "string" },
                        EmployeeId: { type: "number" },
                        EmployeeName: { type: "string" }
                    }
                }
            }
        });
     

     

  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 06 Jul 2015 Link to this post

    Hi,

    I tried to reproduce the issue in this snippet, but without success.

    Can you try modify the snippet to better match your scenario?

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Matt
    Matt avatar
    38 posts
    Member since:
    Nov 2014

    Posted 06 Jul 2015 in reply to T. Tsonev Link to this post

    I figured it out.  It only happens when I have multiple bubble layers.  The last layer (bottom most in the html) is the only one which triggers the shapeClick event.  The shapes on the other layers don't trigger it.

    I can make this work for my application, but if you get it fixed so the other layers will trigger the event as well then please let me know.

     Thanks

  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 08 Jul 2015 Link to this post

    Hi,

    This seems to be a somewhat tricky problem. The SVG element will not pass events through unless you specify pointer-events: none.
    That means we can process events only for one of the layers unless we do some kind of event forwarding which seems hacky from the onset.

    Perhaps a more sane approach is to allow layers to share a single drawing surface. Each can own a group on the root level to get the z-index sorted.
    This might break existing code so perhaps it should be hidden behind a flag.

    Does this make sense?

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready