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.

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

<script id="template" type="text/x-kendo-template">

    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

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

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