Search code examples
angularjssmart-table

AngularJS Smarttable - event on select


Is there a way to trigger an event on row select in AngularJS Smart Table?

This was a subject in other thread but still no answer to this point.

Unable to select the grid item using SmartTable in Angular JS


Solution

  • I needed this functionality in order to show a panel whenever at least 1 row was selected. I originally set up a watch, but decided that was too expensive.

    I ended up adding a callback inside the stSelectRow directive.

    ng.module('smart-table')
      .directive('stSelectRow', function () {
        return {
          restrict: 'A',
          require: '^stTable',
          scope: {
              row: '=stSelectRow',
              callback: '&stSelected' // ADDED THIS
          },
          link: function (scope, element, attr, ctrl) {
            var mode = attr.stSelectMode || 'single';
            element.bind('click', function ($event) {
              scope.$apply(function () {
                  ctrl.select(scope.row, mode, $event.shiftKey);
                  scope.callback(); // AND THIS
              });
            });
    
            //***///
          }
        };
      });
    

    I was then able to pass a function from my controller to the directive (note: you could pass the selected row back, I didn't need to)

    tr ng-repeat="row in customerResultsTable" st-select-row="row" st-select-mode="multiple" st-selected="rowSelected()">
    

    Referenced this post for help Callback function inside directive attr defined in different attr