Table Elementinde Inline Grid Kullanımı

Inline Grid özelliği, Table elementine eklenen EditableTableColumn ile kullanılır ve tablonuzda verilerinizi sadece görüntülemenizi değil, aynı zamanda düzenleyip kaydetmenizi sağlar. Inline Grid özelliğini kullanabilmek için Table elementine EditableTableColumn eklemeniz gerekmektedir.

Table elementine EditableTableColumn eklemek için;

1. Ekranda yer alan Table elementini seçin.
2. Properties panelini açın.
3. TableRow altında yer alan Add EditableTableColumn’a tıkladığınızda kolon otomatik olarak bir Label elementi ile birlikte gelecektir.

EditableColumn ekleme

EditableTableColumn, normal TableColumn'dan farklı olarak tasarım sürecinde düzenlenebilir değildir ve standart özelliklere sahiptir. Bununla birlikte kolona dinamik veri bağlayabilir, kolonun stil düzenlemelerini yapabilirsiniz.

EditableTableColumn’da dinamik verilerle çalışmak için Table elementine veri kaynağı bağlamak için;

1. Table elementini seçin.
2. Properties paneli Datasources alanında ekrana Initial Action olarak eklediğiniz aksiyonlar içerisinden veri kaynağı olarak kullanmak istediğiniz aksiyonu seçin.

Editable Table Column içerisinde yer alan Label’a veri bağlama

EditableTableColumn içerisinde yer alan Label elementinde dinamik veri bağlamak için;

1. Editable Table Column içerisinde yer alan Label elementini seçin.
2. Properties panelinde Value alanında bulunan Field to Display parametresini ile gösterilmek istenen veriyi seçin.
3. EditMode Component parametresi aracılığıyla tabloda düzenleme yaparken kullanmak istediğiniz elementi seçin. Örneğin, bir isim girmek için TextInput elementini kullanabilirken, bir departman seçimi için Selectbox elementini kullanabilirsiniz.

Örnek bir senaryo kapsamında EditableTableColumn’lardan oluşan ve içerisinde müşteri adresi ve müşteri adının bulunduğu bir tablo Görsel 3’teki gibi gözükmektedir.

Örnek Editable Table Column Kullanımı

Görsel 3’te de gösterildiği üzere Editable Table Column'lardan oluşan Table elementinin ilk satırı, düzenleme modundaymış gibi görünür. Bununla birlikte kolonlarda yer alan elementlerin Property ve Styling ayarlarını yönetebilirsiniz.

Uygulamanızı ön izleme veya yayına aldığınızda, ilgili satıra çift tıklayarak düzenleme moduna geçebilirsiniz.

Değerleri Enter tuşuna basarak veya tablonun dışına tıklayarak kaydedebilirsiniz.

Düzenlediğiniz değerleri kaydetmek için, Table elementinin on Row Edit Finished olayında (event) tanımladığınız aksiyonla yeni değerleri kaydetmeniz gerekmektedir.

On Row Edit Finished, sadece Table'ın Inline Grid özelliğinde anlamlı olan ve satırı editlemeyi bitirirken veritabanına kayıt eklemek/güncellemek için çağrılacak aksiyonların tanımlanacağı olaydır.

OnRowEditFinished olayında Kayıt işlemini dolduran aksiyondan sonra, tablonun veri kaynağı olan aksiyonu tekrardan tanımlamak gerekmektedir.

Müşteri adresi ve müşteri adını düzenlenebilir bir yapıda listelendiği örnek bir senaryoyu işletelim.

1. Öncelikle listeleme işlevini sağlayacak aksiyonu Initial Action olarak ekrana ekleyin.
2. Ardından ekrana bir Table elementi ekleyin.
3. Table elementi seçiliyken Properties paneli aracılığıyla Add Action> On Row Edit Finished > Managed DB > Save Record seçimini yapın.
4. Save Record aksiyonu altında ilgili parametre tanımlama işlemini yapın. Örnek bir tanımlama işlemi Görsel 4’te yapılmıştır.

Save Record Aksiyonu Parametre Tanımlama

1. Save Record aksiyonunu ekledikten sonra Table Elementi seçiliyken Add Action>On Row Edit Finished adımlarını takip ederek listeleme işlevini sağlayacak aksiyonu ekleyin.
2. Ardından kolonlarda yer alan Label elementlerini seçerek Properties paneli, Value alanı aracılığıyla değer tanımlama işlemini gerçekleştirin.

Geliştirdiğiniz uygulamalarda Inline Grid özelliği ile verilerin Table elementi üzerinde sadece görüntülenmesini değil, aynı zamanda düzenlenip kaydedilmesini sağlayabilir, uygulamanıza yeni fonksiyonlar kazandırabilirsiniz.