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

2 posts, 1 answers
  1. David
    David avatar
    2 posts
    Member since:
    Nov 2015

    Posted 01 Dec 2015 Link to this post

    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>

  2. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 04 Dec 2015 Link to this post

    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.

     
Back to Top