Table Elementinde Inline Grid Kullanımı

Inline Grid özelliği, Table elementine eklenen EditableTableColumn ile kullanılır ve tablonuzda verileri sadece görüntülemekle kalmaz, aynı zamanda düzenleyip kaydetmenizi sağlar. Bu özelliği kullanabilmek için Table elementine EditableTableColumn eklemeniz gerekmektedir.

Table Elementine EditableTableColumn Ekleme

1. Ekranda bulunan Table elementini seçin.
2. Properties panelini açın.
3. TableRow altında bulunan Add EditableTableColumn butonuna tıklayın.
   
   • Kolon otomatik olarak bir Label elementi ile birlikte eklenecektir.

EditableTableColumn Kullanımı

• EditableTableColumn, standart TableColumn'dan farklıdır. Tasarım sürecinde doğrudan düzenlenemez ve temel özelliklere sahiptir.
• Kolona dinamik veri bağlayabilir ve stil düzenlemelerini yapabilirsiniz.

EditableTableColumn’da Dinamik Veri Kullanımı

1. Table elementini seçin.
2. Properties panelinde Datasources alanına gidin.
3. Ekrana Initial Action olarak eklediğiniz aksiyonlar arasından, veri kaynağı olarak kullanmak istediğiniz aksiyonu seçin.

Editable Table Column İçerisinde Label Elementine Veri Bağlama

1. Editable Table Column içerisinde bulunan Label elementini seçin.
2. Properties panelinde Value alanında bulunan Field to Display parametresinden gösterilmek istenen veriyi seçin.
3. EditMode Component parametresi aracılığıyla, düzenleme sırasında kullanılacak elementi belirleyin.
   
   • Örneğin, bir isim girişi için TextInput elementi, bir departman seçimi için Selectbox elementi kullanılabilir.

Örnek Editable Table Column Kullanımı

• Editable Table Column'lardan oluşan bir Table elementinde, ilk satır düzenleme modunda görünebilir.
• Kolonlardaki elementlerin Property ve Styling ayarlarını yönetebilirsiniz.
• Uygulamayı önizleme veya yayına alma aşamasında, 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 aksiyon ile yeni değerleri kaydetmeniz gerekmektedir.

On Row Edit Finished Kullanımı

On Row Edit Finished, yalnızca Table'ın Inline Grid özelliği ile anlamlıdır. Satırı düzenlemeyi tamamladıktan sonra veritabanına kayıt eklemek/güncellemek için çalıştırılacak aksiyonları tanımlamak için kullanılır.

• OnRowEditFinished olayında, kayıt işlemi tamamlandıktan sonra tablonun veri kaynağı aksiyonunun tekrar çağrılması gerekmektedir.

Örnek Senaryo: Müşteri Adresi ve Müşteri Adının Düzenlenebilir Olarak Listelenmesi

1. Listeleme işlevini sağlayacak aksiyonu Initial Action olarak ekleyin.
2. Ekrana bir Table elementi ekleyin.
3. Table elementi seçiliyken, Properties panelinde aşağıdaki adımları takip edin:
   
   • Add Action → On Row Edit Finished → Managed DB → Save Record
   • Save Record aksiyonu altında, ilgili parametreleri tanımlayın.
4. Save Record aksiyonunu ekledikten sonra, On Row Edit Finished aksiyonunu tekrar ekleyerek, listeleme işlevini sağlayacak aksiyonu tanımlayın.
5. Kolonlarda bulunan Label elementlerini seçerek Properties panelindeki Value alanı aracılığıyla veri tanımlamalarını yapın.

Inline Grid özelliği sayesinde Table elementinde verileri sadece görüntülemekle kalmaz, aynı zamanda düzenleyip kaydedebilirsiniz. Bu özellik, uygulamalarınıza dinamik düzenleme ve veri kaydetme fonksiyonları kazandırır.

Mobilde Inline Edit (Satır İçi Düzenleme) Kullanımı

Table elementinde kullanılan Inline Grid yapısı artık mobil uygulamalarda (Android & iOS) da desteklenmektedir. Bu özellik, kullanıcıların tablo satırlarını doğrudan mobil cihaz üzerinden düzenlemesine olanak tanır.

1. Table Elementini Hazırlama

• Editable özelliğini aktif edin.
• Satır içi düzenleme için Add EditableTableColumn ile düzenlenebilir kolon ekleyin.
• Sürekli düzenleme modu isteniyorsa Editable Always Active kullanılabilir.

2. EditableTableColumn Yapılandırması

EditableTableColumn içinde:

• Kolondaki veriyi göstermek için Value / Field to Display alanından veri bağlayın.
• Düzenleme sırasında kullanılacak bileşeni (TextInput, Selectbox vb.) EditMode Component alanından seçin.

Bu yapı, mobilde kullanıcı hücreye dokunduğunda uygun input’un açılmasını sağlar.

3. Kaydetme (Save Record) İşlemi

• Save Record mevcut ve inline edit ile uyumlu şekilde çalışır.
• Kullanıcı düzenlemeyi bitirdiğinde Save Record tetiklenir.
• “On Row Edit Finished” event’i şu an UI’da bulunmadığı için kullanılmaz.

Düzenlenen veriyi kaydetmek için:

1. Düzenlenen EditableTableColumn içindeki EditMode Component üzerinde
   Save Record aksiyonunu tanımlayın.
   
   
2. Kayıt işlemi başarılı olduğunda:
   On Success → listeleme aksiyonunu yeniden çağırın
   (ör. Initial Action).

Bu yöntem hem mobil hem web için doğru akıştır.

4. Mobilde Kullanıcı Akışı

Mobil cihazda inline edit şu şekilde çalışır:

• Kullanıcı düzenlemek istediği hücreye dokunur.
• EditMode Component aktif olur ve mobil klavye açılır.
• Kullanıcı değeri düzenler.
• Düzenleme tamamlandığında:
  
  • Done/Enter tuşuna basar veya
  • Hücrenin dışına dokunur.
• Bu işlem Save Record aksiyonunu tetikler.
• Tablonun veri kaynağı yenilenir ve güncel değer görünür.

5. Mobil Tasarım için Öneriler

• Kolon sayısını sınırlayın; mobil ekranlarda gereksiz kolonları gizleyin.
• Kritik kolonlarda Always Visible On Mobile Resolution özelliğini kullanın.
• Düzenlenebilir hücreleri görsel olarak ayırt etmek için hafif bir arka plan veya ikon ekleyebilirsiniz.

Table elementinde Inline Edit artık hem web hem de mobil uygulamalarda stabil şekilde çalışır. Kullanıcılar mobil cihazda satırları kolayca düzenleyebilir, Save Record ile kaydedebilir ve tabloyu anında güncelleyebilir.