adaptive

적응형 웹(다양한 화면크기와 디바이스에 맞게 레이아웃을 변경) 모드. 기본(none)

adaptiveThreshold

adaptive가 설정되어 있을 경우 레이아웃 변경을 하기 위한 breakpoint (기본값 : 480)

applyAllColumnStyle SP2

column에 정의된 스타일들을 모두 적용할지 여부(기본값은 false이며 column에 정의된 스타일 속성 중 첫번째만 적용됨)

arrowMove

셀 내부의 첫번째 혹은 마지막 문자열에서 좌우 방향키를 이용한 셀 이동 허용.

true: 이동 가능.

false (기본 값): 이동 불가.

관련 속성: moveKeyEditMode="true"인 경우에만 유효.

autoFit

gridVeiw에 정의 된 width에 맞춰 여백이 없이 가득 채워주는 기능으로 가로 스크롤이 생기지 않습니다.

allColumn은 여백을 모든 컬럼에 분배하여 조절하며 lastColumn은 마지막 컬럼을 allColumn은 모든 컬럼의 너비를 조정합니다.

autoFitMinWidth

gridView의 최소 width(px단위)를 지정하는 기능으로 autoFit속성의 값이 allColumn일 때 적용됩니다.

captionAUto

[default:false] captionTitle이 정의된 경우 captionTitle과 표의 Header Title을 조합해서 표 제목으로 표시.

단, 헤더에 대해 inputType="text"가 설정된 경우에만 동작.

tableLayout 컴포넌트에서 본 기능을 사용할 경우, tagName="table"로 지정해야 함.

true: CaptionTitle과 표의 Header Title을 조합해서 표 제목으로 표시. false: (기본 값) 표시 안 함.

GridView가 항목 1, 항목 2, 항목 3을 Header Title로 갖는 경우 아래 예제를 적용하면 다음이 제목으로 표시.

"거래내역 은(는) 항목 1, 항목 2, 항목 3 을(를) 나타낸 표"

captionTItle

[default:""] captionAuto="true"인 경우, 표의 각 Header Title 앞에 표시할 내용.

checkEditableInputClass SP2

[default: false, true] inputType = "text" 이고 cell의 상태가 readOnly이거나 disable인 경우, nobr 태그에 "w2grid_input" class를 삭제하도록 설정.

true: readOnly 또는 disable시 nobr태그에 "w2grid_input" class 삭제됨

false : nobr태그에 항상 "w2grid_input" class가 적용됨.

checkReadOnlyOnPaste SP2

[default:false, true] Ctrl(또는 cmd)+V를 눌러 클립보드에서 그리드로 붙여넣기하는 경우 readOnly 되어있는 컬럼에 데이터를 세팅할지 여부

true : readOnly가 적용된 컬럼에 '붙여넣기' 기능이 동작하지 않는다.

false: readOnly가 적용된 컬럼에 '붙여넣기' 기능이 동작한다.

checkReadOnlyOnPasteEnable SP2

[default:""]checkReadOnlyOnPaste="true"로 적용된 컬럼에서도 '붙여넣기' 기능을 컬럼 단위로 동작되도록 컬럼ID를 설정함.

(사용 예) checkReadOnlyOnPasteEnable = "col1,col2";

col1,col2 컬럼은 readOnly 및 checkReadOnlyOnPaste 옵션이 "true"로 설정되어도 '붙여넣기' 기능이 동작.

class

HTML의 class속성과 동일한 기능을 제공하며 css파일 또는 style블럭에 정의한 class를 1개 또는 공백(space)를 이용하여 다중 적용이 가능합니다.

gridView컴포넌트는 매우 복잡한 구조를 가진 컴포넌트로 css의 selector를 이용하여 하위 항목에 접근 해야 합니다.

기본적으로 엔진 내부에서 컴포넌트별로 class를 적용하고 있으며 해당 class를 이용하여 컴포넌트의 css를 공통으로 적용 할 수 있습니다.

columnMove

gridView 헤더를 마우스로 drag하여 컬럼을 이동할 수 있는 기능으로 drag시에 이동 될 컬럼의 header value속성에 명시 된 값이 tooltip형태로 표현됩니다.

columnMoveWithFooter

[default: false, true] setColumnOrder 함수를 호출하여 컬럼을 이동하거나 columnNove="true" 설정인 경우 마우스 드래깅을 통해 칼럼을 이동할 때 footer도 함께 이동. (단, footer가 header 및 body와 병합 구조가 다른 경우에는 미지원.)

true: footer도 함께 이동.

false (기본 값): footer는 이동하지 않음.

관련 함수 및 속성: setColumnOrder, columnMove="true"

contextMenu SP2

[default: false, true] context menu 사용 여부

dataDragDrop

[true, false] gridView간의 데이터를 drag&drop을 이용하여 주고받을지의 사용 여부로 FireFox에서는 Ctrl 키를 누르고 사용해야한다.

기본적으로 2개의 gridView가 각기 다른 dataList에 연동되어있어야하며 본 속성이 동일하게 적용되어 있어야한다.

dataDragSelect SP2

[true, false] 여러 개의 그리드 셀들을 드래그로 선택할 수 있을지 여부(dataDragDrop 기능과 함께 사용할 수 없음.)

dataList SP2

gridView의 data에 해당하는 DataCollection의 DataList id.

defaultCellHeight SP2

셀의 기본 높이

disabledBackgroundColor

disabled이 적용 된 cell 또는 행의 배경색.

disabledFontColor

disabled이 적용 된 cell 또는 행의 글자색.

disabledScrollHidden SP2

[default:false, true] gridView가 disabled될 때 scroll도 함께 감출 것인가에 대한 옵션. 비 IE 브라우저에서 gridView가 disabled 되더라도 스크롤은 움직일 수 있는 현상을 원천적으로 차단하기 위한 속성이다.

drilldownToggleScrollFix SP2

r[default:false, true] drilldown 컬럼에서 +버튼을 클릭하여 목록을 펼칠 때 gridView 스크롤이 움직이지 않고 고정되도록 하는 속성

evenRowBackgroundColor

짝수 행의 배경색

editModeEvent

수정모드로 변환하기 위한 이벤트

enterKeyMove

[default:down, right, none, edit] cell에서 enter key 입력 시 포커스 이동방향에 대한 설정

euroMask SP2

[default: ""] 화폐단위 변경을 위해 dataType = "euro" 로 설정한 경우나 changeCurrency API를 사용했을 때 적용되는 마스킹 값.

evenRowBackgroundColor

짝수 행의 배경색

excludeModifiedRows SP2

[default:false, true] subtotal(소계)과 footer(합계)등에 사용되는 expression속성에서 modifyRowStatus API로 "D"상태가 적용된 row를 제외하고 계산한다.( modifyRowStatus API를 사용한 경우 )

fixedColumn

세로 틀고정을 시킬 컬럼의 위치로 첫번째 컬럼일 경우 "1"로 입력 설정

fixedColumnWithHidden

[default:true, false] fixedColumn속성의 위치값에 hiddenColumn을 포함하여 계산할지 여부

fixedRow SP2

세로 틀고정을 시킬 컬럼의 위치로 첫번째 로우일 경우 "1"로 입력 설정

footerSummaryAuto SP2

[default: ""(빈 값)] captionAuto 설정에 상관 없이 footer의 summary 속성에 바닥글을 자동 생성. 관련 속성: captionTitle, footerSummary

hideHeader

[default:false, true] header 숨김 여부.

hammerEnabled SP2

[default:true, false] 모바일에서 dblclick이벤트를 Hammer.JS의 press이벤트로 처리할것인지에 대한 여부

hammerPressTime SP2

press이벤트가 발생하기까지 누르고 있어야 할 시간. 단위는 ms이며, 기본값은 251ms이다.

id

컴포넌트의 ID로 전역객체로 할당되며 script에서 본 id로 컴포넌트에 접근이 가능합니다.

ignoreCellClick

drilldown사용할때 toggle 이미지 클릭시 gridView에 oncellclick 이벤트를 발생시키지않음

ignoreToggleOnDisabled

drilldown사용할때 toggle 이미지 클릭시 해당 셀에 disabled가 적용되어 있을 경우 toggle시키지 않음.

keepDefaultColumnWidth

[default:false, true] autoFit속성을 true로 설정할 경우 rowNum컬럼(rowNumVisible속성)과 rowStatus컬럼(rowStatusVisible속성)의 width를 고정한다.

mergeCells SP2

행 또는 열 기준으로 연속적으로 같은 데이터들을 merge한다. https://inswave.com/jira/browse/WPF-1402

never : mergeCells에 의해 자동으로 merge된 것들을 해제한다.

bycol : 같은 column 내에서 연속적으로 데이터가 같은 row들을 merge한다

byrow : 같은 row 내에서 연속적으로 데이터가 같은 column들을 merge한다.

bycolrec : bycol후, merge되지 않은 cell들을 대상으로 byrow를 실행한다

byrowrec : byrow후, merge되지 않은 cell들을 대상으로 bycol을 수행한다.

byrestriccol : 같은 column 내에서 연속적으로 데이터가 같으면서 동시에 자신의 왼쪽에 위치한 column이 merge된 경우 해당 row들을 merge한다. (n+1컬럼에 n컬럼을 upperColumn으로 지정한 형태)

byrestricrow : 같은 row 내에서 연속적으로 데이터가 같으면서 동시에 자신의 위쪽에 위치한 row가 merge된 경우 해당 row들을 merge한다. (n+행에 n행을 upperRow으로 지정한 형태)

mergeCellsFixedCols SP2

fixedColumn 영역 내에서 행 또는 열 기준으로 연속적으로 같은 데이터들을 merge한다. https://inswave.com/jira/browse/WPF-1402

never : mergeCells에 의해 자동으로 merge된 것들을 해제한다.

bycol : 같은 column 내에서 연속적으로 데이터가 같은 row들을 merge한다

byrow : 같은 row 내에서 연속적으로 데이터가 같은 column들을 merge한다.

bycolrec : bycol후, merge되지 않은 cell들을 대상으로 byrow를 실행한다

byrowrec : byrow후, merge되지 않은 cell들을 대상으로 bycol을 수행한다.

mergeCellsFixedRows SP2

fixedRow 영역 내에서 행 또는 열 기준으로 연속적으로 같은 데이터들을 merge한다. https://inswave.com/jira/browse/WPF-1402

never : mergeCells에 의해 자동으로 merge된 것들을 해제한다.

bycol : 같은 column 내에서 연속적으로 데이터가 같은 row들을 merge한다

byrow : 같은 row 내에서 연속적으로 데이터가 같은 column들을 merge한다.

bycolrec : bycol후, merge되지 않은 cell들을 대상으로 byrow를 실행한다

byrowrec : byrow후, merge되지 않은 cell들을 대상으로 bycol을 수행한다.

moveKeyEditMode SP2

방향키로 원하는 방향에 위치한 셀의 editMode 상태에 바로 진입한다.

numberMask SP2

[default: ""] 화폐단위 변경을 위해 dataType = "number" 로 설정한 경우나 changeCurrency API를 사용했을 때 적용되는 마스킹 값.

oddEvenColorDisplay

[default:true, false] 행의 짝,홀수의 반복색을 사용할지의 여부.

oddRowBackgroundColor

홀수 행의 배경색

pasteOption SP2

[default: "", focus] Ctrl(또는 cmd) + V를 눌러 클립보드에 복사된 컬럼 단위의 데이터의 붙여넣을 방법을 지정하는 속성

preventAddRowOnPaste SP2

[default: false, true] Ctrl(또는 cmd)+V를 눌러 클립보드에서 그리드로 붙여넣기하는 경우 새로운 행을 추가시킬지의 여부

preventCopy SP2

[default: false, true] Ctrl(또는 cmd)+C를 눌러 그리드 전체의 데이터를 클립보드에 복사하는 동작을 방지.

preventCopyColumn SP2

[default: ""] Ctrl(또는 cmd) + C를 눌러 컬럼 단위의 데이터를 클립보드에 복사하는 동작을 방지. preventCopyColumn속성을 적용할 컬럼 ID를 string형태로 적용한다. (사용 예) preventCopyColumn = "col1,col2";

preventPaste SP2

[default: false, true] Ctrl(또는 cmd)+V를 눌러 클립보드에 복사된 컬럼 단위의 데이터를 붙여넣는 동작을 방지.

preventPasteColumn SP2

[default: ""] Ctrl(또는 cmd) + V를 눌러 클립보드에 복사된 컬럼 단위의 데이터를 붙여넣는 동작을 방지. preventPasteColumn속성을 적용할 컬럼 ID를 string형태로 적용한다. (사용 예) preventPasteColumn = "col1,col2";

readOnly

[default:false, true] gridView전체의 각 cell을 readOnly로 적용하며 body 컬럼의 readOnly속성이 설정된 경우 해당 컬럼의 속성이 우선시 됩니다.

readOnly 속성은 gridView,column,row,cell 별로 속성 또는 API로 조절이 가능하며 우선 순위에 따라 적용된됩니다.

우선 순위는 아래와 같습니다. gridView < column < row < cell (column과 row의 우선 순위는 gridView의 readOnlyPriority속성에 의해 변경 가능)

readOnlyBackgroundColor

readOnly속성이 true인 cell의 배경색.

readOnlyBackgroundImg

readOnly속성이 true인 cell의 배경 이미지의 경로.

readOnlyBackgroundImgCSS

readOnly속성이 true인 cell의 배경이미지의 CSS 구문으로 readOnlyBackgroundImg속성보다 우선됩니다.

예시 ) background: steelblue url("이미지경로") 10px 50% no-repeat;

resize

[default:true, false] header의 컬럼 경계선에서 마우스 drag를 이용하여 컬럼의 폭 크기를 조절 할지의 여부.

rowMouseOver

[default:true, false] 마우스 over시에 over된 행의 배경색을 표시할지의 여부.

rowMouseOverColor

마우스 over시의 행 배경색.

rowNumBackgroundColor

rowNumVisiblue속성이 true인 경우 해당 body 컬럼의 배경색.

rowNumHeaderValue

행 번호를 표시할 column의 head에 표시할 text

rowNumVisible

행 번호 표시 여부

rowNumWidth

rowNumVisiblue속성이 true인 경우 해당 컬럼의 width.

rowStatusHeaderValue

행 상태를 표시할 column의 head에 표시할 text

rowStatusVisible

행 상태 표시 여부

rowStatusWidth

rowStatusVisible 속성이 true인 경우 해당 컬럼의 width.

rowNumLocaleRef SP2

rowNum 컬럼에 설정할 localeRef 키.

rowNumStatusUniqueId SP2

[default:false, true] rowNumVisible 또는 rowNumStatus 사용 시 각 row별로 unique한 id를 사용할지에 대한 여부 기본값은 false로 이 경우 모든 rowNum td들의 id는 _headerRowNumber이고 rowStatus td들의 id는 _headerStatusNumber가 된다. W3C validator를 통과하기 위해서는 이 속성값이 true여야 한다. 즉 이 속성값을 true로 사용할 것을 권장한다.

rowStatusLocaleRef SP2

rowStatus 컬럼에 설정할 localeRef 키.

rupeeMask SP2

[default: ""] 화폐단위 변경을 위해 dataType = "rupee" 로 설정한 경우나 changeCurrency API를 사용했을 때 적용되는 마스킹 값.

sortable

gridView의 헤더 클릭을 통한 데이터 정렬 지원 여부

selectedCellColor

선택 된 cell의 배경색.

selectedCellOverColor

선택 된 cell에 마우스 over시의 배경색.(지정하지 않으면 rowMouseOverColor속성의 값을 사용)

selectedRowColor

선택 된 행의 배경색.

selectedRowOverColor

선택 된 행에 마우스 over시의 배경색.(지정하지 않으면 rowMouseOverColor속성의 값을 사용)

senseReader

[default:false, true] 웹 접근성을 지원하기 위한 모드. 이 모드를 true로 설정하면 tab키로 gridView의 모든 cell을 순회할 수 있습니다.

또한 inputType="text", "select", "radio", "checkbox"인 경우 embeddedInput="true"를 적용하여 cell내부에 직접 input(또는 select,radio,checkbox)가 포함되어 그려지게 되어 이를 리더기에서 인식할 수 있게 됩니다.

focusMode="none", focusMove="false" 속성과 함께 사용할 것을 권장합니다.

style

GridView의 style 속성

summary

HTML의 table Tag의 summary 속성과 동일한 기능을 제공한다. 일반적으로 웹접근성 화면 구현시 사용됩니다.

showImageTooltip SP2

[default: false, true] inputType = "image"인 경우, tooltip이 나오도록 설정함. true: inputType = "image"인 경우, tooltip 기능이 동작함. false (기본 값): inputType = "image"인 경우, tooltip 기능이 동작 안 함.

syncScrollw SP2

다수의 grid를 동시에 세로로 scroll시키기 위한 옵션. grid의 row의 갯수가 동일할 경우에만 동작.

syncScrollId SP2

scroll을 동기화 시킬 grid의 id

titleAuto SP2

[default: false, true] cell의 header inputType = "text"이고 cell의 inputType이 "text, link, checkbox, button, radio, select(tableRender = "ul"인 경우), secret"일 때, cell의 title속성에 자동으로 다음과 같은 값이 나타나도록 설정함. 예를들어서 cell의 header Tiltle 값이 "name1" 이고 cell의 data값이 "1"이며 inputType = "text" 인 경우, 해당 cell의 title속성 값은 title = "name1 1" 으로 나타남. 만약 cell의 data값이 ""인 경우에는 해당 cell의 title속성 값은 title = "name text"으로 나타남.

tooltipDisplay

[default:false, true] cell의 데이터가 width보다 긴 경우 해당 데이터를 마우스 over시 툴팁으로 표현할지의 여부.

tooltipDisplayColumn SP2

[default: false, true] 특정 컬럼만 tooltip이 표현되도록 컬럼명을 설정함 사용 예) tooltipDisplayColumn = "col1,col2";

tooltipHeader SP2

[default:false, true] gridView의 header에 tooltip을 나타내는 설정.tooltipDisplay = "true"(또는 tooltipShowAlways="true")로 설정 후 동작함. 기존에 tooltip 관련 옵션인 tooltipDisplay 및 tooltipDisplayTime등과 기능이 일치한다.

tengeMask SP2

[default: ""] 화폐단위 변경을 위해 dataType = "tenge" 로 설정한 경우나 changeCurrency API를 사용했을 때 적용되는 마스킹 값.

visibleRowNum

화면에 표현 될 행 수. "all"로 설정 시 모든 row가 스크롤 없이 표현됩니다.

wheelStop

[default:false] 그리드 스크롤이 맨 아래로 내려갔을 때 wheel을 한 경우 브라우저 스크롤을 막을지에 대한 여부

allOption

inputType이 selectbox인 경우에 전체를 선택하는 라벨을 표시할지 여부

calendarClass

[default:class1, class2, class3, class4, class5]Calendr의 스킨 종류를 정의합니다.

calendarValueType

inputType이 calendar인 경우에 calendar의 타입

class

column에 적용될 class

colMerge

선택한 열에서 동일데이터 행 반복시 하나의 셀로 표현할지 여부

colspan

span할 열의 수

dataType

column의 데이터 Type 설정하지 않은 경우 dataColleciton(dataList)의 dataType을 설정하게 됩니다(권장사항). subTotal, Footer는 gridView column에 dataType을 설정 합니다.

depthColumn

inputType이 drilldown일 때 depth를 표시해줄 열의 id

depthType

grid의 drilldown 사용 시 노드의 연관관계를 표현하는 방식 nbsp : 공백(default), div : 빈 div상자, line : 이미지로 표현, none : 미표현

disabled

셀의 disabled 여부

disabledClass

셀이 disabled 일때 추가할 class이름

imageHeight

inputType이 image인 경우에 이미지의 높이

imageSrc

inputType이 image인 경우에 이미지의 경로

imageWidth

inputType이 image인 경우에 이미지의 폭

imeMode

inputType이 text인 경우 ime-mode(css) 값을 설정합니다. (ime-mode가 지원 가능한 일부 브라우저에서 동작함)

inputType

셀의 타입

- text : 열의 셀 값을 일반 텍스트로 표현합니다.

- link : 열의 셀 값을 밑줄 쳐진 강조된 텍스트로 표현합니다.

- checkbox : 열의 셀 값을 true/falseValue 에 따라 다중 행 선택이 가능합니다.

- button : 열의 셀 값을 버튼으로 표현합니다.

- image : 열의 셀 값을 이미지 표현합니다.

- radio : 열의 셀 값을 true/falseValue 에 따라 하나의 행 선택이 가능합니다.

- select : 설정된 항목 리스트 중에서 열의 셀 값과 같은 value의 label(name)을 선택합니다.

- calendar : 열의 셀 값을 설정된 날짜 형태(기본:yyyy-MM-dd)로 표현하며, 달력 아이콘을 보여준다. 달력 아이콘으로 캘린더에서 선택 가능합니다.

- expression : expression 속성에 WebSquare가 제공하는 기능함수를 사용하여 텍스트를 표현합니다.

- 다른 컬럼을 참조하여 새로운 데이터를 생성하는 사용자 정의 함수를 만들어 사용이 가능합니다.

- expression 속성 값의 예 : display('columnID'), rowIndex(), userExp(rowIndex(), display('columnID'))

- textarea : 열의 셀 값을 여러줄의 텍스트로 표현합니다.

- drilldown : +, - 버튼이 있는 트리 형태로 표현합니다.

- textImage : 열의 셀 값을 일반 텍스트로 표현하며, 아이콘을 보여준다. 이벤트처리함수(imageClickFunction)를 사용하여 아이콘 클릭에 따른 동작을 설정할 수 있습니다.

- checkcombobox : checkbox 와 combobox 가 결합된 형태로 한가지 이상의 항목을 선택할 수 있는 combobox 입니다.

- autoComplete : 텍스트를 입력하면 자동으로 해당 텍스트를 갖고 있는 값을 표시합니다.

- secret : 텍스트를 안보이도록 감추기 기능을 합니다.

rowspan

span할 행의 수

showDepth

inputType이 drilldown인 경우에 처음 로딩시 보여줄 depth

textAlign

셀의 텍스트 정렬 부분

value

셀의 값

viewType

그리드 셀이 편집중인 상태가 아닐때 기본 형태로 보여질지, 아니면 icon을 표시하는 형태로 보여지질 결정하는 타입

width

컬럼의 width 값

fastScroll

세로 스크롤 이동시 빠르게 스크롤되는 효과를 주는 기능으로 시간내에 그릴수 있는 부분까지만 표현한다.

그려지지 못하는 영역에는 "화면 갱신 중 입니다." 라는 메세지가 표현된다.

1

.grid1,w2grid

w2grid 클래스에는 웹스퀘어에서 제공하는 Stylesheet_ext.css 라는 스타잍시트가 정의되어있습니다. grid1은 사용자 정의 클래스이며, 동일한 스타일 시트를 정의함으로써 overriding(덮어쓰기) 됩니다.

2

.grid1

동일한 스타일 시트를 정의함으로써 overriding(덮어쓰기) 됩니다. 순번 셀 배경색상을 변경할 경우 background-color : 색상값; 으로 지정해 주시면 됩니다.