Kendo-UI Grid does not represent data via AngularJS

I am using Restangular to solve the answer (product list) ... I know this is resolved OK.

I am new to Kendo-UI. But set up a basic test mesh as shown below. I am using k-rebind as the array of products will probably not be resolved at the time the mesh is generated.

<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 an array of products is being returned, and I would have thought that k-rebind would watch the array of products for changes, so when resolved it updates the UI ... no such luck.

I tried to redeem the array manually in the datasource to reflect the answer for the array of products and the grid works fine.

Hello

I am

+3


source to share


2 answers


You are absolutely correct that the Kendo UI grid initially has no data access, so when the Grid is rendered on the page, it just binds to an empty array - it doesn't give you any data. You are also using the attribute correctly k-rebind

in this scenario as it needs to keep track of when the scope changes.

However, one important thing you missed is that it k-rebind

should be set to the same as your options, as stated in this documentation . This can be easily overlooked, but I've used it before in scenarios like this.



So, until I tested this, I believe the following should work for you:

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

      

+4


source


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

      

+1


source







All Articles