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

How to get a listview to refresh with new data from a Kendo datasource

1 Answer 536 Views
Show your code
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
David
Top achievements
Rank 1
David asked on 01 Dec 2015, 09:20 PM
How do I get my list view page to refresh when I load new data into my kendo.data.DataSource?

I'm working on a Hybrid Mobile app using Telerik AppBuilder.
I have a simple listview that is bound to a data source.
I use an ajax POST request to load some JSON,
then place it in the datasource.
I have two pages, home and list view.
The home has some anchors that lead to a single list view page,
but with different data id values to produce different lists.

The first time I the list view page it loads correctly.
After that, the list view does not refresh when I reload the datasource;
the contents of the first list always display no matter what data id value I send in.

Here is the source:

**JavaScript**

    window.APP =
    {
        blamListSource: null,

        home:
        {
          fetchBlam: function(event)
          {
            var argumentData = event.button.data();
            var requestBody =
            {
              "requestVersionId": "1",
              "blamId": argumentData.id.toString()
            };

            $.ajax(
              {
                url: getBlamURI,
                type: "POST",
                data: JSON.stringify(requestBody),
                dataType: "json",
                contentType: 'application/json',

                success: function(requestData, textStatus, jqxhr)
                {
                  APP.blamListSource = new kendo.data.DataSource(
                    {
                      data: requestData.userList,
                    });

                  APP.blamListSource.read();

                  app.navigate("views/blamlist.html");
                },

                error: function(jqxhr, textStatus, error)
                {
                  alert("Error");
                },
              });
          }
        }
    };

**home.html**

    <div data-role="view" data-title="Home" data-layout="main"
         data-model="APP.models.home" data-zoom="true">
      <div id="form-blam" data-role="content">
        <a id="commercial" data-role="button"
           data-bind="click: fetchBlam" data-id="27">Something</a>
        <a id="personal" data-role="button"
           data-bind="click: fetchBlam" data-id="39">Something Else</a>
      </div>
    </div>

**views/blamlist.html**

    <div data-role="view" data-title="Blam List" data-layout="main"
         data-model="APP" data-zoom="true">
      <div data-role="navbar">
        <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
      </div>
      <ul id="blam-listview" data-style="inset" data-role="listview"
          data-template="blamListTemplate" data-bind="source: blamListSource">
      </ul>
      <p id="no-contactlist-span" hidden="hidden" class="no-items-msg">
        <b>No blam.</b>
      </p>
    </div>

    <!-- Blam ListView Template -->
    <script type="text/x-kendo-template" id="blamListTemplate">
      <div>
        <div>
          <img id="blamPhoto" src="#: data.photoUri #"/>
        </div>
        <div>
          <div id="name">#: data.name #</div>
          <div>#: data.title #</div>
          <div>
            <div>
              <a data-role="button" class="callimg"
                 data-phone="#: data.phone #" href="tel:#: data.phone #"
                 data-rel="external"></a>
            </div>
            <div>
              <a data-role="button" class="emailimg"
                 href="mailto:#: data.email #"
                 data-rel="external"></a>
            </div>
          </div>
        </div>
      </div>
    </script>

1 Answer, 1 is accepted

Sort by
0
Accepted
Tsvetina
Telerik team
answered on 04 Dec 2015, 04:27 PM
Hi David,

If you need to refresh the view every time you navigate to it, the easiest way to achieve this is to set data-reload="true" in the view definition:
<div data-role="view" data-reload="true">

If this doesn't work for you, consider creating a separate model for the BlamList view, define the blamListSource within it and use the set method inside the BlamList view's show event to re-populate the DataSource, this will update the model and the ListView will refresh automatically:
window.APP =
{
    blamListViewModel: kendo.observable({
        blamListSource: null,
        show: function(e) {
             // make ajax call here. Use e.view.params() to retrieve the data you passed from your previous view (the blamId)
             var ds = new kendo.data.DataSource({data: resultFromAjaxRequest});
             e.view.model.set("blamListSource", ds);
        }
    }),
    home: //.....


Regards,
Tsvetina
Telerik
 

Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

 
Tags
Show your code
Asked by
David
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or