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 kendo.mobile.Application is ready. Then appends post summaries to Kendo View content and instantiates kendo.mobile.ui.Collapsible widgets based on role data attribute.


<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.mobile.all.min.css" rel="stylesheet" />
   <style>
      h1{
         text-align:center;
      }
      .colla-content{
         clear:both;
         overflow:hidden
      }
      .colla-content img{
         max-width:50%;
         display:block;
         float:left;
         margin:0 10px 5px 0;
      }
   </style>
<script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>
<body>
   <div id="view1" data-role="view">
      <h1>Recent Posts</h1>
   </div>
   
   <script>
    var app = new kendo.mobile.Application(
             document.body, {
             init: function(){
                // ajax call on Kendo App init
                $.ajax({
                     url:'http://www.moretechtips.net/feeds/posts/summary/'
                     ,data:{'category':'jQuery', 'max-results': 4, 'alt':'json-in-script'}
                     ,success:postsLoaded
                     ,dataType:'jsonp'
                  });
             }
          });
   
    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 = entry.media$thumbnail? entry.media$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
            vView1.content.append(colla);
            // init collapsible div
            kendo.init(colla, kendo.mobile.ui );
         };
    };
   
   </script>

</body>
</html>

1 comments

  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]moretechtips.net
More Tech Tips! | Technology tips on web development

Mike

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