Node Tree elementi, hiyerarşik yapıları ağaç şeklinde görselleştirmenizi sağlar. Dinamik verilerle bağlandığında organizasyon şemaları, süreç akışları veya kategori–alt kategori ilişkileri gibi yapılar kolayca gösterilebilir.

Kullanım Alanları

• Organizasyon şemaları (CEO → Departmanlar → Çalışanlar),
• Kategori–alt kategori yapıları,
• Karar ağaçları,
• Süreç akışları vb.

Node Tree elementi yalnızca web uygulamalarda desteklenir.

Organizasyon Şeması Senaryosu

Bir insan kaynakları uygulamasında, çalışanların şirket hiyerarşisindeki yerlerini göstermek için Node Tree kullanılır.

• En üstte CEO yer alır.
• Altında Bilgi İşlem ve İnsan Kaynakları departmanları vardır.
• Her departmanın altında çalışanlar node olarak listelenir.

Kullanıcı bu yapı sayesinde organizasyonu kolayca inceleyebilir.

Veri Kaynağı Bağlama

• Datasources modülüne gidin.
• Tables başlığı yanındaki + ikonuna tıklayın ve tabloya OrganizationData adını verin.
• Aşağıdaki tabloyu oluşturun.

• Ardından SQL Actions’a tıklayın ve aksiyona OrganizationData ismini verin. C# ile de oluşturabilirsiniz.
• Aşağıdaki SQL komutunu girin. 

SELECT NEWID() AS Id, NULL AS ParentId, 'CEO' AS Title, 'Mary Watson' AS Name, 'CEO' AS PositionNameUNION ALLSELECT NEWID(), (SELECT TOP 1 Id FROM OrganizationData WHERE Title='CEO'), 'Bilgi İşlem' AS Title, '' AS Name, 'Department' AS PositionNameUNION ALLSELECT NEWID(), (SELECT TOP 1 Id FROM OrganizationData WHERE Title='CEO'), 'İnsan Kaynakları' AS Title, '' AS Name, 'Department' AS PositionNameUNION ALLSELECT NEWID(), (SELECT TOP 1 Id FROM OrganizationData WHERE Title='Bilgi İşlem'), 'Yazılım Ekibi' AS Title, 'Ali Vural' AS Name, 'Engineer' AS PositionNameUNION ALLSELECT NEWID(), (SELECT TOP 1 Id FROM OrganizationData WHERE Title='İnsan Kaynakları'), 'HR Uzmanı' AS Title, 'Ayşe Demir' AS Name, 'Specialist' AS PositionName;

UI Design Modülü işlemleri

• Uygulama ekranında sağ kenarda bulunan Add Action butonuna tıklayın. 
• Ardından Custom > OrganizationData’yı seçin. 

Özelliklerin Senaryo Bağlamında Kullanılması

• Options
  
  • Açıklama: Node Tree’nin bağlı olduğu veri kaynağı.
  • Kullanım: OrganizationData.
    
    • Action
      
      • Açıklama: Node Tree’ye bağlanacak veri kaynağı aksiyonu.
      • Kullanım: OrganizationData seçilir.
    • Field Node ID
      
      • Açıklama: Her node’u benzersiz tanımlayan alan.
      • Kullanım: Tablo içindeki Id.
    • Field Node Parent ID
      
      • Açıklama: Node’un bağlı olduğu üst node’u gösterir.
      • Kullanım: Tablo içindeki ParentId.
• Orientation
  
  • Açıklama: Yapının yönünü belirler.
  • Kullanım: vertical → organizasyon şeması dikey.
• initialExpandLevel
  
  • Açıklama: Açık gelecek seviye sayısı.
  • Kullanım: 2 → CEO ve altındaki departmanlar açık gelir.
• levelDistance
  
  • Açıklama: Node seviyeleri arasındaki mesafe.
  • Kullanım: 120 px gibi değer verilebilir.
• siblingsMargin
  
  • Açıklama: Aynı seviyedeki node’lar arasındaki boşluk.
  • Kullanım: Departman kartları arasındaki mesafe.
• linksColor
  
  • Açıklama: Bağlantı çizgilerinin rengi.
  • Kullanım: Organizasyon diyagramında siyah veya gri.

Senaryo Adımı Tamamlandığında

• CEO en üstte görünür.
• Altında departmanlar (Bilgi İşlem, İnsan Kaynakları) listelenir.
• Her departmanın altında ilgili çalışanlar node olarak gösterilir.
• Kullanıcı node’lar arasında yakınlaştırma/uzaklaştırma yapabilir.
• Bir node’a tıklayınca detay ekranına yönlenebilir.

Kısıtlamalar

• Şu anda node sayısı manuel artırılamaz; sadece dinamik veri üzerinden eklenir.
• Çok büyük veri setlerinde (yüzlerce node) performans sorunları yaşanabilir.
• Mobil ekranlarda çok seviyeli şemalar kullanıldığında okunabilirlik düşebilir.

İpuçları ve Best Practices

• Veri kaynağında ParentId alanı boş olan satır kök node (root) olarak alınır.
• Organizasyon şemalarında 2–3 seviye açık başlatmak idealdir.
• Renk kontrastı yüksek bağlantı çizgileri (linksColor) tercih edin.
• Görsel karmaşayı önlemek için siblingsMargin ve levelDistance değerlerini dengeli ayarlayın.
• Profil görselleri kullanarak şemayı daha anlaşılır hale getirin.
• Çok büyük organizasyonlar için zoom özelliğini mutlaka aktif edin.