ListView not refreshing when new DataSource data

3 posts, 1 answers
  1. Christy
    Christy avatar
    38 posts
    Member since:
    May 2016

    Posted 05 Oct Link to this post

    I have an angularjs component that receives a json object as its input from another angular component.  The ListView is initialized with the json object that is initially set as the input.  However, when I change the json object from the main component, the data shown does not change even though the object itself has changed.

    Below is my component code:

    (function () {
        'use strict';
        var app = angular.module('myModule');
     
        function myGroupCtrl() {
            var vm = this;
     
            vm.sortableOptions = {
                filter: '.k-listview div.group'
            };
     
            vm.listOptions = {
                dataSource: new kendo.data.DataSource({
                    data: vm.groups
                })
            };
     
            vm.$onChanges = function (changes) {
                console.log(vm.groups);  // new data
                console.log(vm.listOptions.dataSource.data()); // original data
            }
        }
     
        app.component('myGroupComponent', {
            controller: [
               myGroupCtrl
            ],
            controllerAs: 'vm',
            templateUrl: 'app/myGroups.html',
            pageable: true,
            transclude: true,
            bindings: {
                groups: '<'
            }
        });
    })();

    <kendo-sortable options="vm.sortableOptions">
        <kendo-list-view id="groups" options="vm.listOptions">
            <div class="group" k-template>
                <span class="h4">
                    {{dataItem.groupName}}
                </span>
            </div>
        </kendo-list-view>
    </kendo-sortable>

    I thought there might be a way to rebind or refresh the dataSource, but everything that I have tried gives me an error.  I have used k-rebind on the grid.  Is there something similar for ListView?  Thanks!

  2. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    353 posts

    Posted 07 Oct Link to this post

    Hello Christy,

    Using a kendo.data.ObservableObject as data for the ListView instead of a regular object, should resolve the described issue. Alternatively you can use an actual DataSource instance.

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  3. Kendo UI is VS 2017 Ready
  4. Christy
    Christy avatar
    38 posts
    Member since:
    May 2016

    Posted 07 Oct in reply to Dimiter Topalov Link to this post

    I was able to get this working by writing a transport in the dataSource based on Local or Custom Transport CRUD Operations as follows:

    vm.listOptions = {
        dataSource: new kendo.data.DataSource({
            transport: {
                read: function (e) {
                    e.success(vm.groups);
                
            }
        })
    };

    I then can call the vm.listOptions.dataSource.read() function in my $onChanges event when the vm.groups is changed.

    Thanks for your help!

Back to Top