ListView not refreshing when new DataSource data

[Christy]

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!

[Dimiter Topalov]

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

[Christy]

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!