BANANA.Web.Controls.FixedGrid

FixedGrid는 엑셀과 같이 틀고정을 지원하는 그리드입니다.
CompositeDataBound 컨트롤로 구성되어 있으며, 웹 개발에 최적화된 성능을 제공합니다.
최소한의 ViewState로 성능 향상에 심혈을 기울였습니다.
뿐만 아니라, 간단명료한 개발자 인터페이스와 깔끔한 유저 인터페이스를 지원합니다.
군더더기를 쫙 빼고, 꼭 필요한 기능만 구현함으로써 렌더링 속도를 향상 시키는데 주력 하였습니다.
아래 FixedGrid의 속성을 한 번 살펴 보겠습니다.

Properties
Name Type Description
AllowPaging bool
(default: false)		 FixedGrid에서 페이징 컨트롤을 사용할지 여부를 가져오거나 저장할 수 있습니다.
아래는 페이징 컨트롤을 사용하는 화면입니다.
FixedGrid 페이저
좌측 하단에는 전체 레코드 건수가 나타납니다.
우측 하단에는 사용자가 한 페이지당 몇 건씩 출력할 것인지를 결정할 수 있는 페이지 사이트 컨트롤이 있습니다.
페이지 사이즈는 PageSize 속성을 이용해서 수정할 수 있습니다.
중앙에는 페이징 컨트롤이 출력됩니다.

아래는 페이징 컨트롤을 사용하지 않는 화면입니다.
FixedGrid 페이징 컨트롤 미사용
하단에 아무 컨트롤도 출력되지 않습니다만, ShowRowNumber 속성을 이용하신다면, 각 행별로 번호를 매길 수 있습니다.
이 순번은 역순으로 출력됩니다.
주의하실 점은 페이징이 처리되지 않기 때문에, 모든 데이터가 한 꺼번에 출력됩니다.
CellHeight Unit FixedGrid 셀의 높이를 가져오거나 저장할 수 있습니다.
컬럼에 BoundDataField 및 HyperLinkField 외에 필드가 추가되면 최소 높이가 26px로 지정됩니다.
Color Even
Header
Highlight
Odd
Pager
Top		 각 행의 성격에 따라서, 배경색을 변경할 수 있습니다.
Even: 짝수행의 배경색을 가져오거나 저장합니다.
Header: 헤더행의 배경색을 가져오거나 저장합니다.
Highlight: 마우스로 클릭하여 선택한 행의 배경색을 가져오거나 저장합니다.
Odd: 홀수행의 배경색을 가져오거나 저장합니다.
Pager: 페이저 컨트롤의 배경색을 가져오거나 저장합니다.
Top: FixedGrid 최상단 2px짜리 보더의 색을 가져오거나 저장합니다.
Columns FixedGrid에 컬럼 형식으로 사용할 수 있는 필드 collection입니다.
디자인 뷰를 지원하므로, 필요한 필드를 클릭하여 추가할 수 있습니다.
FixedGrid에서 기본적으로 제공하는 필드들은 다음과 같습니다.
BoundDataField, TextBoxField, HyperLinkField, LinkButtonField, CheckBoxField, DropDownListField, RadioButtonField, DatePickerField, CodeHelperField 및 TemplateField가 있습니다.
각각의 필드 속성에 대해서는 아래 링크에서 상세히 제공하겠습니다.
FixedGrid 필드 바로가기
FixedColumn integer
(default: -1)		 고정할 컬럼의 인덱스 번호를 가져오거나 저장합니다.
기본값은 -1입니다.
-1로 저장될 경우에 컬럼 고정을 처리하지 않습니다.
컬럼이 고정되면, 헤더도 같이 고정 처리가 됩니다.
고정 처리할 수 있는 컬럼들은 BoundDataField, HyperLinkField입니다.
입력이나 postback을 유발하는 사용자 컨트롤들을 포함하는 필드들은 고정 처리될 수 없습니다.
Height Unit FixedGrid의 높이를 가져오거나 저장합니다.
높이가 지정되면, 컬럼 높이의 합계가 FixedGrid 높이를 초과할 때 세로 스크롤이 자동으로 생깁니다.
PageSize string 페이징 처리를 할 경우, 우측 하단의 페이지 사이즈를 가져오거나 저장할 수 있습니다.
페이지 사이즈는 숫자로만 처리가 가능하며, 본 속성에는 각각의 숫자들을 콤마(,)로 구분하여 입력해 주시기 바랍니다.
ShowHeader bool
(default: true)		 헤더행을 출력할지 여부를 가져오거나 저장할 수 있습니다.
FixedGrid 헤더
ShowRowNumber bool
(default: false)		 좌측의 순번 컬럼을 출력할지 여부를 가져오거나 저장할 수 있습니다.
FixedGrid 순번 컬럼
Width Unit FixedGrid의 넓이를 가져오거나 저장합니다.
넓이가 지정되면, 컬럼 넓이의 합계가 FixedGrid 넓이를 초과할 때 가로 스크롤이 자동으로 생깁니다.
Properties 선택 화면 FixedGrid의 Properties

Events
Name Description
ItemCommand LinkButtonField, DropDownListField, RadioButtonField 및 TemplateField가 있는 컬럼에서 ItemCommand 이벤트가 일어나면 발생하는 이벤트입니다.
FixedGrid에서 기본적으로 제공하는 LinkButtonField, DropDownListField, RadioButtonField들은 각각의 개체들이 클릭되었을 때 발생합니다.
TemplateField에서는 LinkButton, Button 등 CommandArguments를 가지는 컨트롤이 클릭되었을 때 발생합니다.
한 번 코드를 살펴 보실까요? 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs"
	Inherits="BANANA.Web.Framework.Test.jmson.Grid.WebForm2" %>

<%@ Register Assembly="BANANA.Web.Controls" Namespace="BANANA.Web.Controls" TagPrefix="bnn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
</head>
<body>
	<form id="form1" runat="server">
	<bnn:FixedGrid ID="FixedGrid1" runat="server" OnItemCommand="FixedGrid1_ItemCommand">
		<Columns>
			<bnn:TemplateField Width="200px" HeaderText="Telephone">
				<ItemTemplate>
					<asp:LinkButton ID="LinkButton5" runat="server" Text="LinkButton"
						CommandName="Modify" CommandArgument='<%# Eval("Phone") %>' />
					<asp:Button ID="Button1" runat="server" Text='<%# Eval("Phone") %>'
						CommandName="Delete" CommandArgument='<%# Eval("Phone") %>' />
				</ItemTemplate>
			</bnn:TemplateField>
			<bnn:LinkButtonField DataTextField="sex_nm" HeaderText="Sex" />
		</Columns>
	</bnn:FixedGrid>
	</form>
</body>
</html>

아래는 비하인드 코드입니다.

protected void FixedGrid1_ItemCommand(object sender
	, Controls.FixedGridItemCommandEventArgs e)
{
	// ItemCommand가 발생한 Row를 가져옵니다.
	BANANA.Web.Controls.TableRow _row = e.CurrentRow;
			
	//  ItemCommand가 발생한 Row의 Index번호를 가져옵니다.
	int abc = _row.SelectedRowIndex;
			
	// 명령을 실행한 컨트롤을 object 형식으로 가져옵니다.
	object commandSrce = e.CommandSource;
			
	// 명령을 실행한 컨트롤의 CommandName을 가져옵니다.
	// 이 샘플에서는 "Modify" 혹은 "Delete"를 가져옵니다.
	// 단, FixedGrid의 기본 필드 형식들은 모두 "ItemCommand"를 반환합니다.
	string commandName = e.CommandName;
			
	// 명령을 실행한 컨트롤의 CommandArgument를 가져옵니다.
	string commandArgs = e.CommandArgument.ToString();
			
	// ItemCommand가 발생한 Row의 1번째 컬럼의 값을 반환합니다.
	// 단, TemplateField는 null을 반환합니다.
	object odd = _row.Cells[1].Value;
}
RowDataBound FixedGrid에 데이터가 바인딩 되면 Row별로 데이터 바운드 이벤트를 발생시킬 수 있습니다.
아래 코드를 한 번 살펴 보시죠. 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs"
	Inherits="BANANA.Web.Framework.Test.jmson.Grid.WebForm2" %>

<%@ Register Assembly="BANANA.Web.Controls" Namespace="BANANA.Web.Controls" TagPrefix="bnn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
</head>
<body>
	<form id="form1" runat="server">
	<bnn:FixedGrid ID="FixedGrid1" runat="server" OnItemCommand="FixedGrid1_ItemCommand">
		<Columns>
			<bnn:TemplateField Width="200px" HeaderText="Telephone">
				<ItemTemplate>
					<asp:LinkButton ID="LinkButton5" runat="server" Text="LinkButton"
						CommandName="Modify" CommandArgument='<%# Eval("Phone") %>' />
					<asp:Button ID="Button1" runat="server" Text='<%# Eval("Phone") %>'
						CommandName="Delete" CommandArgument='<%# Eval("Phone") %>' />
				</ItemTemplate>
			</bnn:TemplateField>
			<bnn:LinkButtonField DataTextField="sex_nm" HeaderText="Sex" />
		</Columns>
	</bnn:FixedGrid>
	</form>
</body>
</html>

아래는 비하인드 코드입니다.

protected void FixedGrid1_RowDataBound(object sender
	, Controls.FixedGridRowDataBoundEventArgs e)
{
	// RowDataBound가 발생한 Row를 가져옵니다.
	BANANA.Web.Controls.TableRow row = e.CurrentRow;

	// 해당 Row의 DataRow를 가져올 수 있습니다.
	object phone = DataBinder.Eval(row.DataItem, "Phone");

	// 해당 Row에 있는 컨트롤을 ID를 통하여 찾을 수 있습니다.
	LinkButton _lmk = (LinkButton)row.FindControl("LinkButton5");
}
Event 선택 화면 FixedGrid의 Events

FixedGrid에 대한 설명을 이만 마치도록 하겠습니다.


TOP