Intelligent Table - Setting a predefined row as default

Question

Intelligent Table - Setting a predefined row as default

Currently, I am utilizing smart-table and facing the need to preselect a specific row.

After loading my list, I iterate through it and set the isSelected attribute once I locate the item I intend to select:

// Preselecting a row
for (var i = 0, len = scope.displayCollection.length; i < len; i += 1) {
    var person = scope.displayCollection[i];
    if (person.firstName === 'Blandine') {
        person.isSelected = true;
        scope.selected = person;
        break;
    }
}

Although this process works well, I encounter an issue when attempting to select another row. The previously preselected row remains selected, requiring me to manually deselect it before selecting a new row.

To further illustrate the problem, here is a JSFiddle link: http://jsfiddle.net/6pykn5hu/3/

I have also attempted the solution suggested in Smart-Table - Select first row displayed (angularjs) with no success.

Any assistance on resolving this issue would be greatly appreciated. Thank you.

javascript angularjs smart-table

Answer 1

Answer №1

Upon reviewing their directive, it became apparent that a function in the parent directive stTable was being called. The row is connected to a click handler which triggers the ctrl.select() function from stTable, storing the last selected row. The issue arises when this event fails to fire, leaving the last clicked row unset and consequently not removing its class. To address this problem, I have rewritten the directive to better align with your intended functionality, though there is room for further enhancement.

app.directive('prSystem', function () {
  return {
    restrict: 'A',
      require: '^stTable',
      scope: {
        row: '=prSystem'
      },
      link: function (scope, element, attr, ctrl) {
          var mode = attr.stSelectMode || 'single';
          if(scope.row.isSelected) {
              scope.row.isSelected = undefined;
              ctrl.select(scope.row, mode);
          }

        element.bind('click', function () {
          scope.$apply(function () {
            ctrl.select(scope.row, mode);
          });
        });

        scope.$watch('row.isSelected', function (newValue) {
          if (newValue === true) {
            element.addClass('st-selected');
          } else {
            element.removeClass('st-selected');
          }
        });
      }
  }
})

Answer 2

Upon reviewing their directive, it became apparent that a function in the parent directive stTable was being called. The row is connected to a click handler which triggers the ctrl.select() function from stTable, storing the last selected row. The issue arises when this event fails to fire, leaving the last clicked row unset and consequently not removing its class. To address this problem, I have rewritten the directive to better align with your intended functionality, though there is room for further enhancement.

app.directive('prSystem', function () {
  return {
    restrict: 'A',
      require: '^stTable',
      scope: {
        row: '=prSystem'
      },
      link: function (scope, element, attr, ctrl) {
          var mode = attr.stSelectMode || 'single';
          if(scope.row.isSelected) {
              scope.row.isSelected = undefined;
              ctrl.select(scope.row, mode);
          }

        element.bind('click', function () {
          scope.$apply(function () {
            ctrl.select(scope.row, mode);
          });
        });

        scope.$watch('row.isSelected', function (newValue) {
          if (newValue === true) {
            element.addClass('st-selected');
          } else {
            element.removeClass('st-selected');
          }
        });
      }
  }
})

Answer 3

Answer №2

After much searching, I've come up with a new approach:

Instead of using $watch, I decided to implement a ng-click on each row:

<tr st-select-row="row" ng-repeat="row in displayCollection" ng-click="selectRow(row)">

I also added a function to manually unselect all rows before selecting the clicked one:

scope.selectRow = function (row) {
    for (var i = 0, len = scope.displayCollection.length; i < len; i += 1) {
        scope.displayCollection[i].isSelected = false;
    }
    row.isSelected = true;
    scope.selected = row;
}

Here is the working JSFiddle link for reference: http://jsfiddle.net/6pykn5hu/6/

If anyone has a more efficient solution, feel free to share - I'm always open to new ideas :)

Answer 4

After much searching, I've come up with a new approach:

Instead of using $watch, I decided to implement a ng-click on each row:

<tr st-select-row="row" ng-repeat="row in displayCollection" ng-click="selectRow(row)">

I also added a function to manually unselect all rows before selecting the clicked one:

scope.selectRow = function (row) {
    for (var i = 0, len = scope.displayCollection.length; i < len; i += 1) {
        scope.displayCollection[i].isSelected = false;
    }
    row.isSelected = true;
    scope.selected = row;
}

Here is the working JSFiddle link for reference: http://jsfiddle.net/6pykn5hu/6/

If anyone has a more efficient solution, feel free to share - I'm always open to new ideas :)

Intelligent Table - Setting a predefined row as default

Answer №1

Answer №2

Similar questions

How can I rearrange divs using CSS? Can I add parent 1 in between the children of parent 2

"ng-show does not respond to the completion of $http.success() or .error() function calls

How to adjust margins and padding for the <input type='radio' /> element using CSS?

Transmit a file using multipart with XMLHttpRequest

How to extract the value of a key from JSON using JavaScript

Filling form fields with array data (AngularJS)

Side menu and grid display using HTML and CSS

What is the best way to use Three.js to translate an object within a defined plane?

Is there a compatibility problem between JQuery 'hold' button when using toggleClass and hasClass methods?

Export buttons in Jquery datatable are malfunctioning

Blank white screen issue in Three JS while loading JSON object

Can a form be selected and submitted using only its class as a selector?

Having trouble with a nested Angular 2 component not showing up on the page?

What is the best way to dynamically fill a dropdown list based on the chosen value of another dropdown list in MVC?

Displaying and Concealing Messages with VueJS

Hold off on finishing numerous ajax requests that may be executed simultaneously

Error encountered while using Jest, React, Typescript, and React-Testing-Library

Dynamically determining the direction of a page with Vue Js

Using jquery to toggle active nav links in Bootstrap

Removing information from a MongoDB database with the help of AngularJS and Node.js