Ana içeriğe atla

Sürükle ve Bırak Gruplandırma


Sürüklenebilir gruplandırma karışımı, başlığını hedef (mavi) alana sürükleyerek herhangi bir sütuna göre gruplandırmanıza olanak tanır.

Columns.cs'nize [GroupOrder] niteliklerini ekleyerek başlangıçta hangi sütunların gruplanması gerektiğini de ayarlayabilirsiniz.

Sürükle ve Bırak Gruplandırma

Bu örneğin nasıl uygulandığı aşağıda açıklanmıştır:

export class DragDropGroupingGrid extends Northwind.OrderGrid {

    protected createToolbarExtensions() {
        super.createToolbarExtensions();

        this.slickGrid.registerPlugin(new Slick.Data.GroupItemMetadataProvider());
            
        var groupingMixin = new Serenity.DraggableGroupingMixin({
            grid: this
        });

        // setting ShipCountry, ShipCity columns as initially grouped for this sample
        // you could add [GroupOrder(1)] to ShipCountry, and [GroupOrder(2)] to ShipCity
        // in OrderColumns.cs instead (recommended way)
        groupingMixin.plugin.setDroppedGroups(["ShipCountry", "ShipCity"]);
    }

    protected getSlickOptions() {
        var opt = super.getSlickOptions();
        // need to turn grouping panel ON for drag drop grouping to work properly
        opt.groupingPanel = true;
        return opt;
    }

    protected markupReady() {
        super.markupReady();

        // expanding all level 0 (Country) and level 1 (City) groups initially
        this.view.expandAllGroups(0);
        this.view.expandAllGroups(1);
    }
}
```