This is a migrated thread and some comments may be shown as answers.

Add pull update without using datasource

1 Answer 49 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Johnson
Top achievements
Rank 1
Johnson asked on 13 Jun 2013, 04:29 AM
[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

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 14 Jun 2013, 10:27 AM
Hello Johnson,

It seems that you managed to resolve the issue.
Is that correct? Can we close this thread as resolved?

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ListView (Mobile)
Asked by
Johnson
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or