Qual è l'equivalente di "beforeSelectionChange" di ng-grid in ui-grid?

Question

In ng-grid, ho utilizzato beforeSelectionChange nel seguente modo:

Quando l'utente seleziona una riga, viene effettuata una chiamata ajax. Mentre la chiamata ajax è happenning ho impostato $scope.doingAjaxCall = true, e per impedire all'utente di modificare la selezione, avevo questo nella definizione griglia:

beforeSelectionChange: function() { 
    return !($scope.doingAjaxCall); 
}, 

che blocca/congela la selezione se la chiamata AJAX è happenning.

Ora, in ui-grid (aka ng-griglia 3), non so che cosa è l'equivalente per afterSelectionChange.

In questa sezione della documentazione:
http://ui-grid.info/docs/#/api/ui.grid.selection.api:PublicApi
vedo due eventi:

• rowSelectionChanges
• rowSelectionChangedBatch.

Questi sembrano essere l'equivalente del vecchio afterSelectionChange

E in questa sezione della documentazione:
http://ui-grid.info/docs/#/api/ui.grid.selection.service:uiGridSelectionService
vedo questi due metodi che sembrano essere legati alla necessità:

• raiseSelectionEvent(grid, changedRows, event)
• decideRaiseSelectionEvent(grid, row, changedRows, event)

Ma io non capisco come usarli

Nota importante:
sto usando multiSelect: false (es: solo una riga può essere selezionato)

Answer 1

Questo è un po 'di un trucco, ma finirà il lavoro fino a trovare una soluzione migliore. Ecco un lavoro plunker.

Suppongo che si usi rowSelectionChanged per eseguire la chiamata AJAX e attivare doingAjaxCall.

gridApi.selection.on.rowSelectionChanged($scope, function(row) { 
    $log.log('Row ' + row.entity.id + ' selected: ' + row.isSelected); 

    $log.log(' Simulating ajax call...'); 
    $scope.doingAjaxCall = true; 
    $timeout(function() { 
    $log.log(' ...done with ajax call'); 
    $scope.doingAjaxCall = false; 
    }, 2000); 
}); 

Quindi, modificare il modello che ui-grid utilizza per i pulsanti di selezione.

$templateCache.put('ui-grid/selectionRowHeaderButtons', 
    '<div ' + 
    ' class="ui-grid-selection-row-header-buttons ui-grid-icon-ok" ' + 
    ' ng-class="{\'ui-grid-row-selected\': row.isSelected}" ' + 
    ' ng-click="grid.appScope.clickConditions() && selectButtonClick(row, $event)"> ' + // Modified template here 
    ' &nbsp; ' + 
    '</div>' 
); 

In questo modo, viene valutata $scope.clickConditions()prima è chiamata la logica di scatto vero e proprio. Se è falsy, allora selectButtonClick, che gestisce la logica di selezione interna, non viene mai chiamato.

$scope.clickConditions = function() { 
    // Check for any other conditions you need 
    return !$scope.doingAjaxCall; 
}; 

Come ho già detto, questo è molto hacky! Esistono modi migliori per sovrascrivere i modelli (ad es.ui-grid/selectionRowHeaderButtons), quando sovrascrivendo i modelli si dovrà check the logic when updating, probabilmente si dovrebbe lasciare all'utente di sapere che qualcosa sta accadendo visivamente quando viene eseguita la chiamata AJAX, ecc

Una soluzione migliore sarebbe quella di sborsare il pronti contro termine e aggiungi la tua logica beforeSelectionChange (probabilmente a partire da here). Ma sembra che tu non abbia avuto molto aiuto altrove, quindi spero che questo ti possa iniziare almeno!

Answer 2

ui-grid fornisce gli strumenti per fare questo, non sono sicuro che ci sia un modo "ui-grid", ma ci sono sicuramente modi per farlo che sono compatibili.

Sulla base della tua descrizione presumo che tu stia consentendo una selezione singola, perché se hai permesso una selezione multipla, potrebbero continuare ad aggiungere selezioni e tu avresti eseguito l'ajax in background. Quindi presumo si sta impostando multiSelect: false per http://ui-grid.info/docs/#/tutorial/210_selection

vedo due modi per ottenere il risultato:

1. Se l'utente tenta di selezionare una riga, mentre una chiamata AJAX è in esecuzione, impostare la selezione indietro dov'era. Ciò significa che dovrai ascoltare gli eventi selectionChanged e selectionChangedBatch, tenere traccia della selezione che desideri e tenere traccia di quando è in corso una chiamata Ajax.

2. Utilizzare una funzione isRowSelectable che non consente di selezionare alcuna riga se è in esecuzione una chiamata ajax. La funzione stessa è simile a quella che avevi con ng-grid, cioè return !$scope.doingAjaxCall. La differenza è che è necessario chiamare notifyDataChange ogni volta che si modifica il valore di $scope.doingAjaxCall. Dalla memoria, facendo in modo che una riga non selezionabile dall'utente possa comunque essere selezionata in codice, questo non cambierà la selezione della riga.

Probabilmente andrei con la seconda opzione.

Aggiunta di informazioni come richiesto: isRowSelectable è nel tutorial come indicato sopra (c'è un esempio di funzionamento). L'unico trucco è che ho la sensazione che sia solo rivalutato su eventi specifici, quindi non può semplicemente rimuovere automaticamente la selezione da ciascun elemento quando si modifica la variabile doingAjaxCall. Quindi ho consigliato di chiamare notifyDataChange, che è anche nel tutorial.

Ti suggerirei di provarlo in un plunker, e poi se hai difficoltà posso dare un'occhiata e dare consigli. Non ho il tempo adesso di scriverlo da zero.