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);
    }
}
```

Bu blogdaki popüler yayınlar

Code generetor ile oluşturulan dosyaların açıklamaları

  1. Sunum (Presentation/UI) Katmanı (Kullanıcı arayüzü - HTML, TypeScript, Dialog, Grid) 🔹 XYZPage.ts 📌 Ne İşe Yarar? Kullanıcı arayüzünün TypeScript tarafındaki tanımıdır. Serenity'nin Dialog ve Grid bileşenlerini içeren bir TypeScript sınıfıdır. 📌 Çok Katmanlı Mimarideki Yeri: Sunum Katmanı (Presentation Layer) Kullanıcıdan veri almak ve göstermek için kullanılır. 🔹 XYZGrid.ts 📌 Ne İşe Yarar? Tablo (Grid) yapısını oluşturur ve verileri listeler. Filtreleme, sıralama ve sayfalama işlemleri için kullanılır. columnsKey ile hangi kolonların gösterileceğini belirler. 📌 Çok Katmanlı Mimarideki Yeri: Sunum Katmanı (Presentation Layer) Kullanıcının verileri listelediği ve etkileşimde bulunduğu yerdir. 🔹 XYZDialog.ts 📌 Ne İşe Yarar? CRUD (Create, Read, Update, Delete) işlemlerini yöneten pencere (modal) bileşeni Kullanıcı form aracılığıyla veri ekler, günceller veya siler. XYZForm.cs ile birlikte çalışır. 📌 Çok Katmanlı Mimarideki Yeri: Sunum Katmanı (Presentation Layer) Kull...

Serenity Web Nedir?

   Serenity  , açık kaynak teknolojileri üzerine kurulu bir ASP.NET Core/TypeScript uygulama platformudur. Standart kodlardan kaçınarak, tekrarlanan görevlere harcanan zamanı azaltarak ve en iyi yazılım tasarımı uygulamalarını uygulayarak bakım maliyetlerini düşürürken geliştirmeyi kolaylaştırmayı amaçlamaktadır. Serene  , Serenity platformunu temel alan ücretsiz, açık kaynaklı başlangıç ​​uygulama şablonumuzdur.  Bu dokümantasyon aracılığıyla eğitimimiz ve diğer örnekler için esas olarak Serene'yi kullanacağız. StartSharp  , ücretli müşterilerimize sunduğumuz premium uygulama şablonudur.  Daha gösterişli bir temaya ve bazı ekstra özelliklere  ek olarak Serene'deki her şeyi içerir  .  İkisi de Serenity platformunu temel alıyor. Adında Ne Var Serenity'nin sözlük anlamları  barış  ,  rahatlık  ve  sakinliktir  . Serenity ile bunu başarmaya çalışıyoruz.  Umarız yükledikten ve kullandıktan sonra siz de bu ş...