Events

Kernel events

You can listen Gridifier object for various events after initialization:

Notice.
You can add as many handlers as you need per each event.

Full events list

This section contains all events, that are emitted by Gridifier during it's lifecycle.

var grid = new Gridifier(demoGrid, settings);
grid.onShow(function(item) {
    // This event is emitted after 'show' animation end.
    // It happens after item inserts and after filter changes.
    // (If previous filtered out items are shown with current filter)
});
        

// 1. Insert operations
grid.append(domCollection);
grid.prepend(domCollection);
grid.insertBefore(domCollection, beforeItem);
grid.insertAfter(domCollection, afterItem);

// 2. Filter operations
grid.filter("newFilter");
        

var grid = new Gridifier(demoGrid, settings);
grid.onHide(function(item) {
    // This event is emitted after 'hide' animation end.
    // It happens after item disconnects and after filter changes.
    // (If visible items are hidden with current filter)

    // If you want to delete item from DOM after hide animation end
    // and you are using filters, use onDisconnect event instead.
});
        

// 1. Disconnect operations
grid.disconnect(domCollection);
grid.pop();
grid.shift();

// 2. Filter operations
grid.filter("newFilter");
        

var grid = new Gridifier(demoGrid, settings);
grid.onReposition(function() {
    // This event is emitted after each item reposition inside grid.
    // It should be used with silentAppend/silentRender functions to
    // render silently appended items, that are located inside viewport right after page load:
    grid.silentRender(grid.getSilent(true));
});

// Each item insert will trigger onReposition event.
grid.silentAppend(domCollection);

// notice -> don't use this event per global Gridifier functions like
// 'grid.resort()', it will create infinite loop.(use onInsert event instead)
        

// Almost in all operations(inserts, disconnects, repositions, resorts, drags...)
        

var grid = new Gridifier(demoGrid, settings);
grid.onInsert(function(items) {
    // This event is emitted after insert function calls.
    // Use this event if you want to resort all items after each insert.
    grid.resort();
});

grid.append(domCollection);
        

// 1. Insert operations
grid.append(domCollection);
grid.prepend(domCollection);
grid.insertBefore(domCollection, beforeItem);
grid.insertAfter(domCollection, afterItem);
grid.silentAppend(domCollection);
        

var grid = new Gridifier(demoGrid, settings);
grid.onDisconnect(function(item) {
    // This event is emitted after 'hide' animation end.
    // Opposite to 'onHide' event it is emitted only after item disconnects through
    // disconnect/pop/shift functions.

    // So, it will not be triggered on filter changes and you can use it
    // to delete item from DOM.(If it is required)
    // item.parentNode.removeChild(item);
});
        

// 1. Disconnect operations
grid.disconnect(domCollection);
grid.pop();
grid.shift();

// It will not be triggered on filter('fName') calls.
        

var grid = new Gridifier(demoGrid, settings);
grid.onCssChange(function(item, addedClasses, removedClasses) {
    // This event is emitted after item reposition animation finish.
    // (After responsive transform function calls)
    // Added and removed classes are arrays, that contains all classes,
    // which were passed to transform functions.
});
        

// Responsive transform function calls
grid.toggleCss(item, "className");
grid.addCss(item, "className");
grid.rmCss(item, "className");
        

var grid = new Gridifier(demoGrid, settings);
grid.onRepositionEnd(function() {
    // This event is emitted after all grid item reposition finish.
    // It will not fire after item inserts - if you want for example reindex
    // all grid items, you should use onGridResize event.(It will fire also after item inserts)
});
        

// Almost in all operations(disconnects, retransforms, resorts, drags...) except inserts.
        

var grid = new Gridifier(demoGrid, settings);
grid.onGridResize(function() {
    // This event is emitted after almost all Gridifier operations.
    // If you want to rewrite grid item numbers, you should use this event:
    var reindexGridItems = function() {
        var items = grid.getAll();
        for(var i = 0; i < items.length; i++)
            items[i].innerHTML = i + 1;
    }

    reindexGridItems();
});

// notice -> don't use this event per global Gridifier functions like
// 'grid.resort()', it will create infinite loop.(use onInsert event instead)
        

// Almost in all operations(disconnects, repositions, resorts, drags...) including inserts.
        

var grid = new Gridifier(demoGrid, settings);
grid.onDragEnd(function(sortedItems) {
    // This event is emitted after all grid item reposition finish when draggable item is being dragged around.
    // This event should be used to get new items order after drags.
});
        

// When all grid items are repositioned after draggable item movements.