다음을 통해 공유

DataGrid 웹 서버 컨트롤 소개

  • 아티클

DataGrid 웹 서버 컨트롤은 표 형식의 레이아웃에 데이터를 표시합니다. DataGrid는 기본적으로 데이터를 읽기 전용 모드로 표시하지만 런타임에 편집 가능한 컨트롤에 자동으로 데이터를 표시할 수도 있습니다. DataGrid 컨트롤을 사용할 경우, 속성 작성기 대화 상자를 통해 선택, 편집, 업데이트 및 취소 단추와 프로그래밍 구조를 만들 수 있습니다. DataGrid는 페이징 기능도 지원합니다. 이 컨트롤의 사용자 지정 탐색 기능을 사용하여 클라이언트 브라우저로 전송하는 데이터의 양을 제어함으로써 성능을 향상시킬 수도 있습니다.

**참고   **목록에서 렌더링하는 HTML을 완전히 제어하려면 Repeater 웹 서버 컨트롤을 사용하고 표 형식이 아닌 레이아웃으로 데이터를 표시하려면 DataList 컨트롤을 사용하십시오. 자세한 내용은 웹 페이지에 목록을 표시하기 위한 컨트롤을 참조하십시오.

다음 단원들에서는 DataGrid 컨트롤의 기능을 소개합니다.

컨트롤에 데이터 바인딩

DataGrid 웹 서버 컨트롤은 DataSource 속성을 통해 데이터 소스에 바인딩해야 하며 그렇지 않으면 페이지에서 렌더링되지 않습니다. DataGrid의 일반적인 데이터 소스는 DataSet과 데이터 판독기입니다. 도구 상자에서 DataSet 또는 DataView 클래스 같은 데이터 소스를 사용하거나, 코드에서 데이터 판독기나 배열 등과 같은 데이터 소스에 바인딩할 수도 있습니다. 이 컨트롤은 IEnumerable 인터페이스를 지원하는 모든 클래스를 데이터 소스로 사용할 수 있습니다.

데이터를 바인딩할 때에는 DataGrid 컨트롤 전체에 대한 데이터 소스를 지정합니다. 데이터 소스의 각 행에 해당하는 항목은 모눈의 한 행에 이 표시됩니다. DataGrid 컨트롤에서는 기본적으로 데이터 소스의 각 필드에 대해 바인딩된 열을 생성하지만 모눈에 열을 생성할 특정 필드를 데이터 소스에서 직접 선택할 수도 있습니다. 데이터 바인딩에 대한 자세한 내용은 Web Forms 페이지의 데이터 액세스 소개를 참조하십시오.

웹 페이지가 실행될 때 코드에서는 컨트롤의 DataBind 메서드를 호출하여 모눈에 데이터를 로드해야 합니다. 이벤트 처리기 등에서 데이터가 변경될 경우에는 모눈을 새로 고치기 위해 메서드를 다시 호출합니다.

데이터 바인딩 작업의 일부로 DataKeyField 속성을 지정할 수 있습니다. 이 속성을 사용하면 모눈에서 각 항목을 고유하게 식별하는 정보를 지정할 수 있습니다. 이러한 정보는 모눈에 표시되는 정보의 일부일 필요가 없으며, 데이터 소스의 필드 이름(예: 기본 키)으로 구성될 수 있습니다. 이 정보를 사용하여 데이터 소스의 특정 항목을 업데이트할 수 있습니다. 예를 들어, DataKeyField를 customerId로 설정한 경우 나중에 customerID=DataGrid1.DataKeys[DataGrid1.SelectedIndex]에서 레코드를 업데이트할 수 있습니다.

다른 서버 컨트롤과 마찬가지로 DataGrid 컨트롤의 데이터 바인딩 역시 단방향(읽기 전용)입니다. 모눈에서 사용자가 데이터를 편집할 수 있도록 하려면 데이터 소스를 업데이트하는 코드를 직접 작성해야 합니다. 데이터 소스를 업데이트한 후에는 데이터를 다시 데이터 소스에 바인딩합니다. 업데이트 논리에서는 키 값을 사용하여 올바른 레코드를 찾는 데 일반적으로 DataKeyField를 이용합니다.

DataGrid 컨트롤을 사용하여 데이터를 업데이트하는 방법에 대한 자세한 내용은 아래의 "항목 편집"을 참조하십시오. 서버 컨트롤에서의 데이터 바인딩에 대한 일반적인 내용은 Web Forms 페이지의 데이터 액세스를 참조하십시오.

항목 서식

속성 작성기 대화 상자의 서식 탭을 사용하여 DataGrid 행의 레이아웃을 제어합니다. 이 탭에 있는 설정을 사용하여 행의 색, 글꼴 및 맞춤을 지정할 수 있습니다. 행에 대한 실제 컨트롤, 텍스트 및 데이터 내용은 속성 작성기의 열 탭에서 지정합니다. 다음 항목을 구성할 수 있습니다.

  • DataGrid   이 설정은 전체 모눈에 적용되며, 다른 항목 서식에서 이 설정을 재정의합니다.
  • 머리글   머리글은 DataGrid에서 맨 위쪽에 있는 행으로서, 데이터 소스의 행 데이터를 표시하지 않습니다. 속성 작성기의 일반 탭에서 머리글 행의 표시 여부를 지정해야 합니다. 머리글 행은 기본적으로 표시됩니다.
  • 바닥글   바닥글은 DataGrid에서 맨 아래쪽에 있는 행으로서, 데이터 소스의 행 데이터를 표시하지 않습니다. 속성 작성기의 일반 탭에서 바닥글 행의 표시 여부를 지정해야 합니다. 바닥글 행은 기본적으로 표시되지 않습니다.
  • Pager   DataGrid의 페이징 기능을 통해 데이터 소스의 몇 행씩만 한 번에 표시하려는 경우, 이 항목을 사용하여 페이징 컨트롤의 모양을 제어할 수 있습니다.
  • 항목   다음 네 개의 항목은 데이터 행이 나타나는 모양을 지정합니다.
    • 일반 항목   다른 항목에서 재정의하지 않을 경우 이 서식은 테이블의 모든 데이터 행에 적용됩니다.
    • 대체 항목   이 서식은 컨트롤의 대체 항목에 적용됩니다.
    • 선택한 항목   이 서식은 컨트롤에서 선택한 항목에 적용됩니다.
    • 편집 모드 항목   이 서식은 편집 중인 항목에 적용됩니다.
  • 열   이 항목을 사용하면 속성 작성기의 열 탭에서 만드는 열의 서식을 지정할 수 있습니다.

항목 서식을 사용하는 방법에 대한 자세한 내용은 DataGrid 웹 서버 컨트롤에서 모눈 항목 서식 지정 및 DataGrid 웹 서버 컨트롤에서 페이징 동작 지정을 참조하십시오.

열

DataGrid 컨트롤을 사용할 때는 컨트롤에 표시되는 열을 다양한 방법으로 지정할 수 있습니다. 기본적으로 열은 데이터 소스의 필드를 바탕으로 자동 생성됩니다. 그러나 열의 내용과 레이아웃을 좀 더 세부적으로 제어하기 위해 다음과 같은 형식의 열을 정의할 수 있습니다.

열 형식 설명
바인딩된 열 표시할 데이터 소스 필드를 지정하고, .NET 서식 지정 식을 사용하여 그 필드의 서식을 지정할 수 있습니다. 자세한 내용은 DataGrid 웹 서버 컨트롤에 바인딩된 열 추가를 참조하십시오.
하이퍼링크 열 정보를 하이퍼링크로 표시합니다. 일반적으로 사용자가 클릭하여 해당 항목에 대한 자세한 내용이 있는 별도의 페이지로 이동할 수 있도록 데이터(예: 고객 번호나 제품 이름)를 하이퍼링크로 표시할 때 사용합니다. 자세한 내용은 DataGrid 웹 서버 컨트롤에 하이퍼링크 열 추가를 참조하십시오.
단추 열 모눈의 각 항목에 단추를 추가하고 그 단추를 위한 사용자 지정 기능을 정의할 수 있습니다. 예를 들어, 사용자가 클릭할 경우 사용자 지정 논리를 실행하는 "장바구니에 추가" 단추를 만들 수 있습니다. 선택, 편집, 업데이트, 취소 및 삭제 기능을 수행하는 미리 정의된 단추를 추가할 수도 있습니다. 자세한 내용은 DataGrid 웹 서버 컨트롤에 단추 열 추가를 참조하십시오.
편집, 업데이트 및 취소 열 내부 편집 기능을 만들 수 있습니다. 자세한 내용은 아래의 "항목 편집"을 참조하십시오.
템플릿 열 서버 컨트롤과 HTML 텍스트를 조합하여 열에 대한 사용자 지정 레이아웃을 디자인할 수 있습니다. 템플릿 열 내의 컨트롤을 데이터에 바인딩할 수 있습니다. 템플릿 열을 이용하면 데이터가 표시되는 방법 및 사용자가 모눈의 행과 상호 작용할 때 수행될 동작을 완전히 제어할 수 있으므로 모눈 내용의 레이아웃과 기능을 융통성 있게 정의할 수 있습니다. 자세한 내용은 DataGrid 웹 서버 컨트롤에 템플릿 열 추가를 참조하십시오.

열에 대한 자세한 내용은 DataGrid 열을 참조하십시오.

이벤트

DataGrid 컨트롤은 여러 가지의 이벤트를 지원합니다. 그 중 하나인 ItemCreated 이벤트를 사용하면 항목 생성 프로세스를 사용자 지정할 수 있습니다. ItemDataBound 이벤트 역시 DataGrid 컨트롤을 사용자 지정하는 데 유용하지만 데이터를 검사할 수 있게 된 후에만 사용할 수 있습니다. 예를 들어, DataGrid 컨트롤을 사용하여 작업 목록을 표시하는 경우 완료되지 않은 항목은 빨강 텍스트로, 완료된 항목은 검정 텍스트로, 기타 작업은 녹색 텍스트로 표시할 수 있습니다.

나머지 이벤트들은 모눈 항목에서 단추나 LinkButton을 클릭할 때 그에 대한 응답으로 발생합니다. 이 이벤트들은 일반적인 데이터 조작 작업을 구현하는 데 유용합니다. 이런 형식의 이벤트로 다음 네 가지가 지원됩니다.

  • EditCommand
  • DeleteCommand
  • UpdateCommand
  • CancelCommand

런타임에 이러한 이벤트를 발생시키는 데 필요한 단추를 DataGrid 컨트롤에 대한 속성 작성기 대화 상자에서 만듭니다. 기본 레이블이 각각 편집, 삭제, 업데이트 또는 취소인 이들 단추 중 하나를 사용자가 클릭하면 해당 이벤트가 발생합니다.

DataGrid 컨트롤에서는 위와 같은 미리 정의된 단추 이외의 단추를 사용자가 클릭할 때 발생하는 ItemCommand 이벤트도 지원합니다. 단추의 CommandName 속성을 원하는 값으로 설정한 다음 ItemCommand 이벤트 처리기에서 테스트하는 방식으로 사용자 지정 기능을 위해 이 이벤트를 사용할 수 있습니다. 예를 들어, DataList 웹 서버 컨트롤에서 항목 선택 허용에서 설명한 것처럼 항목을 선택할 때 이 방법을 사용할 수 있습니다.

DataGrid 컨트롤에서 지원하는 이벤트의 전체 목록을 보려면 DataList 이벤트를 참조하십시오. 이벤트에 대한 자세한 내용은 ASP.NET 서버 컨트롤 이벤트 모델을 참조하십시오. DataGrid에서 이러한 이벤트를 지원하는 방법에 대한 자세한 내용은 사용자가 DataGrid 웹 서버 컨트롤의 항목을 선택하도록 허용, 사용자가 DataGrid 웹 서버 컨트롤의 항목을 편집하도록 허용 및 사용자가 DataGrid 웹 서버 컨트롤의 항목을 삭제하도록 허용을 참조하십시오.

항목 편집

사용자가 모눈 항목에서 개별 행의 내용을 편집할 수 있도록 할 수 있습니다. 다음 두 가지 방법을 사용합니다.

  • 내부 편집을 허용합니다. 이 방법을 사용하면 간편하게 편집 기능을 구현할 수 있습니다. 속성 작성기를 사용하여 모눈에 편집, 업데이트 및 취소 열과 같은 특수한 열을 포함시킵니다. 그러면 런타임에 열의 각 행에 "편집" 단추가 삽입됩니다. 사용자가 이 편집 단추를 클릭하면 모든 열의 현재 행이 TextBox 컨트롤을 사용하여 다시 표시됩니다. 편집 단추가 있는 열은 업데이트 단추와 취소 단추를 사용하여 다시 표시됩니다. 편집 컨트롤에서 변경한 내용을 데이터 소스로 다시 전파하는 코드를 UpdateCommand 및 CancelCommand 이벤트에 추가합니다.

    자세한 내용은 사용자가 DataGrid 웹 서버 컨트롤의 항목을 편집하도록 허용을 참조하십시오.

  • 템플릿 열을 사용하여 사용자 지정 편집 레이아웃을 작성합니다. 편집 가능한 컨트롤에 데이터를 표시하는 열을 만들 수 있습니다. 이 방법을 사용하면 편집 가능한 열 및 사용자가 데이터를 편집하는 데 사용할 방법을 선택할 수 있습니다. 예를 들어, 참 또는 거짓을 나타내는 데이터에 대해서는 TextBox 컨트롤 대신 "True" 및 "False" 엔트리가 있는 ListBox 컨트롤을 사용할 수 있습니다. 템플릿 열을 사용하면 DataGrid 셀에 두 개 이상의 컨트롤을 삽입할 수 있습니다.

    템플릿 열은 다음 네 개의 템플릿을 지원합니다.

    • HeaderTemplate
    • ItemTemplate
    • EditItemTemplate
    • FooterTemplate

    자세한 내용은 사용자가 DataGrid 웹 서버 컨트롤의 항목을 편집하도록 허용 및 사용자가 DataGrid 웹 서버 컨트롤의 항목을 삭제하도록 허용을 참조하십시오.

정렬

DataGrid 웹 서버 컨트롤을 사용하면 모눈에 정렬 기능을 추가할 수 있습니다. 모눈에서는 정렬 기능을 직접 지원하지 않습니다. 즉, 모눈의 내용이 자동으로 정렬되지는 않습니다. 대신 사용자가 클릭하여 정렬을 수행할 수 있는 열 제목의 하이퍼링크 같은 정렬 옵션을 모눈에 추가할 수는 있습니다. 그리고 나면 사용자가 정렬을 요청할 때 모눈에서 이를 알려 줍니다. 그런 다음 데이터 소스를 정렬하여 DataGrid에 다시 바인딩합니다.

DataGrid 컨트롤에서는 다음과 같은 두 가지 수준의 정렬 기능을 제공합니다.

  • 기본 정렬   모눈에서 정렬을 지원하도록 지정합니다. 열 머리글은 모두 링크 단추이며, 사용자가 그 중 하나를 클릭하면 정렬 요청이 전달됩니다. 이 솔루션은 간편하지만 정렬을 지원할 열을 선택할 수 없고 모든 열에서 정렬을 지원합니다.
  • 사용자 지정 정렬   정렬을 지원할 열을 정의합니다. 이 방법을 사용하려면 바인딩된 열이나 템플릿 열을 사용하여 열을 정의해야 하므로 좀 더 복잡하지만, 정렬할 열을 지정할 수 있을 뿐 아니라 열 머리글에서 정렬 단추로 아무 컨트롤이나 사용할 수 있습니다. 예를 들어, ImageButton 웹 서버 컨트롤을 사용하여 직접 만든 그래픽을 사용할 수도 있습니다.

자세한 내용은 DataGrid 웹 서버 컨트롤에 정렬 추가를 참조하십시오.

참고 항목

DataGrid 웹 서버 컨트롤 | Web Forms 페이지에 DataGrid 웹 서버 컨트롤 추가 | DataGrid 클래스