2015-03-29 3 views
6

Ich versuche, die row saving Funktion in Kombination mit der expandable grid zu verwenden. Ziel ist es, Sub-Grid-Zeilen unabhängig von der übergeordneten Zeile speichern zu können.Nicht in der Lage, Zeile in erweiterbarer Zeile in Angular UI Raster zu speichern

Die saveRow-Funktion wird korrekt aufgerufen, wenn ich ein Feld in der übergeordneten Zeile bearbeite. Wenn ich ein Feld in der Unterzeile bearbeite, erscheint die folgende Meldung in der Konsole;
'Eine Zusage wurde nicht zurückgegeben, wenn das Ereignis' saveRow 'ausgelöst wurde, entweder niemand wartet auf das Ereignis oder der Ereignishandler gab kein Versprechen zurück'
SaveRow wird nie für die erweiterte Unterzeile aufgerufen.

Antwort

3

Sie müssen die Subgrid-APIs registrieren. Jedes Gitter hat eine eigene API-Instanz, die Sie mit ihm kommunizieren:

rowScope.subGridOptions = { 
    appScopeProvider: $scope, 
    columnDefs: [ 
    {field: 'amount'}, 
    {field: 'packageAmount'}, 
    {field: 'carrierAmount'} 
    ], 
    data: rowScope.orderLines, 
    saveRow : $scope.saveRow, 
    onRegisterApi: function (gridApi) { 
    gridApi.rowEdit.on.saveRow($scope, $scope.saveRow) 
    } 
} 

dass in der Nähe ist, aber Sie injizieren unseren Steuerungsbereich in den subgrid Umfang mit appScopeProvider, denen Sie wirklich nicht tun müssen, . Stattdessen können wir saveRow generisch machen und es an das gewünschte gridApi binden. Das erste Argument von bind() setzt this für die Funktion. Wir werden nur das Rasterobjekt übergeben, aber wir werden es nicht brauchen. Das zweite bindende Argument ist das GridApi, das übergeben werden soll. Dann wissen wir in der saveRow-Definition, dass wir die richtige API als erstes Argument und dann die rowEntity als zweites Argument erhalten.

// Main grid: 
$scope.gridOptions.onRegisterApi = function(gridApi) { 
    gridApi.rowEdit.on.saveRow($scope, saveRow.bind(gridApi.grid, gridApi)); 
}; 

// Subgrids: 
onRegisterApi: function(gridApi) { 
    gridApi.rowEdit.on.saveRow($scope, saveRow.bind(gridApi.grid, gridApi)); 
} 

// Altered saveRow: 
function saveRow(gridApi, rowEntity) { 
    var promise = $q.defer(); 
    gridApi.rowEdit.setSavePromise(rowEntity, promise.promise); 

    // fake a delay of 3 seconds whilst the save occurs, return error if gender is "male" 
    $interval(function() { 
    if (rowEntity.gender === 'male'){ 
     promise.reject(); 
    } else { 
     promise.resolve(); 
    } 
    }, 3000, 1); 
}; 

Da Sie wahrscheinlich eine andere Speicherfunktion für Teilnetze, die Hauptsache erinnern würden, ist das „saveRow“ Ereignis auf sich registrieren alle mit onRegisterApi

Hier ist ein Arbeits Plunker den Code oben zeigt, : http://plnkr.co/edit/52mp9C?p=preview

1

Sie haben bereits eine verzögerte Zusage in Ihrem Code erstellt. Da ein Fehler eindeutig besagt, dass Sie ein Versprechen zurückgeben müssen, fügen Sie Ihrem Code return deferred.promise; hinzu. Ich denke, du solltest auch ein Versprechen von else statement zurückgeben, um zu versprechen, dass du es sowieso ablehnst/ablehnst.

-Code

$scope.saveRow = function(order) { 
    var deferred = $q.defer(); 
    $scope.gridApi.rowEdit.setSavePromise(order, promise.promise); 
    if (order.number) { 
     $http.put(ORDER_API + '/' + order._id, order).success(function() { 
      deferred.resolve(); 
     }).error(function() { 
      deferred.reject(); 
     }); 
    } else { 
     deferred.reject(); 
    } 
    return deferred.promise; //this will return promise to caller function. 
}; 

Hope this Ihnen helfen könnten, lassen Sie mich wissen, wenn etwas anderes erforderlich ist. Vielen Dank. :)

2

Wenn Sie Angular verwenden $ http oder $ Ressource, müssen Sie keine anderen 'latenten' Objekte erstellen, nur Ergebnis zurück:

$scope.saveRow = function (order) { 
    // with use $http 
    var promise = $http.put(ORDER_API + '/' + order._id, order); 
    // or with use $resource 
    var promise = $resource(ORDER_API + '/:id').save({ id: order._id }, order).$promise; 
    $scope.gridApi.rowEdit.setSavePromise(order, promise); 
    return promise; 
    } 
Verwandte Themen