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!

Joe · Accepted Answer · 2014-05-14 17:45:09Z

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>

answered May 14, 2014 at 17:45

Joe

2,5962 gold badges16 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Binding kendo ui grid columns headers to the scope in AngularJs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related