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,
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]](https://telerikhelper.files.wordpress.com/2013/11/clip_image00161.png "clip_image001[6]")
I hope you find this post useful. Thanks for reading.
Helping Ninja Technologists 
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 = {
Hi, Is there a way to get the content:encoded info?