Kendo Map Mvc - Marker Click Redirect

[Marco Beyer]

Dear Telerik-team,

in my application, I am using the Kendo Map widget and bind it to a view model. Therefore, I followed this example:

http://docs.telerik.com/aspnet-mvc/helpers/map/how-to/bind-map-to-model

Works, the data coming from the database is displayed on the map as markers. That is the HTML code:

 

 @(Html.Kendo().Map()
                .Name(Model.Name)
                .Center(Model.CenterLatitude, Model.CenterLongitude)
                .Zoom(Model.Zoom)                
                .Layers(layers => layers
                    .Add()
                    .Type(MapLayerType.Tile)
                    .UrlTemplate(Model.TileUrlTemplate)
                    .Subdomains(Model.TileSubdomains)
                    .Attribution(Model.TileAttribution)
                )
                .Markers(markers =>
                {
                    foreach (var marker in Model.Markers)
                    {
                        markers.Add()                        
                        .Location(marker.latlng)
                        .Title(marker.name);
                    }
                })
                .Events(events => events
                    .MarkerClick("onMarkerClick"))
            )

I want to redirect to a controller action when a user clicks on a marker. Ideally by passing an ID to that controller action in order to fetch the corresponding data of the item from the database. Is there a way to attach the ID of the item, the markers represent, to the marker (like it is possible to specify a title e.g.)?

And how would in this case look the javascript method whichs would call the controller action? 

I tried to display the name of the marker with the following javascript:

<script>

    function onMarkerClick(e) {
        var dataItem = e.sender.marker.dataItem;
        alert(dataItem.name)        
    }
</script>

But this doesn't work :-/

Happy to hear from you,

best regards,

Marco

[Stefan]

Hello Marco,

Thank you for the provided code.

After inspecting the scenario I was able to access the dataItem on the click event of the Markers.

The dataItem can be accessed using the following code. If the data format is different, I can suggest only logic the e(event) and check where the relevant information is inside the event object:

<script>
    function onMarkerClick(e) {
        console.log(e.marker.dataItem)
    }
</script>

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Marco Beyer]

Hallo Stefan,

I found a solution for this. Thanks for your advice.

Greetz,

Marco