component - Kendo-UI Grid no presenta datos a través de AngularJS

kendo ui grid angular 4

Question

Estoy usando Restangular para resolver una respuesta (una lista de productos) ... Sé que esto se está resolviendo bien.

Soy nuevo en Kendo-UI. Pero ha configurado una grilla de prueba básica como a continuación. Estoy usando k-rebind, ya que la matriz de productos probablemente no se resuelva en el momento en que se crea la grilla.

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

En mi controlador:

$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"
                ]
        };
    }]) 

Sé que se está devolviendo la matriz de productos, y habría pensado que k-rebind vería los productos en matriz para cambios, de modo que cuando se resuelva, se actualice la interfaz de usuario ... no hay tanta suerte.

He intentado atacar una matriz manual en la fuente de datos para reflejar la respuesta de la matriz de productos, y la cuadrícula funciona bien.

Saludos

yo

Answer 1

Tengo el mismo error. Pero esto funcionó para mí:

en el código de vista html:

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

en el controlador angular:

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

Answer 2

Tiene toda la razón de que la Grilla UI de Kendo inicialmente no tendrá acceso a los datos, por lo tanto, cuando la Grilla se represente en la página, simplemente se vinculará a una matriz vacía, sin darle datos. También es correcto usar el atributo k-rebind en este escenario, ya que debe estar atento cuando cambia el alcance.

Sin embargo, una cosa importante que te perdiste es que k-rebind debería establecerse de la misma manera que tus opciones, como se menciona en este artículo de documentación . Esto se puede perder fácilmente, pero lo he usado antes en escenarios similares.

Entonces, aunque no he probado esto, creo que lo siguiente debería funcionar para usted:

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