JavaScript Callback After SilverStripe Grid Field Extensions Reorder?

Question

I have a ModelAdmin with MyDataObject has_many AnotherDataObject and SilverStripe Grid Field Extensions Module that is controlling the

class TestAdmin extends ModelAdmin {
    static $managed_models = array('MyDataObject');
    static $url_segment = 'testadmin';
    static $menu_title = 'TestAdmin';
}

class MyDataObject extends DataObject {
    private static $db = array('Name' => 'Varchar(255)');
    private static $has_many= array('AnotherDataObjects' => 'AnotherDataObject');

    function getCMSFields() {
        $fields = parent::getCMSFields();

        if ($grid = $fields->dataFieldByName('AnotherDataObjects')) {
            $grid->getConfig()
                ->removeComponentsByType('GridFieldAddExistingAutocompleter')
                ->addComponent(new GridFieldOrderableRows('Priority'));

            $fields->removeByName('AnotherDataObjects');
            $fields->insertAfter($grid,'Name');
        }

        return $fields;
    }
}

class AnotherDataObject extends DataObject {
    private static $db = array(
        'Name'      => 'Varchar(255)',
        'Priority'  => 'Int'
    );
    private static $has_one = array('MyDataObject' => 'MyDataObject');
}

I can see that the "reorder" is called, how would I attach, for example...

alert('Reorder Complete!');

...to be called once the system is finished with the database changes?

Answer 1

There are no events triggered when a grid rows have been reordered. However you can redefine the constructor:

$(".ss-gridfield-orderable tbody").entwine({
        onadd: function() {
            var self = this;

            var helper = function(e, row) {
                return row.clone()
                          .addClass("ss-gridfield-orderhelper")
                          .width("auto")
                          .find(".col-buttons")
                          .remove()
                          .end();
            };

            var update = function(event, ui) {
                // If the item being dragged is unsaved, don't do anything
                var postback = true;
                if (ui.item.hasClass('ss-gridfield-inline-new')) {
                    postback = false;
                }

                // Rebuild all sort hidden fields
                self.rebuildSort();

                // Check if we are allowed to postback
                var grid = self.getGridField();
                if (grid.data("immediate-update") && postback)
                {
                    grid.reload({
                        url: grid.data("url-reorder")
                    }, function(data) {
                        self.onreordered();
                    });
                }
                else
                {
                    var form = $('.cms-edit-form');
                    form.addClass('changed');
                }
            };

            this.sortable({
                handle: ".handle",
                helper: helper,
                opacity: .7,
                update: update
            });
        },
        onreordered: function() {
            console.log('The grid was reordered');
        },
});

It should be loaded after GridFieldExtensions.js