javascriptphpsilverstripemodeladmin

JavaScript Callback After SilverStripe Grid Field Extensions Reorder?


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?


Solution

  • 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