Kendo k-data-source not binding when switching between templates

Question

Is there any way to force a kendo widget to bind to some data in $scope. I'm having a hard time getting k-data-source to bind between template loads.

Specifically, the k-data-source in the kendo grid below doesn't bind to $scope.gridData when switching between templates in angular. It will however bind when I do a page refresh. The promise does resolve and the data.data does hold my promise with both types of loads. Any insight will be appreciated.

p.s This issue of k-data-source not binding doesn't affect the the k-columns bind. k-columns binds regardless of full page load or template load in angular.

<div kendo-grid="gridK"
k-data-source="gridData"
k-columns="gridColumns"
k-selectable="false"
></div>

.controller('view2Controller', function($scope, tableData) {


//Kendo Grid Data
var promiseGridData = tableData.getData();
promiseGridData.then(function(data){

  $scope.gridData = new kendo.data.ObservableArray(data.data);

});



//Kendo Grid Columns
$scope.gridColumns = [
    {field: "degree", title: "Degree/Certificate Name"},
    {field: "license", title: "License Status"},
    {field: "seekingHelp", title: "Seeking Help"}
];

});


mainView.service('tableData', ['$http', '$q', function($http, $q){

var deferred = $q.defer();
$http.get("../gData.json").then(function(data){

   deferred.resolve(data);
});

this.getData = function()
{   
    return deferred.promise;
}
}]);

Here's the application if anyone wants to test it out

https://github.com/ssohal/Kendo

You'll notice that the kendo grid loads on the first page load, but after switching between templates, it will stop binding to its data.

hally9k hally9k · Accepted Answer · 2015-09-28T21:12:10

Here is the route config for your mainView app module...

var mainView = angular.module('mainView', ['ngRoute', "mainView.educationTraining" ]);

mainView.config(["$routeProvider", function($routeProvider){

$routeProvider

    .when('/view2.html', {
        templateUrl: '../Views/view2.html',
        controller: 'view2Controller'
    })

    .otherwise({redirectTo: "../Views/index.html"});

}]);

... and here is the route config for your mainView.educationTraining module...

angular.module('mainView.educationTraining', ['ngRoute', 'kendo.directives'])

    .config(['$routeProvider', function($routeProvider) {
    $routeProvider.when("/educationandTraining", {
        templateUrl: "../views/view2.html",
        controller: "educationAndtraining"
    });

}])

The first references the view2Controller that has an instance of gridData on it. The second references educationAndtraining as a controller. You haven't included the definition of the second controller in the github example as far as I can see so I'm shooting in the dark a bit here.

I'll assume that by 'switching templates' you mean navigating between the /view2.html and /educationAndtraining urls.

If the educationAndtraining controller doesn't also expose an instance of gridData then, when navigation to /educationAndtraining, your grid wouldn't have anything to bind to as the view would now be in the context of the educationAndtraining controller's $scope.

If this is incorrect please add a definition for your educationAndtraining controller...

What I assume you are relying on is the inheritance of your mainView controller's $scope properties in your educationAndtraining controller's $scope.

This works for this case...

<div ng-controller="mainView">
   <div ng-controller="educationAndtraining">
   </div>
</div>

...but not necessarily in your case. I think it's because your controllers are declared in entirely different modules.

I cant see your markup in your example on github either so please add more detail.

You could remedy this by injecting a service into both controllers and holding a single source of truth for gridData in that service.

If you could reproduce the issue in a simplified fiddle that would be best.

Kendo k-data-source not binding when switching between templates

2 Answers