MVVM support.

4 posts, 0 answers
  1. Telmo Silva
    Telmo Silva avatar
    16 posts
    Member since:
    Jul 2008

    Posted 16 Dec 2013 Link to this post

    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
  2. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 18 Dec 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Telmo Silva
    Telmo Silva avatar
    16 posts
    Member since:
    Jul 2008

    Posted 18 Dec 2013 Link to this post

    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.
  5. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 20 Dec 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready