angularjs - Whats the equivalent for ng-grid's "beforeSelectionChange" in ui-grid? -
in ng-grid
, used use beforeselectionchange
in following way:
when user selects row, ajax call performed. while ajax call happenning set $scope.doingajaxcall = true
, , prevent user changing selection, had in grid definition:
beforeselectionchange: function () { return !($scope.doingajaxcall); },
which locks/freezes selection if ajax call happenning.
now, in ui-grid
(aka ng-grid 3), i don't know whats equivalent afterselectionchange
.
in section of documentation:
http://ui-grid.info/docs/#/api/ui.grid.selection.api:publicapi
see 2 events:
rowselectionchanges
rowselectionchangedbatch
.
these seem equivalent of old afterselectionchange
and in section of documentation:
http://ui-grid.info/docs/#/api/ui.grid.selection.service:uigridselectionservice
see these 2 methods seem related need:
raiseselectionevent(grid, changedrows, event)
decideraiseselectionevent(grid, row, changedrows, event)
but don't understand how use them
important note:
i'm using multiselect: false
(ie: 1 row can selected)
this bit of hack, it'll job done until find better solution. here's working plunker.
i assume use rowselectionchanged
perform ajax call , toggle 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 ajax call'); $scope.doingajaxcall = false; }, 2000); });
then, modify template ui-grid uses select buttons.
$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 ' ' + '</div>' );
this way, $scope.clickconditions()
evaluated before actual click logic called. if it's falsy, selectbuttonclick
, handles internal selection logic, never called.
$scope.clickconditions = function() { // check other conditions need return !$scope.doingajaxcall; };
as mentioned, hacky! there better ways overwrite templates (e.g. ui-grid/selectionrowheaderbuttons
), when overwriting templates you'll have check logic when updating, should let user know happening visually when ajax call performed, etc.
a better solution fork repo , add own beforeselectionchange
logic (probably starting here). seems haven't gotten elsewhere, hope gets started @ least!
Comments
Post a Comment