2

I am working on a field type that is similar to the table field type. Is it possible to tap into Garnish for the sorting. I’ve tried a few things and have had no luck. Can anyone help me out?

5

Sure, I've had experience with two different types of sorting with SuperTable (check the link for associated JS).

If you're modelling the fieldtype after a table, you might like to use the Craft.DataTableSorter method. Its pretty restrictive to a table layout, and you'll need to give each tr element a data-id.

Craft.FieldType = Garnish.Base.extend({
    sorter: null,

    init: function() {
        var $table = $container.children('.table');

        this.sorter = new Craft.DataTableSorter($table, {
            helperClass: 'editabletablesorthelper',
            copyDraggeeInputValuesToHelper: true
        });
    },

    addRow: function() {
        var $tr = $('<tr/>');
        this.sorter.addItems($tr);
    }
});

Or, for more abstract sorting, you can have more control using Garnish.DragSort - essentially a general drag and sort function. This is what Matrix uses.

Craft.FieldType = Garnish.Base.extend({
    sorter: null,

    init: function() {
        var $rows = $container.children('.table-rows');

        this.sorter = new Garnish.DragSort($rows, {
            handle: 'tfoot .move',
            axis: 'y',
            collapseDraggees: true,
            magnetStrength: 4,
            helperLagBase: 1.5,
            helperOpacity: 0.9,
        });
    },

    addRow: function() {
        var $tr = $('<tr/>');
        this.sorter.addItems($tr);
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.