Custom Handle to select rows
dashawk opened this issue · 0 comments
dashawk commented
Hi, I am so relieved after finding this package. I have a table with sortable rows but I need to multi select them using a checkbox. How can I achieve this?
Here is my controller:
(function () {
'use strict';
angular
.module('myApp', [])
.controller('testController', testController);
/* @ngInject */
function testController() {
var vm = this;
vm.sortableOptions = {};
...
vm.sortableOptions[id] = multiSortable.extendOptions(_sortableOptions(groups[id]));
function _sortableOptions(group) {
return {
items: 'tr.item',
refreshPositions: true,
cursor: 'pointer',
tolerance: 'pointer',
handle: '.sort-handle',
helper: function (event, ui) {
ui.children().each(function () {
$(this).width($(this).width());
});
return ui;
},
stop: function () {
_calculateGross(group); // Re-calculate after stop dragging
}
};
}
...
}
}());
And in my HTML:
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr><th>Product Name</th></tr>
<tr><th>Cost</th></tr>
<tr><th>Buy Price</th></tr>
<tr><th>Profit</th></tr>
<tr><th>Action</th></tr>
</thead>
<tbody ui-sortable="vm.sortableOptions[products.id]" ng-model="products.groups">
<tr class="item" ng-repeat="item in products.groups track by $index" ui-sortable-selectable>
<td class="sort-handle">{{ item.itemName }}</td>
<td>{{ item.cost | currency }}</td>
<td>{{ item.buy | currency }}</td>
<td>{{ item.profit | percent }}</td>
<td>
<input id="select-{{ item.id }}" type="checkbox" ng-model="item.isSelected" />
<label for="select-{{ item.id }}"></label>
</td>
</tr>
</tbody>
</table>
I'm not sure how to select the whole row using the checkbox.