Creating RSS Reader App using Telerik Icenium in Three simple steps

Learn more about Icenium here

In this post we will learn to create RSS reader App in Telerik Icenium. While creating this app we will have learning on creating following topics,

  • Kendo DataSource
  • Kendo Template
  • Kendo ListView

In this post we will create RSS Reader of https://telerikhelper.net/. Final output should be as follows,

clip_image001

Step 1: Create DataSource

To start with we will use YML to read RSS feed. Let us configure URL of Yahoo Query and RSS feed of desired site. Below I have configured that for https://telerikhelper.net/.


var url = "https://telerikhelper.net/feed/";
var proxyUrl = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'" + encodeURIComponent(url) +"'";

Next we need to create Kendo DataSource. That can be created using proxyUrl. RSS feed returns XML and we need to configure that while creating DataSource.


var telerikHelperRSSDS = new kendo.data.DataSource({
 transport:{
 read:{
 url: proxyUrl,
 dataType: "xml"
 }
 },
 schema:{
 type:"xml",
 data:"query/results/rss/channel/item",
 model:{
 id:"guid",
 fields:{
 title: "title/text()",
 pubDate: "pubDate/text()",
 story: "description/text()",
 url: "link/text()",
 id: "guid/text()"
 }
 }
 }
});

 

There are couple of points worth discussing about above code snippet,

  • We are creating schema reading title , published date , story and url of the post
  • Id of model is set to guid
  • Setting up data type as xml
  • data is set as query/results/rss/channel/item

 

Step 2: Create Template

Once DataSource is created next we need to create Template. Kendo Template decide how data will be displayed. We are displaying title and publication date of post.

You can see that

</span>

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

 <p class="titlecs">#=title#</p>
 <p class="datecs">#=pubDate#</p>

 </script>

Step 3: Creating ListView

In last step we need to create ListView. ListView is the Kendo UI Widget in which we will display RSS feeds.

ListView can be created as follows,

 <div data-role="view" id="telerikhelperrssview" data-title="TelerikHelper">
 <ul id="telerikhelperview"
 data-source="telerikHelperRSSDS"
 data-endlessscroll="true"
 data-template="telerikhelperrsstemplate"
 data-role="listview"
 data-style="inset">
 </ul>
 </div>

In ListView we are setting

  • Data source
  • Data template
  • Data style

That’s it. We need to perfrom only these three steps to create RSS Reader App using Telerik Icenium

clip_image001[6]

I hope you find this post useful. Thanks for reading.

Advertisements

2 thoughts on “Creating RSS Reader App using Telerik Icenium in Three simple steps

  1. Is there way to show only first 15 items and then to make endless scroll. Because I’ve made the sam as you but there is no endless scroll. I Try with the following code but this only show 15 items without endless scroll:
    dataSource = new kendo.data.DataSource({
    transport:{
    read:{
    url: url,
    dataType: “xml”
    }
    },
    schema:{
    type:”xml”,
    data:”rss/channel/item”,
    model:{
    id:”guid”,
    fields:{
    title: “title/text()”,
    description: “description/text()”,
    url: “link/text()”,
    id: “guid/text()”
    }
    }
    }, pullToRefresh: true,

    pageSize: 40,
    endlessScroll: true,

    });

    that.set(“RssDataSource”, dataSource);
    },
    refresh: function(){
    dataSource.refresh();
    }

    });

    app.RssService = {

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s