MVVM support.

6 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. 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.
  4. 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!
  5. George Barborak
    George Barborak avatar
    1 posts
    Member since:
    Dec 2008

    Posted 30 Nov 2017 Link to this post

    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.
  6. Stamo Gochev
    Admin
    Stamo Gochev avatar
    202 posts

    Posted 04 Dec 2017 Link to this post

    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.
Back to Top