Unable to select the grid item using SmartTable in Angular JS

Question

I have implemented grid using SmartTable in Angular JS. According to Smart Table docs, for selecting the grid item, we need to add st-select-row="row". I added this one too. But i am unable to select the grid.

Implemented app can be seen in plunk (url below). Can anybody please help me to use the grid row as selectable. Also, I want to call a function when clicking on row.

Plunkr here

score 19 · Accepted Answer · edited Feb 27 '17 at 03:21

19

Your plunker actually works

when selecting a row smart-table add the property isSelected=true to the associated model and a class name st-selected to the tr element

just add a css rule and you'll be able to see it

.st-selected{
  border-left:4px solid black;
}

edited Feb 27 '17 at 03:21

Paul Rooney

20,879
9
40
61

answered Oct 28 '14 at 05:21

laurent

2,590
18
26

1

While clicking on row i want to call one function. How i can do. – Ranga Reddy Oct 29 '14 at 08:42
1

Use ng-click="functionToCall()" – Samir Alajmovic Feb 17 '15 at 17:35

score 1 · Answer 2 · answered Feb 01 '16 at 12:54

app.controller('selectionCtrl', ['$scope', '$filter', function (scope, filter) {
    scope.rowCollection = [
        {firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},
        {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
        {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
    ];
}]);

.st-selected{
  color:cornflowerblue ;
}

<table st-table="rowCollection" class="table">
<thead>
<tr>
 <th st-sort="firstName">first name</th>
 <th st-sort="lastName">last name</th>
 <th st-sort="birthDate">birth date</th>
 <th st-sort="balance">balance</th>
 <th>email</th>
</tr>
</thead>
<tbody>
<tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in rowCollection">
 <td>{{row.firstName | uppercase}}</td>
 <td>{{row.lastName}}</td>
 <td>{{row.birthDate | date}}</td>
 <td>{{row.balance | currency}}</td>
 <td><a ng-href="mailto:{{row.email}}">email</a></td>
</tr>
</tbody>
</table>

İf you want to single select ; You can write st-select-mode="single" — barış çıracı, Feb 01 '16 at 13:01

Unable to select the grid item using SmartTable in Angular JS

2 Answers2

Linked