Kendo Map Mvc - Marker Click Redirect

3 posts, 0 answers
  1. Marco Beyer
    Marco Beyer avatar
    25 posts
    Member since:
    Jun 2009

    Posted 11 Sep Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    1396 posts

    Posted 13 Sep Link to this post

    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
    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.
  3. Marco Beyer
    Marco Beyer avatar
    25 posts
    Member since:
    Jun 2009

    Posted 13 Sep Link to this post

    Hallo Stefan,

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

    Greetz,

    Marco

Back to Top