Kendo-UI Grid not presenting data via AngularJS

Question

I am using Restangular to resolve an response (a list of products)...I know this is being resolved OK.

I am new to Kendo-UI. But have set up a basic test grid as below. I am using k-rebind, as the products array is likely not resolved at the time the grid is created.

<kendo-grid k-options="mainGridOptions" k-rebind="products"></kendo-grid>

In my controller:

$scope.products = [];
        $scope.therapyAreas = [];
        $scope.dropDownTAs = [];

        prProductService.getProducts().then(function(products) {
            $scope.products = products;
            prTAService.getTAs().then(function(tas) {
                $scope.therapyAreas = tas;
                for(var i = 0; i < $scope.therapyAreas.length;i++) {
                    $scope.dropDownTAs.push({id: $scope.therapyAreas[i].id, therapyArea: $scope.therapyAreas[i].therapyArea});

                }               
            });
        });

        $scope.mainGridOptions = {
                dataSource: {
                    data: $scope.products                    
                },
                height: 550,
                scrollable: true,
                sortable: true,
                filterable: true,
                pageable: {
                    input: true,
                    numeric: false
                },
                columns: [
                    "productName",
                    "activeIngredients",
                    "productComments",
                    "gpt",
                    "ta"
                ]
        };
    }])

I know the products array is being returned, and I would have thought k-rebind would watch the products array for changes so when it is resolved it refreshes the UI...no such luck.

I have tried bashing in a manual array into the data source to mirror the response for the products array, and the grid works fine.

Regards

i

score 4 · Answer 1 · answered Oct 08 '14 at 17:30

4

You are absolutely correct that the Kendo UI Grid will initially not have access to the data, so when the Grid gets rendered on the page it will simply bind to an empty array - giving you no data. You're also correct to use the k-rebind attribute in this scenario, since it should keep an eye out for when the scope changes.

However, one important thing that you missed is that k-rebind should be set to the same as your options, as mentioned in this documentation article. This can easily be missed, but I've used this before in similar scenarios.

So, while I haven't tested this I believe the following should work for you:

<kendo-grid k-options="mainGridOptions" k-rebind="mainGridOptions"></kendo-grid>

answered Oct 08 '14 at 17:30

carlbergenhem

1,989
13
12

Hi, thanks...yes not obvious from that link that you HAVE to bind to the options. It just states that you need to bind to something in scope you need to watch....which I did. Will give this a go, appreciate the response.... – smackenzie Oct 08 '14 at 18:27
No worries! If this still doesn't work let me know and I'll code out something longer/complete :) – carlbergenhem Oct 08 '14 at 18:54
In the angularJs world, while you may bind to an empty array - it should get watched and refresh automatically , does this level of data binding not happen in Kendo-UI then? – smackenzie Oct 09 '14 at 13:51
Because the DataSource is on the `mainGridOptions` scope variable, any changes to the DataSource will be reflected within `mainGridOptions`. This means that in order for the Grid widget to watch for changes to the DataSource, like changing a scope variable with its data, k-rebind should be set to `mainGridOptions` - the property being updated. If you would prefer to have the DataSource automatically update you should use its transport layer, like in this documentation article: http://docs.telerik.com/kendo-ui/AngularJS/the-grid-widget#how-to-bind-the-grid-using-the-http-service – carlbergenhem Oct 10 '14 at 12:39

score 1 · Answer 2 · answered Jan 24 '16 at 05:45

i got the same error. But this worked for me:

in the html view code:

<kendo-grid data-source="vm.kendoData.data"
            sortable="true" 
            options="vm.gridOptions">
</kendo-grid>

in the angular controller:

vm.kendoData = new kendo.data.DataSource({});

vm.getRegistros = function () {
    vm.loading = true;
    registroDePontoService.registrosPorPeriodo(vm.registroPorPeriodo)
        .success(function (result) {
            vm.kendoData.data = result.registros;
        }).finally(function () {
            vm.loading = false;
        });
};

vm.gridOptions = {
    columns: [{
        field: "date",
        title: "Date",
        width: "120px"
    }, {
        field: "column1",
        title: "column1",
        width: "120px"
    }, {
        field: "column2",
        title: "column2",
        width: "120px"
    }]

Kendo-UI Grid not presenting data via AngularJS

2 Answers2