Binding kendo ui grid columns headers to the scope in AngularJs

Question

I'm using a kendo ui grid, and I want to bind the columns headers to a json file, instead of specifying it directly in the controller.

I created a function that successfully retrieves the array from the json file, and populate the scope:

        function returnColumns(){
            $http.get('app/data/headers.json')
                    .then(function(res){
                        $scope.myHeaders = res.data;
                    });
        }
        returnColumns();

And in the grid's options I'm referring the columns to that variable in the scope:

        $scope.options = {
            dataSource: {
                type: "json",
                transport: {
                    read: "app/data/myData.json"
                },
                pageSize: 10,
                schema  : {
                    data: "mySchema"
                }
            },
            sortable: true,
            pageable: true,
            resizable: true,
            columns:$scope.myHeaders
    ....
    ....

But the binding doesn't kick in, the headers are not updated.

Thanks!

Answer 1

Assuming you're only loading the headers once and it's okay to hide the table until the headers load, throw an ng-if="myHeaders" onto the kendo-ui grid element, remove columns from $scope.options and use k-columns on the element instead.

So:

<div kendo-grid k-options="options"></div>

becomes:

<div kendo-grid k-options="options" k-columns="myHeaders" ng-if="myHeaders"></div>