[All sorted, it's a silly typo of the templateName....]
Hi support,
I'd like to implement the pull-to-refresh so that data from my ajax call are appended to the listview.
Please note I'm not using the datasource binding as it somehow adds an auto generated li element that screws my layout. I'll report the issue some other time.
Using my following code, I'm able to append data to the listview, however, the pull refresh seems only works when a datasource object is defined.
I'd like to ask if there's any work around to get the pull to refresh working.
I have the following simplified scenario:
This is my ul element:
<div data-role="view" id="tabstrip-search" data-title="Search" data-layout="mobile-tabstrip" data-init="pullUpdate">
<ul id="users-list" data-role="listview" >
</ul>
</div>
This is my template: (tested working)
<script type="text/x-kendo-template" id="cardSearchTemplate">
#for (var i=0; i<CardSearches.length; i++){#
<li>
<h2>#=CardSearches[i].FirstName+' '+CardSearches[i].LastName#</h2>
<img src=#=CardSearches[i].PhotoUrl#></img>
<div id="arrow_frame"><img src="images/background/arrow.png"></img></div>
</li>
#}#
</script>
My ajax on success: (MyAjaxCall)
var template = kendo.template($("#"+templateName).html());
var result = template(data);
$("#users-list").append(result); //Append the result
Pull Function:
function pullUpdate(e)
{
var scroller = e.view.scroller;
scroller.setOptions({
pullToRefresh: true,
pull: function() {
MyAjaxCall();
setTimeout(function() { scroller.pullHandled(); }, 400);
}
}
The problem: Uncaught TypeError: Cannot call method 'replace' of undefined
I guess it is because I didn't use the datasource way to bind the data to listview and kendo ui trying to find a template but failed.
"MyAjaxCall" works fine if triggering it from a button, it correctly append data to the list view. All I need is to call that function when user doing a pull gesture to the listview.
Thanks for your time!
Regards,
Johnson
Hi support,
I'd like to implement the pull-to-refresh so that data from my ajax call are appended to the listview.
Please note I'm not using the datasource binding as it somehow adds an auto generated li element that screws my layout. I'll report the issue some other time.
Using my following code, I'm able to append data to the listview, however, the pull refresh seems only works when a datasource object is defined.
I'd like to ask if there's any work around to get the pull to refresh working.
I have the following simplified scenario:
This is my ul element:
<div data-role="view" id="tabstrip-search" data-title="Search" data-layout="mobile-tabstrip" data-init="pullUpdate">
<ul id="users-list" data-role="listview" >
</ul>
</div>
This is my template: (tested working)
<script type="text/x-kendo-template" id="cardSearchTemplate">
#for (var i=0; i<CardSearches.length; i++){#
<li>
<h2>#=CardSearches[i].FirstName+' '+CardSearches[i].LastName#</h2>
<img src=#=CardSearches[i].PhotoUrl#></img>
<div id="arrow_frame"><img src="images/background/arrow.png"></img></div>
</li>
#}#
</script>
My ajax on success: (MyAjaxCall)
var template = kendo.template($("#"+templateName).html());
var result = template(data);
$("#users-list").append(result); //Append the result
Pull Function:
function pullUpdate(e)
{
var scroller = e.view.scroller;
scroller.setOptions({
pullToRefresh: true,
pull: function() {
MyAjaxCall();
setTimeout(function() { scroller.pullHandled(); }, 400);
}
}
The problem: Uncaught TypeError: Cannot call method 'replace' of undefined
I guess it is because I didn't use the datasource way to bind the data to listview and kendo ui trying to find a template but failed.
"MyAjaxCall" works fine if triggering it from a button, it correctly append data to the list view. All I need is to call that function when user doing a pull gesture to the listview.
Thanks for your time!
Regards,
Johnson