Integration with Kendo UI MVVM
Starting with the R2 2023 release, Kendo UI will no longer ship Hybrid UI components. This means that the R2 2023 will be the last release to include Kendo Hybrid in the Kendo UI package. See full announcement in Kendo jQuery blog post. The last stable version that we recommend to use for Kendo Hybrid components is R3 2022 SP1.
The Kendo UI hybrid mobile Application provides a close integration with the Kendo UI MVVM framework. The mobile widgets' configuration options can be bound and managed through a view model.
Getting Started
Initialization
The recommended way to use the Kendo UI MVVM with the Hybrid UI Application is through the model configuration option of the mobile view.
<script>
var foo = { bar: "baz" }
</script>
<div data-role="view" data-model="foo">
<span data-bind="text:bar"></span>
</div>
A complex model reference can also be specified.
<script>
var foo = {
bar: { baz: "qux" }
}
</script>
<div data-role="view" data-model="foo.bar">
<span data-bind="text:baz"></span>
</div>
MVVM Binding
When initialized, the mobile View calls kendo.bind on its child elements, using the provided model.
Important
The mobile View binds all Kendo UI widgets—hybrid mobile and web widgets as well as the controls for data visualization—in that same order. This means that if an element with
data-role="listview"is present, a hybrid mobile (and not web) ListView is going to be initialized. This behavior can be overridden by specifying the full widget class name, together with its namespace, in theroleattribute.
As of the Kendo UI Q2 2014 release, the mobile view events may be bound to the view model, too, as demonstrated in the example below.
<script>
var foo = {
onViewInit: function(e) {
console.log(e);
},
onViewShow: function(e) {
console.log(e);
}
};
</script>
<div data-role="view" data-model="foo" data-bind="events: { init: onViewInit, show: onViewShow }>
<span data-bind="text:bar"></span>
</div>