I try to create a RSS reader (atom format). I read the feed from a blogspot.com site.
I bind the datasource to a ListView and use a template to format the result. But issue is I get a white space on the top of my header. See attachment.
Everything is working running in the simulator it's only an issue on the device.
What is wrong?
Here is my code:
Index.html:
<body>
<div data-role="view" id="tabstrip-home" data-title="Nyheder" data-model="viewModel" data-layout="tabstrip-layout" >
<div data-role="content" class="weather">
<ul id="news" data-role="listview" data-template="newsItems" data-style="inset" data-bind="source: dataSource" class="inboxList">
</ul>
</div>
</div>
<scripts id="newsItems" type="text/x-kendo-template">
<a href="\\#newsDetails?newsID=#= Id#">
<h3 class="time">Udgivet #: publishedDate#</h3>
<h3>Af #: author #</h3>
<h2>#: title#</h2>
</a>
</scripts>
<div id="newsDetails" data-role="view" data-show="onViewShow" data-model="viewModel" data-title="Nyheder!" >
<ul id="info" data-role="listview" data-style="inset">
<li>
<span data-bind="html: selectedNews.content"></span>
<br>
<hr>
<h5>
Skrevet af:
<div data-bind="text: selectedNews.author"/>
</h5>
<h5>
Skrevet den:
<div data-bind="text: selectedNews.publishedDate"/>
</h5>
<a data-role="backbutton">Tilbage</a>
</li>
</ul>
</div>
<script id="row-template" type="text/x-kendo-template">
<tr>
<td data-bind="html: selectedNews.content">
</td>
<td >
</td>
<td data-bind="selectedNews.publishedDate"></td>
</tr>
</script>
<!--Layout-->
<div data-role="layout" data-id="tabstrip-layout" >
<!--Header-->
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<!--Footer-->
</div>
</body>
RSSFeed.js:
viewModel = kendo.observable({
dataSource : new kendo.data.DataSource({
transport:{
read:{
url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('http://feeds.feedburner.com/VenstreIEgedal'),
dataType: "json"
},
parameterMap: function(options, operation){
if(operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema:{
model:{
id: "Id",
fields:{
Id: {type:"int"},
title:{type:"string"}
}
},
data: function(response) {
var articleLength = response.responseData.feed.entries.length;
articleLength = (articleLength > 20) ? 20 : articleLength;
for (var i = 1; i <= articleLength ; i++) {
var entry = response.responseData.feed.entries[i - 1];
var entrydate=new Date(entry.publishedDate) //get date of entry
var entrydatestr=entrydate.getDate()+"-"+(entrydate.getMonth()+1) +"-"+entrydate.getFullYear();
newsData.push({Id: i, title: entry.title, content: entry.content, author: entry.author, publishedDate: entrydatestr});
}
//return response.responseData.feed.entries;
return newsData
}
}
}),
});
function onViewShow(e){
var newsId = e.view.params.newsID,
dataitem = viewModel.dataSource.get(newsId);
viewModel.set("selectedNews",dataitem);
}
var newsData = []
I bind the datasource to a ListView and use a template to format the result. But issue is I get a white space on the top of my header. See attachment.
Everything is working running in the simulator it's only an issue on the device.
What is wrong?
Here is my code:
Index.html:
<body>
<div data-role="view" id="tabstrip-home" data-title="Nyheder" data-model="viewModel" data-layout="tabstrip-layout" >
<div data-role="content" class="weather">
<ul id="news" data-role="listview" data-template="newsItems" data-style="inset" data-bind="source: dataSource" class="inboxList">
</ul>
</div>
</div>
<scripts id="newsItems" type="text/x-kendo-template">
<a href="\\#newsDetails?newsID=#= Id#">
<h3 class="time">Udgivet #: publishedDate#</h3>
<h3>Af #: author #</h3>
<h2>#: title#</h2>
</a>
</scripts>
<div id="newsDetails" data-role="view" data-show="onViewShow" data-model="viewModel" data-title="Nyheder!" >
<ul id="info" data-role="listview" data-style="inset">
<li>
<span data-bind="html: selectedNews.content"></span>
<br>
<hr>
<h5>
Skrevet af:
<div data-bind="text: selectedNews.author"/>
</h5>
<h5>
Skrevet den:
<div data-bind="text: selectedNews.publishedDate"/>
</h5>
<a data-role="backbutton">Tilbage</a>
</li>
</ul>
</div>
<script id="row-template" type="text/x-kendo-template">
<tr>
<td data-bind="html: selectedNews.content">
</td>
<td >
</td>
<td data-bind="selectedNews.publishedDate"></td>
</tr>
</script>
<!--Layout-->
<div data-role="layout" data-id="tabstrip-layout" >
<!--Header-->
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<!--Footer-->
</div>
</body>
RSSFeed.js:
viewModel = kendo.observable({
dataSource : new kendo.data.DataSource({
transport:{
read:{
url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('http://feeds.feedburner.com/VenstreIEgedal'),
dataType: "json"
},
parameterMap: function(options, operation){
if(operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema:{
model:{
id: "Id",
fields:{
Id: {type:"int"},
title:{type:"string"}
}
},
data: function(response) {
var articleLength = response.responseData.feed.entries.length;
articleLength = (articleLength > 20) ? 20 : articleLength;
for (var i = 1; i <= articleLength ; i++) {
var entry = response.responseData.feed.entries[i - 1];
var entrydate=new Date(entry.publishedDate) //get date of entry
var entrydatestr=entrydate.getDate()+"-"+(entrydate.getMonth()+1) +"-"+entrydate.getFullYear();
newsData.push({Id: i, title: entry.title, content: entry.content, author: entry.author, publishedDate: entrydatestr});
}
//return response.responseData.feed.entries;
return newsData
}
}
}),
});
function onViewShow(e){
var newsId = e.view.params.newsID,
dataitem = viewModel.dataSource.get(newsId);
viewModel.set("selectedNews",dataitem);
}
var newsData = []
5 Answers, 1 is accepted
0
Hello Bo,
You're using an older version of Kendo UI, after upgrading your project to v. 2013.2.729 I no longer observe the white space in your project (see attached image). Please note that I have also disabled your custom styles to make sure they do not get in the way.
Regards,
Steve
Telerik
Do you enjoy Icenium? Vote for it as your favorite new product here (use short code H048S).
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
You're using an older version of Kendo UI, after upgrading your project to v. 2013.2.729 I no longer observe the white space in your project (see attached image). Please note that I have also disabled your custom styles to make sure they do not get in the way.
Regards,
Steve
Telerik
Do you enjoy Icenium? Vote for it as your favorite new product here (use short code H048S).
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
0
Bo
Top achievements
Rank 1
Rank 1
answered on 15 Aug 2013, 10:27 AM
Hi Steve
Im all ready using the latest version of Kendo UI. (i think)
Have you tried to run it on a iphone device and not in the simulator?
Im all ready using the latest version of Kendo UI. (i think)
Have you tried to run it on a iphone device and not in the simulator?
0
Hello Bo,
The version of Kendo UI in your project was Q1 2013 (not latest). The attached screenshot from my previous reply is from iPhone 3GS v.6.1.3.
Regards,
Steve
Telerik
Do you enjoy Icenium? Vote for it as your favorite new product here (use short code H048S).
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
The version of Kendo UI in your project was Q1 2013 (not latest). The attached screenshot from my previous reply is from iPhone 3GS v.6.1.3.
Regards,
Steve
Telerik
Do you enjoy Icenium? Vote for it as your favorite new product here (use short code H048S).
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
0
Bo
Top achievements
Rank 1
Rank 1
answered on 15 Aug 2013, 01:28 PM
Okay. Thanks Steve. Im pretty new to this.
How can you see the Kendo UI version? And how to upgrade to the latest version?
And Thanks again.
How can you see the Kendo UI version? And how to upgrade to the latest version?
And Thanks again.
0
Hello Bo,
Opening any of the Kendo UI files would contain the version in the top comments. If you have subscription for Kendo UI, you can download the Q2 version from their site and upgrade the Kendo UI files in your project. If you don't have subscription, you can create a new Icenium project, choose the Kendo UI Mobile template, copy the kendo folder, go back to the app dashboard, open your project and paste the kendo folder, choosing to replace existing files.
Regards,
Steve
Telerik
Do you enjoy Icenium? Vote for it as your favorite new product here (use short code H048S).
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
Opening any of the Kendo UI files would contain the version in the top comments. If you have subscription for Kendo UI, you can download the Q2 version from their site and upgrade the Kendo UI files in your project. If you don't have subscription, you can create a new Icenium project, choose the Kendo UI Mobile template, copy the kendo folder, go back to the app dashboard, open your project and paste the kendo folder, choosing to replace existing files.
Regards,
Steve
Telerik
Do you enjoy Icenium? Vote for it as your favorite new product here (use short code H048S).
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.