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
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
0
Hello Telmo Silva,
I am not sure where can be the problem with the mvvm binding.
Mvvm example:
HTML:
JavaScript:
Regards,
Hristo Germanov
Telerik
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
>
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.
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
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:
Please excuse us for the inconvenience.
I have updated your points.
Regards,
Hristo Germanov
Telerik
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
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
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.