Questions on Kendo UI for jQuery Forum

5 answers

388 views

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>


<div data-role="layout" data-id="tabstrip-layout" >


<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>



</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 = []

General Discussions

answered on 15 Aug 2013

2 answers

385 views

TreeView Checkbox Changed

Hi - In the following jsFiddle, I have some code to handle change events for checkboxes in a treeview:

jsFiddle

I'm wondering if there's a way inside the event handler to get a reference to the checkbox that triggered the event? It seems like when checkChildren is enabled, it's possible for the change event to fire multiple times if checking a child triggers the checking of a parent (ie, the child was the last unchecked checkbox under the parent) so I need to evaluate the specific checkbox that raised a change event to determine whether or not to run additional code.

Thanks!

TreeView

answered on 15 Aug 2013

2 answers

224 views

Scheduler Resource

I am looking for sample code showing Scheduler with multiple Resources bound to external data, Please can anyone help.

Scheduler

answered on 15 Aug 2013

1 answer

365 views

Grid overlapping menu

I'm using a Kendo Grid which is scrollable. So it will have div with "k-grid-content" class which supports scrolling. But I have a menu on each row and when I am adding the kendo menu, if I click on the menu, the gird's div has scrollbars because of the "k-grid-content". I would like a scrollable grid that doesn't overlap the menu.

Grid

answered on 15 Aug 2013

1 answer

259 views

CategoryX axis label with line break

Hi ,
I'm using the chat as a time slider selector.
I need to be able to have a line break in the category x axis labels,
I'm using the template field (with a <br/> tag as a line break) , however it doesn't do the job and just messes up the chart.
See attachment.
Can you help.

Charts

answered on 15 Aug 2013

3 answers

118 views

html comment literal displayed in selected drop down text

Hi,

Part of a vendor requirement is that we render specific comment tags before and after certain content. I am having a little trouble getting this to work with the Kendo DropDownList.

I have made a fiddle that demonstrates this: http://jsfiddle.net/mlhDevelopment/ktpHp/

The problem is that the comment is rendered in the selected value when the drop down is closed. When it is open and using the template the display is correct (comment is not rendered), but when the drop down closes the selected value is set to the literal/escaped, not the HTML rendered, value. How can we change that?

Thanks, Matthew

DropDownList

answered on 15 Aug 2013

1 answer

143 views

DataSource wont detect changes with MVVM after read second time.

I have a view where i have autocomplete with datasource (ds) where user can search (for person) and when it select in select function for autocomplete i have

select: function (sel) {

var dataItem = this.dataItem(sel.item.index());

var md = ds.get(dataItem.id);

model.selectContact(md);//set the observable

},

then in my viewModel i have a method where i fill observable property

selectContact: function (cust) {this.set('selectedItem', cust);//this is a observable property}

when user click edit in my ViewModel a call this method

changeMode:function() {//ds is the kendoDataSource

ds.read();//hear i need to have the latest data so i do a read from db

var dr2 = ds.get(this.selectedItem.id);//get last id from datasource that it was selected in autocomplete

this.set('selectedItem', dr2);//now hear is the latest data in observable property

}

then user change the fields (example name) in a view and when it hits Save
save: function () {
alert(ds.hasChanges());// this returns false even if i look to the this.selectedItem and i see that binding is pushet to the observable property
ds.sync();
}

this issue is when in function changeMode i use ds.read(), if i remove it it works

Data Source

answered on 15 Aug 2013

1 answer

71 views

Entering % into numeric text box

I was using v2012.1.322 and was able to enter a number as either 0.123 or 12.3%. Both would be accepted and displayed as 12.3%.

I've recently upgraded to v2013.1.319 and I can no longer enter the % symbol - instead the number 5 is displayed. Is there any way to restore the old behaviour?

NumericTextBox

answered on 15 Aug 2013

1 answer

294 views

invert slider range?

As far as I can tell there is no way to invert the slider range for example:

3000 - 0

instead of:

0 - 3000

I was looking for a boolean configuration to set this.

Will I have to extend slider to add this functionality myself and/or create other work arounds? There is a chance I missed the functionality but from the docs I cannot see any configuration to do this. I tried inverting the min/max and this just breaks so I from what I can gather this functionality is not supported.

I will send a feature request unless I'm missing something obvious that would allow me to do this as it stands. I have a two way MVVM binding to number boxes and I will have to process the inverted range calculations within the observable object which is not ideal as I would have expected the slider to handle this.

Stephen

Slider

answered on 15 Aug 2013

3 answers

2.7K+ views

Getting the parent node

Hi,
I must be missing something.
if I have a treeview and I have a select event handler bound to it, I can inspect the currently selected node's text by saying e.node.text(). However, if I try to get the text of the parent node, i.e. e.node.parent().text(), I get a string with all the node's text concatenated together. All I want is a simple node.getParent function that returns the exact same object as e.node only it's parent. If the node has no parent (i.e. it s a root), then it should return null. This seems harder than it should be.
Is there a way to do this or am I missing something?
Thanks ... Ed

TreeView

answered on 15 Aug 2013