Inline Grid
Inline Grid ile Table elementinde yer alan verileri düzenleyin ve kaydedin
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;
Ekranda yer alan Table elementini seçin.
Properties panelini açın.
TableRow altında yer alan Add EditableTableColumn’a tıkladığınızda kolon otomatik olarak bir Label elementi ile birlikte gelecektir.
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;
Table elementini seçin.
Properties paneli Datasources alanında ekrana Initial Action olarak eklediğiniz aksiyonlar içerisinden veri kaynağı olarak kullanmak istediğiniz aksiyonu seçin.
EditableTableColumn içerisinde yer alan Label elementinde dinamik veri bağlamak için;
EditableTableColumn içerisinde yer alan Label Elementini seçin.
Properties panelinde Value alanında bulunan Field to Display parametresini ile gösterilmek istenen veriyi seçin.
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.
Görsel 3’te de gösterildiği üzere EditableTableColumn'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 onRowEditFinished olayında (event) tanımladığınız aksiyonla yeni değerleri kaydetmeniz gerekmektedir.
OnRowEditFinished, 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.
Öncelikle listeleme işlevini sağlayacak aksiyonu Initial Action olarak ekrana ekleyin.
Ardından ekrana bir Table elementi ekleyin.
Table elementi seçiliyken Properties paneli aracılığıyla Add Action>OnRowEditFinished>ManagedDb>SaveRecord seçimini yapın.
SaveRecord 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.
SaveRecord aksiyonunu ekledikten sonra Table Elementi seçiliyken Add Action>OnRowEditFinished adımlarını takip ederek listeleme işlevini sağlayacak aksiyonu ekleyin.
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.
Last updated
