Edit this page

Use DataSource to Render Content

The example below demonstrates how to display content loaded via the DataSource in the hybrid mobile Kendo UI Collapsible widget.

Example
<div data-role="view" data-init="onInit">
    <div data-role="collapsible" data-collapse="onCollapse" data-expand="onExpand">
        <h3>Header</h3>
        <div id="content"></div>
    </div>
</div>

<script id="template" type="text/x-kendo-template">
    <div>#:name#</div>
</script>

<script>
    var template = kendo.template($("#template").html()); //create template
    var dataSource = new kendo.data.DataSource({
      data: [
        { id: 1, name: "Jack" },
        { id: 2, name: "Jane" }
      ],
      change: function() {
         $("#content").html(kendo.render(template, this.view())); // populate the content
      }
    });
    function onInit() {
        dataSource.fetch(); //read the dataSource
    }
</script>

<script>
    var app = new kendo.mobile.Application(document.body);
</script>

See Also

Other articles on the Hybrid UI Collapsible:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy