How do I get my list view page to refresh when I load new data into my kendo.data.DataSource?

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

    Posted 04 Dec 2015 Link to this post

    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. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 04 Dec 2015 Link to this post

    Hello,

    As this thread is a duplicate of another one I just replied to, here is a link, in case anyone else has a similar scenario:
    How to get a listview to refresh with new data from a Kendo datasource

    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