skip to main | skip to sidebar

A quick example on how to dynamically load a Kendo UI Mobile Collapsible from AJAX-generated content.

The code starts by AJAX request to get recent blog posts after is ready. Then appends post summaries to Kendo View content and instantiates widgets based on role data attribute.

<!DOCTYPE html>
<link href="" rel="stylesheet" />
      .colla-content img{
         margin:0 10px 5px 0;
<script src=""></script>
<script src=""></script>
   <div id="view1" data-role="view">
      <h1>Recent Posts</h1>
    var app = new
             document.body, {
             init: function(){
                // ajax call on Kendo App init
                     ,data:{'category':'jQuery', 'max-results': 4, 'alt':'json-in-script'}
    function postsLoaded(json){
       if(!json.feed.entry) return;
         var vView1 = $('#view1').data("kendoMobileView");
         for (var i=0, ic=json.feed.entry.length; i<ic; i++) {
            var entry = json.feed.entry[i];
            var thumb =$thumbnail?$thumbnail.url :'';
            var colla= $('<div data-role="collapsible"></div>');
            colla.append( $('<h3></h3>').text( entry.title.$t ));
            colla.append( $('<div class="colla-content"></div>').html( (thumb? '<img src="'+thumb+'" />':'') + entry.summary.$t ) );
            // append content to view1
            // init collapsible div
            kendo.init(colla, );



  1. Anonymous // November 27, 2015 at 12:30:00 AM GMT+11  

    Great, exactly what I need! Thanks for sharing :)

Post a Comment

Thank you for taking the time to comment..
* If you have a tech issue with one of my plugins, you may email me on mike[at]
More Tech Tips! | Technology tips on web development


Mike MoreWeb developer, jQuery plugin author, social media fan and Technology Blogger.
My favorite topics are: jQuery , Javascript , ASP.Net , Twitter , Google..
<connect with="me"> </connect>

Subscribe by email

Enter your email address:

or via RSS