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

ListView not refreshing when new DataSource data

2 Answers 144 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Christy
Top achievements
Rank 1
Christy asked on 05 Oct 2016, 09:14 PM

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 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 07 Oct 2016, 02:24 PM
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.
0
Christy
Top achievements
Rank 1
answered on 07 Oct 2016, 06:31 PM

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!

Tags
ListView
Asked by
Christy
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Christy
Top achievements
Rank 1
Share this question
or