Local Data Source Can't Refresh List View

[Darren]

My Issue:
- I have a JSON array bound to a Kendo UI Mobile List
- The query is run and the data assigned to the list
-Once the data is assigned to the list it can't be refreshed

What is the correct method to refresh the data on the list?

Is there a way, or does it involve a lot of hacking.
I would appreciate a snippet or small fiddle if one exists

Cheers

Darren

[Alexander Valchev]

Hi Darren,

Could you please describe in more details why you need to refresh the list and how the data is changed?

I assume that you are modifying the local JSON array and expect the ListView to apply the changes. This is not happening because after the initialization, ListView creates its own DataSource and any changes made to the original JavaScript array are not tracked.

As a solution I can suggest you to modify directly the ListView DataSource using the API methods. Alternatively you may bind the ListView with MVVM (observable array). For more information please check the source binding topic. In both ways the ListView will refresh automatically after change in the data.

I hope this will help.

Regards,
Alexander Valchev
the Telerik team

[Darren]

Hello,

See my response below. The reason is running a search Results page, I run a query, return an array in the below format, and I want to dynamically update a view then app.navigate to that view. Are you able to provide me with any working example or talk me through how to achieve this ? Shouldn't be too difficult but am having issues... if you could assist I would be very thankful

Thanks so much and keep up the good work
Darren. 


-----------
DB Connection:
//External connection returns JSON Stringified array:
localStorage['searchResults']=JSON.stringify(myCollection);
var searchResults=JSON.parse(localStorage['searchResults']);

Template + List bound to dataSource 

     <script type= "text/x-kendo-template" id="templatename">
           #= Variable1 #</br>
           #=Variable2#
           </div>   
   </script>
            
List in My View (SearchResults)
  <div>
 <ul id="id" data-template="templatename" data-source="searchResults" data-endlessScroll="true" data-role="listview" data-style="inset"></ul>
  </div>

[Alexander Valchev]

Hello Darren,

To update the ListView you should modify its DataSource. You may use data method to replace the existing data with searchResults array.

$("#id").data("kendoMobileListView").dataSource.data(searchResults);

I hope this will help.

Kind regards,
Alexander Valchev
the Telerik team