MVVM support.

[Telmo Silva]

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

[Hristo Germanov]

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

[Telmo Silva]

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.

[Hristo Germanov]

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

[George Barborak]

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.

[Stamo Gochev]

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