CODEWITHSUNDEEP
angularjskendo-uikendo-grid
smackenzie
smackenzie

Reputation: 3022

Kendo-UI Grid not presenting data via AngularJS

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

Upvotes: 3

Views: 5000

Answers (2)

Marcos Lommez
Marcos Lommez

Reputation: 136

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"
    }]

Upvotes: 1

carlbergenhem
carlbergenhem

Reputation: 1989

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>

Upvotes: 4

Related Questions