Repeater veya DataList Kontrollerinde RadioButton İle Tek Seçim

Bazen Repeater veya DataList kontrollerinde RadioButton nesnesiyle tek seçim yapma ihtiyacında olabiliriz.Mantıken RadioButton nesnesinin GrupName özelliğine isim verdikten sonra, Repeater veya DataList’te tekrarlattıktan sonra tek seçim yapabileceğini düşünürüz.Mağlesef bu şekilde istediğimiz sonuca varamıyoruz.Şimdi size bu ihtiyacın nasıl giderileceğini pratik olarak göstereceğim.Örnek olarak DataList nesnesini kullanacağım.

Şimdi varsayalım ki, bir DataList kontrolü üzerinde çalışıyorum.

        <asp:DataList ID="dlOrnek" RepeatColumns="5" runat="server" OnItemDataBound="dlOrnek_ItemDataBound">
            <ItemTemplate>
                <asp:RadioButton ID="rbOrnek" Checked="false" GroupName="rbOrnekGrup" Text="Seçin"
                    onKeyPress="return suppress(event);" runat="server" />
            </ItemTemplate>
        </asp:DataList>

Gördüğünüz gibi DataList kontrolümüzün OnItemDataBound Eventına “dlOrnek_ItemDataBound” adında bir metod bağlı.RadioButton nesnemizin ise onKeyPress özelliğinde ise “return suppress(event);” şeklinde bir JavaScript metodu tanımlanmış.Şimdi bu metodları yazalım.

    protected void dlOrnek_ItemDataBound(object sender, DataListItemEventArgs e)
    {
        if (e.Item.ItemType != ListItemType.Item && e.Item.ItemType != ListItemType.AlternatingItem)
            return;
        RadioButton rd = e.Item.FindControl("rbOrnek") as RadioButton;
        string script = "SetSingleRadioButton('" + rd.ClientID + "',this)";
        rd.Attributes.Add("onclick", script);
    }

ve JavaScript kodumuz,

    <script type="text/javascript">
        function SetSingleRadioButton(nameregex, current) {
            re = new RegExp(nameregex);
            for (i = 0; i < document.forms[0].elements.length; i++) {
                elm = document.forms[0].elements[i];
                if (elm.type == 'radio') {
                    if (elm != current) {
                        elm.checked = false;
                    }
                }
            }
            current.checked = true;
        }
    </script>

İşte işimiz bitmiştir.Artık DataList içinde saydırılan RadioButton kontrolünde tek seçim yapabiliriz.
Faydalanmanız dileğiyle,
İyi Çalışmalar…