This is a migrated thread and some comments may be shown as answers.
MVVM support.
5 Answers 88 Views
Map
This is a migrated thread and some comments may be shown as answers.
Telmo Silva
Top achievements
Rank 1
Telmo Silva asked on 16 Dec 2013, 01:20 PM
Hi guys,

I'm new to kendo mvvm and I'm trying to bind the layers of the map widget to an array that is located on my viewmodel.
I've tried a lot of things without success and I would really appreciate if you can provide me a sample for that.

My goal is to have an mvvm map with some layers (shapes) that are coming from a datasource, in fact almost the same as your example (http://demos.kendoui.com/dataviz/map/geojson.html) but in a full mvvm way.

Thanks in advance,

T

5 Answers, 1 is accepted

Sort by
0
Hristo Germanov
Telerik team
answered on 18 Dec 2013, 11:33 AM
Hello Telmo Silva,

I am not sure where can be the problem with the mvvm binding.
Mvvm example:
HTML:
<div id="map"                                                                                                                                                                                
    data-role="map"                                                                                                                                                                          
    data-center="[30, -97]"
    data-zoom="3"
    data-layers="[{ type: 'shape', dataSource: { type: 'geojson', transport: { read: '../../demos/mvc/content/dataviz/map/countries-users.geo.json' } }, style: { fill: { opacity: 0.7 } } }]"
    data-bind="{ events: { shapeCreated: onShapeCreated, shapeCreated: onShapeCreated, shapeMouseLeave: onShapeMouseLeave } }"
></div>
JavaScript:
var scale = chroma.scale(["white", "green"]).domain([1, 1000]);
 
var viewModel = kendo.observable({
    onShapeCreated: function onShapeCreated(e) {
        var shape = e.shape;
        var users = shape.dataItem.properties.users;
        if (users) {
            var color = scale(users).hex();
            shape.fill(color);
        }
    },
    onShapeMouseEnter: function onShapeMouseEnter(e) {
        e.shape.options.set("fill.opacity", 1);
    },
    onShapeMouseLeave: function onShapeMouseLeave(e) {
        e.shape.options.set("fill.opacity", 0.7);
    },
    center: [30, -97]
});
$(function() {
    kendo.bind($("#map"), viewModel);
})

Regards,
Hristo Germanov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Telmo Silva
Top achievements
Rank 1
answered on 18 Dec 2013, 12:31 PM
Hey  Hristo ,

Thank you very much for you answer.
I understand your code without any problem but my issue is slightly different.

The datasource I'm using with the map widget doesn't always have the same read url. the read url is different depending on properties defined in the view model.
What I loved to do is

- Declare the datasource in the viewmodel using this approch

MyDataSource : new kendo.data.DataSource({
        transport: {
            read: {
                url : myVm.get("Parameter");
             }
       }
});

- Bind the datasource to map using data-bind="source : MyDataSource" and data-auto-bind="false" (like we do for other widget like grid )
- When I got all my parameter  launch a MyDataSource.read() from the js (view model) as well.

Your example could works with me only if I would be able to change the source (or the read url of the datasource) through the js code and execute .read on it.
So far I don't see how except by using a jquery selector ( something like $("myMap").data("kendoMap").options.dataSource.options.read.url which is to me not an easy/clean approach and even more not an mvvm way ).

To clarify what I need is to be able to bind a set of data (from a datasource)  to the map widget not to declare the dataset/source in the view.

Hope you got my requirements,

Thanks.
0
Hristo Germanov
Telerik team
answered on 20 Dec 2013, 09:56 AM
Hi Telmo Silva,

Thank you for the feedback.

We will try to improve the mvvm binding for our future releases.

The workaround is to change the url from the datasource and then you need to call datasource's read:
$("#map").data("kendoMap").layers[0(the index of your shape layer)].dataSource.transport.options.read.url = "your url goes here"
$("#map").data("kendoMap").layers[0(the index of your shape layer)].dataSource.read()

Please excuse us for the inconvenience.

I have updated your points.

Regards,
Hristo Germanov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
George Barborak
Top achievements
Rank 1
answered on 30 Nov 2017, 11:55 PM
So almost three years now... is there a solution to binding to a viewmodel? I am trying to implement map using MVVM and have the same problem.
0
Stamo Gochev
Telerik team
answered on 04 Dec 2017, 11:36 AM
Hi,

The MVVM functionality does not provide a binding for the map layers as that is more suitable for a custom binding implementation, which is described in the following article:

https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/custom

The previously suggested approach with manual call to the read() method is still valid, if the url should be changed.

On the other hand, If you have ideas about improving this, you can send us your ideas using the Feedback Portal:

http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback



Regards,
Stamo Gochev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Map
Asked by
Telmo Silva
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Telmo Silva
Top achievements
Rank 1
George Barborak
Top achievements
Rank 1
Stamo Gochev
Telerik team
Share this question
or