Select Value from Another View

The example below demonstrates how to navigate to a child view from a ListView, select an item and return back to the parent view showing the selected item when working with the Hybrid UI components of Kendo UI.

    <div data-role="view" data-model="app.models.survey" data-title="Survey" data-stretch="true" id="survey">
      <form>
        <ul data-role="listview" data-type="group">
          <li class="detail-text">
            Did you order an appetizer?
            <ul>
              <li>
                <a href="locations">Location <span class="location" data-bind="html: selectedLocation"></span></a>
              </li>
            </ul>
          <li>
        </ul>
      </form>
    </div>

    <div data-role="view" id="locations" data-transition="slide" data-model="app.models.locations">
      <ul data-role="listview" data-bind="click: selectLocation, source: locations" data-template="locations-template">
      </ul>
    </div>

    <script id="locations-template" type="text/x-kendo-template">
        #: text #
    </script>
    <script>
      (function() {

        var survey = new kendo.observable({
          selectedLocation: null
        });

        var locations = new kendo.observable({
          locations: new kendo.data.DataSource({
            data: [
              { text: "north" },
              { text: "south" },
              { text: "east" },
              { text: "west" }
            ]
         }),
          selectLocation: function(e) {
            survey.set("selectedLocation", e.dataItem.text);
            app.navigate("#survey");
          }
        });

        var app = new kendo.mobile.Application(document.body);

        window.app = {};
        window.app.models = {
          survey: survey,
          locations: locations
        };

      }());
    </script>

See Also

Articles and other how-to examples on the Kendo UI hybrid components:

• Overview of the Hybrid UI Components in Kendo UI
• How to Create Fixed Content Areas with Scroller
• How to Set Initial View Prior to Initialization in AngularJS

For more runnable examples on the Kendo UI hybrid controls, browse the How To documentation folder.