использование радиокнопок в элементе управления gridview - PullRequest
2 голосов
/ 08 июля 2011

У меня есть элемент управления gridview, в котором данные отображаются с помощью хранимой процедуры. сетка имеет три столбца, первый из которых содержит радиокнопки. общая идея заключается в том, что пользователь должен иметь возможность выбрать только одну радиокнопку из (в моем случае) 5 радиокнопок.

Проблема в данной функциональности заключается в том, что я могу выбрать все радиокнопки одновременно. Я попытался сгруппировать радиокнопки, используя свойство 'groupname'. Это не сработало.

Как я могу это исправить?

Вот элемент управления gridview

<asp:GridView UseAccessibleHeader="true" ID="GridView1" CssClass="top" EmptyDataText="" HeaderStyle-CssClass="griditem_heading" HeaderStyle-BackColor="" runat="server" AllowSorting="True" AutoGenerateColumns="False" CellPadding="0" Width="100%">
<EmptyDataRowStyle />
<EmptyDataTemplate>
    <table cellspacing="0" cellpadding="0" border="0" id="dgd_Clinic_empty" width="100%">
        <tr>
            <td valign="Middle" align="Center" bgcolor="#cce57f" class="griditem_1">
                <span class="smalltableheading">&nbsp;&nbsp;&nbsp;</span>
            </td>
            <td valign="Middle" align="Center" bgcolor="#cce57f" class="griditem_1">
                <span class="smalltableheading">Clinic Name</span>
            </td>

            <td valign="Middle" align="Center" bgcolor="#cce57f" class="griditem_1">
                <span class="smalltableheading">Open</span>
            </td>
      </tr>
        <tr>
            <td colspan="8" align="Center">
                <span class="Content"><b>No matching records were found.</b></span>
            </td>
        </tr>
    </table>
</EmptyDataTemplate>
<Columns>
    <asp:TemplateField HeaderText="" HeaderStyle-CssClass="griditem_heading" ItemStyle-CssClass="griditem_1"
        HeaderStyle-HorizontalAlign="Center" HeaderStyle-VerticalAlign="Middle" SortExpression=""
        Visible="True" ItemStyle-VerticalAlign="Middle" ItemStyle-HorizontalAlign="Center">
        <ItemTemplate>
        <asp:Label for="rad1_1" ID="rad1_1" runat="server" Visible="false"> </asp:Label>                
            <asp:RadioButton ID="rdoClinicId" runat="server"  />                                  
         </ItemTemplate>                
    </asp:TemplateField>       
        <asp:TemplateField HeaderText="Clinic Name" HeaderStyle-CssClass="griditem_heading"
        ItemStyle-CssClass="griditem_1" HeaderStyle-HorizontalAlign="Center" HeaderStyle-VerticalAlign="Middle"
        SortExpression="clinic_name" Visible="True" ItemStyle-VerticalAlign="Middle" ItemStyle-HorizontalAlign="Center">
        <ItemTemplate>
            <asp:Label ID="lbl_Grd_Clinic_Name" runat="Server" Text="" ToolTip="" Width="" Height=""
                Style="" />                 
        </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Open" HeaderStyle-CssClass="griditem_heading"
        ItemStyle-CssClass="griditem_1" HeaderStyle-HorizontalAlign="Center" HeaderStyle-VerticalAlign="Middle"
        SortExpression="Open" Visible="True" ItemStyle-VerticalAlign="Middle"
        ItemStyle-HorizontalAlign="Center">
        <ItemTemplate>
              <asp:Label ID="lbl_Grd_Open" runat="Server" Text="" ToolTip="" Width="" Height="" Style="" />                    
        </ItemTemplate>
    </asp:TemplateField>

</Columns>
</asp:GridView>

Ответы [ 4 ]

5 голосов
/ 10 июля 2011

Поскольку сетка отображается как элемент таблицы, во время выполнения она будет назначать разные "имена" для каждой радиокнопки , давая, что GroupName не будет работать.

Но вызывая функцию JavaScript для проверки переключателя, чтобы выбрать по одному переключателю за раз вместо присвоения одного и того же GroupName для нескольких переключателей вне вида сетки.

Функция javascript устанавливает строку текущего стиля выбранной радиокнопки, чтобы определить, какая строка выбрана, и затем переключается между радиокнопками в виде сетки, а затем отменяет выбор предыдущей выбранной радиокнопки и устанавливает стиль строки обратно на по умолчанию.

См. Код ниже,

секция JavaScript,

 <script language="javascript" type="text/javascript">
    function CheckOtherIsCheckedByGVID(rb) {
           var isChecked = rb.checked;
           var row = rb.parentNode.parentNode;

           var currentRdbID = rb.id;
           parent = document.getElementById("<%= GridView1.ClientID %>");
           var items = parent.getElementsByTagName('input');

           for (i = 0; i < items.length; i++) {
           if (items[i].id != currentRdbID && items[i].type == "radio") {
           if (items[i].checked) {
                items[i].checked = false;                   
            }
        }
     }
   }
</script>

секция Aspx,

     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:TemplateField>
               <ItemTemplate>                          
                    <asp:RadioButton runat="server" ID="RadioButton1" onclick="javascript:CheckOtherIsCheckedByGVID(this);">
                    </asp:RadioButton>
               </ItemTemplate>
            </asp:TemplateField>                
        </Columns>
    </asp:GridView>

ПРИМЕЧАНИЕ: используемый здесь онклик является свойством html и будет отображаться в свойстве intellisense Visual Studio. Так что просто введите это, как указано в моем коде.

Я проверил это и отлично работал для меня.

Надеюсь, это сработает для вас ..

2 голосов
/ 08 июля 2011

Как уже упоминалось, установка GroupName в GridView не работает.Когда HTML генерируется для GridView, всем радиокнопкам присваиваются разные имена на основе GridView.Вот ссылка , которая может вам помочь:

Они используют множество методов для выполнения именно того, что вы просите.Я также попытался настроить ClientIDMode на статическое мышление, которое сохранит имена, но это тоже не сработало.

Надеюсь, эта ссылка поможет.

0 голосов
/ 01 ноября 2013

Ответ Харуна очень хорош: просто отметьте остальные.

Я делаю это с использованием класса и JQuery:

function removeotherrb(rb) {
        var items = $('.QaWs2');
        for (i = 0; i < items.length; i++) {
            var c1 = items[i].firstChild; 

           c1.checked = false;
       }
       rb.checked = true;            
   }

Обратите внимание, что сначала я проверяю OFF Все, а затем снова включаю выбранный. Обратите внимание, что когда установлен класс cssclass, создается диапазон с этим классом, поэтому вы должны нацеливаться на firstchild; HTML отображается следующим образом:

<span class="QaWs2">
<input id="ctl00_PageSectionPH_GVCol_ctl04_RB2" type="radio"     onclick="removeotherrb(this);" value="RB2" name="ctl00$PageSectionPH$GVCol$ctl04$Y"><input>
</span>
0 голосов
/ 08 июля 2011

У меня есть блог об этом ЗДЕСЬ .

Заканчивается в виде:

enter image description here

Часть, которая заставляет его работать:

<asp:TemplateField HeaderText="Best">
     <ItemTemplate>
          <input id="RBBest" type="radio" name="RBBest" value="{0}" />
     </ItemTemplate>
     <ItemStyle HorizontalAlign="Center" />
 </asp:TemplateField>

Обратите внимание, что это HTML внутри ItemTemplate, а не разметка ASP.Net. Получаем выбранный индекс используя:

Request.Form["RBBest"]

чтобы получить текст во втором столбце в примере, который я использую:

ViewState["selectedBest"] = 
     this.GridView1.Rows[Convert.ToInt32(Request.Form["RBBest"])].Cells[1].Text;

Возвращает текст «SQL Server» в примере.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...