LivaDropdownBox

Açılır panelin içinde DataGrid veya TreeList barındıran seçim kutusu. renderMode prop'u panelin nasıl çizileceğini belirler; veri kaynağı yerel bir dizi ya da uzak bir store yapılandırması olabilir. Panelin üstünde varsayılan olarak arama kutusu bulunur.

import { LivaDropdownBox } from "@dataliva/livalib";

Düz liste

renderMode="plain" geriye dönük uyumluluk için korunur; artık ayrı bir liste bileşeni açmaz, datagrid ile aynı tabloyu çizer. columns verilmediğinde displayExpr alanından başlıksız, tek kolonlu bir tablo üretilir — panelde yalnızca arama kutusu ve seçilebilir satırlar kalır. Örnekte id / name alanlı küçük bir dizi kullanılıyor.

Veri tablosu

renderMode="datagrid" (varsayılan mod) panelde kolon tanımlı bir DataGrid açar; arama ve filtreleme tablodan gelir. columns verildiğinde kolon başlıkları, başlık filtresi ve filtre paneli de görünür. Başlık filtresindeki arama kutusu LivaDataGrid'dekiyle aynı şekilde mod seçicilidir.

Ağaç görünümü

renderMode="treelist" hiyerarşik veriyi ağaç olarak gösterir. Düz veride üst kayıt parentIdExpr alanıyla, kök düzey rootValue ile belirlenir. İç içe veride (dataStructure="tree") alt kayıtlar itemsExpr alanından okunur.

Çoklu seçim

selectionMode="multiple" onay kutulu çoklu seçim açar; value bir dizi olarak yönetilir. Tekli seçimde ise bir satır seçilince panel kendiliğinden kapanır.

Arama

Panelin üstündeki arama kutusu varsayılan olarak açıktır (searchEnabled). Kutunun yanındaki seçici eşleşme biçimini belirler: Contains (içerir, varsayılan), Begins with (ile başlar) ve Ends with (ile biter). Mod değiştirildiğinde yazılı arama metni yeni modla hemen yeniden uygulanır. Seçilen mod tablodaki tüm kolonlara uygulanır; datagrid, plain ve treelist modlarının hepsinde aynı şekilde çalışır.

searchEnabled={false} arama kutusunu ve mod seçiciyi birlikte gizler.

Bir kolonda kendi calculateFilterExpression fonksiyonunuz varsa, arama sırasında seçilen mod bu fonksiyona selectedFilterOperation argümanı olarak geçer.

Panel genişliği

dropDownWidth açılan panelin genişliğini belirler. Verilmediğinde panel içeriğine göre boyutlanır; en az kutunun width değeri kadar (o da yoksa 300px) olur. Dar bir form alanında çok kolonlu bir tablo göstermek için kutuyu dar tutup panele daha geniş bir değer verebilirsiniz.

Boyutlar

size kutunun yüksekliğini belirler ve LivaSelectBox ile aynı ölçeği kullanır: xxs 22px, xs 26px (varsayılan), sm 29px, md 32px, lg 38px, xl 44px. Eski small / medium / large değerleri sm / md / lg karşılığına çevrilir. Paneldeki tablonun satır yoğunluğu ayrıca gridSize ile ayarlanır (varsayılan md).

Uzak veri ve görünen metin

dataSource olarak { loadUrl, token? } nesnesi verildiğinde bileşen bir DevExtreme ASP.NET store'u kurar; anahtar alanı keyExpr'den alınır, token verilirse isteklere Authorization: Bearer başlığı eklenir. remoteOperations sayfalama, filtreleme ve sıralamayı sunucuya bırakır.

Kayıtlı bir değeri gösterirken displayValue ile görünen metni hazır verebilirsiniz; kutu bu durumda yalnızca metni çözmek için sunucuya istek atmaz. Panel açıldığında tablo yine uzak kaynaktan yüklenir.

<LivaDropdownBox
  label="Personel"
  dataSource={{ loadUrl: "/api/personel", token }}
  remoteOperations
  value={kayit.personelId}
  displayValue={kayit.personelAdi}
  columns={[
    { dataField: "name", caption: "Ad" },
    { dataField: "department", caption: "Departman" },
  ]}
/>

• StoreDataSourceConfig: { loadUrl: string; token?: string; ... } — bkz. Uzak veri ve görünen metin.
• scrollingMode="infinite" panelde virtual olarak uygulanır.
• onSelectionChanged en az bir kayıt seçiliyken tetiklenir ve { value, displayValue, selectedItem } taşır; çoklu seçimde displayValue virgülle birleştirilmiş metindir. onOptionSelect yalnızca tekli seçimde tetiklenir.
• renderOptions iç DataGrid / TreeList'e olduğu gibi aktarılır. onSelectionChanged bileşenin kendisine ait olduğu için ezilemez; onInitialized verilirse bileşeninkinden sonra çağrılır.
• labelWidth yalnızca labelPosition 'start' ya da 'end' iken uygulanır; hint etiketin altında gösterildiği için label ile birlikte kullanılır.

Ayrıca DevExtreme IDropDownBoxOptions'tan gelen tüm prop'lar kullanılabilir (ör. placeholder, width, disabled). placeholder verilmezse 'Select...' gösterilir; temizleme düğmesi (showClearButton) her zaman açıktır.