Local Data Source Can't Refresh List View

4 posts, 0 answers
  1. Darren
    Darren avatar
    9 posts
    Member since:
    Feb 2013

    Posted 14 Feb 2013 Link to this post

    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
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 18 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Darren
    Darren avatar
    9 posts
    Member since:
    Feb 2013

    Posted 20 Feb 2013 Link to this post

    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>
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 22 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready