New to Kendo UI for jQuery? Download free 30-day trial
jQuery Bubble Charts MVVM
- EXAMPLE
- VIEW SOURCE
-
Change Theme
defaultDefault Theme
- Main
- Main Dark
- Nordic
- Ocean Blue
- Ocean Blue A11Y
- Purple
- Turquoise
Bootstrap Theme- Main
- Bootstrap 3
- Bootstrap 3 Dark
- Main Dark
- Nordic
- Turquoise
- Turquoise Dark
- Urban
- Vintage
Material Theme- Main
- Arctic
- Lime Dark
- Main Dark
- Nova
Classic Theme- Main
- Green
- Green Dark
- Lavender
- Lavender Dark
- Main Dark
- Metro
- Metro Dark
- Moonlight
- Opal
- Opal Dark
- Silver
- Silver Dark
- Uniform
Fluent Theme- Main
Description
The MVVM feature of the Kendo UI framework provides powerful two-way data binding capabilities, built on the popular Model-View-ViewModel concept. In this way you can easily make attribute values for widgets observable and modify them automatically when changes are applied in the data source, or alter the underlying data when the user interacts with the UI.
In this example we show how to configure the Kendo UI chart to make use of the MVVM functionality exposed by the framework. For this purpose we create a viewmodel instance (with kendo.observable call) which wraps the chart data source, and instantiate the chart, its attributes and binding definition using data- attributes. The important detail to wire the viewmodel is to invoke kendo.bind to the container element of the chart, passing the viewmodel as a second argument. Review the code snippets from the demo for more info.
Details on the MVVM features of the Kendo UI framework can be obtained from this chapter of the documentation.
Kendo UI Chart supports the events, source and visible bindings.