C# & ASP.NET

데이터그리드 html 라디오 버튼 사용하기(자바스크립트 제어)

조심이 2008. 11. 18. 14:12
반응형

1.데이터 그리드에  Item Template 에 아래와 같이 사용할 라디오 버튼을 삽입한다.
  hidden 값인 selectedValeu 는 나중에 서버사이드에서 값을 가져오기 위해 사용한다.
<예>

              <asp:TemplateColumn HeaderText="체크">
                  <HeaderStyle Width="5px"></HeaderStyle>
                  <ItemTemplate>
                      ////////// 라디오 버튼 삽입 ////
                      <input id="selectedValue" type="hidden" value=""  /> 
                      <input id="radioSelect" name="radioSelect" type="radio" value="<%#DataBinder.Eval(Container.DataItem,"AAAAA")%>" onclick="RadioCheck();"/>
                                                                         
                  </ItemTemplate>
                 </asp:TemplateColumn>

2. 자바스크립트
라디오 버튼에 onclick 이벤트 RadioCheck() 구현
//라디오버튼값 셋팅 및 체크하기

function RadioCheck(){
  
   if(event.srcElement.getAttribute("type")=="radio"){   //이벤트 속성값이 라디오버튼인지 여부 판단
       
   //hidden 값에 체크된 바인딩값을 넣음
document.getElementById('selectedValue').value =  event.srcElement.value;        

var radios = document.getElementsByName('radioSelect');

//라디오 버튼 전체를 체크를 false 로   (이렇게 안하면 라디오박스가 체크되지 않거나 전체가 체그가능하게됨)  
  for(var i=0;i<radios.length;i++)
       {
        radios[i].checked=false;
       }
//선택된 라디오 버튼 체크 상태로      
event.srcElement.checked = true;
   }
}

3. C# 비하인트 코드에서 값 가져다 쓰기.
protected System.Web.UI.HtmlControls.HtmlInputHidden selectedValue;
string radioValue = selectedValue.value;

반응형