Hybrid UI Widgets Do Not Load in MVVM Environment

Environment

Product

Progress® Kendo UI® Hybrid Components

Progress® Kendo UI® MVVM Architecture

Description

When I attempt to use a Hybrid UI widget by utilizing the data-role="widgetName" attribute in the regular Kendo UI MVVM framework, the approach does not work. How can I load a Hybrid UI widget in the Kendo UI MVVM environment?

Cause

The Hybrid UI widgets and frameworks (with the kendo.mobile.ui namespace) are not included in the default list of initialized namespaces when you use kendo.bind(element, viewModel). That is why the data-role values are not recognized and the Hybrid UI widgets are not initialized.

Solution

To initialize Hybrid UI widgets in Kendo UI MVVM, use either of the following approaches:

• Explicitly add the kendo.mobile.ui namespace to the list of namespaces that are initialized by kendo.bind by running kendo.bind(element, viewModel, kendo.mobile.ui);.

    <div id="example">
      Feature: <span data-bind="text: name"></span></br>
    Confirmed: <input data-role="switch" data-bind="value: switchedOn"/>
    </div>
    <script>
      $(document).ready(function() {
        var viewModel = kendo.observable({
          name: "Illumination",
          switchedOn: true
        });
  
        kendo.bind($("#example"), viewModel, kendo.mobile.ui);
      });
    </script>
  

• If you want to initialize a single Hybrid UI widget or to avoid ambiguity between mobile and web widgets with the same names, use the fully qualified widget name in the data-role attribute.

    <div id="example">
      Feature: <span data-bind="text: name"></span></br>
      Confirmed: <input data-role="kendo.mobile.ui.Switch" data-bind="value: switchedOn"/>
    </div>
    <script>
      $(document).ready(function() {
        var viewModel = kendo.observable({
          name: "Illumination",
          switchedOn: true
        });
  
        kendo.bind($("#example"), viewModel);
      });
    </script>