GridView 웹 서버 컨트롤에서 사용자 지정 열 만들기

Visual Studio 2010

업데이트: 2007년 11월

GridView 컨트롤은 데이터 소스가 제공하는 필드에서 자동으로 열을 생성할 수 있습니다. 또한 열을 자동으로 생성하지 않고 표시할 열 컬렉션을 직접 만들 수도 있습니다. 그러나 개별 열의 표시 방식을 사용자 지정해야 할 경우가 발생할 수 있습니다. 이런 경우에는 TemplateField를 만들어 사용자 지정 열 레이아웃을 지정하면 됩니다.

TemplateField 개체를 사용하면 GridView 컨트롤에서 열의 레이아웃과 동작을 사용자 지정할 태그와 컨트롤이 포함된 템플릿을 지정할 수 있습니다. ItemTemplate을 사용하면 GridView의 열에 데이터가 표시되는 경우 사용할 레이아웃을 지정할 수 있습니다. 사용자가 열의 데이터를 편집할 때 필요한 사용자 지정 레이아웃을 지정하려면 EditItemTemplate을 만들면 됩니다.

템플릿에는 태그, 웹 서버 컨트롤 및 명령 단추가 포함될 수 있습니다. 템플릿에 대한 자세한 내용은 ASP.NET 웹 서버 컨트롤 템플릿을 참조하십시오.

템플릿에서 EvalBind 메서드를 사용하여 컨트롤을 데이터에 바인딩할 수 있습니다. 컨트롤에 값을 표시만 할 경우에는 Eval 메서드를 사용합니다. 사용자가 데이터 값을 수정할 수 있는 경우, 즉 데이터 업데이트 시나리오의 경우에는 Bind 메서드를 사용합니다. 모든 템플릿에서 Eval 메서드를 사용하여 데이터를 표시할 수 있고, Bind 메서드는 TextBoxCheckBox 컨트롤처럼 사용자가 값을 변경할 수 있는 컨트롤이 포함된 템플릿 또는 레코드를 삭제할 수 있는 템플릿에서 사용됩니다. 자세한 내용은 데이터 바인딩 식 개요을 참조하십시오.

다음 예제에서는 GridView 컨트롤의 Columns 컬렉션을 보여 줍니다. 이 컬렉션에는 ItemTemplate 개체가 포함된 TemplateField 개체가 들어 있습니다. ItemTemplate에는 날짜를 표시할 수 있도록 Eval 메서드를 사용하는 Label 컨트롤이 포함되어 있습니다. 다른 템플릿에서는 날짜를 편집할 수 있도록 Bind 메서드를 사용하는 Calendar 컨트롤을 사용합니다.

<Columns>                  
  <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" ReadOnly="true"/>                    
  <asp:BoundField DataField="FirstName"  HeaderText="First Name"/>
  <asp:BoundField DataField="LastName"   HeaderText="Last Name"/>                    
  <asp:TemplateField HeaderText="Birth Date">
    <ItemTemplate> 
      <asp:Label ID="BirthDateLabel" Runat="Server" 
                 Text='<%# Eval("BirthDate", "{0:d}") %>' />
    </ItemTemplate>
    <EditItemTemplate>
      <asp:Calendar ID="EditBirthDateCalendar" Runat="Server"
                    VisibleDate='<%# Eval("BirthDate") %>'
                    SelectedDate='<%# Bind("BirthDate") %>' />
    </EditItemTemplate>
  </asp:TemplateField> 
  <asp:HyperLinkField Text="Show Detail"
                      DataNavigateUrlFormatString="~/ShowEmployeeDetail.aspx?EmployeeID={0}"
                      DataNavigateUrlFields="EmployeeID" />                   
</Columns> 


표시: