thgreasi/ui-sortable-multiselection

Custom Handle to select rows

dashawk opened this issue · 0 comments

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.