Adım Adım: Devextreme Radyo Grubu Seçilen Seçeneği Nasıl Ayarlama

Yayınlanan: 2025-08-20

DevexPress tarafından DEVEXTREME, web uygulamaları için kullanıma hazır kullanıcı arayüzü bileşenleriyle dolu bir kütüphanedir. Angular, React, Vue ve hatta jQuery ile çalışır. Popüler widget'larından biri, kullanıcıların bir listeden bir seçenek seçmesini sağlayan Radiogroup'tur .

Formlarda, ayar sayfalarında veya gösterge panolarında Radiogroup, kullanıcıların yalnızca bir cevap seçmesine yardımcı olur. Örneğin, “Aylık Plan” ve “Yıllık Plan” arasında seçim yapmalarına izin verebilirsiniz. Uygulamanın pürüzsüz hissetmesini sağlamak için, geliştiriciler genellikle varsayılan bir seçim ayarlamak veya bir değer önceden seçmek ister. Radiogroup'daki değer özelliği devreye giriyor.

Devextreme radyogroup nedir?

Radiogroup'ta Varsayılan Seçilen Değer ayarlayın

Radiogrup widget'ı basit ama güçlü bir giriş kontrolüdür. Bir veri kaynağı alır (bir dizi veya JSON listesi gibi) ve her öğe için radyo düğmelerini gösterir. Daha sonra kullanıcılar birini seçmek için tıklayabilir. Birden çok öğenin seçilebileceği bir onay kutusu grubunun aksine, Radiogroup bir seferde yalnızca tek bir seçime izin verir.

Geliştiriciler genellikle iki şeyi önemsiyor: seçilen öğenin ne olduğu ve nasıl doğru ayarlanacağı. Widget, mevcut seçimi değer özelliği üzerinden izler. Bu özelliği değiştirdiğinizde, seçilen öğe güncellemeleri. Bu, widget aynı API'yi takip ettiğinden, tüm çerçevelerde (Angular, React, Vue ve JQuery) çalışır.

Radiogroup'ta Varsayılan Seçilen Değer ayarlayın

Varsayılan seçilen bir değer ayarlaması, widget'ı başlatırken değer seçeneği aracılığıyla yapılır. DataSource'daki öğelerden biriyle eşleşen değeri geçersiniz ve bu öğe önceden seçilmiş olarak ortaya çıkar.

İşte bir JSON veri kaynağı olan düz JavaScript kullanan basit bir örnek:

$ (“#RadiogroupContainer”). Dxradiogroup ({
Öğeler: [“Temel”, “Standart”, “Premium”],
Değer: "Standart" // Varsayılan seçildi
});

Bu örnekte, sayfa yüklendiğinde “standart” seçenek zaten seçilecektir. Bu, kullanıcıları en yaygın veya önerilen seçime yönlendirmek istediğinizde kullanışlıdır.

Düz teller yerine nesnelere de bağlanabilirsiniz. Örneğin:

$ (“#RadiogroupContainer”). Dxradiogroup ({
öğeler: [
{id: 1, metin: “aylık plan”},
{id: 2, metin: “yıllık plan”}
],
Değer: 2, // varsayılan olarak “Yıllık Plan” ı seçer
ValeExpr: "Kimlik",
DisplayExpr: "Metin"
});

Burada, ValueExpr ve DisplayExpr özellikleri, widget'ın değer için hangi alanın kullanılacağını ve kullanıcıya hangi alanın gösterileceğini bilmesini sağlar.

Seçilen öğeyi programlı olarak değiştirin

Bazen radyogroup'un sadece varsayılan bir değer göstermesini istemezsiniz. Seçilen seçeneği daha sonra değiştirmeniz gerekebilir, belki kullanıcı formunuzda başka bir adımı tamamladıktan sonra veya veriler bir API'dan geri döndüğünde.

Devextreme'de bu, radyogrupun değer özelliğini güncelleyerek yapılır. Widget'ı jQuery ile oluşturduysanız, çalışma zamanında değiştirmek için option () çağırabilirsiniz.

Örnek:

var radiogroup = $ (“#RadiogroupContainer”). dxradiogroup ({
Öğeler: [“Temel”, “Standart”, “Premium”],
Değer: "Temel"
}). dxradiogroup (“örnek”);

// Seçimi programlı olarak değiştirin
Radiogroup.option (“değer”, “premium”);

(“Değer”,…) çağrı çalıştırdığında, radyogrup anında “premium” ı vurgular. Bu, açısal, reaksiyon ve vue'de de çalışır - bu çerçevelerde, genellikle değeri duruma veya bir değişkene bağlarsınız. Bu durum değiştiğinde, seçilen öğe otomatik olarak güncellenir.

Bu yaklaşım, seçimin diğer girdilere bağlı olduğu formlar için yararlıdır. Örneğin, bir kullanıcı “İşletme Hesabı” nı seçerse, radyogrupu otomatik olarak “aylık plan” yerine “yıllık plan” olarak ayarlayabilirsiniz.

Onvaluechanged olayı ele almak

Bir değer belirlemek hikayenin bir tarafıdır. Kullanıcı etkileşimini yakalamak diğeridir. Devextreme'deki onValuechanged olay, kullanıcı seçimlerini değiştirdiğinde tepki vermenizi sağlar.

İşte basit bir örnek:

$ (“#RadiogroupContainer”). Dxradiogroup ({
Öğeler: [“Temel”, “Standart”, “Premium”],
Değer: "Standart",
onvaluechanged: işlev (e) {
console.log (“seçilen öğe:” + e.value);
}
});

Kullanıcı farklı bir plan seçtiğinde, konsol yeni değeri yazdırır. Bu olay, sayfanın diğer bölümlerini güncellemek veya seçimi bir veritabanına geri göndermek istediğinizde çok önemlidir.

Çerçevelerde, bu aynı şekilde çalışır, ancak etkinlik modellerini takip eder. Örneğin React'te, durumu kullanabilir ve radyogrup değiştiğinde ateş eden bir işleyici işlevini geçebilirsiniz. Açısal veya VUE'de, doğrudan iki yönlü veri bağlanması ile bağlanabilir ve değişiklikleri izlemek için olay çıkışını kullanabilirsiniz.

Onvaluechanged'i “dinleyiciniz” olarak düşünün. Kullanıcı eylemini iş mantığınıza bağlar - farklı bir fiyat göstermek, bir düğmeyi etkinleştirmek veya ilgili alanları ayarlamak gibi. Onsuz, radyogroup yalnızca uygulamanızın geri kalanının kullanıcının ne seçtiğini bilmesini sağlamadan seçenekleri görüntüler.

Çerçeveye özgü örnekler

Devextreme birçok çerçevede çalışır ve seçilen radyogrup değerini ayarlamak neredeyse her yerde aynıdır, ancak sözdizimi biraz değişir.

1. Açısal örnek:

Açısal olarak, değeri genellikle bir bileşen özelliğine bağlarsınız.

<DX-Radio-Grup
[öğeler] = ”['temel', 'standart', 'premium']”
[(değer)] = ”seçilmiş plan”>
</dx-radio-group>

Burada, TypeScript dosyanızdaki selectedPlan hangi öğenin seçildiğini denetler. selectedPlan değiştirirseniz, radyogrup hemen güncellenir.

2. Tepki Örneği:

React, kontrollü bileşenleri kullanır, böylece seçimi durumla işlersiniz.

const [plan, setplan] = usestate (“standart”);

<Dxradiogroup
öğeler = {[“temel”, “standart”, “premium”]}
değer = {plan}
onValuechanged = {(e) => setPlan (e.Value)}
/>

Kullanıcı farklı bir plan seçtiğinde, setPlan durumu günceller ve radyogrup yeni seçimi gösterir.

3. Vue Örneği:

Vue v-model ile kolaylaştırır.

<DX-Radio-Grup
: öğeler = ”['temel', 'standart', 'premium']”
V-Model = ”SelectedPlan”>
</dx-radio-group>

Vue verilerinizdeki selectedPlan değiştirmek radyogrupu anında günceller.

4. JQuery Örneği:

JQuery basittir çünkü sadece bir örnek oluşturur ve değeri ayarlarsınız.

$ (“#RadiogroupContainer”). Dxradiogroup ({
Öğeler: [“Temel”, “Standart”, “Premium”],
Değer: "Premium"
});

Ortak sorunların giderilmesi

Basit widget'larla bile işler yanlış gidebilir. İşte geliştiricilerin karşılaştığı en yaygın sorunlar:

  • Değer Güncellememiyor: Bu genellikle ayarladığınız değer veri kaynağınızdaki valueExpr ile eşleşmediğinde olur. Örneğin, veri kaynağınız id kullanıyorsa, ancak metni ayarlamaya çalışırsanız, hiçbir şey değişmez.
  • Bir formda birden fazla radyogrup: İki widget için aynı veri bağlanmasını kullanıyorsanız, birbirlerine müdahale edebilirler. Her grup için her zaman benzersiz bağlamalar veya ayrı durum kullanın.
  • Stil veya Düzen Sorunları: Bazen radyogrup formlarının veya ızgaraların içinde görünmez. Konteynerin yeterli alana sahip olduğundan ve CSS'nin Devextreme stillerini geçersiz kılmadığından emin olun.

Bu sorunların çoğu eşleşmeyen değerlere veya eksik bağlamalara iner. value kontrol etmek, valueExpr ve dataSource genellikle bunları çözer.

Çözüm

Devextreme'deki Radiogrup Widget'ı basit ama önemli bir araçtır. Değer özelliğini , daha sonra değiştirmek için varsayılan, opsiyon (“değer”) ayarlamak için kullanırsınız ve kullanıcı eylemlerini yakalamak için onvaluechanged . Açısal, React, Vue veya JQuery'de yöntem aynıdır - değeri doğru şekilde bağlar ve çalışır.

Bir şey güncellemiyorsa, veri bağlamanızı kontrol edin ve değerin veri kaynağınızla eşleştiğinden emin olun. Doğru ayarladıktan sonra, Radiogroup kullanıcıları istediğiniz seçimi yapmaya yönlendirmenin sorunsuz bir yolu haline gelir.