ListView not refreshing when new DataSource data

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

    Posted 05 Oct 2016 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'
            vm.listOptions = {
                dataSource: new{
                    data: vm.groups
            vm.$onChanges = function (changes) {
                console.log(vm.groups);  // new data
                console.log(; // original data
        app.component('myGroupComponent', {
            controller: [
            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">

    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
    Dimiter Topalov avatar
    1292 posts

    Posted 07 Oct 2016 Link to this post

    Hello Christy,

    Using a 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.

    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  3. Christy
    Christy avatar
    54 posts
    Member since:
    May 2016

    Posted 07 Oct 2016 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{
            transport: {
                read: function (e) {

    I then can call the function in my $onChanges event when the vm.groups is changed.

    Thanks for your help!

Back to Top