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

Susannsusanna

Answer 1

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;
}

Quiteris

While clicking on row i want to call one function. How i can do. – Susannsusanna

Use ng-click="functionToCall()" – Muskogean

Answer 2

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

.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>

Ivanivana

İf you want to single select ; You can write st-select-mode="single" – Shannashannah